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

A React UI component Library for quiz interaction types.

import shouldRenderComponent from '../../../../../tests/util/render-checks'
import {Popover} from '@instructure/ui-popover'

import {ItemBodyWrapper} from '@instructure/quiz-rce/components/ItemBodyWrapper/index'

import TargetContainer from '../../common/TargetContainer'
import FeedbackPopover from '../FeedbackPopover'
import HotSpotResult from '../index'
import {ReactTestbed} from '../../../../../tests/util/react-testbed'

const coordinates = [
  {x: 0.1, y: 0.3},
  {x: 0.2, y: 0.2},
]

const userResponseCoordinates = {x: 0.5, y: 0.5, correct: true}

const props = {
  itemBody: 'item body',
  interactionData: {
    imageUrl: 'https://i.ytimg.com/vi/LgkAebhJ7iE/maxresdefault.jpg',
  },
  scoredData: {
    value: {
      resultScore: 0,
      userResponse: [userResponseCoordinates],
      correctAnswer: {value: [{type: 'square', coordinates}]},
    },
  },
}

describe('HotSpot Result', () => {
  const testbed = new ReactTestbed(HotSpotResult, props)

  shouldRenderComponent(testbed, {}, HotSpotResult)

  describe('rendering', () => {
    it('renders ItemBodyWrapper and TargetContainer', () => {
      testbed.render()
      const itemBodyWrapper = testbed.findChildrenByType(ItemBodyWrapper)
      const targetContainer = testbed.findChildrenByType(TargetContainer)
      expect(itemBodyWrapper.length).toBe(1)
      expect(targetContainer.length).toBe(1)
    })

    it('renders Popover components ', () => {
      testbed.render()
      const position = testbed.findChildrenByType(Popover)
      expect(position.length).toBe(2)
    })
  })

  describe('Helpers', () => {
    it('#renderScoringDataFeedbackPolygon', () => {
      testbed.render()
      const hotSpotResult = testbed.findChildByType(HotSpotResult)
      const feedbackPopover = hotSpotResult.renderScoringDataFeedbackPolygon(coordinates, false)
      expect(feedbackPopover.props.coordinates).toEqual({
        x: coordinates[1].x,
        y: coordinates[1].y,
      })
      expect(feedbackPopover.props.status).toBe('correct')
    })

    it('#renderScoringDataFeedbackOval', () => {
      testbed.render()
      const hotSpotResult = testbed.findChildByType(HotSpotResult)
      const feedbackPopover = hotSpotResult.renderScoringDataFeedbackOval(coordinates, false)
      expect(feedbackPopover.props.coordinates.y).toEqual(coordinates[1].y)
      expect(feedbackPopover.props.status).toBe('correct')
    })

    it('#renderScoringDataFeedbackSquare', () => {
      testbed.render()
      const hotSpotResult = testbed.findChildByType(HotSpotResult)
      const feedbackPopover = hotSpotResult.renderScoringDataFeedbackSquare(coordinates, false)
      const middleOfX = (coordinates[0].x + coordinates[1].x) / 2
      expect(feedbackPopover.props.coordinates).toEqual({x: middleOfX, y: coordinates[1].y})
      expect(feedbackPopover.props.status).toBe('correct')
    })

    it('correctly computes userResponse when correct key exists', () => {
      testbed.render({
        scoredData: {
          value: {
            resultScore: 1,
            userResponse: [{x: 0.5, y: 0.5, correct: true}],
          },
        },
      })
      const hotSpotResult = testbed.findChildByType(HotSpotResult)
      expect(hotSpotResult.userResponse).toEqual([{x: 0.5, y: 0.5, correct: 'correct'}])
    })

    it('correctly computes userResponse when correct key does not exist', () => {
      testbed.render({
        scoredData: {
          value: {
            resultScore: 0,
            userResponse: [{x: 0.5, y: 0.5}],
          },
        },
      })
      const hotSpotResult = testbed.findChildByType(HotSpotResult)
      expect(hotSpotResult.userResponse).toEqual([{x: 0.5, y: 0.5, correct: 'incorrect'}])
    })

    it('returns unknown status when resultScore is missing', () => {
      testbed.render({
        scoredData: {
          value: {
            userResponse: [{x: 0.5, y: 0.5}],
          },
        },
      })
      const hotSpotResult = testbed.findChildByType(HotSpotResult)
      expect(hotSpotResult.status).toBe('unknown')
    })

    it('returns correct status when resultScore is 1', () => {
      testbed.render({
        scoredData: {
          value: {
            resultScore: 1,
          },
        },
      })
      const hotSpotResult = testbed.findChildByType(HotSpotResult)
      expect(hotSpotResult.status).toBe('correct')
    })

    it('returns incorrect status when resultScore is 0', () => {
      testbed.render({
        scoredData: {
          value: {
            resultScore: 0,
          },
        },
      })
      const hotSpotResult = testbed.findChildByType(HotSpotResult)
      expect(hotSpotResult.status).toBe('incorrect')
    })

    it('renders FeedbackPopover when answer is incorrect', () => {
      testbed.render()
      const hotSpotResult = testbed.findChildByType(HotSpotResult)
      const feedbackPopover = hotSpotResult.renderUserResponseFeedback(
        userResponseCoordinates,
        false,
        'incorrect',
      )
      expect(feedbackPopover.props.coordinates).toEqual(userResponseCoordinates)
      expect(feedbackPopover.props.text).toBe('Selected Answer - Incorrect')
      expect(feedbackPopover.props.status).toBe('incorrect')
    })

    it('renders FeedbackPopover when answer is correct', () => {
      testbed.render({
        scoredData: {
          value: {
            resultScore: 1,
            userResponse: [userResponseCoordinates],
            correctAnswer: {value: [{type: 'square', coordinates}]},
          },
        },
      })
      const hotSpotResult = testbed.findChildByType(HotSpotResult)
      const feedbackPopover = hotSpotResult.renderUserResponseFeedback(
        userResponseCoordinates,
        false,
        'correct',
      )
      expect(feedbackPopover.props.coordinates).toEqual(userResponseCoordinates)
      expect(feedbackPopover.props.text).toBe('Selected Answer - Correct')
      expect(feedbackPopover.props.status).toBe('correct')
    })

    it('renders FeedbackPopover when no response given', () => {
      testbed.render({
        scoredData: {
          value: {
            resultScore: 0,
            userResponse: null,
            correctAnswer: {value: [{type: 'square', coordinates}]},
          },
        },
      })
      expect(testbed.findChildrenByType(FeedbackPopover).length).toBe(1)
    })

    it('renders FeedbackPopover when there is no correctAnswer', () => {
      testbed.render({
        scoredData: {
          value: {
            resultScore: 0,
            userResponse: [userResponseCoordinates],
            correctAnswer: null,
          },
        },
      })
      expect(testbed.findChildrenByType(FeedbackPopover).length).toBe(1)
    })
  })

  describe('a11y tests', () => {
    it('should meet a11y standards', async () => {
      testbed.render({})
      await testbed.checkA11yStandards()
    })
  })
})