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

A React UI component Library for quiz interaction types.

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

import TrueFalseShow from '../index'

describe('True False Show', () => {
  const firstChoiceID = 'true'
  const secondChoiceID = 'false'
  const props = {
    id: 'uuid',
    itemBody: 'STEM',
    interactionData: {
      choices: [
        {
          id: firstChoiceID,
          itemBody: 'True',
        },
        {
          id: secondChoiceID,
          itemBody: 'False',
        },
      ],
    },
    scoringData: {value: false},
    isSurvey: false,
  }

  describe('rendering', () => {
    it('renders each interaction choice', () => {
      render(<TrueFalseShow {...props} />)

      expect(screen.getByLabelText('Answer: True')).toBeInTheDocument()
      expect(screen.getByLabelText('Answer: False')).toBeInTheDocument()
    })
  })

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

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

  describe('readOnly tests', () => {
    it('should have readOnly inputs', () => {
      render(<TrueFalseShow {...props} />)

      const trueRadioInput = screen.getByLabelText('Answer: True')
      const falseRadioInput = screen.getByLabelText('Answer: False')

      // TODO: Add readonly checks as well once inst-ui fixes their readonly implementation
      expect(trueRadioInput).toBeDisabled()
      expect(falseRadioInput).toBeDisabled()
    })
  })
})