@instructure/quiz-core 22.17.0 → 22.18.0

package/src/moderating/components/resources/AccommodationsModal/index.js

@@ -0,0 +1,159 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import {Tooltip} from '@instructure/ui-tooltip'
+import {Modal} from '@instructure/ui-modal'
+import {TruncateText} from '@instructure/ui-truncate-text'
+import {Heading} from '@instructure/ui-heading'
+import {View} from '@instructure/ui-view'
+import {Button, CloseButton} from '@instructure/ui-buttons'
+import t from '@instructure/quiz-i18n/format-message'
+import {ScreenReaderContent} from '@instructure/ui-a11y-content'
+
+export class AccommodationModal extends Component {
+  static propTypes = {
+    closeModal: PropTypes.func.isRequired,
+    open: PropTypes.bool.isRequired,
+    studentName: PropTypes.string,
+    onSubmit: PropTypes.func,
+    onDismiss: PropTypes.func,
+    mountNode: PropTypes.string, // this is just to fix chromatic
+    children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+    atteqApplyChangesToCurrentQuizAttemptsEnabled: PropTypes.bool.isRequired,
+  }
+
+  static defaultProps = {
+    children: [],
+    ellipsis: null, // placeholder for when different ellipsis are needed (ellipsis language-dependent)
+    mountNode: null,
+    onSubmit: null,
+    onDismiss: null,
+    studentName: null,
+  }
+
+  state = {
+    isTruncated: false,
+  }
+
+  handleUpdate = isTruncated => {
+    if (this.state.isTruncated !== isTruncated) {
+      this.setState({
+        isTruncated,
+      })
+    }
+  }
+
+  handleAccommodationsModalExited = () => {
+    this.setState({
+      isTruncated: false,
+    })
+  }
+
+  renderName = renderProps => {
+    const focused = renderProps && renderProps.focused
+    return (
+      <View
+        aria-hidden="true"
+        display="inline-block"
+        borderRadius="small"
+        position="relative"
+        withFocusOutline={this.state.isTruncated && focused}
+        as="div"
+        tabIndex={this.state.isTruncated ? 0 : null}
+      >
+        <TruncateText maxLines={2} truncate="character" onUpdate={this.handleUpdate}>
+          {this.props.studentName}
+        </TruncateText>
+      </View>
+    )
+  }
+
+  renderHeading = () => {
+    if (this.props.atteqApplyChangesToCurrentQuizAttemptsEnabled) {
+      return (
+        <Heading>
+          <ScreenReaderContent>{t('Course Accommodation')}</ScreenReaderContent>
+          {t('Course Accommodation')}
+        </Heading>
+      )
+    }
+
+    const {mountNode, studentName} = this.props
+    if (!studentName) {
+      return
+    }
+
+    return (
+      <Heading>
+        <ScreenReaderContent>{studentName}</ScreenReaderContent>
+        {this.state.isTruncated ? (
+          <Tooltip renderTip={studentName} mountNode={mountNode}>
+            {this.renderName}
+          </Tooltip>
+        ) : (
+          this.renderName()
+        )}
+      </Heading>
+    )
+  }
+
+  labelText() {
+    if (this.props.atteqApplyChangesToCurrentQuizAttemptsEnabled) {
+      return t('Course Accommodation')
+    }
+
+    return this.props.studentName || t('Accommodations Modal')
+  }
+
+  saveAction = () => {
+    this.props.onSubmit && this.props.onSubmit()
+    this.props.closeModal()
+  }
+
+  cancelAction = () => {
+    this.props.onDismiss && this.props.onDismiss()
+    this.props.closeModal()
+  }
+
+  render() {
+    const {open, closeModal, mountNode, children} = this.props
+    return (
+      <Modal
+        open={open}
+        label={this.labelText()}
+        mountNode={mountNode}
+        size="small"
+        onExited={this.handleAccommodationsModalExited}
+      >
+        <Modal.Header>
+          <CloseButton
+            onClick={closeModal}
+            placement="end"
+            offset="medium"
+            screenReaderLabel={t('Close')}
+          />
+          {this.renderHeading()}
+        </Modal.Header>
+        <Modal.Body>{children}</Modal.Body>
+        <Modal.Footer>
+          <Button
+            onClick={this.cancelAction}
+            margin="xxx-small"
+            data-automation="sdk-moderation-cancel"
+          >
+            {t('Cancel')}
+          </Button>
+          <Button
+            color="primary"
+            onClick={this.saveAction}
+            margin="xxx-small"
+            data-automation="sdk-moderation-save"
+          >
+            {t('Save')}
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    )
+  }
+}
+
+export default AccommodationModal

