@instructure/quiz-core 22.16.1 → 22.18.0

package/src/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/MatchingType/utils/__tests__/matchingTypeOrderer.test.js

@@ -0,0 +1,112 @@
+import MatchingTypeOrderer from '../matchingTypeOrderer'
+import {expect} from 'vitest'
+
+describe('MatchingTypeOrderer', () => {
+  const correctSampleAnswerSummary = {
+    questions: {
+      question_key_1: {
+        body: 'row_1',
+        answers: {
+          answer_key_1: {correct: false, distractor: false},
+          answer_key_2: {correct: false, distractor: true},
+          answer_key_3: {correct: true, distractor: false},
+        },
+      },
+      question_key_2: {
+        body: 'row_2',
+        answers: {
+          answer_key_1: {correct: true, distractor: false},
+          answer_key_2: {correct: false, distractor: true},
+          answer_key_3: {correct: false, distractor: false},
+        },
+      },
+    },
+  }
+
+  const noDistractorSampleAnswerSummary = {
+    questions: {
+      question_key_1: {
+        body: 'row_1',
+        answers: {
+          answer_key_1: {correct: false, distractor: false},
+          answer_key_2: {correct: false, distractor: false},
+          answer_key_3: {correct: true, distractor: false},
+        },
+      },
+      question_key_2: {
+        body: 'row_2',
+        answers: {
+          answer_key_1: {correct: true, distractor: false},
+          answer_key_2: {correct: false, distractor: false},
+          answer_key_3: {correct: false, distractor: false},
+        },
+      },
+    },
+  }
+
+  const sampleAnswerKeys = ['answer_key_1', 'answer_key_2', 'answer_key_3']
+  const sampleQuestionKeys = ['question_key_1', 'question_key_2']
+
+  describe('with correct input data should return the correct ', () => {
+    it('answer order', () => {
+      const orderedAnswerKeys = MatchingTypeOrderer.orderAnswerKeysForDiagonal(
+        correctSampleAnswerSummary,
+        sampleAnswerKeys,
+      )
+      expect(orderedAnswerKeys.toString()).toBe('answer_key_1,answer_key_3,answer_key_2')
+    })
+    it('question order', () => {
+      const orderedAnswerKeys = MatchingTypeOrderer.orderAnswerKeysForDiagonal(
+        correctSampleAnswerSummary,
+        sampleAnswerKeys,
+      )
+      const orderedQuestionKeys = MatchingTypeOrderer.orderQuestionKeysForDiagonal(
+        correctSampleAnswerSummary,
+        sampleQuestionKeys,
+        orderedAnswerKeys,
+      )
+      expect(orderedQuestionKeys.toString()).toBe('question_key_2,question_key_1')
+    })
+  })
+
+  describe('with no distractors ', () => {
+    it('should not change the answer order', () => {
+      const orderedAnswerKeys = MatchingTypeOrderer.orderAnswerKeysForDiagonal(
+        noDistractorSampleAnswerSummary,
+        sampleAnswerKeys,
+      )
+      expect(orderedAnswerKeys.toString()).toBe('answer_key_1,answer_key_2,answer_key_3')
+    })
+    it('should return the correct question order', () => {
+      const orderedAnswerKeys = MatchingTypeOrderer.orderAnswerKeysForDiagonal(
+        noDistractorSampleAnswerSummary,
+        sampleAnswerKeys,
+      )
+      const orderedQuestionKeys = MatchingTypeOrderer.orderQuestionKeysForDiagonal(
+        noDistractorSampleAnswerSummary,
+        sampleQuestionKeys,
+        orderedAnswerKeys,
+      )
+      expect(orderedQuestionKeys.toString()).toBe('question_key_2,question_key_1')
+    })
+  })
+
+  describe('with empty array inputs', () => {
+    it('answer order should return an empty array', () => {
+      const orderedAnswerKeys = MatchingTypeOrderer.orderAnswerKeysForDiagonal(
+        noDistractorSampleAnswerSummary,
+        [],
+      )
+      expect(orderedAnswerKeys.length).toBe(0)
+    })
+    it('question order should return an empty array', () => {
+      const orderedAnswerKeys = []
+      const orderedQuestionKeys = MatchingTypeOrderer.orderQuestionKeysForDiagonal(
+        noDistractorSampleAnswerSummary,
+        [],
+        orderedAnswerKeys,
+      )
+      expect(orderedQuestionKeys.length).toBe(0)
+    })
+  })
+})

