@instructure/quiz-interactions/src/components/multiple_answer/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 MultipleAnswerShow from '../index'

describe('MultipleAnswer Show', () => {
  const firstChoiceID = 'firstChoiceID'
  const secondChoiceID = 'secondChoiceID'

  const props = {
    itemBody: 'STEM',
    scoringData: {
      value: [firstChoiceID, secondChoiceID],
    },
    interactionData: {
      choices: [
        {id: firstChoiceID, itemBody: 'itemBody1', position: 1},
        {id: secondChoiceID, itemBody: 'itemBody2', position: 2},
        {id: 'thirdChoiceID', itemBody: 'itemBody3', position: 3},
      ],
    },
    properties: {
      shuffled: false,
    },
  }

  it('should render', () => {
    const {container} = render(<MultipleAnswerShow {...props} />)
    expect(container.firstChild).toBeInTheDocument()
  })

  describe('rendering', () => {
    it('renders the take component with all choices', () => {
      render(<MultipleAnswerShow {...props} />)
      expect(screen.getByText('itemBody1')).toBeInTheDocument()
      expect(screen.getByText('itemBody2')).toBeInTheDocument()
      expect(screen.getByText('itemBody3')).toBeInTheDocument()
    })
  })

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

  describe('readOnly tests', () => {
    // TODO: Cannot migrate to RTL - checkReadOnlyComponents walks React fiber tree to verify
    // InstUI component props, which is not feasible with RTL. Jira: QUIZ-XXXXX
    it.skip('should pass the readOnly prop to instui components', () => {})
  })
})