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

describe('MatchingShow component', () => {
  const props = {
    itemBody: 'Match the Presidential term with the corresponding President.',
    interactionData: {
      questions: [
        {id: 'quuid1', itemBody: '1st President'},
        {id: 'quuid2', itemBody: '16th President'},
        {id: 'quuid3', itemBody: '44th President'},
      ],
      answers: ['George Washington', 'Thomas Jefferson', 'Abraham Lincoln', 'Barack Obama'],
    },
    scoringData: {
      value: {
        quuid1: 'George Washington',
        quuid2: 'Abraham Lincoln',
        quuid3: 'Barack Obama',
      },
    },
  }

  it('passes the scoringData into the shared Match component as userResponse', async () => {
    render(<MatchingShow {...props} />)

    const expected = props.interactionData.questions.map(q => props.scoringData.value[q.id])

    const selectInputs = await screen.findAllByRole('combobox')
    const selectedAnswers = selectInputs.map(select => select.value)

    expect(selectedAnswers).toEqual(expected)
  })

  describe('a11y tests', () => {
    it('should meet a11y standards', async () => {
      const {container} = render(<MatchingShow {...props} />)
      expect(await runAxeCheck(container)).toBe(true)
    })
  })

  describe('interaction tests', () => {
    // TODO: Cannot migrate to RTL - checkInteractionComponents 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 as the proper interaction to instui components', () => {
      render(<MatchingShow {...props} />)
    })
  })
})