@instructure/quiz-interactions/src/components/ordering/Result/__tests__/Result.test.js

A React UI component Library for quiz interaction types.

import {vi} from 'vitest'
import {v4 as uuid} from 'uuid'
import runAxeCheck from '@instructure/ui-axe-check'

import {FeedbackWrapper} from '@instructure/quiz-results-feedback'

import OrderingResult from '../index'
import {ReactTestbed} from '../../../../../tests/util/react-testbed'
import shouldRenderComponent from '../../../../../tests/util/render-checks'

const firstChoiceID = uuid()
const secondChoiceID = uuid()
const thirdChoiceID = uuid()

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',
  },
  scoredData: {
    correct: false,
    value: [
      {
        id: 0,
        userResponded: firstChoiceID,
        resultScore: 1,
        value: firstChoiceID,
      },
      {
        id: 1,
        userResponded: secondChoiceID,
        resultScore: 0,
        value: thirdChoiceID,
      },
      {
        id: 2,
        userResponded: thirdChoiceID,
        resultScore: 0,
        value: secondChoiceID,
      },
    ],
  },
}

describe('Ordering Result', () => {
  const testbed = new ReactTestbed(OrderingResult, props)

  shouldRenderComponent(testbed, {}, OrderingResult)

  afterEach(() => {
    vi.clearAllMocks()
  })

  describe('rendering', () => {
    describe('Label', () => {
      it('renders top and bottom labels if includeLabels is true', () => {
        testbed.render()
        const topLabel = testbed.findChildrenBySelector('[class*="topLabel"]')
        const bottomLabel = testbed.findChildrenBySelector('[class*="bottomLabel"]')

        expect(topLabel.length).toBe(1)
        expect(bottomLabel.length).toBe(1)
      })

      it('does not render top and bottom labels if includeLabels is false', () => {
        testbed.render({
          properties: {
            includeLabels: false,
          },
        })
        const topLabel = testbed.findChildrenBySelector('[class*="topLabel"]')
        const bottomLabel = testbed.findChildrenBySelector('[class*="bottomLabel"]')

        expect(topLabel.length).toBe(0)
        expect(bottomLabel.length).toBe(0)
      })
    })

    describe('Choices', () => {
      it('renders each choice', () => {
        testbed.render()

        const text = testbed.getText()
        const choices = props.interactionData.choices

        Object.keys(choices).forEach(choiceKey =>
          expect(text).toContain(choices[choiceKey].itemBody),
        )
      })

      it('renders correct and incorrect answers', () => {
        testbed.render()

        const wrappers = testbed.findChildrenByType(FeedbackWrapper)
        const statuses = wrappers.map(wrapper => wrapper.props.status)
        expect(statuses).toEqual(['correct', 'incorrect', 'incorrect'])
      })

      it('renders with no score', () => {
        testbed.render({
          scoredData: {
            value: [
              {id: 0, userResponded: firstChoiceID, value: firstChoiceID},
              {id: 1, userResponded: secondChoiceID, value: secondChoiceID},
              {id: 2, userResponded: thirdChoiceID, value: thirdChoiceID},
            ],
          },
        })

        const wrappers = testbed.findChildrenByType(FeedbackWrapper)
        const statuses = wrappers.map(wrapper => wrapper.props.status)
        expect(statuses).toEqual(['unknown', 'unknown', 'unknown'])
      })

      it('renders with no responses', () => {
        testbed.render({
          scoredData: {
            value: [
              {id: 0, value: firstChoiceID},
              {id: 1, value: secondChoiceID},
              {id: 2, value: thirdChoiceID},
            ],
          },
        })

        const wrappers = testbed.findChildrenByType(FeedbackWrapper)
        const statuses = wrappers.map(wrapper => wrapper.props.status)
        expect(statuses).toEqual(['unknown', 'unknown', 'unknown'])
      })

      it('renders with no true scoredData', () => {
        testbed.render({
          scoredData: {
            value: [{id: 0}, {id: 1}, {id: 2}],
          },
        })

        const wrappers = testbed.findChildrenByType(FeedbackWrapper)
        const statuses = wrappers.map(wrapper => wrapper.props.status)
        expect(statuses).toEqual(['unknown', 'unknown', 'unknown'])
      })
    })
  })

  describe('a11y tests', () => {
    it('should meet a11y standards', async () => {
      testbed.render({})
      expect(await runAxeCheck(testbed.rootNode)).toBe(true)
    })
  })
})