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

A React UI component Library for quiz interaction types.

import {expect} from '@instructure/ui-test-utils'
import shouldRenderComponent from '../../../../../tests/util/render-checks'
import MatchingTake from '../index'
import Match from '../../common/Match'
import {ReactTestbed} from '../../../../../tests/util/react-testbed'

describe('Matching Take', () => {
  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'],
    },
    userResponse: {
      value: {
        quuid1: 'George Washington',
      },
    },
    handleResponseUpdate: () => {},
  }

  const testbed = new ReactTestbed(MatchingTake, props)

  shouldRenderComponent(testbed, {}, MatchingTake)

  describe('rendering', () => {
    it('renders Match', () => {
      testbed.render()
      expect(testbed.findChildrenByType(Match).length).to.equal(1)
    })

    it('renders Match with correct props', () => {
      testbed.render()
      const {styles, makeStyles, themeOverride, ...subjectProps} =
        testbed.findChildByType(Match).props
      expect(subjectProps).to.eql({
        ...Match.defaultProps,
        ...props,
        selectedAnswers: props.userResponse,
      })
    })
  })

  describe('a11y tests', () => {
    it('should meet a11y standards', async () => {
      testbed.render()
      await testbed.checkA11yStandards({
        ignores: [
          'aria-allowed-role', // TODO: remove this when instui fixes Select
          'label', // FIXME: false positive?
        ],
      })
    })
  })
})