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

const firstChoiceID = 'firstChoiceID'
const secondChoiceID = 'secondChoiceID'
const thirdChoiceID = 'thirdChoiceID'

const props = {
  itemBody: 'Order these characters from tallest to shortest:',
  interactionData: {
    choices: {
      [firstChoiceID]: {id: firstChoiceID, itemBody: 'Gollum'},
      [secondChoiceID]: {id: secondChoiceID, itemBody: 'Frodo'},
      [thirdChoiceID]: {id: thirdChoiceID, itemBody: 'Gimli'},
    },
  },
  properties: {
    displayAnswersParagraph: false,
    includeLabels: true,
    topLabel: 'Taller',
    bottomLabel: 'Shorter',
  },
  scoringData: {
    value: [secondChoiceID, thirdChoiceID, firstChoiceID],
  },
}

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

  describe('rendering', () => {
    it('renders each interaction choice', () => {
      render(<OrderingShow {...props} />)
      const choices = props.interactionData.choices

      Object.keys(choices).forEach(choiceKey =>
        expect(screen.getByText(choices[choiceKey].itemBody)).toBeInTheDocument(),
      )
    })

    it('renders the choices in the correct order', () => {
      const {container} = render(<OrderingShow {...props} />)
      const choices = container.querySelectorAll('[data-testid="choice-container"]')

      choices.forEach((choiceAux, index) => {
        const choiceID = props.scoringData.value[index]
        const choiceLabel = props.interactionData.choices[choiceID].itemBody
        expect(choiceAux.textContent).toContain(choiceLabel)
      })
    })

    it('renders title and labels', () => {
      render(<OrderingShow {...props} />)

      expect(screen.getByText(props.properties.topLabel)).toBeInTheDocument()
      expect(screen.getByText(props.properties.bottomLabel)).toBeInTheDocument()
      expect(screen.getByText(props.itemBody)).toBeInTheDocument()
    })
  })

  describe('a11y tests', () => {
    it('should meet a11y standards', async () => {
      const {container} = render(<OrderingShow {...props} />)
      const result = await runAxeCheck(container)
      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', () => {})
  })
})