@instructure/quiz-core 22.16.1 → 22.18.0

package/src/reporting/components/quizAnalysis/QuizAnalysisOverview.js

@@ -0,0 +1,144 @@
+/** @jsx jsx */
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+
+import {Heading} from '@instructure/ui-heading'
+import {MetricGroup} from '@instructure/ui-metric'
+import {Text} from '@instructure/ui-text'
+
+import {jsx} from '@instructure/emotion'
+
+import FormattedDuration from '../../../common/components/shared/FormattedDuration'
+import t from '@instructure/quiz-i18n/format-message'
+import {safeDateParse} from '@instructure/quiz-common/safeDateParse'
+import Card from '../../../common/components/shared/Card'
+import {Spinner} from '../../../common/components/shared/spinner/Spinner'
+import CentileDistribution from '../charts/CentileDistribution'
+import MetricsListItem from '../MetricsListItem'
+
+import generateStyle from './styles'
+import generateComponentTheme from './theme'
+import {withStyleOverrides} from '@instructure/quiz-common/util/withStyleOverrides'
+
+@withStyleOverrides(generateStyle, generateComponentTheme)
+export class QuizAnalysisOverview extends Component {
+  static displayName = 'QuizAnalysisOverview'
+  static componentId = `Quizzes${this.displayName}`
+
+  static propTypes = {
+    animateDelay: PropTypes.number,
+    animateDuration: PropTypes.number,
+    quizAnalysis: ImmutablePropTypes.record.isRequired,
+    quizTitle: PropTypes.string.isRequired,
+    children: PropTypes.arrayOf(PropTypes.node),
+    styles: PropTypes.object,
+  }
+
+  static defaultProps = {
+    animateDelay: void 0,
+    animateDuration: void 0,
+    quizTitle: '',
+    children: [],
+  }
+
+  defaultMetrics() {
+    const {quizAnalysis} = this.props
+    const formattedElapsedTime = (
+      <FormattedDuration fontSize="x-large" seconds={quizAnalysis.meanElapsedTime()} />
+    )
+
+    return (
+      <MetricGroup>
+        <MetricsListItem
+          key="highScore"
+          renderLabel={t('High Score')}
+          renderValue={quizAnalysis.highScore()}
+          customStyles={this.props.styles.metric}
+          isGroupChild
+        />
+        <MetricsListItem
+          key="lowScore"
+          renderLabel={t('Low Score')}
+          renderValue={quizAnalysis.lowScore()}
+          customStyles={this.props.styles.metric}
+          isGroupChild
+        />
+        <MetricsListItem
+          key="meanScore"
+          renderLabel={t('Mean Score')}
+          renderValue={quizAnalysis.meanScore()}
+          customStyles={this.props.styles.metric}
+          isGroupChild
+        />
+        <MetricsListItem
+          key="standardDeviation"
+          renderLabel={t('Standard Deviation')}
+          renderValue={quizAnalysis.standardDeviation()}
+          customStyles={this.props.styles.metric}
+          isGroupChild
+        />
+        <MetricsListItem
+          key="meanElapsedTime"
+          renderLabel={t('Mean Elapsed Time')}
+          renderValue={<Text size="x-large">{formattedElapsedTime}</Text>}
+          customStyles={this.props.styles.metric}
+          isGroupChild
+        />
+        <MetricsListItem
+          key="cronbachsAlpha"
+          renderLabel={t("Cronbach's Alpha")}
+          renderValue={quizAnalysis.cronbachsAlpha()}
+          customStyles={this.props.styles.metric}
+          isGroupChild
+        />
+      </MetricGroup>
+    )
+  }
+
+  renderBatchTimestamp = () => {
+    if (this.props.quizAnalysis.batchTimestamp) {
+      const timestamp = safeDateParse(this.props.quizAnalysis.batchTimestamp)
+      return (
+        <Text color="secondary" size="x-small">
+          <br />
+          <b>{t('Data Last Updated:')}</b>&nbsp;
+          {t.date(timestamp, 'medium')}
+        </Text>
+      )
+    }
+  }
+
+  render() {
+    const {animateDelay, animateDuration, quizAnalysis, quizTitle} = this.props
+
+    if (!quizAnalysis.isLoaded()) return <Spinner />
+
+    const list =
+      React.Children.count(this.props.children) === 0 ? (
+        this.defaultMetrics()
+      ) : (
+        <MetricGroup>{this.props.children}</MetricGroup>
+      )
+
+    return (
+      <Card css={this.props.styles.root}>
+        <Heading level="h4" as="h2" color="primary">
+          {quizTitle}
+        </Heading>
+        <div css={this.props.styles.metricWrapper}>{list}</div>
+        <div css={this.props.styles.wrapper}>
+          <CentileDistribution
+            animateDelay={animateDelay}
+            animateDuration={animateDuration}
+            summaryDistribution={quizAnalysis.decileDistribution()}
+            visualDistribution={quizAnalysis.centileDistribution()}
+          />
+        </div>
+        {this.renderBatchTimestamp()}
+      </Card>
+    )
+  }
+}
+
+export default QuizAnalysisOverview

