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

A React UI component Library for quiz interaction types.

import {vi} from 'vitest'
import React from 'react'
import {render, screen} from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import runAxeCheck from '@instructure/ui-axe-check'

import TrueFalseTake from '../index'

describe('True False Item Take', () => {
  let props, handleResponseUpdate
  beforeEach(() => {
    handleResponseUpdate = vi.fn()
    props = {
      handleResponseUpdate,
      itemBody: 'STEM',
      interactionData: {
        trueChoice: 'True',
        falseChoice: 'False',
      },
      userResponse: {value: true},
    }
  })

  it('should pass a choice to handleResponseUpdate', async () => {
    render(<TrueFalseTake {...props} />)

    const radioInput = screen.getByLabelText('Answer: False')
    await userEvent.click(radioInput)

    expect(handleResponseUpdate).toHaveBeenCalledTimes(1)
    expect(handleResponseUpdate).toHaveBeenCalledWith(false)
  })

  describe('#chosenVal', () => {
    it('selects the correct choice from current userResponse', () => {
      render(<TrueFalseTake {...props} />)

      const trueRadioInput = screen.getByLabelText('Answer: True')
      expect(trueRadioInput.checked).toBe(true)
      const falseRadioInput = screen.getByLabelText('Answer: False')
      expect(falseRadioInput.checked).toBe(false)
    })

    it('selects the correct choice from current userResponse when false selected', () => {
      render(<TrueFalseTake {...props} userResponse={{value: false}} />)

      const falseRadioInput = screen.getByLabelText('Answer: False')
      expect(falseRadioInput.checked).toBe(true)
      const trueRadioInput = screen.getByLabelText('Answer: True')
      expect(trueRadioInput.checked).toBe(false)
    })

    it('selects nothing when userResponse is empty', () => {
      render(<TrueFalseTake {...props} userResponse={{}} />)

      const falseRadioInput = screen.getByLabelText('Answer: False')
      expect(falseRadioInput.checked).toBe(false)
      const trueRadioInput = screen.getByLabelText('Answer: True')
      expect(trueRadioInput.checked).toBe(false)
    })
  })

  describe('a11y tests', () => {
    it('should meet a11y standards', async () => {
      render(
        <main>
          <TrueFalseTake {...props} />
        </main>,
      )

      expect(
        await runAxeCheck(document.body, {
          ignores: ['scrollable-region-focusable'],
        }),
      ).toBe(true)
    })
  })
})