@instructure/quiz-core 22.17.0 → 22.18.0

package/src/reporting/api/__tests__/getItemAnalyses.test.js

@@ -0,0 +1,38 @@
+import {expect, beforeAll, afterAll, afterEach, beforeEach} from 'vitest'
+import {http, HttpResponse} from 'msw'
+import {server} from '../../../../tests/msw/server'
+import {getItemAnalyses} from '../getItemAnalyses'
+import Fetcher from '../../../common/util/Fetcher'
+
+const API_BASE = 'http://localhost:3000'
+const fetcher = new Fetcher({apiEndpoint: API_BASE})
+let requestUrls
+
+beforeAll(() => server.listen())
+afterEach(() => {
+  server.resetHandlers()
+  requestUrls = []
+})
+afterAll(() => server.close())
+
+describe('getItemAnalyses', () => {
+  beforeEach(() => {
+    requestUrls = []
+    server.use(
+      http.get(`${API_BASE}/api/quizzes/:quizId/analyses/item_analyses`, ({request}) => {
+        requestUrls.push(new URL(request.url).pathname + new URL(request.url).search)
+        return HttpResponse.json([])
+      }),
+    )
+  })
+
+  it('calls item_analyses endpoint with last_attempt default filter', async () => {
+    await getItemAnalyses(1, undefined, fetcher)
+    expect(requestUrls[0]).toBe('/api/quizzes/1/analyses/item_analyses?filter=last_attempt')
+  })
+
+  it('calls item_analyses endpoint with specified filter', async () => {
+    await getItemAnalyses(1, 'test_filter', fetcher)
+    expect(requestUrls[0]).toBe('/api/quizzes/1/analyses/item_analyses?filter=test_filter')
+  })
+})

package/src/reporting/api/__tests__/getQuizAnalysis.test.js

@@ -0,0 +1,38 @@
+import {expect, beforeAll, afterAll, afterEach, beforeEach} from 'vitest'
+import {http, HttpResponse} from 'msw'
+import {server} from '../../../../tests/msw/server'
+import {getQuizAnalysis} from '../getQuizAnalysis'
+import Fetcher from '../../../common/util/Fetcher'
+
+const API_BASE = 'http://localhost:3000'
+const fetcher = new Fetcher({apiEndpoint: API_BASE})
+let requestUrls
+
+beforeAll(() => server.listen())
+afterEach(() => {
+  server.resetHandlers()
+  requestUrls = []
+})
+afterAll(() => server.close())
+
+describe('getQuizAnalysis', () => {
+  beforeEach(() => {
+    requestUrls = []
+    server.use(
+      http.get(`${API_BASE}/api/quizzes/:quizId/analyses/quiz_analysis`, ({request}) => {
+        requestUrls.push(new URL(request.url).pathname + new URL(request.url).search)
+        return HttpResponse.json({})
+      }),
+    )
+  })
+
+  it('calls quiz_analysis endpoint with last_attempt default filter', async () => {
+    await getQuizAnalysis(1, undefined, fetcher)
+    expect(requestUrls[0]).toBe('/api/quizzes/1/analyses/quiz_analysis?filter=last_attempt')
+  })
+
+  it('calls quiz_analysis endpoint with specified filter', async () => {
+    await getQuizAnalysis(1, 'test_filter', fetcher)
+    expect(requestUrls[0]).toBe('/api/quizzes/1/analyses/quiz_analysis?filter=test_filter')
+  })
+})

package/src/reporting/api/__tests__/itemAnalyses.test.js

