@instructure/quiz-interactions/src/components/fill_blank/drag_components/__tests__/BlankDropTarget.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 BlankDropTarget from '../BlankDropTarget'

describe('BlankDropTarget', () => {
  const renderDragDropdown = 'fakeDropdownNode'
  const choice = {id: 'choice_uuid13_america', position: 3, itemBody: 'America'}
  const choices = [
    {id: 'choice_uuid13_america', position: 3, itemBody: 'America'},
    {id: 'choice_uuid14_brazil', position: 4, itemBody: 'Brazil'},
  ]
  const value = 'choice_uuid13_america'

  const props = {
    renderDragDropdown,
    choices,
    choice,
    value,
    onDrop: () => {},
    onChange: () => {},
    returnChoiceToWordbank: () => {},
    blankId: 'blankId',
  }

  describe('render', () => {
    it('renders the answer if answer is present', () => {
      renderWithDnd(<BlankDropTarget {...props} />)
      const answer = screen.getByText('America')
      expect(answer).toBeDefined()
    })

    it('renders the remove choice button if answer is present', () => {
      renderWithDnd(<BlankDropTarget {...props} />)
      const removeChoice = screen.getByRole('button', {name: /Remove Choice/i})
      expect(removeChoice).toBeDefined()
    })

    it('calls removeClickHandler when renderRemoveChoiceButton is clicked', () => {
      const returnChoiceToWordbankStub = vi.fn()
      renderWithDnd(
        <BlankDropTarget {...props} returnChoiceToWordbank={returnChoiceToWordbankStub} />,
      )

      const button = screen.getByRole('button', {name: /Remove Choice/i})

      userEvent.click(button)

      expect(returnChoiceToWordbankStub).toHaveBeenCalledTimes(1)
    })

    it('renders the drag target if there is no answer', () => {
      renderWithDnd(<BlankDropTarget {...props} choice={null} />)
      const answer = screen.getByText('Answer')
      expect(answer).toBeDefined()
    })
  })

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