@instructure/quiz-interactions/src/components/hotspot/Result/FeedbackPopover/__tests__/index.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 FeedbackPopover from '../index'

describe('FeedbackPopover', () => {
  const props = {
    coordinates: {x: 0.5, y: 0.5},
    flipVertically: false,
  }

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

  describe('rendering', () => {
    it('renders when correct', () => {
      render(<FeedbackPopover {...props} status="correct" text="Correct" />)
      expect(screen.getByText('Correct')).toBeInTheDocument()
    })

    it('renders when incorrect', () => {
      render(<FeedbackPopover {...props} status="incorrect" text="Incorrect" />)
      expect(screen.getByText('Incorrect')).toBeInTheDocument()
    })

    it('renders when unknown', () => {
      render(<FeedbackPopover {...props} status="unknown" text="Unknown" />)
      expect(screen.getByText('Unknown')).toBeInTheDocument()
    })
  })

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