package/src/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/MatchingType/utils/matchingTypeOrderer.js

@@ -0,0 +1,36 @@
+class MatchingTypeOrderer {
+  orderAnswerKeysForDiagonal = (answerSummary, answerKeys) => {
+    const {questions} = answerSummary
+    const questionKeys = Object.keys(questions)
+
+    let orderedKeys = [...answerKeys]
+    answerKeys.forEach(answerKey => {
+      questionKeys.forEach(questionKey => {
+        let question = questions[questionKey]
+        if (question.answers[answerKey].distractor) {
+          orderedKeys.splice(orderedKeys.indexOf(answerKey), 1)
+          orderedKeys.push(answerKey)
+        }
+      })
+    })
+    return orderedKeys
+  }
+
+  orderQuestionKeysForDiagonal = (answerSummary, questionKeys, orderedAnswerKeys) => {
+    const {questions} = answerSummary
+
+    let orderedQuestionKeys = []
+    orderedAnswerKeys.forEach(orderedAnswerKey => {
+      questionKeys.forEach(questionKey => {
+        let question = questions[questionKey]
+        if (question.answers[orderedAnswerKey].correct) {
+          orderedQuestionKeys.push(questionKey)
+        }
+      })
+    })
+
+    return orderedQuestionKeys
+  }
+}
+
+export default new MatchingTypeOrderer()

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

@@ -0,0 +1,53 @@
+import React from 'react'
+import {render} from '@testing-library/react'
+import {expect} from 'vitest'
+import ChoiceTypeWithInfo from '../index'
+
+describe('ChoiceTypeWithInfo', () => {
+  const excusedMessage = 'There are no entries for this requirement.'
+  const choice = {
+    body: 'choice body',
+    count: 2,
+    correct: true,
+    percentage: 20,
+  }
+  const choices = [choice]
+  const itemId = 1
+  const index = 0
+  const headLine = <div>headLine</div>
+  const defaultProps = {itemId, index, choices, headLine}
+
+  it('should render headLine', () => {
+    const {container} = render(<ChoiceTypeWithInfo {...defaultProps} />)
+    expect(container.textContent).toContain('headLine')
+  })
+
+  describe('when there are no choices', () => {
+    it('should not render ChoiceTypeTable content', () => {
+      const {container} = render(
+        <ChoiceTypeWithInfo {...defaultProps} itemId={itemId} choices={[]} />,
+      )
+      // When no choices, should not contain table headers like "Answer"
+      expect(container.textContent).not.toContain('choice body')
+    })
+
+    it('should render excuse message', () => {
+      const {container} = render(
+        <ChoiceTypeWithInfo {...defaultProps} itemId={itemId} choices={[]} />,
+      )
+      expect(container.textContent).toContain(excusedMessage)
+    })
+  })
+
+  describe('when there are choices', () => {
+    it('should render choice content', () => {
+      const {container} = render(<ChoiceTypeWithInfo {...defaultProps} />)
+      expect(container.textContent).toContain('choice body')
+    })
+
+    it('should not render excuse message', () => {
+      const {container} = render(<ChoiceTypeWithInfo {...defaultProps} />)
+      expect(container.textContent).not.toContain(excusedMessage)
+    })
+  })
+})

package/src/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/NumericType/ChoiceTypeWithInfo/index.js

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

package/src/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/NumericType/ChoiceTypeWithInfo/presenter.js

