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

A React UI component Library for quiz interaction types.

import {vi} from 'vitest'
import React from 'react'
import {render} from '@testing-library/react'

import {assertImageData} from '../../../common/Canvas/__tests__/CanvasTestHelpers'

import Target from '../index'

const handleSetCoordinatesStub = vi.fn()
const onSetStateStub = vi.fn()

const props = {
  coordinates: [{x: 10, y: 10}],
  height: 500,
  width: 700,
  handleSetCoordinates: handleSetCoordinatesStub,
}

describe('Target', () => {
  afterEach(() => {
    handleSetCoordinatesStub.mockClear()
    onSetStateStub.mockClear()
  })

  describe('#__getCoordinates', () => {
    it('returns coordinates given a click event', () => {
      const ref = React.createRef()
      render(<Target {...props} ref={ref} />)
      // Target is wrapped - access inner instance
      const instance = ref.current

      const e = {
        nativeEvent: {
          offsetX: 10,
          offsetY: 20,
        },
      }
      const targetCoordinates = instance.__getCoordinates(e)
      expect(targetCoordinates.length).toBe(1)

      expect(targetCoordinates[0].x).toBe(10)
      expect(targetCoordinates[0].y).toBe(20)
    })
  })

  // vitest-canvas-mock does not render actual pixels, so getImageData returns zeros.
  // Tests that assert positive pixel rendering are skipped.
  // TODO: QUIZ-17438 - Investigate alternative canvas testing approach
  describe('#__drawEllipse', () => {
    it.skip('draws a ellipsis on canvas based on the given values', () => {
      const ref = React.createRef()
      render(<Target {...props} ref={ref} />)
      const instance = ref.current
      instance.canvas.clearCanvas()

      instance.__drawEllipse(1, 1, 10, 10)

      const ctx = instance.canvas.canvasElement.getContext('2d')

      // all points form pointA.x to pointB.x
      const imageData = ctx.getImageData(10, 10, 1, 1)
      assertImageData(imageData, true)
    })
  })

  describe('#drawShape', () => {
    it.skip('draws inner and outer circles on canvas based on the given coordinates', () => {
      const ref = React.createRef()
      render(<Target {...props} ref={ref} />)
      const instance = ref.current
      instance.canvas.clearCanvas()

      const coordinates = [{x: 10, y: 20}]

      instance.drawShape(coordinates)

      const ctx = instance.canvas.canvasElement.getContext('2d')

      // center of the target
      const imageData = ctx.getImageData(10, 20, 1, 1)
      assertImageData(imageData, true)

      // top of the outer target
      const externalGap = 10
      const imageDataOuterTop = ctx.getImageData(10, 20 - externalGap, 1, 1)
      assertImageData(imageDataOuterTop, true)

      const imageDataOuterBottom = ctx.getImageData(10, 20 + externalGap, 1, 1)
      assertImageData(imageDataOuterBottom, true)

      const imageDataOuterLeft = ctx.getImageData(10 - externalGap, 20, 1, 1)
      assertImageData(imageDataOuterLeft, true)

      const imageDataOuterRight = ctx.getImageData(10 + externalGap, 20, 1, 1)
      assertImageData(imageDataOuterRight, true)
    })
    it('does nothing when multiple coordinates are provided', () => {
      const ref = React.createRef()
      render(<Target {...props} ref={ref} />)
      const instance = ref.current
      instance.canvas.clearCanvas()

      const coordinates = [
        {x: 10, y: 20},
        {x: 30, y: 40},
      ]
      instance.drawShape(coordinates)

      const ctx = instance.canvas.canvasElement.getContext('2d')

      // Validate that nothing was drawn on the canvas
      const imageData = ctx.getImageData(10, 20, 1, 1)
      assertImageData(imageData, false)
    })
    it('does nothing when drawShape is called with no arguments', () => {
      const ref = React.createRef()
      render(<Target {...props} ref={ref} />)
      const instance = ref.current
      instance.canvas.clearCanvas()

      instance.drawShape()

      const ctx = instance.canvas.canvasElement.getContext('2d')

      const imageData = ctx.getImageData(0, 0, 1, 1)
      assertImageData(imageData, false)
    })
  })

  describe('actions', () => {
    describe('onMouseUp', () => {
      it('updates coordinates and state', () => {
        const ref = React.createRef()
        render(<Target {...props} ref={ref} />)
        const instance = ref.current
        instance.canvas.setState = onSetStateStub

        instance.onMouseUp({
          nativeEvent: {offsetX: 5, offsetY: 6},
        })

        const newCoordinates = handleSetCoordinatesStub.mock.calls[0][0]
        const newState = onSetStateStub.mock.calls[0][0]

        expect(newCoordinates.length).toBe(1)

        expect(newCoordinates[0].x).toBe(5)
        expect(newCoordinates[0].y).toBe(6)

        expect(newState.isDrawing).toBe(false)
      })
    })

    describe('onMouseOut', () => {
      it('does not update coordinates and state', () => {
        const ref = React.createRef()
        render(<Target {...props} ref={ref} />)
        const instance = ref.current
        instance.canvas.setState = onSetStateStub

        instance.onMouseOut()

        expect(handleSetCoordinatesStub).not.toHaveBeenCalled()
        expect(onSetStateStub).not.toHaveBeenCalled()
      })
    })
  })
})