@@ -0,0 +1,58 @@
+import {expect, beforeAll, afterAll, afterEach, beforeEach} from 'vitest'
+import {http, HttpResponse} from 'msw'
+import {server} from '../../../../tests/msw/server'
+import {fromJS} from 'immutable'
+import configureStore from 'redux-mock-store'
+import thunkMiddleware from 'redux-thunk'
+import multi from 'redux-multi'
+import {handleItemAnalysesResponse} from '../../../common/api/callHandlers'
+import {associateItemAnalyses} from '../../../common/actions/quizzes'
+import {getItemAnalyses} from '../itemAnalyses'
+
+const API_BASE = 'http://localhost:3000'
+const mockStore = configureStore([multi, thunkMiddleware])
+
+beforeAll(() => server.listen())
+afterEach(() => server.resetHandlers())
+afterAll(() => server.close())
+
+describe('reporting api actions', () => {
+  const quizId = '123'
+  const itemId = '456'
+  const itemAnalysisData = [{item_id: itemId, item_analysis: {}}]
+  const defaultState = {config: fromJS({userToken: 'fake', apiEndpoint: API_BASE})}
+
+  describe('getItemAnalyses', () => {
+    let requestUrls
+
+    beforeEach(() => {
+      requestUrls = []
+      server.use(
+        http.get(`${API_BASE}/api/quizzes/:quizId/stats/item_analyses/`, ({request}) => {
+          requestUrls.push(new URL(request.url).pathname)
+          return HttpResponse.json([itemAnalysisData])
+        }),
+      )
+    })
+
+    it('should hit the right endpoint', async () => {
+      const store = mockStore(defaultState)
+      await store.dispatch(getItemAnalyses(quizId))
+      expect(requestUrls[0]).toBe(`/api/quizzes/${quizId}/stats/item_analyses/`)
+    })
+
+    it('should trigger additional actions', async () => {
+      const store = mockStore(defaultState)
+      await store.dispatch(getItemAnalyses(quizId))
+      const actions = store.getActions()
+      const expectedHandleResponse = handleItemAnalysesResponse([itemAnalysisData])
+      const expectedAssociateResponse = associateItemAnalyses(quizId, [itemAnalysisData])
+      expect(actions).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining(expectedHandleResponse[0]),
+          expect.objectContaining(expectedAssociateResponse),
+        ]),
+      )
+    })
+  })
+})

package/src/reporting/api/__tests__/quizAnalyses.test.js

@@ -0,0 +1,52 @@
+import {expect, beforeAll, afterAll, afterEach, beforeEach} from 'vitest'
+import {http, HttpResponse} from 'msw'
+import {server} from '../../../../tests/msw/server'
+import {fromJS} from 'immutable'
+import configureStore from 'redux-mock-store'
+import thunkMiddleware from 'redux-thunk'
+import multi from 'redux-multi'
+import {handleQuizAnalysisResponse} from '../../../common/api/callHandlers'
+import {getQuizAnalysis} from '../quizAnalyses'
+
+const API_BASE = 'http://localhost:3000'
+const mockStore = configureStore([multi, thunkMiddleware])
+
+beforeAll(() => server.listen())
+afterEach(() => server.resetHandlers())
+afterAll(() => server.close())
+
+describe('reporting api actions', () => {
+  const quizId = '456'
+  const quizAnalysisData = [{quiz_id: quizId, quiz_analysis: {}}]
+  const defaultState = {config: fromJS({userToken: 'fake', apiEndpoint: API_BASE})}
+
+  describe('getQuizAnalysis', () => {
+    let requestUrls
+
+    beforeEach(() => {
+      requestUrls = []
+      server.use(
+        http.get(`${API_BASE}/api/quizzes/:quizId/stats/quiz_analysis`, ({request}) => {
+          requestUrls.push(new URL(request.url).pathname)
+          return HttpResponse.json([quizAnalysisData])
+        }),
+      )
+    })
+
+    it('should hit the right endpoint', async () => {
+      const store = mockStore(defaultState)
+      await store.dispatch(getQuizAnalysis(quizId))
+      expect(requestUrls[0]).toBe(`/api/quizzes/${quizId}/stats/quiz_analysis`)
+    })
+
+    it('should trigger additional actions', async () => {
+      const store = mockStore(defaultState)
+      await store.dispatch(getQuizAnalysis(quizId))
+      const actions = store.getActions()
+      const expectedResponse = handleQuizAnalysisResponse([quizAnalysisData])
+      expect(actions).toEqual(
+        expect.arrayContaining([expect.objectContaining(expectedResponse[0])]),
+      )
+    })
+  })
+})

package/src/reporting/api/fetchStudentAnalyses.js

@@ -0,0 +1,10 @@
+import Fetcher from '../../common/util/Fetcher'
+
+export const fetchStudentAnalyses = async (
+  quizId,
+  filter = 'last_attempt',
+  fetcher = new Fetcher(),
+) => {
+  const url = `/api/quizzes/${quizId}/analyses/student_analyses?filter=${filter}`
+  return await fetcher.get(url)
+}

package/src/reporting/api/getAnalysesExport.js

