@instructure/quiz-interactions/src/components/multiple_answer/Take/__tests__/Take.test.js

A React UI component Library for quiz interaction types.

import {vi} from 'vitest'
import React from 'react'
import {v4 as uuid} from 'uuid'
import {render, screen, fireEvent} from '@testing-library/react'
import runAxeCheck from '@instructure/ui-axe-check'
import MultipleAnswerTake from '../index'

describe('Multiple Answer Take', () => {
  const firstChoiceID = uuid()
  const secondChoiceID = uuid()
  const props = {
    itemBody: 'STEM',
    choiceElimination: false,
    interactionData: {
      choices: [
        {id: firstChoiceID, itemBody: 'body1', label: 'label1'},
        {id: secondChoiceID, itemBody: 'body2', label: 'label2'},
      ],
    },
    userResponse: {value: []},
    scoringData: {
      value: [firstChoiceID],
    },
    handleResponseUpdate: () => {},
  }

  describe('responding', () => {
    it('should update response with correct choiceId on checkbox click', () => {
      const handleResponseUpdateStub = vi.fn()
      render(<MultipleAnswerTake {...props} handleResponseUpdate={handleResponseUpdateStub} />)

      const checkboxes = screen.getAllByRole('checkbox')
      const checkbox = checkboxes.find(n => n.value === secondChoiceID)
      fireEvent.click(checkbox)

      expect(handleResponseUpdateStub).toHaveBeenCalled()
      expect(handleResponseUpdateStub.mock.calls[0][0]).toEqual([secondChoiceID])
    })

    it('should not respond when readOnly', () => {
      const handleResponseUpdateStub = vi.fn()
      render(
        <MultipleAnswerTake {...props} readOnly handleResponseUpdate={handleResponseUpdateStub} />,
      )

      const checkboxes = screen.getAllByRole('checkbox')
      const checkbox = checkboxes.find(n => n.value === secondChoiceID)
      fireEvent.click(checkbox)

      expect(handleResponseUpdateStub).not.toHaveBeenCalled()
    })
  })

  describe('when choiceElimination is true', () => {
    it('should render buttons to eliminate choices', () => {
      render(<MultipleAnswerTake {...props} choiceElimination />)
      expect(screen.getAllByText(/Eliminate answer/).length).toBeGreaterThan(0)
    })

    it('eliminating a choice updates user response data', () => {
      const handleResponseUpdateStub = vi.fn()
      render(
        <MultipleAnswerTake
          {...props}
          choiceElimination
          handleResponseUpdate={handleResponseUpdateStub}
        />,
      )
      const eliminateButton = screen.getByRole('button', {name: /Eliminate answer body1/})
      fireEvent.click(eliminateButton)
      expect(handleResponseUpdateStub).toHaveBeenCalledWith([], {eliminated: [firstChoiceID]})
    })

    it('uneliminating a choice removes it from user response data', () => {
      const handleResponseUpdateStub = vi.fn()
      render(
        <MultipleAnswerTake
          {...props}
          choiceElimination
          userResponse={{value: [], properties: {eliminated: [firstChoiceID]}}}
          handleResponseUpdate={handleResponseUpdateStub}
        />,
      )
      const eliminateButton = screen.getByRole('button', {
        name: /Undo elimination of answer body1/,
      })
      fireEvent.click(eliminateButton)
      expect(handleResponseUpdateStub).toHaveBeenCalledWith([], {eliminated: []})
    })
  })

  it('should meet a11y standards', async () => {
    const {container} = render(
      <main>
        <MultipleAnswerTake {...props} />
      </main>,
    )
    const result = await runAxeCheck(container, {
      ignores: [
        'checkboxgroup',
        'scrollable-region-focusable', // we conditionally make rceRenderer focusable when we detect content overflow
      ],
    })
    expect(result).toBe(true)
  })
})