@instructure/quiz-taking/src/components/AttemptHistory/__tests__/MobileAttemptHistory.test.js

import React from 'react'
import {describe, expect, vi} from 'vitest'
import AttemptHistory from '../presenter'
import {render, screen} from '../../../../tests/utils/rtlRenderOverride'

vi.mock('@instructure/ui-responsive', async original => {
  const actual = await original()

  return {
    ...actual,
    Responsive: ({children}) => children({layout: 'stacked'}),
  }
})

describe('AttemptHistory on mobile', () => {
  const percentage = 0.8
  const pointsPossible = '10'
  const quizSessionId = '1'
  const score = '8'

  const unrestrictedAttemptHistory = [
    {
      authoritative: false,
      displayName: null,
      percentage: Number.parseFloat(percentage),
      pointsPossible: Number.parseInt(pointsPossible),
      score: Number.parseInt(score),
      quizSessionId: quizSessionId,
    },
  ]

  const defaultProps = {
    attemptHistory: unrestrictedAttemptHistory,
    quizId: '1',
    scoreToKeep: 'highest',
    selectedSessionId: '1',
    getQuizSessions: vi.fn(),
    gradingScheme: [
      {name: 'A', value: 0.9},
      {name: 'B', value: 0.8},
      {name: 'C', value: 0.7},
      {name: 'D', value: 0.6},
      {name: 'F', value: 0.0},
    ],
  }

  it('renders the table correctly', () => {
    render(<AttemptHistory {...defaultProps} />)

    expect(screen.getByRole('table', {name: /attempt history/i})).toBeInTheDocument()
    expect(screen.getByRole('cell', {name: /results: attempt 1/i})).toBeInTheDocument()
    expect(screen.getByRole('cell', {name: /points: 8 of 10/i})).toBeInTheDocument()
    expect(screen.getByRole('cell', {name: /score: 80%/i})).toBeInTheDocument()
    expect(screen.getByRole('cell', {name: /\(highest score is kept\)/i})).toBeInTheDocument()
  })
})