@instructure/quiz-interactions/src/components/numeric/Result/__tests__/Result.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 NumericResult from '../index'

const makeScoredData = ({userResponse = '0', correctAnswer = '0', resultScore = 0}) => ({
  value: {
    userResponse,
    correctAnswer,
    resultScore,
  },
})

describe('Numeric Result', () => {
  const props = {
    itemBody: 'What is the eighteenth natural number',
    scoredData: {
      value: {
        userResponse: '20',
        correctAnswer: '18',
        resultScore: 0,
      },
    },
  }

  numericResultTests(NumericResult, props)

  describe('with space in response', () => {
    it('does not crash', async () => {
      const scoredData = {
        value: {
          userResponse: ' 18 ',
          correctAnswer: '19',
          resultScore: 0,
        },
      }
      const subject = await mount(<NumericResult {...props} scoredData={scoredData} />)

      expect(subject.getDOMNode().textContent).to.include('18')
    })
  })

  describe('with range answer', () => {
    it('renders correct answer as a sentence', async () => {
      const scoredData = {
        value: {
          userResponse: '18',
          correctAnswer: ['10', '15'],
          resultScore: 0,
        },
      }
      const subject = await mount(<NumericResult {...props} scoredData={scoredData} />)

      expect(subject.getDOMNode().textContent).to.include('10 to 15 inclusive')
    })

    it('renders correct answer range in scientific notation', async () => {
      const scoredData = {
        value: {
          userResponse: '750',
          correctAnswer: ['5*10^2', '1*10^3'],
          resultScore: 0,
        },
      }
      const subject = await mount(
        <NumericResult
          itemBody="Give a number between 500 and 1000 in scientific notation"
          scoredData={scoredData}
        />,
      )

      expect(subject.getDOMNode().textContent).to.include('5*10^2 to 1*10^3 inclusive')
    })
  })
})

