@instructure/quiz-interactions/src/components/matching/Edit/__tests__/MatchEdit.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 MatchEdit from '../MatchEdit'

describe('MatchEdit helper component', () => {
  const editAnswerStub = vi.fn()
  const editQuestionStub = vi.fn()
  const removeMatchStub = vi.fn()

  const props = {
    answerErrors: [],
    editAnswer: editAnswerStub,
    editQuestion: editQuestionStub,
    hasOnlyOneMatch: false,
    index: 1,
    questionErrors: [],
    removeMatch: removeMatchStub,
    questionId: '3',
    answerBody: 'Reginald VelJohnson',
    questionBody: 'Family Matters',
  }

  afterEach(() => {
    editAnswerStub.mockClear()
    editQuestionStub.mockClear()
    removeMatchStub.mockClear()
  })

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

  describe('#rendering', () => {
    it('should render a TextInput with the questionBody', () => {
      render(<MatchEdit {...props} />)

      const questionInput = screen.getByRole('textbox', {name: /prompt 2 question/i})

      expect(questionInput.value).toBe(props.questionBody)
    })

    it('should render a TextInput with the answerBody', () => {
      render(<MatchEdit {...props} />)

      const answerInput = screen.getByRole('textbox', {name: /prompt 2 answer/i})

      expect(answerInput.value).toBe(props.answerBody)
    })

    it('should render button to remove a match if are multiple matches', () => {
      render(<MatchEdit {...props} />)

      const removeMatchBtn = screen.queryByRole('button', {name: /remove question\/answer pair/i})

      expect(removeMatchBtn).toBeInTheDocument()
    })

    it('should not render button to remove a match if there is only one match', () => {
      render(<MatchEdit {...props} hasOnlyOneMatch={true} />)

      const removeMatchBtn = screen.queryByRole('button', {name: /remove question\/answer pair/i})

      expect(removeMatchBtn).toBeNull()
    })

    it('counts the number of prompts from 1 instead of 0', () => {
      render(<MatchEdit {...props} index={1} />)

      const question = screen.queryByRole('textbox', {name: /prompt 2 question/i})
      const answer = screen.queryByRole('textbox', {name: /prompt 2 answer/i})

      expect(question).not.toBeNull()
      expect(answer).not.toBeNull()
    })
  })

  describe('actions', () => {
    it('should call editAnswer when the answer input changes', () => {
      render(<MatchEdit {...props} />)
      const answerInput = screen.getByRole('textbox', {name: /prompt 2 answer/i})

      userEvent.clear(answerInput)
      userEvent.type(answerInput, 'newBody')

      expect(editAnswerStub).toHaveBeenCalledWith('3', 'newBody')
    })

    it('should call editQuesitonBody when the question input changes', () => {
      render(<MatchEdit {...props} />)
      const questionInput = screen.getByRole('textbox', {name: /prompt 2 question/i})

      userEvent.clear(questionInput)
      userEvent.type(questionInput, 'newBody')

      expect(editQuestionStub).toHaveBeenCalledWith('3', 'newBody')
    })

    it('should call removeMatch when the remove button is clicked', () => {
      render(<MatchEdit {...props} />)

      const removeMatchBtn = screen.getByRole('button', {name: /remove question\/answer pair/i})
      userEvent.click(removeMatchBtn)

      expect(removeMatchStub).toHaveBeenCalledWith(props.questionId)
    })
  })
})