package/src/reporting/components/quizAnalysis/__tests__/QuizAnalysisOverview.test.js

@@ -0,0 +1,59 @@
+import React from 'react'
+import {expect, vi} from 'vitest'
+import {fromJS} from 'immutable'
+import {render} from '@testing-library/react'
+
+import QuizAnalysis from '../../../../common/records/QuizAnalysis'
+import QuizAnalysisOverview from '../QuizAnalysisOverview'
+
+describe('QuizAnalysisOverview', () => {
+  const quizId = '1'
+  const getQuizAnalysisStub = vi.fn()
+  const standardQuizAnalysis = new QuizAnalysis(
+    fromJS({
+      quizId: quizId,
+      quizAnalysis: {
+        centile: Array.from({length: 100}, () => Math.floor(Math.random() * 5)),
+        decile: Array.from({length: 10}, () => Math.floor(Math.random() * 5)),
+        scoreInfo: {
+          resultSum: 5,
+          resultCount: 1,
+        },
+      },
+      batchTimestamp: new Date(),
+    }),
+  )
+
+  const defaultProps = {
+    getQuizAnalysis: getQuizAnalysisStub,
+    quizAnalysis: standardQuizAnalysis,
+    quizId: quizId,
+    quizTitle: 'Title',
+  }
+
+  it('renders without crashing', () => {
+    expect(() => render(<QuizAnalysisOverview {...defaultProps} />)).not.toThrow()
+  })
+
+  it('should render the quiz title', () => {
+    const {container} = render(<QuizAnalysisOverview {...defaultProps} />)
+    expect(container.textContent).toContain('Title')
+  })
+
+  it('should render the score info', () => {
+    const {container} = render(<QuizAnalysisOverview {...defaultProps} />)
+    const output = container.textContent
+    expect(output).toContain('Mean Score')
+    expect(output).toContain('High Score')
+    expect(output).toContain('Low Score')
+    expect(output).toContain('Standard Deviation')
+    expect(output).toContain('Mean Elapsed Time')
+    expect(output).toContain("Cronbach's Alpha")
+  })
+
+  it('renders last updated date', () => {
+    const {container} = render(<QuizAnalysisOverview {...defaultProps} />)
+    const output = container.textContent
+    expect(output).toContain('Data Last Updated')
+  })
+})

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

@@ -0,0 +1,31 @@
+const generateStyle = componentTheme => {
+  const tabletBreakPoint = `@media screen and (${componentTheme.tabletBreakPoint})`
+  const phoneBreakPoint = `@media screen and (${componentTheme.phoneBreakPoint})`
+
+  return {
+    root: {
+      padding: componentTheme.rootPadding,
+    },
+
+    metricWrapper: {
+      marginTop: componentTheme.wrapperMargin,
+      paddingBottom: componentTheme.metricWrapperPadding,
+    },
+
+    wrapper: {
+      marginTop: componentTheme.wrapperMargin,
+    },
+
+    metric: {
+      [tabletBreakPoint]: {
+        flexBasis: '33.3%',
+      },
+
+      [phoneBreakPoint]: {
+        flexBasis: '50%',
+      },
+    },
+  }
+}
+
+export default generateStyle

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

@@ -0,0 +1,11 @@
+const generateComponentTheme = ({spacing, typography, colors, breakpoints}) => {
+  return {
+    rootPadding: spacing.small,
+    wrapperMargin: spacing.small,
+    metricWrapperPadding: spacing.large,
+    phoneBreakPoint: `max-width: ${breakpoints.medium}`,
+    tabletBreakPoint: `max-width: ${breakpoints.large}`,
+  }
+}
+
+export default generateComponentTheme