@@ -0,0 +1,39 @@
+import Fetcher from '../../common/util/Fetcher'
+import {csvFormat} from '../components/resources/NewQuizAndItemAnalysis/exportFormats'
+import {ITEM_ANALYSES} from '@instructure/quiz-common/constants'
+
+const formatsToMimeTypes = new Map().set(csvFormat, 'text/csv')
+
+const getFetcher = (format, {apiEndpoint, userToken, ...fetcherOpts} = {}) => {
+  const mimeType = formatsToMimeTypes.get(format)
+  if (!mimeType) {
+    throw new Error(`Unknown export format ${format}!`)
+  }
+
+  return new Fetcher({
+    apiEndpoint,
+    userToken,
+    headers: {
+      Accept: mimeType,
+    },
+    injectMissingUserToken: true,
+    asyncResponseHandler: response => response,
+    ...fetcherOpts,
+  })
+}
+
+export const getAnalysesExport = async (
+  quizId,
+  format,
+  filter = 'last_attempt',
+  analysisType = ITEM_ANALYSES,
+  isAnonymous = false,
+  fetcherOpts = {},
+) => {
+  const fetcher = getFetcher(format, fetcherOpts)
+  let url = `/api/quizzes/${quizId}/analyses/export?filter=${filter}&analysis_type=${analysisType}`
+  if (isAnonymous) {
+    url += '&anonymous_report=true'
+  }
+  return await fetcher.get(url)
+}

package/src/reporting/api/getAnalysesStatus.js

@@ -0,0 +1,12 @@
+import Fetcher from '../../common/util/Fetcher'
+import {ITEM_ANALYSES} from '@instructure/quiz-common/constants'
+
+export const getAnalysesStatus = async (
+  quizId,
+  filter = 'last_attempt',
+  analysisType = ITEM_ANALYSES,
+  fetcher = new Fetcher(),
+) => {
+  const url = `/api/quizzes/${quizId}/analyses/status?filter=${filter}&analysis_type=${analysisType}`
+  return await fetcher.get(url)
+}

package/src/reporting/api/getItemAnalyses.js

@@ -0,0 +1,6 @@
+import Fetcher from '../../common/util/Fetcher'
+
+export const getItemAnalyses = async (quizId, filter = 'last_attempt', fetcher = new Fetcher()) => {
+  const url = `/api/quizzes/${quizId}/analyses/item_analyses?filter=${filter}`
+  return await fetcher.get(url)
+}

package/src/reporting/api/getQuizAnalysis.js

@@ -0,0 +1,6 @@
+import Fetcher from '../../common/util/Fetcher'
+
+export const getQuizAnalysis = async (quizId, filter = 'last_attempt', fetcher = new Fetcher()) => {
+  const url = `/api/quizzes/${quizId}/analyses/quiz_analysis?filter=${filter}`
+  return await fetcher.get(url)
+}

package/src/reporting/api/itemAnalyses.js

@@ -0,0 +1,24 @@
+import {Fetcher} from '../../common/util/Fetcher'
+import {handleItemAnalysesResponse} from '../../common/api/callHandlers'
+
+import {associateItemAnalyses} from '../../common/actions/quizzes'
+import withDynamoPagination from '../../common/util/withDynamoPagination'
+
+export function getItemAnalyses(quizId) {
+  const url = `/api/quizzes/${quizId}/stats/item_analyses/`
+
+  return (dispatch, getState) => {
+    const state = typeof getState === 'function' ? getState() : getState
+    const DynamoFetcher = withDynamoPagination(Fetcher)
+    const dynamoFetcherGet = new DynamoFetcher({
+      dispatch,
+      getState: typeof getState === 'function' ? getState : undefined,
+      apiEndpoint: state?.config?.get?.('apiEndpoint') || '',
+      userToken: state?.config?.get?.('userToken'),
+    })
+
+    return dynamoFetcherGet.paginatedGet(url).then(response => {
+      dispatch([handleItemAnalysesResponse(response), associateItemAnalyses(quizId, response)])
+    })
+  }
+}

package/src/reporting/api/quizAnalyses.js

@@ -0,0 +1,18 @@
+import {createFetcher} from '../../common/util/Fetcher'
+import {handleQuizAnalysisResponse} from '../../common/api/callHandlers'
+import {markQuizAnalysisNotFound} from '../../common/actions/reporting'
+import {associateQuizAnalysis} from '../../common/actions/quizzes'
+
+export function getQuizAnalysis(quizId) {
+  const url = `/api/quizzes/${quizId}/stats/quiz_analysis`
+
+  return (dispatch, getState) => {
+    const fetcher = createFetcher(dispatch, getState, {
+      onError: () => markQuizAnalysisNotFound(quizId),
+    })
+
+    return fetcher.get(url).then(response => {
+      dispatch([handleQuizAnalysisResponse(response), associateQuizAnalysis(quizId, response)])
+    })
+  }
+}

