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

A React UI component Library for quiz interaction types.

import React from 'react'

import {expect, mount, within} from '@instructure/ui-test-utils'

import NumericShow from '../index'

describe('Numeric Show', () => {
  const props = {
    itemBody: 'What is the airspeed velocity of a swallow carrying a coconut (in mph)',
  }

  it('renders the question text', async () => {
    const subject = await mount(<NumericShow {...props} />)
    const numericShow = within(subject.getDOMNode())
    const questionText = await numericShow.find(`:textContent(${props.itemBody})`)

    expect(questionText).to.be.ok()
  })

  it('renders the range text in the number input', async () => {
    const testProps = {
      ...props,
      scoringData: {
        value: [
          {
            type: 'withinARange',
            start: 1,
            end: 10,
          },
        ],
      },
    }

    const subject = await mount(<NumericShow {...testProps} />)
    const numericShow = within(subject.getDOMNode())
    const numberInput = await numericShow.find(':label(Answer value)')

    expect(numberInput.getDOMNode().value).to.equal('1 to 10 inclusive')
  })

  it('localizes answer without stripping trailing zeros', async () => {
    const testProps = {
      ...props,
      locale: 'fr',
      scoringData: {
        value: [
          {
            type: 'preciseResponse',
            value: '8.00',
            precisionType: 'decimals',
            precision: '2',
          },
        ],
      },
    }

    const subject = await mount(<NumericShow {...testProps} />)
    const numericShow = within(subject.getDOMNode())
    const numberInput = await numericShow.find(':label(Answer value)')

    expect(numberInput.getDOMNode().value).to.equal('8,00')
  })

  it('renders the correct value in the number input', async () => {
    const testProps = {
      ...props,
      scoringData: {
        value: [
          {
            type: 'exactResponse',
            value: '9.99',
          },
        ],
      },
    }

    const subject = await mount(<NumericShow {...testProps} />)
    const numericShow = within(subject.getDOMNode())
    const numberInput = await numericShow.find(':label(Answer value)')

    expect(numberInput.getDOMNode().value).to.equal('9.99')
  })

  it('displays answers in scientific notation', async () => {
    const testProps = {
      ...props,
      scoringData: {
        value: [
          {
            type: 'exactResponse',
            value: '1.23*10^-2',
          },
        ],
      },
    }

    const subject = await mount(<NumericShow {...testProps} />)
    const numericShow = within(subject.getDOMNode())
    const numberInput = await numericShow.find(':label(Answer value)')

    expect(numberInput.getDOMNode().value).to.equal('1.23*10^-2')
  })

  it('displays ranges in scientific notation', async () => {
    const testProps = {
      ...props,
      scoringData: {
        value: [
          {
            type: 'withinARange',
            start: '5*10^3',
            end: '1*10^4',
          },
        ],
      },
    }

    const subject = await mount(<NumericShow {...testProps} />)
    const numericShow = within(subject.getDOMNode())
    const numberInput = await numericShow.find(':label(Answer value)')

    expect(numberInput.getDOMNode().value).to.equal('5*10^3 to 1*10^4 inclusive')
  })

  it('correctly formats E notation with negative exponents (regression test for the bug)', async () => {
    const testProps = {
      ...props,
      scoringData: {
        value: [
          {
            type: 'exactResponse',
            value: '1e-1',
          },
        ],
      },
    }

    const subject = await mount(<NumericShow {...testProps} />)
    const numericShow = within(subject.getDOMNode())
    const numberInput = await numericShow.find(':label(Answer value)')

    expect(numberInput.getDOMNode().value).to.equal('0.1')
  })

  it('correctly formats E notation with positive exponents', async () => {
    const testProps = {
      ...props,
      scoringData: {
        value: [
          {
            type: 'exactResponse',
            value: '2e+2',
          },
        ],
      },
    }

    const subject = await mount(<NumericShow {...testProps} />)
    const numericShow = within(subject.getDOMNode())
    const numberInput = await numericShow.find(':label(Answer value)')

    expect(numberInput.getDOMNode().value).to.equal('200')
  })

  it('should meet a11y standards', async () => {
    const subject = await mount(<NumericShow {...props} />)
    const numericShow = within(subject.getDOMNode())

    expect(await numericShow.accessible()).to.be.true()
  })

  it('should render the number input readOnly', async () => {
    const subject = await mount(<NumericShow {...props} />)
    const numericShow = within(subject.getDOMNode())
    const numberInput = await numericShow.find(':label(Answer value)')

    expect(numberInput.getDOMNode().readOnly).to.be.true()
  })
})