@instructure/quiz-grading/src/components/layout/Sidebar/SidebarItem/__tests__/presenter.test.js

The Quiz React SDK by Instructure Inc.

import React from 'react'
import {render, screen} from '../../../../../../tests/utils/rtlRenderOverride'
import {describe, it, expect, vi} from 'vitest'
import {GradingSidebarItem as SidebarItem} from '../presenter'
import runAxeCheck from '@instructure/ui-axe-check'

describe('Grading SidebarItem Presenter', () => {
  const pinSessionItemStub = vi.fn()

  const defaultProps = {
    isAnswered: false,
    isGraded: true,
    itemBody: 'Hi',
    itemName: 'MultipleChoice',
    pinSessionItem: pinSessionItemStub,
    pointsPossible: 1,
    position: 1,
    sessionItemId: '5',
    sidebarOpen: true,
    scrollToItem: () => {},
  }

  it('renders common sidebarItem', () => {
    render(<SidebarItem {...defaultProps} />)
    expect(screen.getByText(/multiplechoice/i)).toBeInTheDocument()
  })

  it('sends sessionItemId as itemId to common sidebarItem', () => {
    render(<SidebarItem {...defaultProps} />)
    expect(screen.getByRole('link', {name: /navigate to question at position 1/i})).toHaveAttribute(
      'data-automation-item-id',
      '5',
    )
  })

  describe('with ungraded item', () => {
    it('does render a dot', () => {
      const {container} = render(<SidebarItem {...defaultProps} isGraded={false} />)
      expect(container.querySelector('.needsGradingDot')).toBeInTheDocument()
    })

    it('renders a SR message', () => {
      render(<SidebarItem {...defaultProps} isGraded={false} />)
      expect(screen.getByText(/Question at position 1 needs grading/)).toBeInTheDocument()
    })

    it('applies style when in stimulus and sidebarOpen', () => {
      const {container} = render(
        <SidebarItem {...defaultProps} isGraded={false} sidebarOpen={true} inStimulus={true} />,
      )
      expect(container.querySelector('.needsGradingDot')).toBeInTheDocument()
    })
  })

  describe('with graded item', () => {
    it('does not render a dot', () => {
      const {container} = render(<SidebarItem {...defaultProps} isGraded={true} />)
      expect(container.querySelector('.needsGradingDot')).not.toBeInTheDocument()
    })

    it('renders a SR message', () => {
      render(<SidebarItem {...defaultProps} isGraded={true} />)
      expect(screen.getByText(/Question at position 1 is graded/)).toBeInTheDocument()
    })
  })

  describe('a11y tests', () => {
    it('should meet a11y standards', async () => {
      render(<SidebarItem {...defaultProps} />)
      expect(
        await runAxeCheck(document.body, {
          ignores: ['aria-tooltip-name', 'region'],
        }),
      ).toBe(true)
    })
  })
})