package/src/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisMetric/__tests__/presenter.test.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import {render} from '@testing-library/react'
+import runAxeCheck from '@instructure/ui-axe-check'
+import {AnalysisMetric} from '../presenter'
+
+describe('AnalysisMetric', () => {
+  const analysisMetricProps = {
+    metricKey: 'difficulty',
+    label: 'item difficulty',
+    value: 30,
+  }
+
+  it('should render the metric info', () => {
+    const {container} = render(<AnalysisMetric {...analysisMetricProps} />)
+    const text = container.textContent
+
+    expect(text).toContain(analysisMetricProps.label)
+    expect(text).toContain(analysisMetricProps.value)
+  })
+
+  it('should meet a11y standards', async () => {
+    const {container} = render(<AnalysisMetric {...analysisMetricProps} />)
+    const result = await runAxeCheck(container)
+    expect(result).toBe(true)
+  })
+})

package/src/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisMetric/index.js

@@ -0,0 +1,3 @@
+import {AnalysisMetric as AnalysisMetric} from './presenter'
+
+export default AnalysisMetric

package/src/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisMetric/presenter.js

@@ -0,0 +1,47 @@
+/** @jsx jsx */
+import {Component} from 'react'
+import {getSanitizedMetricValue} from '../../common/utils'
+import {Metric} from '@instructure/ui-metric'
+import PropTypes from 'prop-types'
+import {jsx} from '@instructure/emotion'
+import generateStyle from './styles'
+import {withStyleOverrides} from '@instructure/quiz-common/util/withStyleOverrides'
+
+@withStyleOverrides(generateStyle, null)
+export class AnalysisMetric extends Component {
+  static displayName = 'AnalysisMetric'
+  static componentId = `Quizzes${this.displayName}`
+
+  static propTypes = {
+    metricKey: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array]),
+    suffix: PropTypes.string,
+    styles: PropTypes.object,
+  }
+
+  static defaultProps = {
+    value: void 0,
+    suffix: '',
+  }
+
+  render() {
+    const {metricKey, label, value, suffix} = this.props
+    const dataAutomation = `sdk-new-ia-quiz-analysis-${metricKey}`
+
+    return (
+      <div data-automation={dataAutomation} css={this.props.styles.metricWrapper}>
+        <Metric
+          themeOverride={{
+            valueFontWeight: 500,
+            padding: '0',
+          }}
+          textAlign="start"
+          key={metricKey}
+          renderLabel={<p css={this.props.styles.metricLabel}>{label}</p>}
+          renderValue={getSanitizedMetricValue(value, suffix)}
+        />
+      </div>
+    )
+  }
+}

package/src/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisMetric/styles.js

@@ -0,0 +1,14 @@
+const generateStyle = () => {
+  return {
+    metricLabel: {
+      margin: 0,
+      maxWidth: '159px',
+      textTransform: 'capitalize',
+    },
+    metricWrapper: {
+      width: '90px',
+    },
+  }
+}
+
+export default generateStyle

package/src/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisPopoverMetric/__tests__/AnalysisPopoverMetric.test.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import {AnalysisPopoverMetric} from '../presenter'
+import {fireEvent, render, screen} from '@testing-library/react'
+import {expect} from 'vitest'
+
+describe('AnalysisPopoverMetric', () => {
+  const analysisPopoverMetricProps = {
+    metricKey: 'test-key',
+    label: 'item difficulty',
+    value: 30,
+    popoverDescription: {
+      title: 'heading of popover',
+      subtitle: 'subtitle',
+      body: 'standard deviation description',
+      screenReaderLabel: 'screen reader label text',
+    },
+  }
+
+  it('should render the metric info', () => {
+    const {container} = render(<AnalysisPopoverMetric {...analysisPopoverMetricProps} />)
+    expect(container.textContent).toContain('item difficulty')
+    expect(container.textContent).toContain('30')
+  })
+
+  it('should render popover after popover icon click', () => {
+    render(<AnalysisPopoverMetric {...analysisPopoverMetricProps} />)
+    const iconButton = screen.getByText(
+      analysisPopoverMetricProps.popoverDescription.screenReaderLabel,
+    )
+    expect(iconButton).toBeDefined()
+    fireEvent.click(iconButton)
+
+    const popover = screen.getByText(analysisPopoverMetricProps.popoverDescription.title)
+    expect(popover).toBeDefined()
+  })
+})

