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

import React from 'react'
import {wrapState} from '../../../../tests/utils/wrapState'
import {mapStateToProps} from '../index'
import QuizSession from '@instructure/quiz-core/common/records/QuizSession'
import QuizSessionResult from '@instructure/quiz-core/common/records/QuizSessionResult'
import {setStoreProvider} from '@instructure/quiz-core/common/records/reduxRecord'
import AttemptHistory from '../presenter'
import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
import {render, screen} from '../../../../tests/utils/rtlRenderOverride'

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

  const restrictedAttemptHistory = [
    {
      authoritative: false,
      displayName: null,
      percentage: percentage,
      pointsPossible: null,
      score: null,
      quizSessionId: quizSessionId,
    },
  ]

  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},
    ],
  }

  const result = new QuizSessionResult({
    pointsPossible,
    score,
  })
  const fakeState = wrapState({
    quizSessions: {
      [quizSessionId]: {id: quizSessionId},
    },
  })

  beforeEach(() => {
    vi.spyOn(QuizSession.prototype, 'findAuthoritativeResult').mockReturnValue(result)
    setStoreProvider({getAppState: () => fakeState})
  })

  afterEach(() => {
    setStoreProvider(null)
  })

  describe('mapStateToProps', () => {
    it('returns collection of attempt history with data from consumer & core', () => {
      const mapped = mapStateToProps(fakeState, {attemptHistory: restrictedAttemptHistory})

      expect(QuizSession.prototype.findAuthoritativeResult).toHaveBeenCalled()
      expect(mapped.attemptHistory[0].quizSessionId).toEqual(quizSessionId)
      expect(mapped.attemptHistory[0].percentage).toEqual(percentage)
      expect(mapped.attemptHistory[0].pointsPossible).toEqual(pointsPossible)
      expect(mapped.attemptHistory[0].score).toEqual(score)
      expect(mapped.attemptHistory[0].authoritative).toEqual(false)
    })

    describe('when authoratativeAttempt is provided', () => {
      let findAuthoritativeAttempt
      beforeEach(() => {
        findAuthoritativeAttempt = vi.fn().mockImplementation(history => history[0])
      })
      it('uses authoratativeAttempt to determine the authoritative attempt', () => {
        const mapped = mapStateToProps(fakeState, {
          attemptHistory: restrictedAttemptHistory,
          findAuthoritativeAttempt,
        })
        expect(findAuthoritativeAttempt).toHaveBeenCalledOnce()
        expect(mapped.attemptHistory[0].authoritative).toEqual(true)
      })
    })
  })

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

    expect(screen.getByRole('heading', {name: /attempt history/i})).toBeInTheDocument()

    expect(screen.getByRole('table', {name: /attempt history/i})).toBeInTheDocument()

    expect(screen.getByRole('columnheader', {name: /results/i})).toBeInTheDocument()
    expect(screen.getByRole('cell', {name: /attempt 1/i})).toBeInTheDocument()

    expect(screen.getByRole('columnheader', {name: /points/i})).toBeInTheDocument()
    expect(screen.getByRole('cell', {name: /8 of 10/i})).toBeInTheDocument()

    expect(screen.getByRole('columnheader', {name: /^score$/i})).toBeInTheDocument()
    expect(screen.getByRole('cell', {name: /80%/i})).toBeInTheDocument()

    expect(
      screen.getByRole('columnheader', {name: /\(highest score is kept\)/i}),
    ).toBeInTheDocument()

    expect(screen.queryByRole('columnheader', {name: /grade/i})).not.toBeInTheDocument()
  })

  it('renders a letter grade when quantitative data is restricted', () => {
    render(<AttemptHistory {...defaultProps} restrictQuantitativeData />)

    expect(screen.getByRole('columnheader', {name: /grade/i})).toBeInTheDocument()
    expect(screen.getByRole('cell', {name: /^b$/i})).toBeInTheDocument()

    expect(screen.queryByRole('columnheader', {name: /points/i})).not.toBeInTheDocument()
    expect(screen.queryByRole('columnheader', {name: /^score$/i})).not.toBeInTheDocument()
  })

  it('renders multiple rows when there are multiple attempts', () => {
    render(
      <AttemptHistory
        {...defaultProps}
        attemptHistory={unrestrictedAttemptHistory.concat({
          authoritative: false,
          displayName: null,
          percentage: 0.5,
          pointsPossible: 10,
          score: 5,
          quizSessionId: '2',
        })}
      />,
    )

    // There is a header and two additional rows
    expect(screen.getAllByRole('row')).toHaveLength(3)
  })
})