package/src/reporting/components/Caption/__tests__/Caption.test.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import {render} from '@testing-library/react'
+import Caption from '../'
+
+describe('Caption', () => {
+  const defaultProps = {
+    text: 'Very Interesting Heading',
+    children: <div>Super Cool Content</div>,
+  }
+
+  it('renders without throwing', () => {
+    expect(() => render(<Caption {...defaultProps} />)).not.toThrow()
+  })
+
+  it('should render heading text', () => {
+    const {container} = render(<Caption {...defaultProps} />)
+    expect(container.textContent).toContain('Very Interesting')
+  })
+
+  it('should render its children', () => {
+    const {container} = render(<Caption {...defaultProps} />)
+    expect(container.textContent).toContain('Super Cool')
+  })
+})

package/src/reporting/components/Caption/index.js

@@ -0,0 +1,40 @@
+/** @jsx jsx */
+import {Component} from 'react'
+import PropTypes from 'prop-types'
+
+import {Heading} from '@instructure/ui-heading'
+import {jsx} from '@instructure/emotion'
+
+import generateStyle from './styles'
+import generateComponentTheme from './theme'
+import {withStyleOverrides} from '@instructure/quiz-common/util/withStyleOverrides'
+
+@withStyleOverrides(generateStyle, generateComponentTheme)
+export class Caption extends Component {
+  static displayName = 'Caption'
+  static componentId = `Quizzes${this.displayName}`
+
+  static propTypes = {
+    text: PropTypes.string,
+    children: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
+    styles: PropTypes.object,
+  }
+
+  static defaultProps = {
+    text: void 0,
+    children: void 0,
+  }
+
+  render() {
+    return (
+      <div css={this.props.styles.content}>
+        <Heading level="reset" as="h2" border="bottom" color="primary">
+          {this.props.text}
+        </Heading>
+        <div css={this.props.styles.children}>{this.props.children}</div>
+      </div>
+    )
+  }
+}
+
+export default Caption

package/src/reporting/components/Caption/styles.js

@@ -0,0 +1,12 @@
+const generateStyle = componentTheme => {
+  return {
+    content: {
+      margin: componentTheme.contentMargin,
+    },
+    children: {
+      paddingTop: componentTheme.childrenPadding,
+    },
+  }
+}
+
+export default generateStyle

package/src/reporting/components/Caption/theme.js

@@ -0,0 +1,8 @@
+const generateComponentTheme = ({spacing, borders, colors}) => {
+  return {
+    contentMargin: spacing.small,
+    childrenPadding: spacing.xSmall,
+  }
+}
+
+export default generateComponentTheme

package/src/reporting/components/MetricsListItem/__tests__/MetricsListItem.test.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import {render} from '@testing-library/react'
+import {expect} from 'vitest'
+
+import MetricsListItem from '../'
+
+describe('MetricsListItem', () => {
+  it('should render label text', () => {
+    const {container} = render(<MetricsListItem renderLabel="Label" renderValue="999.9" />)
+    expect(container.textContent).toContain('Label')
+  })
+
+  it('should render value text', () => {
+    const {container} = render(<MetricsListItem renderLabel="Label" renderValue="999.9" />)
+    expect(container.textContent).toContain('999.9')
+  })
+
+  it('should accept components as value', () => {
+    const {container} = render(
+      <MetricsListItem renderLabel="Label" renderValue={<span>1/2</span>} />,
+    )
+    expect(container.textContent).toContain('1/2')
+  })
+
+  it('should render no value', () => {
+    const {container} = render(<MetricsListItem renderLabel="Label" renderValue={null} />)
+    expect(container.textContent).toContain('No value')
+    expect(container.textContent).toContain('--')
+  })
+})

package/src/reporting/components/MetricsListItem/index.js

