@instructure/quiz-taking/src/components/layout/Sidebar/SidebarItem/__tests__/SidebarItem.test.js

import React from 'react'
import {Map} from 'immutable'
import {TakingSidebarItem as SidebarItem} from '../index'
import {render, screen} from '../../../../../../tests/utils/rtlRenderOverride'
import {describe, it} from 'vitest'

describe('Taking SidebarItem Index', () => {
  const state = {
    quizSessions: {
      activeQuizSessionId: '1',
      1: {id: '1'},
    },
  }

  const defaultProps = {
    itemName: 'Taking SidebarItem',
    pointsPossible: 10,
    position: 1,
    actualPosition: 1,
    quizEntryId: '1',
    scrollToItem: () => {},
    sidebarOpen: true,
  }

  const storeOptions = {state}

  it('should render the sidebar item', () => {
    render(<SidebarItem {...defaultProps} />, {storeOptions})
    expect(
      screen.getByRole('link', {name: /navigate to question at position 1/i}),
    ).toBeInTheDocument()
  })

  describe('QUIZ-17004: answered status with text blocks', () => {
    it('should mark item as answered when response exists at position', () => {
      // Simulate a response stored at position 4 (actual position)
      const stateWithResponse = {
        quizSessions: {
          activeQuizSessionId: '1',
          1: {id: '1'},
        },
        taking: {
          responses: {
            4: {
              position: 4,
              itemId: '1',
              userResponse: {value: 'test answer'},
            },
          },
        },
      }

      // Use a reviver to ensure responses Map has numeric position keys
      // The actual Redux store uses numeric keys (e.g., Map({ 4: response }))
      // but fromJS() with plain objects creates string keys (e.g., Map({ "4": response }))
      // This reviver converts string keys to numbers to match the actual store structure
      const numericKeyReviver = (key, value) => {
        if (key === 'responses' && Map.isMap(value)) {
          // Value is already an Immutable Map with string keys
          // Convert it to a Map with numeric keys
          return Map(
            value.entrySeq().map(([positionKey, responseValue]) => [
              Number(positionKey), // Convert string key to number
              responseValue, // Keep the response value as-is (already converted by fromJS)
            ]),
          )
        }
        // Return the value as-is for all other keys to let fromJS handle them normally
        return value
      }

      const {container} = render(
        <SidebarItem {...defaultProps} position={2} actualPosition={4} />,
        {
          storeOptions: {state: stateWithResponse, reviver: numericKeyReviver},
        },
      )

      // Should not show unanswered dot when response exists at this position
      expect(
        container.querySelector('[data-automation="sdk-take-sidebar-item-unanswered-dot"]'),
      ).toBeNull()
      expect(screen.queryByText(/unanswered/i)).not.toBeInTheDocument()
    })

    it('should mark item as unanswered when no response at position', () => {
      // State with no response at position 4
      const stateWithoutResponse = {
        quizSessions: {
          activeQuizSessionId: '1',
          1: {id: '1'},
        },
        taking: {
          responses: {},
        },
      }

      const {container} = render(
        <SidebarItem {...defaultProps} position={2} actualPosition={4} />,
        {
          storeOptions: {state: stateWithoutResponse},
        },
      )

      // Should show unanswered dot when no response at this position
      expect(
        container.querySelector('[data-automation="sdk-take-sidebar-item-unanswered-dot"]'),
      ).not.toBeNull()
    })
  })
})