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

A React UI component Library for quiz interaction types.

import React from 'react'
import runAxeCheck from '@instructure/ui-axe-check'
import {renderWithDnd} from '../../../../../tests/util/dndTestUtils'

import RichFillBlankShow from '../index'

describe('RichFillBlank Show', () => {
  const props = {
    itemBody: `<p><span id="blank_fitb_uuid1"></span> Columbus sailed in
      <span id="blank_fitb_uuid2"></span> from the country of
      <span id="blank_fitb_uuid3"></span> on the continent of
      <span id="blank_fitb_uuid4"></span> across the
      <span id="blank_fitb_uuid5"></span> and found...
      <span id="blank_fitb_uuid6"></span>!!! Where the people were "
      <span id="blank_fitb_uuid7"></span>"</p>`,
    interactionData: {
      blanks: [
        {
          id: 'fitb_uuid1',
          answerType: 'openEntry',
        },
        {
          id: 'fitb_uuid2',
          answerType: 'openEntry',
        },
        {
          id: 'fitb_uuid3',
          answerType: 'openEntry',
        },
        {
          id: 'fitb_uuid4',
          answerType: 'openEntry',
        },
        {
          id: 'fitb_uuid5',
          answerType: 'openEntry',
        },
        {
          id: 'fitb_uuid6',
          answerType: 'wordbank',
          choices: [
            {id: 'choice_uuid11_brazil', position: 1, itemBody: 'Brazil'},
            {id: 'choice_uuid12_austria', position: 2, itemBody: 'Austria'},
            {id: 'choice_uuid13_america', position: 3, itemBody: 'America'},
          ],
        },
        {
          id: 'fitb_uuid7',
          answerType: 'dropdown',
          choices: [
            {id: 'choice_uuid11_peaceful', position: 1, itemBody: 'peaceful'},
            {id: 'choice_uuid12_war-torn', position: 2, itemBody: 'war-torn'},
            {id: 'choice_uuid13_confused', position: 3, itemBody: 'confused'},
          ],
        },
      ],
    },
    scoringData: {
      value: [
        {
          id: 'fitb_uuid1',
          scoringAlgorithm: 'TextRegex',
          scoringData: {value: '.*Christopher', blankText: 'Christopher'},
        },
        {
          id: 'fitb_uuid2',
          scoringAlgorithm: 'TextCloseEnough',
          scoringData: {value: '1492', editDistance: 1, blankText: '1492'},
        },
        {
          id: 'fitb_uuid3',
          scoringAlgorithm: 'TextInChoices',
          scoringData: {value: ['Spain', 'Espana', 'Kingdom of Spain'], blankText: 'Spain'},
        },
        {
          id: 'fitb_uuid4',
          scoringAlgorithm: 'TextEquivalence',
          scoringData: {value: 'Europe', blankText: 'Europe'},
        },
        {
          id: 'fitb_uuid5',
          scoringAlgorithm: 'TextContainsAnswer',
          scoringData: {value: 'Atlantic', blankText: 'Atlantic'},
        },
        {
          id: 'fitb_uuid6',
          scoringAlgorithm: 'Equivalence',
          scoringData: {value: 'choice_uuid13_america', blankText: 'America'},
        },
        {
          id: 'fitb_uuid7',
          scoringAlgorithm: 'Equivalence',
          scoringData: {value: 'choice_uuid13_confused', blankText: 'Confused'},
        },
      ],
    },
  }

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

  describe('rendering', () => {
    it('renders the RichFillBlankTake component', () => {
      const {container} = renderWithDnd(<RichFillBlankShow {...props} />)
      // RichFillBlankShow renders RichFillBlankTake which renders the item body
      // and text inputs for open entry blanks
      expect(container.textContent).toContain('Columbus sailed in')
      expect(container.textContent).toContain('and found')
    })

    it('passes the right props to RichFillBlankTake', () => {
      const {container} = renderWithDnd(<RichFillBlankShow {...props} />)
      // Verify the item body content is rendered
      expect(container.textContent).toContain('Columbus sailed in')

      // Verify interaction data is used - open entry blanks render text inputs
      const textInputs = container.querySelectorAll('input[type="text"]')
      expect(textInputs.length).toBeGreaterThan(0)

      // Verify readOnly - inputs should be disabled/readonly
      textInputs.forEach(input => {
        expect(input.readOnly || input.disabled).toBe(true)
      })

      // Verify the wordbank choices are rendered (from interactionData)
      expect(container.textContent).toContain('Brazil')
      expect(container.textContent).toContain('Austria')
      expect(container.textContent).toContain('America')
    })
  })

  describe('a11y tests', () => {
    it('should meet a11y standards', async () => {
      renderWithDnd(
        <main>
          <RichFillBlankShow {...props} />
        </main>,
      )
      expect(
        await runAxeCheck(document.body, {
          ignores: [
            'aria-allowed-role', // TODO: remove this when instui fixes Select
            'label', // FIXME: false positive?
          ],
        }),
      ).toBe(true)
    })
  })

  describe('readOnly 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', () => {
      // This test originally walked the React fiber tree to check that all InstUI
      // interactive components received the correct readOnly/disabled/interaction prop.
      // This approach is not feasible with RTL.
    })
  })
})