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

import React from 'react'
import {render, screen} from '../../../../../../tests/utils/rtlRenderOverride'
import {TakingSidebarItem as SidebarItem} from '../presenter'
import QuizSession from '@instructure/quiz-core/common/records/QuizSession'
import {beforeEach, describe, expect, it, vi} from 'vitest'
import runAxeCheck from '@instructure/ui-axe-check'
import {hexToRgb} from '../../../../../../tests/utils/hexToRgb'
import canvas from '@instructure/ui-themes'
import userEvent from '@testing-library/user-event'

describe('Taking SidebarItem Presenter', () => {
  let pinSessionItemStub

  const defaultProps = {
    isPinned: false,
    isAnswered: false,
    itemBody: 'Hi',
    itemName: 'MultipleChoice',
    pinSessionItem: pinSessionItemStub,
    pointsPossible: 1,
    position: 1,
    quizEntryId: '5',
    quizSession: new QuizSession({id: '1'}),
    sidebarOpen: true,
    scrollToItem: () => {},
    screenreaderNotification: () => {},
  }

  beforeEach(() => {
    pinSessionItemStub = vi.fn().mockResolvedValue()
  })

  it('renders common sidebarItem', () => {
    render(<SidebarItem {...defaultProps} />)
    expect(
      screen.getByRole('link', {name: /navigate to question at position 1/i}),
    ).toBeInTheDocument()
  })

  it('sends quizEntryId 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',
    )
  })

  it('renders pins', () => {
    render(<SidebarItem {...defaultProps} />)
    expect(screen.getByRole('button', {name: /click to pin/i})).toBeInTheDocument()
  })

  it('pins item when clicked', () => {
    render(<SidebarItem {...defaultProps} pinSessionItem={pinSessionItemStub} />)
    userEvent.click(screen.getByRole('button', {name: /click to pin/i}))
    expect(pinSessionItemStub).toHaveBeenCalled()
  })

  describe('with unanswered item', () => {
    it('does render a dot', () => {
      const {container} = render(<SidebarItem {...defaultProps} isAnswered={false} />)
      expect(
        container.querySelector('[data-automation="sdk-take-sidebar-item-unanswered-dot"]'),
      ).not.toBeNull()
    })

    it('renders a link with screen reader message', () => {
      render(<SidebarItem {...defaultProps} isAnswered={false} />)
      expect(
        screen.getByRole('link', {name: /navigate to question at position 1, unanswered/i}),
      ).toBeInTheDocument()
    })

    it('applies style when in stimulus and sidebarOpen', () => {
      const {container} = render(
        <SidebarItem {...defaultProps} isAnswered={false} sidebarOpen inStimulus />,
      )

      expect(
        window.getComputedStyle(
          container.querySelector('[data-automation="sdk-take-sidebar-item-unanswered-dot"]'),
        ).backgroundColor,
      ).toEqual(hexToRgb(canvas.colors.contrasts.grey4570))
    })
  })

  describe('with answered item', () => {
    it('does not render a dot', () => {
      const {container} = render(<SidebarItem {...defaultProps} isAnswered />)
      expect(
        container.querySelector('[data-automation="sdk-take-sidebar-item-unanswered-dot"]'),
      ).toBeNull()
    })

    it('renders a link with screen reader message', () => {
      render(<SidebarItem {...defaultProps} isAnswered />)
      expect(
        screen.getByRole('link', {name: /navigate to question at position 1/i}),
      ).toBeInTheDocument()
      expect(screen.queryByText(/unanswered/i)).not.toBeInTheDocument()
    })
  })

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