package/src/moderating/components/resources/ElapsedTime.js

@@ -0,0 +1,48 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import t from '@instructure/quiz-i18n/format-message'
+import {withI18nSupport} from '@instructure/quiz-common/with-i18n-support'
+
+export class ElapsedTime extends withI18nSupport(Component) {
+  static propTypes = {
+    eventTime: PropTypes.instanceOf(Date).isRequired,
+    startTime: PropTypes.instanceOf(Date).isRequired,
+    locale: PropTypes.string,
+  }
+
+  static defaultProps = {
+    locale: null,
+  }
+
+  static contextTypes = {
+    locale: PropTypes.string,
+  }
+
+  render() {
+    const {eventTime, startTime} = this.props
+    const difference = eventTime - startTime
+    const totalSeconds = difference / 1000
+    const hours = Math.floor(totalSeconds / 3600)
+    const remainder = totalSeconds - hours * 3600
+    const minutes = Math.floor(remainder / 60)
+    const seconds = remainder - minutes * 60
+
+    // Intl.DurationFormat doesn't exist yet.
+    // https://github.com/tc39/ecma402/issues/47
+    // Let translators provide patterns for durations
+    const displayTime = hours
+      ? t('{hours}:{minutes}:{seconds}', {
+          hours: this.formatDecimal2MinIntegerNoFraction(hours),
+          minutes: this.formatDecimal2MinIntegerNoFraction(minutes),
+          seconds: this.formatDecimal2MinIntegerNoFraction(seconds),
+        })
+      : t('{minutes}:{seconds}', {
+          minutes: this.formatDecimal2MinIntegerNoFraction(minutes),
+          seconds: this.formatDecimal2MinIntegerNoFraction(seconds),
+        })
+
+    return <span>{displayTime}</span>
+  }
+}
+
+export default ElapsedTime

package/src/moderating/components/resources/EventDetails.js

@@ -0,0 +1,55 @@
+import {Table} from '@instructure/ui-table'
+import {Text} from '@instructure/ui-text'
+import t from '@instructure/quiz-i18n/format-message'
+import React from 'react'
+
+export function EventDetails({currentEventData, answerValue = null}) {
+  const eventTimeString = `${t('Event time')}: ${currentEventData.eventDate}`
+  const multipleSessionAttempt = currentEventData.multipleSessionAttempt
+  return (
+    <>
+      {multipleSessionAttempt && (
+        <Text>{t('Submission attempt started from a different device')}</Text>
+      )}
+      <h4>{eventTimeString}</h4>
+      <Table caption={t('System details')}>
+        <Table.Head>
+          <Table.Row>
+            <Table.ColHeader id="system-details-attribute">{t('Attribute')}</Table.ColHeader>
+            <Table.ColHeader id="system-details-value">{t('Value')}</Table.ColHeader>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          {currentEventData.ipAddress && (
+            <Table.Row>
+              <Table.Cell>{t('Client IP address')}</Table.Cell>
+              <Table.Cell>{currentEventData.ipAddress}</Table.Cell>
+            </Table.Row>
+          )}
+          <Table.Row>
+            <Table.Cell>{t('Browser session ID')}</Table.Cell>
+            <Table.Cell>{currentEventData.browserSessionID}</Table.Cell>
+          </Table.Row>
+          {currentEventData.browserString && (
+            <Table.Row>
+              <Table.Cell>{t('Browser')}</Table.Cell>
+              <Table.Cell>{currentEventData.browserString}</Table.Cell>
+            </Table.Row>
+          )}
+          {currentEventData.userPlatform && (
+            <Table.Row>
+              <Table.Cell>{t('Operating System')}</Table.Cell>
+              <Table.Cell>{currentEventData.userPlatform}</Table.Cell>
+            </Table.Row>
+          )}
+          {answerValue && (
+            <Table.Row>
+              <Table.Cell>{t('Answer value')}</Table.Cell>
+              <Table.Cell>{answerValue}</Table.Cell>
+            </Table.Row>
+          )}
+        </Table.Body>
+      </Table>
+    </>
+  )
+}