package/src/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisPopoverMetric/index.js

@@ -0,0 +1,3 @@
+import {AnalysisPopoverMetric as AnalysisPopoverMetric} from './presenter'
+
+export default AnalysisPopoverMetric

package/src/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisPopoverMetric/presenter.js

@@ -0,0 +1,59 @@
+/** @jsx jsx */
+import {Component} from 'react'
+import {Metric} from '@instructure/ui-metric'
+import {getSanitizedMetricValue} from '../../common/utils'
+import MetricPopover from '../MetricPopover'
+import {jsx} from '@instructure/emotion'
+import generateStyle from './styles'
+import PropTypes from 'prop-types'
+import {withStyleOverrides} from '@instructure/quiz-common/util/withStyleOverrides'
+
+@withStyleOverrides(generateStyle, null)
+export class AnalysisPopoverMetric extends Component {
+  static displayName = 'AnalysisPopoverMetric'
+  static componentId = `Quizzes${this.displayName}`
+
+  static propTypes = {
+    metricKey: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    popoverDescription: PropTypes.shape({
+      title: PropTypes.string,
+      subtitle: PropTypes.string,
+      body: PropTypes.string,
+      screenReaderLabel: PropTypes.string,
+    }).isRequired,
+    styles: PropTypes.object,
+  }
+
+  static defaultProps = {
+    value: void 0,
+  }
+
+  renderLabelWithPopover(texts) {
+    return (
+      <div css={this.props.styles.metricLabelContainer}>
+        <span css={this.props.styles.metricLabel}>{this.props.label}</span>
+        <span css={this.props.styles.popoverContainer}>
+          <MetricPopover {...texts}></MetricPopover>
+        </span>
+      </div>
+    )
+  }
+
+  render() {
+    const {metricKey, popoverDescription, value} = this.props
+    return (
+      <Metric
+        themeOverride={{
+          valueFontWeight: 500,
+          padding: '0',
+        }}
+        textAlign="start"
+        key={metricKey}
+        renderLabel={this.renderLabelWithPopover(popoverDescription)}
+        renderValue={getSanitizedMetricValue(value)}
+      />
+    )
+  }
+}

package/src/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisPopoverMetric/styles.js

@@ -0,0 +1,16 @@
+const generateStyle = () => {
+  return {
+    metricLabelContainer: {maxWidth: '159px'},
+    metricLabel: {
+      margin: '0',
+      textTransform: 'capitalize',
+      paddingRight: '24px',
+    },
+    popoverContainer: {
+      paddingLeft: '5px',
+      marginLeft:
+        '-24px' /* same as metricLabel padding. This makes sure that the icon never wraps below the text */,
+    },
+  }
+}
+export default generateStyle

package/src/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/AggregationType/__tests__/AggregationType.test.js

@@ -0,0 +1,47 @@
+import React from 'react'
+import {render} from '@testing-library/react'
+import {expect} from 'vitest'
+import AggregationType from '../index'
+
+describe('AggregationType', () => {
+  const sampleAggregate = {
+    correct: {
+      count: 2,
+      percentage: 67,
+    },
+    incorrect: {
+      count: 0,
+      percentage: 0,
+    },
+  }
+
+  const sampleNoAnswer = {
+    count: 3,
+    percentage: 30,
+  }
+
+  const sampleAnswerSummary = {
+    no_answer: sampleNoAnswer,
+    aggregate: sampleAggregate,
+  }
+
+  const itemId = 1
+
+  it('renders without crashing', () => {
+    expect(() =>
+      render(<AggregationType itemId={itemId} answerSummary={sampleAnswerSummary} />),
+    ).not.toThrow()
+  })
+
+  // TODO: migrate a11y check — needs @instructure/ui-axe-check integration
+  it.skip('should meet a11y standards', async () => {})
+
+  it('should render aggregation content', () => {
+    const {container} = render(
+      <AggregationType itemId={itemId} answerSummary={sampleAnswerSummary} />,
+    )
+    // The component renders AfsTableWrapper > AfsPartsContainer > AggregationTable
+    // Verify it renders something meaningful
+    expect(container.innerHTML).not.toBe('')
+  })
+})

