@instructure/quiz-interactions/src/components/formula/Show/__tests__/Show.test.js

A React UI component Library for quiz interaction types.

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

import FormulaShow from '../index'
import {loadMathjs} from '../../common/util'

describe('Formula Show', () => {
  beforeAll(async () => {
    await loadMathjs()
  })

  const props = {
    interactionData: {},
    itemBody: 'find `x` + `y`',
    scoringData: {
      value: {
        answerCount: '2',
        formula: 'x+y',
        generatedSolutions: [
          {
            output: 3,
            inputs: [
              {
                name: 'x',
                value: 1,
              },
              {
                name: 'y',
                value: 2,
              },
            ],
          },
          {
            output: 10,
            inputs: [
              {
                name: 'x',
                value: 3,
              },
              {
                name: 'y',
                value: 7,
              },
            ],
          },
        ],
        variables: [
          {
            name: 'x',
            min: '0',
            max: '5',
            precision: '0',
          },
          {
            name: 'y',
            min: '0',
            max: '5',
            precision: '0',
          },
        ],
      },
    },
  }

  it('passes props to NumberInput', () => {
    render(<FormulaShow {...props} />)
    const numberInput = screen.getByLabelText('Answer value')

    expect(numberInput.value).toBe('3')
  })

  it('substitutes variables in the question text', () => {
    const {container} = render(<FormulaShow {...props} />)

    expect(container.textContent).toContain('find 1 + 2')
  })

  describe('a11y tests', () => {
    it('is accessible', async () => {
      render(<FormulaShow {...props} />)
      expect(await runAxeCheck(document.body, {ignores: ['region']})).toBe(true)
    })
  })
})