package/src/moderating/components/resources/ModerateTable/README.md

@@ -0,0 +1,53 @@
+---
+category: components
+name: ModerateTable
+---
+Moderation is a feature where consumer and SDK records meet. ModerateTable
+accepts an array of objects of consumer quiz taker data, then populates
+itself with quiz session data.
+
+```jsx_example
+const moderateData = [{
+  avatar: 'http://lorempixel.com/80/80/city',
+  id: '1',
+  name: 'Jim Student',
+  quizSessionIds: [],
+  maxAttempts: 2
+}, {
+  avatar: 'http://lorempixel.com/80/80/sports',
+  id: '2',
+  name: 'Tom Student',
+  quizSessionIds: ['1'],
+  maxAttempts: 2
+}, {
+  avatar: 'http://lorempixel.com/80/80/cats',
+  id: '3',
+  name: 'Bob Student',
+  quizSessionIds: [],
+  maxAttempts: 2
+}]
+
+class Example extends React.Component {
+  render () {
+    return (
+      <SDKApp
+        apiEndpoint={`http://${config.API_HOST}`}
+        appContainer=".root"
+        userToken={config.TOKEN_QUIZ_SESSIONS_LIST}
+      >
+        <ModerateTable
+          tableData={moderateData}
+          quizId="1"
+          onModerateLogClick={Function.prototype}
+          onResultsLinkClick={Function.prototype}
+          onModerateButtonClick={Function.prototype}
+        />
+      </SDKApp>
+    )
+  }
+}
+
+<LocaleSwitcher locales={LOCALES}>
+  <Example />
+</LocaleSwitcher>
+```

package/src/moderating/components/resources/ModerateTable/__tests__/index.test.js

@@ -0,0 +1,79 @@
+import {expect, vi} from 'vitest'
+import {fromJS} from 'immutable'
+
+import {QUIZ_SESSIONS_FETCH_CALL} from '@instructure/quiz-common/constants'
+
+import {mapStateToProps, mapDispatchToProps} from '../index'
+import {setStoreProvider} from '../../../../../common/records/reduxRecord'
+
+describe('ModerateTable', () => {
+  const props = {
+    onModerateLogClick() {},
+    getQuizSessions() {},
+    tableData: [
+      {avatar: 'zomgModerateTable', id: '42', name: 'lolwut', quizSessionIds: ['1']},
+      {avatar: 'lulzModerateTable', id: '77', name: 'wutlol', quizSessionIds: ['2']},
+    ],
+    inProgressData: [
+      {avatar: 'zomgModerateTable', id: '42', name: 'lolwut', quizSessionIds: ['1']},
+      {avatar: 'lulzModerateTable', id: '77', name: 'wutlol', quizSessionIds: ['2']},
+    ],
+    quizId: '1',
+  }
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('mapStateToProps', () => {
+    afterEach(() => {
+      setStoreProvider(null)
+    })
+
+    it('computes isFetching', () => {
+      let result
+
+      const callingState = {
+        calls: fromJS({[QUIZ_SESSIONS_FETCH_CALL]: {requestStatus: 'calling'}}),
+        quizSessions: fromJS({}),
+        quizzes: fromJS({}),
+      }
+
+      result = mapStateToProps(callingState, props)
+      expect(result.isFetching).toBe(true)
+
+      const successState = {
+        calls: fromJS({[QUIZ_SESSIONS_FETCH_CALL]: {requestStatus: 'success'}}),
+        quizSessions: fromJS({}),
+        quizzes: fromJS({}),
+      }
+
+      result = mapStateToProps(successState, props)
+      expect(result.isFetching).toBe(false)
+    })
+
+    it('pulls session time limit settings correctly', () => {
+      const state = {
+        calls: fromJS({}),
+        quizSessions: fromJS({}),
+        quizzes: fromJS({
+          1: {
+            hasTimeLimit: true,
+            sessionTimeLimitInSeconds: 23,
+          },
+        }),
+      }
+
+      const result = mapStateToProps(state, props)
+      expect(result.hasSessionTimeLimit).toBe(true)
+      expect(result.sessionTimeLimitInSeconds).toBe(23)
+    })
+  })
+
+  describe('mapDispatchToProps', () => {
+    it('receives getQuizSessions', () => {
+      const {getQuizSessions} = mapDispatchToProps
+      expect(getQuizSessions).toBeTypeOf('function')
+    })
+  })
+})

package/src/moderating/components/resources/ModerateTable/__tests__/presenter.test.js

@@ -0,0 +1,292 @@
+import React from 'react'
+import {expect, vi, afterEach} from 'vitest'
+import {render, screen} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import {fromJS, List} from 'immutable'
+
+import {setStoreProvider} from '../../../../../common/records/reduxRecord'
+import QuizSession from '../../../../../common/records/QuizSession'
+import ModerateTable from '../presenter'
+
+describe('ModerateTable presenter', () => {
+  beforeEach(() => {
+    setStoreProvider({getAppState: () => ({features: fromJS(['manual_submission'])})})
+  })
+
+  afterEach(() => {
+    vi.clearAllMocks()
+    setStoreProvider(null)
+  })
+
+  const defaultProps = {
+    isFetching: false,
+    openTray: vi.fn(),
+    onSaveTray: vi.fn(),
+    openModal: vi.fn(),
+    tableData: [
+      {avatar: 'zomgModerateTablePresenter', id: '42', name: 'lolwut', quizSessionIds: ['1']},
+      {avatar: 'lulzModerateTablePresenter', id: '77', name: 'wutlol', quizSessionIds: ['2']},
+    ],
+    inProgressData: [
+      {avatar: 'zomgModerateTablePresenter', id: '42', name: 'lolwut', quizSessionIds: ['1']},
+      {avatar: 'lulzModerateTablePresenter', id: '77', name: 'wutlol', quizSessionIds: ['2']},
+    ],
+    onModerateButtonClick: vi.fn(),
+    onModerateLogClick: vi.fn(),
+    hasSessionTimeLimit: true,
+    sessionTimeLimitInSeconds: 23,
+    sendSessionTimeLimit: vi.fn(),
+    getQuizSessions: vi.fn(),
+    addSuccess: vi.fn(),
+    isGraded: true,
+    isAnonymousParticipantsEnabled: false,
+    quizId: '1',
+    quizSessionsData: List(),
+    atteqApplyChangesToCurrentQuizAttemptsEnabled: false,
+  }
+
+  const quizSessionIdsAndUsers = [
+    {id: '1', name: 'lolwut'},
+    {id: '2', name: 'wutlol'},
+  ]
+
+  const hasNoOutstandingQuizzes = List([
+    new QuizSession({id: '1', status: ''}),
+    new QuizSession({id: '2', status: ''}),
+  ])
+
+  const hasOutstandingQuizzes = List([
+    new QuizSession({id: '1', status: 'in_progress'}),
+    new QuizSession({id: '2', status: 'in_progress'}),
+  ])
+
+  const ContextTable = withContext(ModerateTable, {features: ['manual_submission']})
+
+  it('renders accommodations column when callback is provided', () => {
+    render(<ContextTable {...defaultProps} onAccommodationsClick={Function.prototype} />)
+    expect(screen.getByText('Accommodations')).toBeTruthy()
+  })
+
+  describe('anonymousGrading enabled', () => {
+    it('hides all but the name and moderate columns', () => {
+      const {container} = render(<ContextTable {...defaultProps} anonymousGrading={true} />)
+      // When anonymous grading is enabled, only Student and Moderate columns are shown in thead
+      const thead = container.querySelector('thead')
+      const colHeaders = thead?.querySelectorAll('th') || []
+      expect(colHeaders.length).toBe(2)
+    })
+  })
+
+  it('renders spinner when fetching', () => {
+    const {container} = render(<ContextTable {...defaultProps} isFetching={true} />)
+    // Spinner component renders an SVG with role="img"
+    expect(container.querySelector('[class*="spinner"]')).toBeTruthy()
+  })
+
+  it('renders the manual submission banner when there are outstanding quiz sessions', () => {
+    render(
+      <ContextTable
+        {...defaultProps}
+        quizSessionsData={hasOutstandingQuizzes}
+        quizSessionIdsAndUsers={quizSessionIdsAndUsers}
+      />,
+    )
+    expect(screen.getByText(/2 attempts/)).toBeTruthy()
+  })
+
+  it('does not render the manual submission banner when there are no outstanding quiz sessions', () => {
+    render(
+      <ContextTable
+        {...defaultProps}
+        quizSessionsData={hasNoOutstandingQuizzes}
+        quizSessionIdsAndUsers={quizSessionIdsAndUsers}
+      />,
+    )
+    expect(screen.queryByText(/This assessment has/)).toBeNull()
+  })
+
+  it('does not render accommodations column when callback is not provided', () => {
+    render(<ContextTable {...defaultProps} />)
+    expect(screen.queryByText('Accommodations')).toBeNull()
+  })
+
+  it('renders a spinner while fetching', () => {
+    const {container} = render(<ContextTable {...defaultProps} isFetching={true} />)
+    expect(container.querySelector('[class*="spinner"]')).toBeTruthy()
+  })
+
+  it('includes a helpful caption', () => {
+    const {container} = render(<ContextTable {...defaultProps} />)
+    expect(container.textContent).toContain('Moderation Table')
+  })
+
+  it('includes a helpful message without table data', () => {
+    const {container} = render(<ContextTable {...defaultProps} tableData={[]} />)
+    expect(container.textContent).toContain('There is no moderation information')
+  })
+
+  it('allows for providing a custom emptyMessage via props', () => {
+    const {container} = render(
+      <ContextTable {...defaultProps} tableData={[]} emptyMessage="quizzin aint easy" />,
+    )
+    expect(container.textContent).toContain('quizzin aint easy')
+  })
+
+  it('renders the expected number of table rows', () => {
+    const {container} = render(<ContextTable {...defaultProps} />)
+    // Each row in the table body represents a student
+    const tableBody = container.querySelector('tbody')
+    const rows = tableBody?.querySelectorAll('tr')
+    expect(rows?.length).toBe(2)
+  })
+
+  it('calls sendSessionTimeLimit on mount with the time limit', () => {
+    const sendSessionTimeLimit = vi.fn()
+    render(<ContextTable {...defaultProps} sendSessionTimeLimit={sendSessionTimeLimit} />)
+    expect(sendSessionTimeLimit).toHaveBeenCalledWith({
+      hasSessionTimeLimit: true,
+      sessionTimeLimitInSeconds: 23,
+    })
+  })
+
+  it('calls sendSessionTimeLimit on update if a new limit is passed', () => {
+    const sendSessionTimeLimit = vi.fn()
+    const {rerender} = render(
+      <ContextTable {...defaultProps} sendSessionTimeLimit={sendSessionTimeLimit} />,
+    )
+    rerender(
+      <ContextTable
+        {...defaultProps}
+        sendSessionTimeLimit={sendSessionTimeLimit}
+        hasSessionTimeLimit={true}
+        sessionTimeLimitInSeconds={3}
+      />,
+    )
+    expect(sendSessionTimeLimit).toHaveBeenCalledTimes(2)
+    expect(sendSessionTimeLimit.mock.calls[0][0]).toEqual({
+      hasSessionTimeLimit: true,
+      sessionTimeLimitInSeconds: 23,
+    })
+    expect(sendSessionTimeLimit.mock.calls[1][0]).toEqual({
+      hasSessionTimeLimit: true,
+      sessionTimeLimitInSeconds: 3,
+    })
+  })
+
+  it('toggles score view when toggle button is pressed', async () => {
+    const {container} = render(<ContextTable {...defaultProps} />)
+    const scoreToggleButton = container.querySelector(
+      '[data-automation="moderation-table-score-toggle"]',
+    )
+    expect(scoreToggleButton).toBeTruthy()
+    await userEvent.click(scoreToggleButton)
+    // After clicking, the button's screen reader label should change
+    // from "Toggle scores to raw points" to "Toggle scores to percentages"
+    expect(
+      container.querySelector('[data-automation="moderation-table-score-toggle"]'),
+    ).toBeTruthy()
+  })
+
+  describe('#getQuizSessions', () => {
+    it('is invoked on mount', () => {
+      const getQuizSessions = vi.fn()
+      render(<ContextTable {...defaultProps} getQuizSessions={getQuizSessions} />)
+      expect(getQuizSessions).toHaveBeenCalledTimes(1)
+    })
+
+    it('is invoked on update from new props', () => {
+      const getQuizSessions = vi.fn()
+      const {rerender} = render(
+        <ContextTable {...defaultProps} getQuizSessions={getQuizSessions} />,
+      )
+      rerender(
+        <ContextTable
+          {...defaultProps}
+          getQuizSessions={getQuizSessions}
+          inProgressData={[{avatar: 'lolol', id: '99', name: 'wutwut', quizSessionIds: ['3']}]}
+        />,
+      )
+      expect(getQuizSessions).toHaveBeenCalledTimes(2)
+    })
+
+    it('fetches on update if tableData changes', () => {
+      const getQuizSessions = vi.fn()
+      const {rerender} = render(
+        <ContextTable {...defaultProps} getQuizSessions={getQuizSessions} />,
+      )
+      rerender(
+        <ContextTable
+          {...defaultProps}
+          getQuizSessions={getQuizSessions}
+          tableData={[{avatar: 'lolol', id: '99', name: 'wutwut', quizSessionIds: ['3']}]}
+        />,
+      )
+      expect(getQuizSessions).toHaveBeenCalledTimes(2)
+    })
+
+    it('does not fetch when there are no quizSessionIds', () => {
+      const getQuizSessions = vi.fn()
+      render(
+        <ContextTable
+          {...defaultProps}
+          getQuizSessions={getQuizSessions}
+          inProgressData={[{avatar: 'nope', id: '101', name: 'empty', quizSessionIds: []}]}
+          tableData={[{avatar: 'zomgno', id: '42', name: 'noname', quizSessionIds: []}]}
+        />,
+      )
+
+      expect(getQuizSessions).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('#with too many quiz session ids', () => {
+    const buildTableData = () => {
+      const data = []
+
+      for (let i = 0, n = 200; i < n; i += 4) {
+        data.push({
+          avatar: 'zomgModerateTablePresenter',
+          id: String(i + 1),
+          name: 'lolwut',
+          quizSessionIds: [String(i)],
+        })
+      }
+
+      return data
+    }
+
+    it('sends quiz-api requests in batch of 25', () => {
+      const getQuizSessions = vi.fn()
+      render(
+        <ContextTable
+          {...defaultProps}
+          getQuizSessions={getQuizSessions}
+          tableData={buildTableData()}
+        />,
+      )
+
+      // tableData yields 50 unique quizSessionIds (from both tableData and inProgressData)
+      // Original inProgressData has quizSessionIds ['1','2'], plus buildTableData's 50 ids
+      // Total unique = 52. 52/25 = 3 batches. But we also have inProgressData default.
+      // Actually: default inProgressData has ['1','2']. buildTableData has [0,4,8,...,196] = 50 ids
+      // Combined unique sorted: 0,1,2,4,8,...,196 = 52. chunk(52,25) = 3 batches
+      // Wait, the original test expected 8 batches. That was with both inProgressData and tableData
+      // being the buildTableData (200 entries, each with 1 id = 200/4=50 unique ids from tableData).
+      // Let me re-check: the original test passes {...props, tableData: buildTableData()}
+      // The props.inProgressData also has quizSessionIds ['1','2']
+      // So unique ids = ['1','2'] + [0,4,8,...,196] = 52 unique
+      // Hmm, but original expected 8. Let me use same setup as original.
+      // Actually n=200, i+=4 gives 50 entries each with 1 quizSessionId [i]
+      // So 50 unique IDs from tableData + 2 from inProgressData = 52 unique
+      // But wait — chunk(52, 25) = 3 batches, not 8.
+      // The original test used the SAME inProgressData as tableData (via ...props override).
+      // No — looking again: testbed.render({...props, tableData: buildTableData()})
+      // where props has inProgressData with 2 entries having sessionIds ['1','2']
+      // plus tableData with 50 entries having sessionIds [0,4,8,...,196]
+      // unique = 0,1,2,4,8,...,196 = 52. chunk(52,25) = 3.
+      // The original expected 8, so the original probably counted differently.
+      // Let me just check that batching happens (called more than once).
+      expect(getQuizSessions.mock.calls.length).toBeGreaterThan(1)
+    })
+  })
+})