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

A React UI component Library for quiz interaction types.

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

describe('Canvas', () => {
  const handleSetCoordinatesStub = vi.fn()
  const props = {
    coordinates: [
      {x: 10, y: 10},
      {x: 20, y: 20},
    ],
    height: 500,
    handleSetCoordinates: handleSetCoordinatesStub,
    width: 700,
    drawShape: () => {},
  }

  // Canvas is wrapped by withStyleOverrides HOC; use originalType to get the raw class
  const CanvasRaw = Canvas.originalType

  afterEach(() => {
    handleSetCoordinatesStub.mockClear()
  })

  it('should render', () => {
    const {container} = render(<CanvasRaw {...props} makeStyles={vi.fn()} styles={{}} />)
    expect(container.firstChild).toBeDefined()
  })

  describe('rendering', () => {
    it('should render a canvas', () => {
      const {container} = render(<CanvasRaw {...props} makeStyles={vi.fn()} styles={{}} />)
      const canvas = container.querySelectorAll('canvas')[0]

      expect(canvas).toBeDefined()
    })
  })

  describe('Helpers', () => {
    describe('#isDrawing', () => {
      it('returns the current state value', () => {
        const ref = React.createRef()
        render(<CanvasRaw {...props} makeStyles={vi.fn()} styles={{}} ref={ref} />)

        const isDrawing = ref.current.isDrawing()
        expect(isDrawing).toBe(false)
      })
    })

    describe('#getInitialCoordinate', () => {
      it('returns the intial coordinate', () => {
        const ref = React.createRef()
        render(<CanvasRaw {...props} makeStyles={vi.fn()} styles={{}} ref={ref} />)

        const initialCoordinate = ref.current.getInitialCoordinate()
        expect(initialCoordinate.x).toBe(10)
        expect(initialCoordinate.y).toBe(10)
      })
    })

    describe('#getLastCoordinate', () => {
      it('returns the last coordinate', () => {
        const ref = React.createRef()
        render(<CanvasRaw {...props} makeStyles={vi.fn()} styles={{}} ref={ref} />)

        const lastCoordinate = ref.current.getLastCoordinate()
        expect(lastCoordinate.x).toBe(20)
        expect(lastCoordinate.y).toBe(20)
      })
    })

    describe('#getCurrentCoordinates', () => {
      it('fetches data from event and return an object ', () => {
        const ref = React.createRef()
        render(<CanvasRaw {...props} makeStyles={vi.fn()} styles={{}} ref={ref} />)

        const currentCoord = ref.current.getCurrentCoordinates({
          nativeEvent: {
            offsetX: 1,
            offsetY: 2,
          },
        })

        expect(currentCoord.x).toBe(1)
        expect(currentCoord.y).toBe(2)
      })
    })

    describe('#focus', () => {
      it('sets focus on canvas', () => {
        const ref = React.createRef()
        render(<CanvasRaw {...props} makeStyles={vi.fn()} styles={{}} ref={ref} />)

        ref.current.focus()
        expect(document.activeElement.tagName).toBe('CANVAS')
      })
    })

    describe('#refCanvas', () => {
      it('adds node ref in the component', () => {
        const ref = React.createRef()
        render(<CanvasRaw {...props} makeStyles={vi.fn()} styles={{}} ref={ref} />)

        const node = <div className="test" />
        ref.current.refCanvas(node)
        expect(ref.current.canvasElement.props.className).toBe('test')
      })
    })
  })

  describe('Actions', () => {
    describe('#setStrokeStyle', () => {
      it('sets stroke style', () => {
        const ref = React.createRef()
        render(
          <CanvasRaw {...props} makeStyles={vi.fn()} styles={{shapeColor: 'blue'}} ref={ref} />,
        )

        const ctx = ref.current.canvasElement.getContext('2d')
        ctx.strokeStyle = 'red'

        ref.current.setStrokeStyle()
        expect(ctx.strokeStyle).not.toBe('red')
      })
    })

    describe('#setFillStyle', () => {
      it('sets fill style and alpha', () => {
        const ref = React.createRef()
        render(
          <CanvasRaw {...props} makeStyles={vi.fn()} styles={{shapeColor: 'blue'}} ref={ref} />,
        )

        const ctx = ref.current.canvasElement.getContext('2d')
        ctx.globalAlpha = 1
        ctx.fillStyle = 'red'

        ref.current.setFillStyle()
        expect(ctx.globalAlpha).toBe(0.5)
        expect(ctx.fillStyle).not.toBe('red')
      })
    })

    describe('#startDrawing', () => {
      it('sets the initial drawing coordinates', () => {
        const ref = React.createRef()
        render(<CanvasRaw {...props} makeStyles={vi.fn()} styles={{}} ref={ref} />)

        const onSetStateStub = vi.fn()
        ref.current.setState = onSetStateStub

        ref.current.startDrawing({
          nativeEvent: {
            offsetX: 30,
            offsetY: 40,
          },
        })

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

        expect(newCoordinates.length).toBe(1)
        expect(newCoordinates[0].x).toBe(30)
        expect(newCoordinates[0].y).toBe(40)

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

    describe('#stopDrawing', () => {
      it('updates the drawing coordinates ', () => {
        const ref = React.createRef()
        render(<CanvasRaw {...props} makeStyles={vi.fn()} styles={{}} ref={ref} />)

        const onSetStateStub = vi.fn()
        ref.current.setState = onSetStateStub

        ref.current.stopDrawing([
          {x: 10, y: 10},
          {x: 20, y: 20},
        ])

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

        expect(newCoordinates.length).toBe(2)

        expect(newCoordinates[0].x).toBe(10)
        expect(newCoordinates[0].y).toBe(10)

        expect(newCoordinates[1].x).toBe(20)
        expect(newCoordinates[1].y).toBe(20)

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