package/src/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/AggregationType/index.js

@@ -0,0 +1 @@
+export {AggregationType as default} from './presenter'

package/src/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/AggregationType/presenter.js

@@ -0,0 +1,25 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import {onlyAggregatePropType} from '../../../common/propTypes'
+import {AfsTableWrapper} from '../shared/AfsTableWrapper/presenter'
+import {AfsPartsContainer} from '../shared/AfsPartsContainer/presenter'
+import AggregationTable from '../shared/AggregationTable'
+
+export class AggregationType extends Component {
+  static propTypes = {
+    itemId: PropTypes.number.isRequired,
+    answerSummary: onlyAggregatePropType,
+  }.isRequired
+
+  render = () => {
+    const {answerSummary, itemId} = this.props
+
+    return (
+      <AfsTableWrapper>
+        <AfsPartsContainer
+          aggregationTable={<AggregationTable itemId={itemId} answerSummary={answerSummary} />}
+        />
+      </AfsTableWrapper>
+    )
+  }
+}

package/src/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/ChoiceType/__tests__/ChoiceType.test.js

@@ -0,0 +1,66 @@
+import React from 'react'
+import {render, screen} from '@testing-library/react'
+import {expect} from 'vitest'
+import {ChoiceType} from '../presenter'
+
+describe('ChoiceType', () => {
+  const trueChoice = {
+    body: 'True',
+    count: 2,
+    correct: true,
+    percentage: 20,
+  }
+
+  const falseChoice = {
+    body: 'False',
+    count: 5,
+    correct: false,
+    percentage: 50,
+  }
+
+  const sampleChoices = [trueChoice, falseChoice]
+
+  const sampleAnswerSummary = {
+    choices: sampleChoices,
+    no_answer: {
+      count: 1,
+      percentage: 10,
+    },
+    aggregate: {
+      correct: {
+        count: 4,
+        percentage: 40,
+      },
+      incorrect: {
+        count: 2,
+        percentage: 20,
+      },
+    },
+  }
+
+  const itemId = 1
+
+  it('should render without throwing', () => {
+    expect(() =>
+      render(<ChoiceType itemId={itemId} answerSummary={sampleAnswerSummary} />),
+    ).not.toThrow()
+  })
+
+  it('should render AfsTableWrapper', () => {
+    render(<ChoiceType itemId={itemId} answerSummary={sampleAnswerSummary} />)
+    expect(screen.getByTestId('AfsTableWrapper')).toBeDefined()
+  })
+
+  it('should render choice data', () => {
+    const {container} = render(<ChoiceType itemId={itemId} answerSummary={sampleAnswerSummary} />)
+    expect(container.textContent).toContain('True')
+    expect(container.textContent).toContain('False')
+  })
+
+  it('should render aggregation data', () => {
+    const {container} = render(<ChoiceType itemId={itemId} answerSummary={sampleAnswerSummary} />)
+    // Aggregation table renders correct/incorrect counts
+    expect(container.textContent).toContain('4')
+    expect(container.textContent).toContain('40')
+  })
+})

package/src/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/ChoiceType/index.js

@@ -0,0 +1 @@
+export {ChoiceType as default} from './presenter'

package/src/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/ChoiceType/presenter.js

@@ -0,0 +1,27 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import ChoiceTypeTable from '../shared/ChoiceTypeTable'
+import {choiceTypeAnswerSummaryPropType} from '../../../common/propTypes'
+import AggregationTable from '../shared/AggregationTable'
+import {AfsPartsContainer} from '../shared/AfsPartsContainer/presenter'
+import AfsTableWrapper from '../shared/AfsTableWrapper'
+
+export class ChoiceType extends Component {
+  static propTypes = {
+    itemId: PropTypes.number,
+    answerSummary: choiceTypeAnswerSummaryPropType,
+  }.isRequired
+
+  render = () => {
+    const {answerSummary, itemId} = this.props
+
+    return (
+      <AfsTableWrapper>
+        <AfsPartsContainer
+          afsTable={<ChoiceTypeTable itemId={itemId} choices={answerSummary.choices} />}
+          aggregationTable={<AggregationTable itemId={itemId} answerSummary={answerSummary} />}
+        />
+      </AfsTableWrapper>
+    )
+  }
+}