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

A React UI component Library for quiz interaction types.

import React from 'react'

import MultipleChoiceShow from '../index'
import {render, screen} from '@testing-library/react'
import runAxeCheck from '@instructure/ui-axe-check'
import mathRenderer from '@instructure/quiz-rce/components/RichContentRenderer/mathRenderer'

describe('MultipleChoice Show', () => {
  afterEach(() => {
    // Cancel pending debounced math rendering to prevent "document is not defined" after teardown
    mathRenderer.debouncedDocumentRendering.cancel()
  })
  const firstChoiceID = 'firstChoiceID'
  const secondChoiceID = 'secondChoiceID'
  const props = {
    itemId: 'itemId',
    itemBody: 'STEM',
    scoringData: {value: secondChoiceID},
    interactionData: {
      choices: [
        {id: firstChoiceID, itemBody: 'hey', position: 1},
        {id: secondChoiceID, itemBody: 'ho', position: 2},
      ],
    },
    isSurvey: false,
  }

  it('renders each interaction choice', () => {
    const {container} = render(<MultipleChoiceShow {...props} />)
    const text = container.textContent
    expect(text).toContain('hey')
    expect(text).toContain('ho')
  })

  it('should meet a11y standards', async () => {
    // Note: In this component's context, we don't render any landmarks, so we wrap it in a <main>
    // tag to satisfy the Axe check
    render(
      <main>
        <MultipleChoiceShow {...props} />
      </main>,
    )
    expect(
      await runAxeCheck(document.body, {
        ignores: [
          'scrollable-region-focusable', // we conditionally make rceRenderer focusable when we detect content overflow
        ],
      }),
    ).toBe(true)
  })

  it('has read only radio buttons', () => {
    render(<MultipleChoiceShow {...props} />)
    const radioButtons = screen.getAllByRole('radio')
    for (const radioButton of radioButtons) {
      expect(radioButton).toBeDisabled()
    }
  })
})