@instructure/quiz-interactions/src/components/matching/Edit/__tests__/DistractorList.test.js

A React UI component Library for quiz interaction types.

import {vi} from 'vitest'
import React from 'react'
import {render, screen} from '@testing-library/react'
import userEvent from '@testing-library/user-event'

import DistractorList from '../DistractorList'

describe('DistractorList', () => {
  const editDistractorStub = vi.fn()
  const blurDistractorStub = vi.fn()
  const createNewDistractorStub = vi.fn()
  const removeDistractorStub = vi.fn()

  const props = {
    distractorErrors: vi.fn().mockReturnValue([]),
    createNewDistractor: createNewDistractorStub,
    distractors: ['hey', 'hoo'],
    editDistractor: editDistractorStub,
    blurDistractor: blurDistractorStub,
    removeDistractor: removeDistractorStub,
  }

  afterEach(() => {
    editDistractorStub.mockClear()
    blurDistractorStub.mockClear()
    createNewDistractorStub.mockClear()
    removeDistractorStub.mockClear()
  })

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

  describe('rendering', () => {
    it('should render each distractor', () => {
      const {container} = render(<DistractorList {...props} />)

      const distractors = container.querySelectorAll('[data-automation="sdk-matching-distractor"]')
      expect(distractors.length).toBe(2)
    })

    it('should render remove distractor buttons', () => {
      render(<DistractorList {...props} />)

      const removeButtons = screen
        .getAllByRole('button')
        .filter(button => button.textContent.includes('Remove Distractor'))
      expect(removeButtons.length).toBe(2)
    })

    describe('renderAdditonalDistractorText', () => {
      it('should render additional distractor text', () => {
        const {container} = render(<DistractorList {...props} />)

        const additionalDistText = container.querySelector(
          '[data-testid="additional-distractor-text"]',
        )
        expect(additionalDistText).toBeInTheDocument()
      })
    })
  })

  describe('actions', () => {
    it('should call editDistractor when a distractor is changed', () => {
      render(<DistractorList {...props} />)

      const [firstInput] = screen.getAllByRole('textbox')

      userEvent.type(firstInput, 'hi')

      expect(editDistractorStub).toHaveBeenCalled()
    })

    it('should call blurDistractor when a distractor is blurred', () => {
      render(<DistractorList {...props} />)

      const [firstInput] = screen.getAllByRole('textbox')

      userEvent.type(firstInput, 'hi')
      userEvent.click(document.body)

      expect(blurDistractorStub).toHaveBeenCalled()
    })

    // TestRail ID 3072435
    it('should call createNewDistractor when the new distractor button is clicked', () => {
      render(<DistractorList {...props} />)

      const buttons = screen.getAllByRole('button')
      const addDistractorButton = buttons.find(
        button =>
          button.textContent.includes('Distractor') && !button.textContent.includes('Remove'),
      )

      addDistractorButton.click()

      expect(createNewDistractorStub).toHaveBeenCalled()
    })

    it('should call removeDistractor when a distractor is removed', () => {
      render(<DistractorList {...props} />)

      const buttons = screen.getAllByRole('button')
      const removeDistractor = buttons.find(button =>
        button.textContent.includes('Remove Distractor'),
      )

      expect(removeDistractor).toBeInTheDocument()
      removeDistractor.click()

      expect(removeDistractorStub).toHaveBeenCalled()
    })
  })
})