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

A React UI component Library for quiz interaction types.

import React, {createRef} from 'react'

import runAxeCheck from '@instructure/ui-axe-check'
import {render} from '@testing-library/react'

import CategorizationShow from '../index'

const categ1 = 'Category1Id'
const categ2 = 'Category2Id'
const categ3 = 'Category3Id'

const distrac1 = 'Distractor1Id'
const distrac2 = 'Distractor2Id'
const distrac3 = 'Distractor3Id'

const props = {
  itemBody: 'Match the name of the celestial body on the left with its correct classification:',
  interactionData: {
    categoryOrder: [categ1, categ2],
    categories: {
      [categ1]: {id: categ1, itemBody: 'Category 1'},
      [categ2]: {id: categ2, itemBody: 'Category 2'},
    },
    distractors: {
      [distrac1]: {id: distrac1, itemBody: 'Distractor A'},
      [distrac2]: {id: distrac2, itemBody: 'Distractor B'},
      [distrac3]: {id: distrac3, itemBody: 'Distractor C'},
    },
  },
  scoringData: {
    value: [
      {
        id: categ1,
        scoringAlgorithm: 'AllOrNothing',
        scoringData: {
          value: [distrac1],
        },
      },
      {
        id: categ2,
        scoringAlgorithm: 'AllOrNothing',
        scoringData: {
          value: [distrac2],
        },
      },
    ],
  },
}

describe('Categorization Show', () => {
  it('should render', () => {
    const {container} = render(<CategorizationShow {...props} />)
    expect(container.firstChild).toBeDefined()
  })

  describe('rendering', () => {
    it('renders CategoriesContainer', () => {
      const {container} = render(<CategorizationShow {...props} />)
      // CategoriesContainer renders category content
      expect(container.textContent).toContain('Category 1')
      expect(container.textContent).toContain('Category 2')
    })

    it('renders categories', () => {
      render(<CategorizationShow {...props} />)
      const text = document.body.textContent
      const categories = props.interactionData.categories

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

    it('updates categories when interaction data changes', () => {
      const updatedInteractionData = {
        ...props.interactionData,
        categoryOrder: [...props.interactionData.categoryOrder, categ3],
        categories: {
          ...props.interactionData.categories,
          [categ3]: {id: categ3, itemBody: 'Category 3'},
        },
      }
      const updatedScoringData = {
        value: [
          ...props.scoringData.value,
          {
            id: categ3,
            scoringAlgorithm: 'AllOrNothing',
            scoringData: {
              value: [distrac3],
            },
          },
        ],
      }
      render(
        <CategorizationShow
          {...props}
          interactionData={updatedInteractionData}
          scoringData={updatedScoringData}
        />,
      )

      const text = document.body.textContent
      expect(text).toContain('Category 1')
      expect(text).toContain('Category 2')
      expect(text).toContain('Category 3')
    })

    it('updates categories when order changes', () => {
      const updatedInteractionData = {
        ...props.interactionData,
        categoryOrder: [categ2, categ1],
      }
      render(<CategorizationShow {...props} interactionData={updatedInteractionData} />)

      const text = document.body.textContent
      expect(text).toContain('Category 1')
      expect(text).toContain('Category 2')
    })

    it('renders ChoicesList', () => {
      render(<CategorizationShow {...props} />)
      // ChoicesList renders the filtered distractors (distrac3 is the only one not assigned to a category)
      const text = document.body.textContent
      expect(text).toContain('Distractor C')
    })

    it('renders distractors', () => {
      render(<CategorizationShow {...props} />)
      const text = document.body.textContent
      const distractors = props.interactionData.distractors

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

  describe('helpers', () => {
    it('#filterDistractors', () => {
      const ref = createRef()
      render(<CategorizationShow ref={ref} {...props} />)
      const resp = ref.current.filterDistractors()

      expect(resp.length).toBe(1)
      expect(resp[0].id).toBe(distrac3)
    })

    it('#parsedScoringData', () => {
      const ref = createRef()
      render(<CategorizationShow ref={ref} {...props} />)
      const resp = ref.current.parsedScoringData()

      expect(resp[0].value[0]).toBe(distrac1)
    })
  })

  describe('a11y tests', () => {
    it('should meet a11y standards', async () => {
      render(<CategorizationShow {...props} />)
      expect(await runAxeCheck(document.body, {ignores: ['region']})).toBe(true)
    })
  })

  describe('readOnly tests', () => {
    // TODO: Migrate testbed.checkReadOnlyComponents() to RTL equivalent
    // This test previously used testbed.checkReadOnlyComponents() which checks
    // that all InstUI components receive the readOnly prop correctly.
    it.skip('should pass the readOnly prop to instui components', () => {})
  })
})