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

A React UI component Library for quiz interaction types.

import HotSpotInteractionType from '../hotspot'
import checkUserResponseTransform from '../../__tests__/sharedRecordTests'

describe('HotSpotInteractionType', () => {
  const HotSpotRecord = HotSpotInteractionType
  const intType = new HotSpotRecord()

  describe('#getDefaultInteractionData', () => {
    it('returns the expected interaction data', () => {
      const intData = intType.getDefaultInteractionData()
      const expectedIntData = {}

      expect(intData).toEqual(expectedIntData)
    })
  })

  describe('#getDefaultScoringData', () => {
    it('returns a blank value array', () => {
      const scoringData = intType.getDefaultScoringData()
      const expectedScoringData = {value: []}

      expect(scoringData).toEqual(expectedScoringData)
    })
  })

  describe('#validations', () => {
    const errorsGivenData = data => {
      const intType = new HotSpotRecord()
      return intType.getErrors(data)
    }

    describe('with multiple_hotspot_selections feature flag enabled', () => {
      it('errors without an image url', () => {
        const noUrlData = {
          interactionData: {imageUrl: null},
          scoringData: {value: []},
        }

        const imageError = errorsGivenData(noUrlData).interactionData.imageUrl[0]
        expect(imageError).toBe('Image cannot be blank')
      })

      it('errors without a hotspot type in each hotspot entry', () => {
        const noTypeData = {
          interactionData: {imageUrl: 'some-url'},
          scoringData: {value: [{}]},
        }

        const typeError = errorsGivenData(noTypeData).scoringData.value[0].type[0]
        expect(typeError).toBe('You must select a hotspot type')
      })

      const errorsWithoutCoordinates = type => {
        it(`errors without coordinates for ${type}`, () => {
          const noCoordinatesData = {
            interactionData: {imageUrl: 'some-url'},
            scoringData: {value: [{type, coordinates: []}]},
          }

          const coordError = errorsGivenData(noCoordinatesData).scoringData.value[0].coordinates[0]
          expect(coordError).toBe('You must draw a hotspot')
        })

        it(`errors with a single coordinate for ${type}`, () => {
          const oneCoordinateData = {
            interactionData: {imageUrl: 'some-url'},
            scoringData: {value: [{type, coordinates: [{x: 1, y: 1}]}]},
          }

          const coordError = errorsGivenData(oneCoordinateData).scoringData.value[0].coordinates[0]
          expect(coordError).toBe('You must draw a hotspot')
        })
      }

      const noErrorWithTwoCoordinates = type => {
        it(`does not error with two coordinates for ${type}`, () => {
          const twoCoordData = {
            interactionData: {imageUrl: 'some-url'},
            scoringData: {
              value: [
                {
                  type,
                  coordinates: [
                    {x: 0, y: 0},
                    {x: 1, y: 1},
                  ],
                },
              ],
            },
          }

          const sdErrors = errorsGivenData(twoCoordData).scoringData
          expect(sdErrors).toBeUndefined()
        })
      }

      describe('square', () => {
        errorsWithoutCoordinates('square')
        noErrorWithTwoCoordinates('square')
      })

      describe('oval', () => {
        errorsWithoutCoordinates('oval')
        noErrorWithTwoCoordinates('oval')
      })

      describe('polygon', () => {
        errorsWithoutCoordinates('polygon')

        it('errors with two coordinates for polygon', () => {
          const twoCoordData = {
            interactionData: {imageUrl: 'some-url'},
            scoringData: {
              value: [
                {
                  type: 'polygon',
                  coordinates: [
                    {x: 0, y: 0},
                    {x: 1, y: 1},
                  ],
                },
              ],
            },
          }

          const coordError = errorsGivenData(twoCoordData).scoringData.value[0].coordinates[0]
          expect(coordError).toBe('You must draw a hotspot')
        })

        it('does not error with three coordinates for polygon', () => {
          const threeCoordData = {
            interactionData: {imageUrl: 'some-url'},
            scoringData: {
              value: [
                {
                  type: 'polygon',
                  coordinates: [
                    {x: 0, y: 0},
                    {x: 0, y: 0.5},
                    {x: 1, y: 1},
                  ],
                },
              ],
            },
          }

          const sdErrors = errorsGivenData(threeCoordData).scoringData
          expect(sdErrors).toBeUndefined()
        })
      })
    })

    describe('with multiple_hotspot_selections feature flag disabled', () => {
      it('errors without an image url', () => {
        const noUrlData = {
          interactionData: {imageUrl: null},
          scoringData: {value: {type: 'square', coordinates: []}},
        }

        const imageError = errorsGivenData(noUrlData).interactionData.imageUrl[0]
        expect(imageError).toBe('Image cannot be blank')
      })

      it('errors without a hotspot type', () => {
        const noTypeData = {
          interactionData: {imageUrl: null},
          scoringData: {value: {}},
        }

        const typeError = errorsGivenData(noTypeData).scoringData.value.type[0]
        expect(typeError).toBe('You must select a hotspot type')
      })

      describe('polygon', () => {
        it('errors with two coordinates', () => {
          const twoCoordData = {
            interactionData: {imageUrl: null},
            scoringData: {
              value: {
                type: 'polygon',
                coordinates: [
                  {x: 0, y: 0},
                  {x: 1, y: 1},
                ],
              },
            },
          }

          const coordError = errorsGivenData(twoCoordData).scoringData.value.coordinates[0]
          expect(coordError).toBe('You must draw a hotspot')
        })

        it('does not error with three coordinates', () => {
          const threeCoordData = {
            interactionData: {imageUrl: null},
            scoringData: {
              value: {
                type: 'polygon',
                coordinates: [
                  {x: 0, y: 0},
                  {x: 0, y: 0.5},
                  {x: 1, y: 1},
                ],
              },
            },
          }

          const sdErrors = errorsGivenData(threeCoordData).scoringData
          expect(sdErrors).toBeUndefined()
        })
      })
    })
  })

  describe('#hasResponse', () => {
    it('returns true when there is a response', () => {
      const resp = [{x: 0.3, y: 0.3}]
      expect(intType.hasResponse(resp)).toBe(true)
    })

    it('returns false when there is no response', () => {
      const resp = null
      expect(intType.hasResponse(resp)).toBe(false)
    })
  })

  const response = {
    interactionData: {imageUrl: 'http://someexample.docker'},
    response: {x: 0.1, y: 0.1},
    expected: 0.1,
  }
  const invalidResponse = {
    interactionData: {imageUrl: 'http://someexample.docker'},
    response: {x1: 0.1, y: 0.1},
    expected: void 0,
  }
  checkUserResponseTransform(
    new HotSpotInteractionType(),
    response,
    invalidResponse,
    out => out.props.coordinates[0].x,
  )
})