@@ -0,0 +1,52 @@
+/** @jsx jsx */
+import {Component} from 'react'
+import PropTypes from 'prop-types'
+import {Metric} from '@instructure/ui-metric'
+import {ScreenReaderContent, PresentationContent} from '@instructure/ui-a11y-content'
+
+import {jsx} from '@instructure/emotion'
+
+import t from '@instructure/quiz-i18n/format-message'
+import generateStyle from './styles'
+import {withStyleOverrides} from '@instructure/quiz-common/util/withStyleOverrides'
+
+@withStyleOverrides(generateStyle, null)
+export class MetricsListItem extends Component {
+  static displayName = 'MetricsListItem'
+  static componentId = `Quizzes${this.displayName}`
+
+  static propTypes = {
+    ...Metric.propTypes,
+    customStyles: PropTypes.object,
+    styles: PropTypes.object,
+  }
+
+  static defaultProps = {
+    customStyles: {},
+  }
+
+  renderNoValue() {
+    return (
+      <span>
+        <ScreenReaderContent>{t('No value')}</ScreenReaderContent>
+        <PresentationContent>{t('--')}</PresentationContent>
+      </span>
+    )
+  }
+
+  render() {
+    const styles = [this.props.styles.root, this.props.customStyles]
+    const {renderValue, renderLabel, isGroupChild} = this.props
+    return (
+      <div css={styles}>
+        <Metric
+          renderLabel={renderLabel}
+          renderValue={renderValue || this.renderNoValue()}
+          isGroupChild={isGroupChild}
+        />
+      </div>
+    )
+  }
+}
+
+export default MetricsListItem

package/src/reporting/components/MetricsListItem/styles.js

@@ -0,0 +1,12 @@
+const generateStyle = () => {
+  return {
+    root: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+  }
+}
+
+export default generateStyle

package/src/reporting/components/charts/CentileDistribution/__tests__/index.test.js

@@ -0,0 +1,9 @@
+import CentileDistribution from '../index'
+import CentileDistributionPresenter from '../presenter'
+import {expect} from 'vitest'
+
+describe('CentileDistribution', () => {
+  it('exports CentileDistributionPresenter', () => {
+    expect(CentileDistribution).toBe(CentileDistributionPresenter)
+  })
+})

package/src/reporting/components/charts/CentileDistribution/__tests__/presenter.test.js

@@ -0,0 +1,57 @@
+import React from 'react'
+import {render, screen} from '../../../../../../tests/util/rtlRenderOverride'
+import {expect} from 'vitest'
+
+import CentileDistribution from '../presenter'
+
+const range = n => Array.from({length: n}, (_, i) => i)
+
+describe('CentileDistribution', () => {
+  const defaultProps = {
+    animateDelay: null,
+    animateDuration: null,
+    visualDistribution: range(100),
+  }
+
+  it('should render ticks at 10% intervals', () => {
+    const {container} = render(<CentileDistribution {...defaultProps} />)
+
+    const ticks = container.querySelectorAll('[data-role=xAxis] g.tick')
+    expect(ticks.length).toBe(11)
+    ticks.forEach((t, i) => {
+      expect(t.textContent).toBe(`${i * 10}%`)
+      expect(t.attributes.transform.value).toMatch(/translate\(\d+(\.\d+)?,0\)/)
+    })
+  })
+
+  it('renders a table containing the raw chart data', () => {
+    const {container} = render(<CentileDistribution {...defaultProps} />)
+    const tbody = container.querySelector('tbody')
+    const tableRows = tbody.querySelectorAll('tr')
+    expect(tableRows).toHaveLength(100)
+    tableRows.forEach((tableRow, index) => {
+      const columns = tableRow.querySelectorAll('td')
+      expect(columns[0].textContent).toBe(`${index}%`)
+      expect(columns[1].textContent).toBe(`${index}`)
+    })
+  })
+
+  describe('with starred score', () => {
+    it('includes starred score in summary', () => {
+      render(<CentileDistribution {...defaultProps} starScore={0.96} />)
+      expect(screen.getByText(/You scored 96%/)).toBeDefined()
+    })
+
+    it('renders without crashing with starScore', () => {
+      expect(() => render(<CentileDistribution {...defaultProps} starScore={0.42} />)).not.toThrow()
+    })
+
+    it('renders without crashing when star score is above 100%', () => {
+      expect(() => render(<CentileDistribution {...defaultProps} starScore={1.1} />)).not.toThrow()
+    })
+
+    it('renders without crashing when star score is at 0%', () => {
+      expect(() => render(<CentileDistribution {...defaultProps} starScore={0.0} />)).not.toThrow()
+    })
+  })
+})

package/src/reporting/components/charts/CentileDistribution/index.js

@@ -0,0 +1,3 @@
+import CentileDistribution from './presenter.js'
+
+export default CentileDistribution