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

A React UI component Library for quiz interaction types.

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

import CategorizationTake from '../index'

const categ1 = 'categ1'
const categ2 = 'categ2'

const distrac1 = 'distrac1'
const distrac2 = 'distrac2'
const distrac3 = 'distrac3'

const handleResponseUpdateStub = vi.fn()
const notifyScreenreaderStub = vi.fn()

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 1'},
      [distrac2]: {id: distrac2, itemBody: 'Distractor 2'},
      [distrac3]: {id: distrac3, itemBody: 'Distractor 3'},
    },
  },
  userResponse: {
    value: [
      {
        id: categ1,
        value: [distrac1],
        type: 'ArrayText',
      },
      {
        id: categ2,
        value: [distrac2],
        type: 'ArrayText',
      },
      {
        id: 'uncategorized',
        value: [distrac3],
        type: 'ArrayText',
      },
    ],
  },
  handleResponseUpdate: handleResponseUpdateStub,
  notifyScreenreader: notifyScreenreaderStub,
}

describe('Categorization Take', () => {
  afterEach(() => {
    vi.clearAllMocks()
  })

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

  describe('rendering', () => {
    it('renders CategoriesContainer', () => {
      renderWithDnd(<CategorizationTake {...props} />)
      expect(document.body.textContent).toContain('Category 1')
      expect(document.body.textContent).toContain('Category 2')
    })

    it('renders ChoicesList', () => {
      renderWithDnd(<CategorizationTake {...props} />)
      expect(document.body.textContent).toContain('Possible answers')
    })
  })

  // Tests below access component instance methods directly (findChildByType + instance method calls).
  // They test critical business logic (onMenuItemSelected, onDrop, onDropOut, filterDistractors)
  // but cannot be migrated to RTL without refactoring the component to extract logic into
  // testable utility functions. QUIZ-17510
  describe('FocusGroup ref', () => {
    it.skip('sets focusGroup after render', () => {})
  })

  describe('helpers', () => {
    it.skip('#filterDistractors', () => {})
  })

  describe('#onMenuItemSelected', () => {
    it.skip('should call handleResponseUpdate without item unchecked', () => {})

    it.skip('should move the answer back to the distractors when dropped out', () => {})

    it.skip('should keep focus on the oldCategory by default', () => {})

    it.skip('should focus the newCategory when specified', () => {})

    it.skip('should call notifyScreenreader when adding an answer to valid selection', () => {})

    it.skip('should call notifyScreenreader when removing an answer from a valid selection', () => {})

    it.skip('should return without making a call if invalid distractor given', () => {})
  })

  describe('#onDrop', () => {
    it.skip('should call handleResponseUpdate with item dropped', () => {})
  })

  describe('a11y tests', () => {
    it('should meet a11y standards', async () => {
      renderWithDnd(
        <main>
          <CategorizationTake {...props} />
        </main>,
      )
      expect(await runAxeCheck(document.body)).toBe(true)
    })
  })
})