@@ -0,0 +1,66 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import {choiceTypeObject} from '../../../../common/propTypes'
+import {Flex} from '@instructure/quiz-common/components/Flex/index'
+import ChoiceTypeTable from '../../shared/ChoiceTypeTable'
+import {Text} from '@instructure/ui-text'
+import t from '@instructure/quiz-i18n/format-message'
+
+export class ChoiceTypeWithInfo extends Component {
+  static propTypes = {
+    itemId: PropTypes.number.isRequired,
+    index: PropTypes.number.isRequired,
+    choices: choiceTypeObject.isRequired,
+    headLine: PropTypes.node,
+    styles: PropTypes.object,
+  }.isRequired
+
+  renderTable = () => {
+    const {itemId, choices, index} = this.props
+
+    const tableId = `${itemId}_${index}_choiceGroup`
+    const tableContainerSizeStyles = {}
+
+    return (
+      <ChoiceTypeTable
+        itemId={tableId}
+        choices={choices}
+        tableContainerStyles={tableContainerSizeStyles}
+      />
+    )
+  }
+
+  renderEmptyRequirement = () => {
+    return (
+      <Flex>
+        <Flex.Item padding="medium none none none">
+          <Text>{t('There are no entries for this requirement.')}</Text>
+        </Flex.Item>
+      </Flex>
+    )
+  }
+
+  render = () => {
+    const {headLine, choices} = this.props
+    const areThereChoices = Array.isArray(choices) && choices.length > 0
+
+    return (
+      <Flex direction="column" justifyItems="start">
+        <Flex.Item overflowY="visible" shouldGrow shouldShrink>
+          <Flex direction="column" justifyItems="start">
+            <Flex.Item shouldShrink padding="none none none none" overflowY="hidden">
+              <Flex direction="row" alignItems="start">
+                <Flex.Item shouldShrink shouldGrow margin="none none none none">
+                  {headLine}
+                </Flex.Item>
+              </Flex>
+            </Flex.Item>
+            <Flex.Item shouldShrink padding="none none medium none">
+              {areThereChoices ? this.renderTable() : this.renderEmptyRequirement()}
+            </Flex.Item>
+          </Flex>
+        </Flex.Item>
+      </Flex>
+    )
+  }
+}

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

