@instructure/quiz-interactions/src/components/fill_blank/drag_components/__tests__/BlankAnswer.test.js

A React UI component Library for quiz interaction types.

import React from 'react'
import runAxeCheck from '@instructure/ui-axe-check'
import {vi} from 'vitest'

import {screen} from '@testing-library/react'
import userEvent from '@testing-library/user-event'

import {renderWithDnd} from '../../../../../tests/util/dndTestUtils'

import BlankAnswer from '../BlankAnswer'

describe('BlankAnswer', () => {
  const onRemoveAnswerStub = vi.fn()
  const onBlurStub = vi.fn()

  const props = {
    choiceId: 'choice_uuid13_america',
    itemBody: 'America',
    onRemoveAnswer: onRemoveAnswerStub,
    onBlur: onBlurStub,
    blankId: 'blankId',
  }

  afterEach(() => {
    onRemoveAnswerStub.mockClear()
    onBlurStub.mockClear()
  })

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

  it('calls the removeAnswer prop on click of the button', () => {
    renderWithDnd(<BlankAnswer {...props} />)
    const blankAnswer = screen.getByRole('button', {name: /Remove Choice/i})
    userEvent.click(blankAnswer)
    expect(onRemoveAnswerStub).toHaveBeenCalled()
  })

  describe('a11y tests', () => {
    it('should meet a11y standards', async () => {
      const {container} = renderWithDnd(<BlankAnswer {...props} />)
      expect(await runAxeCheck(container)).toBe(true)
    })
  })
})