export function numericResultTests(Component, props) {
  it('renders feedback for an incorrect response', async () => {
    const subject = await mount(<Component {...props} />)

    const numericResult = within(subject.getDOMNode())
    const userResponse = await numericResult.find(
      `:textContent(${props.scoredData.value.userResponse})`,
    )
    const userResponseSRText = await numericResult.find(':textContent(Incorrect answer:)', {
      visible: false,
    })

    expect(userResponse).to.be.ok()
    expect(userResponseSRText).to.be.ok()
    expect(numericResult.getTextContent()).to.include(
      `Correct Answer:${props.scoredData.value.correctAnswer}`,
    )
  })

  it('renders feedback when no correctness is specified', async () => {
    const testProps = {
      ...props,
      scoredData: {
        value: {
          userResponse: '20',
        },
      },
    }

    const subject = await mount(<Component {...testProps} />)
    const numericResult = within(subject.getDOMNode())
    const userResponse = await numericResult.find(
      `:textContent(${testProps.scoredData.value.userResponse})`,
    )
    const correctAnswerSRText = await numericResult.find(':textContent(Correct answer:)', {
      visible: false,
      expectEmpty: true,
    })
    const incorrectAnswerSRText = await numericResult.find(':textContent(Incorrect answer:)', {
      visible: false,
      expectEmpty: true,
    })

    expect(userResponse).to.be.ok()
    expect(correctAnswerSRText).to.be.null()
    expect(incorrectAnswerSRText).to.be.null()
    expect(numericResult.getTextContent()).not.to.include('Correct Answer:')
  })

  it('renders when no user response is provided', async () => {
    const testProps = {
      ...props,
      scoredData: {
        value: {
          correctAnswer: '18',
        },
      },
    }

    const subject = await mount(<Component {...testProps} />)
    const numericResult = within(subject.getDOMNode())
    const noResponseText = await numericResult.find(':textContent("(response not displayed)")')

    expect(noResponseText).to.be.ok()
    expect(numericResult.getTextContent()).to.include(
      `Correct Answer:${testProps.scoredData.value.correctAnswer}`,
    )
  })

  it('renders when correct answer is known and the user response is missing', async () => {
    const testProps = {
      ...props,
      scoredData: {
        value: {
          correctAnswer: '18',
          resultScore: 1,
        },
      },
    }

    const subject = await mount(<Component {...testProps} />)
    const numericResult = within(subject.getDOMNode())
    const notDisplayedText = await numericResult.find(
      ':textContent("(correct response not displayed)")',
    )

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

  it('renders feedback for a correct response', async () => {
    const testProps = {
      ...props,
      scoredData: {
        value: {
          userResponse: '18',
          correctAnswer: '18',
          resultScore: 1,
        },
      },
    }

    const subject = await mount(<Component {...testProps} />)
    const numericResult = within(subject.getDOMNode())
    const userResponse = await numericResult.find(
      `:textContent(${testProps.scoredData.value.userResponse})`,
    )
    const userResponseSRText = await numericResult.find(':textContent(Correct answer:)', {
      visible: false,
    })

    expect(userResponse).to.be.ok()
    expect(userResponseSRText).to.be.ok()
    expect(numericResult.getTextContent()).not.to.include(
      `Correct Answer:${testProps.scoredData.value.correctAnswer}`,
    )
  })

  it('displays the user response verbatim', async () => {
    const scoredData = makeScoredData({userResponse: 'forty-two'})
    const testProps = {
      ...props,
      scoredData,
    }

    const subject = await mount(<Component {...testProps} />)
    const numericResult = within(subject.getDOMNode())
    const userResponse = await numericResult.find(
      `:textContent(${testProps.scoredData.value.userResponse})`,
    )

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

  it('localizes and does not round the user response', async () => {
    const userResponse = '9999.99999'
    const scoredData = makeScoredData({userResponse, correctAnswer: userResponse, resultScore: 1})
    const testProps = {
      ...props,
      locale: 'de',
      scoredData,
    }

    const subject = await mount(<Component {...testProps} />)
    const numericResult = within(subject.getDOMNode())

    expect(numericResult.getTextContent()).to.include('9.999,99999')
  })

  it('localizes and does not round values when the correct answer is specified', async () => {
    const scoredData = makeScoredData({correctAnswer: '9999.99999'})
    const testProps = {
      ...props,
      locale: 'de',
      scoredData,
    }

    const subject = await mount(<Component {...testProps} />)
    const numericResult = within(subject.getDOMNode())

    expect(numericResult.getTextContent()).not.to.include(
      `Correct Answer:${testProps.scoredData.value.correctAnswer}`,
    )
    expect(numericResult.getTextContent()).to.include('Correct Answer:9.999,99999')
  })

  it('includes full precision when the correct answer is specified', async () => {
    const scoredData = makeScoredData({correctAnswer: '10000.0000'})
    const testProps = {
      ...props,
      scoredData,
    }

    const subject = await mount(<Component {...testProps} />)
    const numericResult = within(subject.getDOMNode())

    expect(numericResult.getTextContent()).not.to.include(
      `Correct Answer:${testProps.scoredData.value.correctAnswer}`,
    )
    expect(numericResult.getTextContent()).to.include('Correct Answer:10,000.0000')
  })

  it('localizes and does not round values when an unknown answer is specified', async () => {
    const scoredData = makeScoredData({correctAnswer: '9999.99999', userResponse: null})
    const testProps = {
      ...props,
      scoredData,
    }

    const subject = await mount(<Component {...testProps} />)
    const numericResult = within(subject.getDOMNode())

    expect(numericResult.getTextContent()).not.to.include(
      `Correct Answer:${testProps.scoredData.value.correctAnswer}`,
    )
    expect(numericResult.getTextContent()).to.include('Correct Answer:9,999.99999')
  })

  it('includes full precision when an unknown answer is specified', async () => {
    const scoredData = makeScoredData({correctAnswer: '10000.0000', userResponse: null})
    const testProps = {
      ...props,
      scoredData,
    }

    const subject = await mount(<Component {...testProps} />)
    const numericResult = within(subject.getDOMNode())

    expect(numericResult.getTextContent()).not.to.include(
      `Correct Answer:${testProps.scoredData.value.correctAnswer}`,
    )
    expect(numericResult.getTextContent()).to.include('Correct Answer:10,000.0000')
  })

  it('displays responses in scientific notation', async () => {
    const userResponse = '1.23*10^-3'
    const scoredData = {
      value: {
        userResponse,
        correctAnswer: userResponse,
        resultScore: 1,
      },
    }
    const testProps = {
      ...props,
      itemBody: 'What is 0.00123 in scientific notation?',
      scoredData,
    }

    const subject = await mount(<Component {...testProps} />)
    const numericResult = within(subject.getDOMNode())

    expect(numericResult.getTextContent()).to.include(userResponse)
  })

  it('displays correct answers in scientific notation and user responses in scientific notation', async () => {
    const userResponse = '1.23*10^-4'
    const correctAnswer = '1.23*10^-3'
    const scoredData = {
      value: {
        userResponse,
        correctAnswer,
        resultScore: 0,
      },
    }
    const testProps = {
      ...props,
      itemBody: 'What is 0.00123 in scientific notation?',
      scoredData,
    }

    const subject = await mount(<Component {...testProps} />)
    const numericResult = within(subject.getDOMNode())

    expect(numericResult.getTextContent()).to.include(`Correct Answer:${correctAnswer}`)
    expect(numericResult.getTextContent()).to.include(userResponse)
  })

  it('displays responses in e notation', async () => {
    const userResponse = '5e-1'
    const scoredData = {
      value: {
        userResponse,
        correctAnswer: userResponse,
        resultScore: 1,
      },
    }
    const testProps = {
      ...props,
      itemBody: 'What is 1 / 2 in e notation?',
      scoredData,
    }

    const subject = await mount(<Component {...testProps} />)
    const numericResult = within(subject.getDOMNode())

    expect(numericResult.getTextContent()).to.include(userResponse)
  })

  it('displays correct answers in scientific notation and user responses in e notation', async () => {
    const userResponse = '1.23e-4'
    const correctAnswer = '1.23*10^-3'
    const scoredData = {
      value: {
        userResponse,
        correctAnswer,
        resultScore: 0,
      },
    }
    const testProps = {
      ...props,
      itemBody: 'What is 0.00123 in scientific notation?',
      scoredData,
    }

    const subject = await mount(<Component {...testProps} />)
    const numericResult = within(subject.getDOMNode())

    expect(numericResult.getTextContent()).to.include(`Correct Answer:${correctAnswer}`)
    expect(numericResult.getTextContent()).to.include(userResponse)
  })

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

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