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

A React UI component Library for quiz interaction types.

import React from 'react'
import {render, screen} from '@testing-library/react'
import runAxeCheck from '@instructure/ui-axe-check'

import TrueFalseResult from '../index'

describe('True False Result', () => {
  const trueChoice = 'This is the true choice label'
  const falseChoice = 'This is the false choice label indeed'
  const correctScoredData = {
    value: {
      true: {resultScore: 1, userResponded: true},
      false: {resultScore: 0, userResponded: false},
    },
  }
  const wrongScoredData = {
    value: {
      true: {resultScore: 1, userResponded: false},
      false: {resultScore: 0, userResponded: true},
    },
  }
  const unScoredData = {
    value: {
      true: {userResponded: false},
      false: {userResponded: true},
    },
  }
  const wrongScoredDataNoCorrect = {
    value: {
      true: {userResponded: false},
      false: {resultScore: 0, userResponded: true},
    },
  }

  const props = {
    itemBody: 'This questions body',
    interactionData: {trueChoice, falseChoice},
  }

  it('renders feedback over the correct checked choice', () => {
    render(<TrueFalseResult {...props} scoredData={correctScoredData} />)
    expect(screen.getByLabelText(trueChoice)).toBeInTheDocument()
    expect(screen.getByLabelText(falseChoice)).toBeInTheDocument()
    expect(screen.getByText('Correct answer:')).toBeInTheDocument()
  })

  it('renders feedback over the incorrect checked choice', () => {
    render(<TrueFalseResult {...props} scoredData={wrongScoredData} />)

    expect(screen.getByLabelText(trueChoice)).toBeInTheDocument()
    expect(screen.getByLabelText(falseChoice)).toBeInTheDocument()
    expect(screen.getByText('Incorrect answer:')).toBeInTheDocument()
    expect(document.body.textContent).toContain(`Correct Answer:${trueChoice}`)
  })

  it('renders feedback when known incorrect but correct response unspecified', () => {
    render(<TrueFalseResult {...props} scoredData={wrongScoredDataNoCorrect} />)

    expect(screen.getByLabelText(trueChoice)).toBeInTheDocument()
    expect(screen.getByLabelText(falseChoice)).toBeInTheDocument()
    expect(screen.getByText('Incorrect answer:')).toBeInTheDocument()
    expect(document.body.textContent).not.toContain(`Correct Answer:${trueChoice}`)
  })

  it("doesn't render feedback when no correctness is specified", () => {
    render(<TrueFalseResult {...props} scoredData={unScoredData} />)

    expect(screen.getByLabelText(trueChoice)).toBeInTheDocument()
    expect(screen.getByLabelText(falseChoice)).toBeInTheDocument()
    expect(screen.queryByText('Correct answer:')).not.toBeInTheDocument()
    expect(screen.queryByText('Incorrect answer:')).not.toBeInTheDocument()
    expect(document.body.textContent).not.toContain(`Correct Answer:${trueChoice}`)
  })

  describe('feedback with no choice selected', () => {
    const scoredData = {
      value: {
        true: {resultScore: 0, userResponded: false},
        false: {resultScore: 1, userResponded: false},
      },
    }

    it('contains a (no answer) feedback message', () => {
      render(<TrueFalseResult {...props} scoredData={scoredData} />)
      expect(document.body.textContent).toContain('no answer')
    })

    it('displays the correct answer', () => {
      render(<TrueFalseResult {...props} scoredData={scoredData} />)
      expect(document.body.textContent).toMatch(/\bcorrect answer\b/i)
    })

    it('passes the falseChoice to the correctAnswer prop', () => {
      render(<TrueFalseResult {...props} scoredData={scoredData} />)

      expect(screen.getByLabelText(trueChoice)).toBeInTheDocument()
      expect(screen.getByLabelText(falseChoice)).toBeInTheDocument()
      expect(document.body.textContent).toContain(`Correct Answer:${falseChoice}`)
    })

    it('passes the trueChoice to the correctAnswer prop', () => {
      const scoredData = {
        value: {
          true: {resultScore: 1, userResponded: false},
          false: {resultScore: 0, userResponded: false},
        },
      }

      render(<TrueFalseResult {...props} scoredData={scoredData} />)

      expect(screen.getByLabelText(trueChoice)).toBeInTheDocument()
      expect(screen.getByLabelText(falseChoice)).toBeInTheDocument()
      expect(document.body.textContent).toContain(`Correct Answer:${trueChoice}`)
    })

    describe('when correct answer unknown', () => {
      const scoredData = {
        value: {
          true: {userResponded: false},
          false: {userResponded: false},
        },
      }

      it('contains a (no answer) feedback message', () => {
        render(<TrueFalseResult {...props} scoredData={scoredData} />)
        expect(document.body.textContent).toContain('no answer')
      })

      it('does not display a correct answer', () => {
        render(<TrueFalseResult {...props} scoredData={scoredData} />)
        expect(document.body.textContent).not.toMatch(/\bcorrect answer\b/i)
      })
    })
  })

  describe('when user response hidden', () => {
    const scoredData = {
      value: null,
    }

    it('displays a (response not displayed) message', () => {
      render(<TrueFalseResult {...props} scoredData={scoredData} />)
      expect(document.body.textContent).toContain('response not displayed')
    })
  })

  describe('a11y tests', () => {
    it('should meet a11y standards', async () => {
      render(
        <main>
          <TrueFalseResult {...props} scoredData={correctScoredData} />
        </main>,
      )

      expect(await runAxeCheck(document.body)).toBe(true)
    })
  })
})