@@ -0,0 +1,219 @@
+import React from 'react'
+import {render, fireEvent} from '@testing-library/react'
+import {expect, describe, it} from 'vitest'
+import runAxeCheck from '@instructure/ui-axe-check'
+import {NumericType} from '../presenter'
+
+describe('NumericType', () => {
+  const itemId = 1
+  const withinARange = {
+    type: 'withinARange',
+    end: '3',
+    start: '1',
+    choices: [
+      {
+        correct: true,
+        body: 'within a range body',
+        count: 2,
+        percentage: 33.3,
+      },
+    ],
+  }
+  const marginOfError = {
+    type: 'marginOfError',
+    value: '10.0',
+    margin: '50',
+    margin_type: 'percent',
+    choices: [
+      {
+        correct: true,
+        body: '12',
+        count: 2,
+        percentage: 50.0,
+      },
+    ],
+  }
+  const marginOfErrorWithAbsolute = {
+    ...marginOfError,
+    margin_type: 'absolute',
+  }
+  const preciseResponse = {
+    type: 'preciseResponse',
+    value: '10.0',
+    precision: '1',
+    precision_type: 'decimals',
+    choices: [
+      {
+        correct: true,
+        body: '10',
+        count: 2,
+        percentage: 50.0,
+      },
+    ],
+  }
+  const preciseResponseWithSignificantDigits = {
+    ...preciseResponse,
+    precision_type: 'significantDigits',
+  }
+  const exactResponse = {
+    type: 'exactResponse',
+    value: '10.5',
+    choices: [
+      {
+        correct: true,
+        body: '10.5',
+        count: 2,
+        percentage: 100.0,
+      },
+    ],
+  }
+  const uncategorized = {
+    type: 'uncategorizedType',
+    choices: [
+      {
+        correct: true,
+        body: '60',
+        count: 2,
+        percentage: 50.0,
+      },
+    ],
+  }
+  const answerSummary = {
+    requirements: {
+      correct_answers: [withinARange, marginOfError, preciseResponse, exactResponse, uncategorized],
+      incorrect_answer_choices: [
+        {
+          correct: false,
+          body: 'incorrect body',
+          count: 2,
+          percentage: 33.3,
+        },
+      ],
+    },
+    no_answer: {
+      count: 2,
+      percentage: 20,
+    },
+    aggregate: {
+      correct: {
+        count: 2,
+        percentage: 67,
+      },
+      incorrect: {
+        count: 0,
+        percentage: 0,
+      },
+    },
+  }
+
+  function renderComponent(props = {}) {
+    return render(<NumericType itemId={itemId} answerSummary={answerSummary} {...props} />)
+  }
+
+  const expandCards = container => {
+    // ExpandButton renders an IconButton with a data-testid="expand-button" inside.
+    // Find all expand-button icons and click their parent buttons.
+    const expandIcons = container.querySelectorAll('[data-testid="expand-button"]')
+    expandIcons.forEach(icon => {
+      const button = icon.closest('button')
+      if (button) fireEvent.click(button)
+    })
+  }
+
+  const renderWithSpecificCorrectAnswer = correctAnswer => {
+    const modifiedAnswerSummary = {...answerSummary}
+    modifiedAnswerSummary.requirements = {
+      ...answerSummary.requirements,
+      correct_answers: [correctAnswer, ...answerSummary.requirements.correct_answers.slice(1)],
+    }
+    const {container} = renderComponent({answerSummary: modifiedAnswerSummary})
+    expandCards(container)
+    return container.textContent
+  }
+
+  it('should render the component', () => {
+    const {container} = renderComponent()
+    expect(container.firstChild).toBeTruthy()
+  })
+
+  it('should meet a11y standards', async () => {
+    const {container} = renderComponent()
+    expect(await runAxeCheck(container)).toBe(true)
+  })
+
+  it('should render withinARange head line', () => {
+    const output = renderWithSpecificCorrectAnswer(withinARange)
+    expect(output).toContain('Correct answer - Within A Range')
+    expect(output).toContain(`Range Starts: ${withinARange.start}`)
+    expect(output).toContain(`Range Ends: ${withinARange.end}`)
+  })
+
+  it('should render marginOfError head line', () => {
+    const output = renderWithSpecificCorrectAnswer(marginOfError)
+    expect(output).toContain('Correct answer - Margin Of Error')
+    expect(output).toContain(`Answer: ${marginOfError.value}`)
+    expect(output).toContain(`+/- margin: ${marginOfError.margin}`)
+  })
+
+  it('should render marginOfError head line with percent', () => {
+    const output = renderWithSpecificCorrectAnswer(marginOfError)
+    expect(output).toContain('Type: Percent')
+  })
+
+  it('should render marginOfError head line with absolute', () => {
+    const output = renderWithSpecificCorrectAnswer(marginOfErrorWithAbsolute)
+    expect(output).toContain('Type: Absolute')
+  })
+
+  it('should render preciseResponse head line', () => {
+    const output = renderWithSpecificCorrectAnswer(preciseResponse)
+    expect(output).toContain('Correct answer - Precise Response')
+    expect(output).toContain(`Answer: ${preciseResponse.value}`)
+    expect(output).toContain(`Precision: ${preciseResponse.precision}`)
+  })
+
+  it('should render preciseResponse head line with decimal places', () => {
+    const output = renderWithSpecificCorrectAnswer(preciseResponse)
+    expect(output).toContain('Type: Decimal Places')
+  })
+
+  it('should render preciseResponse head line with significant digits', () => {
+    const output = renderWithSpecificCorrectAnswer(preciseResponseWithSignificantDigits)
+    expect(output).toContain('Type: Significant Digits')
+  })
+
+  it('should render exactResponse head line', () => {
+    const output = renderWithSpecificCorrectAnswer(exactResponse)
+    expect(output).toContain('Correct answer - Exact Response')
+    expect(output).toContain(`Answer: ${exactResponse.value}`)
+  })
+
+  it('should render uncategorized head line', () => {
+    const output = renderWithSpecificCorrectAnswer(uncategorized)
+    expect(output).toContain('Correct answer - Uncategorized')
+  })
+
+  it('should render empty correct answer message on empty correct_answers', () => {
+    const modifiedAnswerSummary = {...answerSummary}
+    modifiedAnswerSummary.requirements = {
+      ...answerSummary.requirements,
+      correct_answers: [],
+    }
+    const {container} = renderComponent({answerSummary: modifiedAnswerSummary})
+    expandCards(container)
+    const output = container.textContent
+    expect(output).toContain('There are no correct answers.')
+  })
+
+  it('should render empty incorrect answer message on empty incorrect_answer_choices', () => {
+    const modifiedAnswerSummary = {...answerSummary}
+    modifiedAnswerSummary.requirements = {
+      ...answerSummary.requirements,
+      incorrect_answer_choices: [],
+    }
+    const {container} = renderComponent({answerSummary: modifiedAnswerSummary})
+    expandCards(container)
+    const output = container.textContent
+    expect(output).toContain('There are no incorrect answers.')
+  })
+})

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

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