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

A React UI component Library for quiz interaction types.

import React from 'react'
import {render, screen} from '@testing-library/react'
import runAxeCheck from '@instructure/ui-axe-check'

import HotSpotShow from '../index'

const props = {
  itemBody: 'item body',
  interactionData: {
    imageUrl: 'https://i.ytimg.com/vi/LgkAebhJ7iE/maxresdefault.jpg',
  },
  scoringData: {
    value: {
      type: 'oval',
      coordinates: [
        {x: 0.6, y: 0.13},
        {x: 0.7, y: 0.2},
      ],
    },
  },
}

describe('HotSpot Show', () => {
  it('should render', () => {
    const {container} = render(<HotSpotShow {...props} />)
    expect(container.firstChild).toBeInTheDocument()
  })

  describe('rendering', () => {
    it('renders ItemBodyWrapper and TargetContainer', () => {
      const {container} = render(<HotSpotShow {...props} />)

      // ItemBodyWrapper renders the itemBody text
      expect(screen.getByText('item body')).toBeInTheDocument()

      // TargetContainer renders an image with the given url
      const image = container.querySelector('img')
      expect(image).toBeInTheDocument()
      expect(image.src).toBe(props.interactionData.imageUrl)
    })
  })

  describe('a11y tests', () => {
    it('should meet a11y standards', async () => {
      render(
        <main>
          <HotSpotShow {...props} />
        </main>,
      )
      expect(await runAxeCheck(document.body)).toBe(true)
    })
  })

  describe('readOnly tests', () => {
    // TODO: Cannot migrate to RTL - checkReadOnlyComponents walks React fiber tree to verify
    // InstUI component props, which is not feasible with RTL. Jira: QUIZ-XXXXX
    it.skip('should pass the readOnly prop to instui components', () => {})
  })
})