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

A React UI component Library for quiz interaction types.

import {vi} from 'vitest'
import React from 'react'
import {render} from '@testing-library/react'

import MatchingResult from '../index'

vi.mock('@instructure/quiz-results-feedback', () => ({
  FeedbackWrapper: ({status, userResponse, correctAnswer, ...rest}) => (
    <div data-testid="feedback-wrapper" data-status={status}>
      {userResponse && <span>{userResponse}</span>}
      {correctAnswer && <span>{correctAnswer}</span>}
    </div>
  ),
  NoResponse: ({status, ...rest}) => <div data-testid="no-response" data-status={status} />,
}))

describe('MatchingResult component', () => {
  const defaultProps = {
    itemBody: 'Match the name of the celestial body on the left with its correct classification.',
    interactionData: {
      questions: [
        {id: 'quuid1', itemBody: 'Mars'},
        {id: 'quuid2', itemBody: 'Phobos'},
        {id: 'quuid3', itemBody: 'Alpha Centauri'},
        {id: 'quuid4', itemBody: 'Andromeda'},
      ],
      answers: ['Planet', 'Moon', 'Nebula', 'Star', 'Galaxy'],
    },
    scoredData: {
      correct: false,
      value: [
        {
          id: 'quuid1',
          userResponded: 'Planet',
          resultScore: 1,
          value: 'Planet',
        },
        {
          id: 'quuid2',
          userResponded: 'Moon',
          resultScore: 1,
          value: 'Moon',
        },
        {
          id: 'quuid3',
          userResponded: 'Nebula',
          resultScore: 0,
          value: 'Star',
        },
        {
          id: 'quuid4',
          userResponded: 'Star',
          resultScore: 0,
          value: 'Galaxy',
        },
      ],
    },
  }

  it('displays all questions', () => {
    const {container} = render(<MatchingResult {...defaultProps} />)
    const questions = Array.from(container.querySelectorAll('[data-testid="question"]')).map(
      elem => elem.textContent,
    )
    const expected = defaultProps.interactionData.questions.map(q => q.itemBody)
    expect(questions).toEqual(expected)
  })

  it('displays the right result statuses', () => {
    const {container} = render(<MatchingResult {...defaultProps} />)
    const wrappers = container.querySelectorAll('[data-testid="feedback-wrapper"]')
    const statuses = Array.from(wrappers).map(wrapper => wrapper.getAttribute('data-status'))
    expect(statuses).toEqual(['correct', 'correct', 'incorrect', 'incorrect'])
  })

  it('renders with missing correct responses', () => {
    const {container} = render(
      <MatchingResult
        {...defaultProps}
        scoredData={{
          value: [
            {id: 'quuid1', userResponded: 'Planet'},
            {id: 'quuid2', userResponded: 'Moon'},
            {id: 'quuid3', userResponded: 'Star'},
            {id: 'quuid4', userResponded: 'Nebula'},
          ],
        }}
      />,
    )
    const wrappers = container.querySelectorAll('[data-testid="feedback-wrapper"]')
    const statuses = Array.from(wrappers).map(wrapper => wrapper.getAttribute('data-status'))
    expect(statuses).toEqual(['unknown', 'unknown', 'unknown', 'unknown'])
  })

  it('renders with no scoring info', () => {
    const {container} = render(
      <MatchingResult
        {...defaultProps}
        scoredData={{
          value: [{id: 'quuid1'}, {id: 'quuid2'}, {id: 'quuid3'}, {id: 'quuid4'}],
        }}
      />,
    )
    const wrappers = container.querySelectorAll('[data-testid="no-response"]')
    const statuses = Array.from(wrappers).map(wrapper => wrapper.getAttribute('data-status'))
    expect(statuses).toEqual(['unknown', 'unknown', 'unknown', 'unknown'])
  })
})