@instructure/quiz-core 22.17.0 → 22.18.0

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

@@ -0,0 +1,135 @@
+import {expect} from 'vitest'
+import React from 'react'
+import {render} from '@testing-library/react'
+import runAxeCheck from '@instructure/ui-axe-check'
+import {ChoiceTypeTable} from '../presenter'
+
+describe('ChoiceTypeTable', () => {
+  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 itemId = 1
+
+  function renderComponent(props = {}) {
+    return render(<ChoiceTypeTable itemId={itemId} choices={sampleChoices} {...props} />)
+  }
+
+  it('should render table headers', () => {
+    const {container} = renderComponent()
+    const output = container.textContent
+
+    expect(output).toContain('Answer')
+    expect(output).toContain('Respondents')
+    expect(output).toContain('Percentage')
+  })
+
+  it('should have the screen reader content', () => {
+    const {container} = renderComponent()
+    const output = container.textContent
+
+    expect(output).toContain(`Correct answer: ${trueChoice.body}`)
+    expect(output).toContain(`Incorrect answer: ${falseChoice.body}`)
+  })
+
+  it('should render choices bodies', () => {
+    const {container} = renderComponent()
+    const output = container.textContent
+
+    expect(output).toContain(trueChoice.body)
+    expect(output).toContain(falseChoice.body)
+  })
+
+  it('should render choices counts', () => {
+    const {container} = renderComponent()
+    const output = container.textContent
+
+    expect(output).toContain(trueChoice.count)
+    expect(output).toContain(falseChoice.count)
+  })
+
+  it('should render choices percentages', () => {
+    const {container} = renderComponent()
+    const output = container.textContent
+
+    expect(output).toContain(trueChoice.percentage)
+    expect(output).toContain(falseChoice.percentage)
+  })
+
+  it('should meet a11y standards', async () => {
+    const {container} = renderComponent()
+    expect(await runAxeCheck(container)).toBe(true)
+  })
+
+  it('should render the component', () => {
+    const {container} = renderComponent()
+    expect(container.querySelector('table')).not.toBeNull()
+  })
+
+  describe('when body has no raw text content', () => {
+    const noRawTextChoice = {
+      body: '<img src="hello.png" />',
+      count: 12,
+      percentage: 15.4,
+    }
+
+    describe('when choice is correct', () => {
+      const correctChoices = [
+        {
+          ...noRawTextChoice,
+          correct: true,
+        },
+      ]
+
+      it('should render "Correct answer" for choice body', () => {
+        const {container} = render(<ChoiceTypeTable itemId={itemId} choices={correctChoices} />)
+        const output = container.textContent
+        expect(output).toContain('Correct answer')
+      })
+    })
+
+    describe('when choice is incorrect', () => {
+      const incorrectChoices = [
+        {
+          ...noRawTextChoice,
+          correct: false,
+        },
+      ]
+
+      it('should render "Incorrect answer" for choice body', () => {
+        const {container} = render(<ChoiceTypeTable itemId={itemId} choices={incorrectChoices} />)
+        const output = container.textContent
+        expect(output).toContain('Incorrect answer')
+      })
+    })
+  })
+
+  describe('when body has raw text content', () => {
+    const sampleChoice = {
+      body: '<p>True</p>',
+      count: 0,
+      correct: true,
+      percentage: 0.0,
+    }
+
+    const rawChoices = [sampleChoice]
+
+    it('should render body and strip the HTML', () => {
+      const {container} = render(<ChoiceTypeTable itemId={itemId} choices={rawChoices} />)
+      const output = container.textContent
+      expect(output).toContain('True')
+      expect(output).not.toContain('<p>')
+    })
+  })
+})

package/src/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/ChoiceTypeTable/index.js

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

package/src/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/ChoiceTypeTable/presenter.js

@@ -0,0 +1,195 @@
+/** @jsx jsx */
+import {Component} from 'react'
+import t from '@instructure/quiz-i18n/format-message'
+import {Table} from '@instructure/ui-table'
+import {jsx, css} from '@instructure/emotion'
+import {ScreenReaderContent} from '@instructure/ui-a11y-content'
+import PropTypes from 'prop-types'
+import {choiceTypeObject} from '../../../../common/propTypes'
+import generateStyle from './styles'
+import generateComponentTheme from './theme'
+import {IconCheckSolid, IconXSolid} from '@instructure/ui-icons'
+import extractTextFromHtml from '@instructure/quiz-interactions/util/extractTextFromHtml'
+import {Text} from '@instructure/ui-text'
+import {Flex} from '@instructure/quiz-common/components/Flex/index'
+import {withStyleOverrides} from '@instructure/quiz-common/util/withStyleOverrides'
+
+const correctAttribute = 'correct'
+const incorrectAttribute = 'incorrect'
+
+@withStyleOverrides(generateStyle, generateComponentTheme)
+export class ChoiceTypeTable extends Component {
+  static displayName = 'ChoiceTypeTable'
+  static componentId = `Quizzes${this.displayName}`
+
+  static propTypes = {
+    itemId: PropTypes.number.isRequired,
+    choices: PropTypes.arrayOf(choiceTypeObject).isRequired,
+    tableContainerStyles: PropTypes.object,
+    styles: PropTypes.object,
+    makeStyles: PropTypes.func,
+  }
+
+  static defaultProps = {
+    tableContainerStyles: undefined,
+  }
+
+  rowStyleMap = {
+    [correctAttribute]: this.props.styles.correctRow,
+    [incorrectAttribute]: this.props.styles.incorrectRow,
+  }
+
+  renderIcon = correct => {
+    const iconStyles = [this.props.styles.iconWrapper, correct ? this.props.styles.iconCorrect : {}]
+    return <div css={iconStyles}>{correct ? <IconCheckSolid /> : <IconXSolid />}</div>
+  }
+
+  renderFirstCell = content => {
+    return <div css={this.props.styles.firstTextContainer}>{content}</div>
+  }
+
+  renderCell = content => {
+    return <div css={this.props.styles.textContainer}>{content}</div>
+  }
+
+  answerLabel = correct => {
+    return correct ? t('Correct answer') : t('Incorrect answer')
+  }
+
+  extractChoiceText = (choiceBody, correct) => {
+    const text = extractTextFromHtml(choiceBody)
+    if (text.trim().length > 0) return text
+    return this.answerLabel(correct)
+  }
+
+  nextChoiceIsCorrect = (choices, choiceIndex) => {
+    return choices[choiceIndex]?.correct
+  }
+
+  getDataIconAttribute = (correct, choiceIndex) => {
+    const {choices} = this.props
+
+    if (this.nextChoiceIsCorrect(choices, choiceIndex + 1) && !correct) {
+      return ''
+    }
+
+    return correct ? correctAttribute : incorrectAttribute
+  }
+
+  renderRow = (choice, choiceIndex) => {
+    const {correct, body} = choice
+    const extractedBody = this.extractChoiceText(body, correct)
+    const screenReaderContent = `${this.answerLabel(correct)}: ${extractedBody}`
+
+    return (
+      <Table.Row key={choiceIndex}>
+        <Table.RowHeader themeOverride={{padding: '0'}}>
+          <ScreenReaderContent>{screenReaderContent}</ScreenReaderContent>
+          <Flex direction="row" alignItems="center">
+            <Flex.Item width="46px" textAlign="center" align="stretch">
+              <div
+                data-icon={this.getDataIconAttribute(correct, choiceIndex)}
+                css={this.props.styles.iconWrapper}
+              >
+                {this.renderIcon(correct)}
+              </div>
+            </Flex.Item>
+            <Flex.Item shouldShrink shouldGrow>
+              <Text>{this.renderFirstCell(extractedBody)}</Text>
+            </Flex.Item>
+          </Flex>
+        </Table.RowHeader>
+        <Table.Cell themeOverride={{padding: '0'}}>{this.renderCell(choice.count)}</Table.Cell>
+        <Table.Cell
+          themeOverride={{
+            padding: '0',
+          }}
+          textAlign="center"
+        >
+          {this.renderCell(`${choice.percentage}%`)}
+        </Table.Cell>
+      </Table.Row>
+    )
+  }
+
+  componentDidMount = () => {
+    this.applyStylesToTable()
+    this.props.makeStyles()
+  }
+
+  componentDidUpdate = () => {
+    this.props.makeStyles()
+  }
+
+  applyStylesToTable = () => {
+    if (this.tableRef) {
+      for (let row of this.tableRef.rows) {
+        const icon = row.querySelector('tr th:first-child [data-icon]')?.dataset?.icon
+        const td = row.querySelectorAll('td')
+        const th = row.querySelectorAll('th')
+
+        if (icon) {
+          td.forEach(cell => {
+            cell.setAttribute('style', css(this.rowStyleMap[icon].td).styles)
+          })
+
+          th.forEach(cell => {
+            cell.setAttribute('style', css(this.rowStyleMap[icon].th).styles)
+          })
+
+          if (icon === correctAttribute) {
+            row
+              .querySelector('th:first-child')
+              .setAttribute('style', css(this.props.styles.correctRow.thFirstChild).styles)
+            row
+              .querySelector('td:last-child')
+              .setAttribute('style', css(this.props.styles.correctRow.tdLastChild).styles)
+          }
+        }
+        row.setAttribute('style', css(this.rowStyleMap[icon]).styles)
+      }
+    }
+  }
+
+  setTableRef = el => (this.tableRef = el)
+
+  render = () => {
+    const {choices, itemId} = this.props
+
+    const answerHeaderId = `answer-frequency-summary-answer-${itemId}`
+    const respondentsHeaderId = `answer-frequency-summary-respondents-${itemId}`
+    const percentageHeaderId = `answer-frequency-summary-percentage-${itemId}`
+
+    const containerStyles = [
+      this.props.styles.tableContainer,
+      !this.nextChoiceIsCorrect(choices, 0) ? this.props.styles.headerGrayBottomBorder : {},
+    ]
+
+    return (
+      <div css={containerStyles}>
+        <Table caption={t('Answer Frequency Summary')} elementRef={this.setTableRef}>
+          <Table.Head>
+            <Table.Row>
+              <Table.ColHeader
+                id={answerHeaderId}
+                height="47px"
+                themeOverride={{
+                  padding: '0 0 0 57px',
+                }}
+              >
+                {t('Answer')}
+              </Table.ColHeader>
+              <Table.ColHeader id={respondentsHeaderId} height="47px" textAlign="center">
+                {t('Respondents')}
+              </Table.ColHeader>
+              <Table.ColHeader id={percentageHeaderId} height="47px" textAlign="center">
+                {t('Percentage')}
+              </Table.ColHeader>
+            </Table.Row>
+          </Table.Head>
+          <Table.Body>{choices.map(this.renderRow)}</Table.Body>
+        </Table>
+      </div>
+    )
+  }
+}

package/src/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/ChoiceTypeTable/styles.js

@@ -0,0 +1,102 @@
+const generateStyle = (componentTheme, props) => {
+  const tableContainerStyles = props.tableContainerStyles || {
+    width: 'calc(25% + 350px)',
+    maxWidth: '100%',
+  }
+
+  return {
+    tableWrapper: {
+      display: 'flex',
+      flexBasis: '100%',
+      flexDirection: 'column',
+      paddingBottom: componentTheme.tableBottomPadding,
+    },
+
+    tableWidthMax: {},
+
+    tableContainer: {
+      ...tableContainerStyles,
+      table: {
+        borderCollapse: 'separate',
+        borderSpacing: '0 1px',
+      },
+      'table tbody tr td:': {
+        width: '33.33%',
+      },
+      'table tbody tr th': {
+        fontWeight: '400',
+        width: '33.33%',
+      },
+    },
+
+    headerGrayBottomBorder: {
+      'table thead tr th': {
+        borderBottom: `solid 0.0625rem ${componentTheme.colorGray}`,
+      },
+      'table thead tr td': {
+        borderBottom: `solid 0.0625rem ${componentTheme.colorGray}`,
+      },
+    },
+
+    iconWrapper: {
+      display: 'flex',
+      height: '100%',
+      minHeight: '47px',
+      width: '46px',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+
+    iconCorrect: {
+      backgroundColor: componentTheme.colorGreen,
+      svg: {
+        fill: 'white',
+      },
+    },
+
+    textContainer: {
+      height: 'calc(100% - 4px)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+
+    firstTextContainer: {
+      padding: componentTheme.cellPadding,
+    },
+
+    incorrectRow: {
+      td: {
+        borderBottom: `solid 0.0625rem ${componentTheme.colorGray}`,
+      },
+      th: {
+        borderBottom: `solid 0.0625rem ${componentTheme.colorGray}`,
+      },
+    },
+
+    correctRow: {
+      td: {
+        borderStyle: 'solid',
+        borderWidth: '2px 0 2px 0',
+        borderColor: componentTheme.colorGreen,
+      },
+      th: {
+        border: 0,
+      },
+      thFirstChild: {
+        borderStyle: 'solid',
+        borderRadius: '4px 0 0 4px',
+        borderWidth: '2px 0 2px 2px',
+        borderColor: componentTheme.colorGreen,
+      },
+      tdLastChild: {
+        borderStyle: 'solid',
+        borderWidth: '2px 2px 2px 0',
+        borderRadius: '0 4px 4px 0',
+        borderColor: componentTheme.colorGreen,
+      },
+    },
+  }
+}
+
+export default generateStyle

package/src/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/ChoiceTypeTable/theme.js

@@ -0,0 +1,10 @@
+const generateComponentTheme = ({spacing, colors}) => {
+  return {
+    tableBottomPadding: spacing.medium,
+    colorGreen: colors.contrasts.green4570,
+    colorGray: colors.contrasts.grey1214,
+    cellPadding: '0.75rem 0.75rem',
+  }
+}
+
+export default generateComponentTheme

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

@@ -0,0 +1,34 @@
+import React from 'react'
+import {render, screen, fireEvent} from '@testing-library/react'
+import {ExpandableCard} from '../presenter'
+import {expect} from 'vitest'
+
+describe('ExpandableCard', () => {
+  const defaultProps = {
+    content: <div>content</div>,
+    headLine: <span>headLine</span>,
+  }
+
+  it('should render headline text', () => {
+    const {container} = render(<ExpandableCard {...defaultProps} />)
+    expect(container.textContent).toContain('headLine')
+  })
+
+  describe('body expanding', () => {
+    describe('when body is closed', () => {
+      it('should not render content', () => {
+        const {container} = render(<ExpandableCard {...defaultProps} />)
+        expect(container.textContent).not.toContain('content')
+      })
+    })
+
+    describe('when body is open', () => {
+      it('should render content after clicking expand', () => {
+        const {container} = render(<ExpandableCard {...defaultProps} />)
+        const expandButton = screen.getByRole('button', {name: /expand group result/i})
+        fireEvent.click(expandButton)
+        expect(container.textContent).toContain('content')
+      })
+    })
+  })
+})

package/src/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/ExpandableCard/index.js

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

package/src/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/ExpandableCard/presenter.js

@@ -0,0 +1,84 @@
+/** @jsx jsx */
+import {Component} from 'react'
+import Card from '../../../../../../../common/components/shared/Card'
+import {jsx} from '@instructure/emotion'
+import ExpandButton from '../../../../../../../common/components/shared/ExpandButton'
+import t from '@instructure/quiz-i18n/format-message'
+import generateStyle from './styles'
+import generateComponentTheme from './theme'
+import PropTypes from 'prop-types'
+import {Flex} from '@instructure/quiz-common/components/Flex/index'
+import {withStyleOverrides} from '@instructure/quiz-common/util/withStyleOverrides'
+
+@withStyleOverrides(generateStyle, generateComponentTheme)
+export class ExpandableCard extends Component {
+  static displayName = 'ExpandableCard'
+  static componentId = `Quizzes${this.displayName}`
+
+  static propTypes = {
+    headLine: PropTypes.node,
+    content: PropTypes.node,
+    styles: PropTypes.object,
+  }.isRequired
+
+  state = {
+    bodyExpanded: false,
+  }
+
+  handleBodyToggle = () => {
+    this.setState({bodyExpanded: !this.state.bodyExpanded})
+  }
+
+  renderGroup = () => {
+    const {headLine} = this.props
+
+    return (
+      <Flex direction="row" alignItems="start">
+        <Flex.Item shouldShrink shouldGrow margin="xx-small none none none">
+          {headLine}
+        </Flex.Item>
+        <Flex.Item margin="none none none x-small">
+          <ExpandButton
+            onClick={this.handleBodyToggle}
+            title={this.state.bodyExpanded ? t('collapse group result') : t('expand group result')}
+            isExpanded={this.state.bodyExpanded}
+          />
+        </Flex.Item>
+      </Flex>
+    )
+  }
+
+  renderBody = () => {
+    const {content, styles} = this.props
+    const {bodyContainer} = styles
+
+    return (
+      <Flex.Item shouldShrink padding="x-small small x-small small">
+        <div css={bodyContainer}>{content}</div>
+      </Flex.Item>
+    )
+  }
+
+  render = () => {
+    const {styles} = this.props
+    const {groupWrapper} = styles
+    const {bodyExpanded} = this.state
+
+    return (
+      <div css={groupWrapper}>
+        <Card>
+          <Flex direction="column" justifyItems="start">
+            <Flex.Item shouldGrow shouldShrink overflowY="visible">
+              <Flex direction="column" justifyItems="start">
+                <Flex.Item shouldShrink padding="x-small small x-small small" overflowY="hidden">
+                  {this.renderGroup()}
+                </Flex.Item>
+                {bodyExpanded && this.renderBody()}
+              </Flex>
+            </Flex.Item>
+          </Flex>
+        </Card>
+      </div>
+    )
+  }
+}

package/src/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/ExpandableCard/styles.js

@@ -0,0 +1,16 @@
+const generateStyle = componentTheme => {
+  return {
+    groupWrapper: {
+      padding: '0',
+      width: 'calc(25% + 350px)',
+      minWidth: componentTheme.cardMinWidth,
+      maxWidth: '100%',
+    },
+    bodyContainer: {
+      overflow: 'auto',
+      maxHeight: '600px',
+    },
+  }
+}
+
+export default generateStyle

package/src/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/shared/ExpandableCard/theme.js

@@ -0,0 +1,7 @@
+const generateComponentTheme = () => {
+  return {
+    cardMinWidth: '500px',
+  }
+}
+
+export default generateComponentTheme

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

@@ -0,0 +1,49 @@
+import React from 'react'
+import {render} from '@testing-library/react'
+import {expect} from 'vitest'
+import AfsPartsContainer from '../AfsPartsContainer'
+
+describe('AfsPartsContainer', () => {
+  const defaultProps = {
+    afsTable: <span>afsTable</span>,
+    aggregationTable: <span>aggregationTable</span>,
+  }
+
+  it('should have afsTable', () => {
+    const {container} = render(<AfsPartsContainer {...defaultProps} />)
+    expect(container.textContent).toContain('afsTable')
+  })
+
+  it('should have aggregationTable', () => {
+    const {container} = render(<AfsPartsContainer {...defaultProps} />)
+    expect(container.textContent).toContain('aggregationTable')
+  })
+
+  describe('when afsTable missing', () => {
+    const props = {...defaultProps, afsTable: null}
+
+    it('should not have afsTable', () => {
+      const {container} = render(<AfsPartsContainer {...props} />)
+      expect(container.textContent).not.toContain('afsTable')
+    })
+
+    it('should have aggregationTable', () => {
+      const {container} = render(<AfsPartsContainer {...props} />)
+      expect(container.textContent).toContain('aggregationTable')
+    })
+  })
+
+  describe('when aggregationTable missing', () => {
+    const props = {...defaultProps, aggregationTable: null}
+
+    it('should not have aggregationTable', () => {
+      const {container} = render(<AfsPartsContainer {...props} />)
+      expect(container.textContent).not.toContain('aggregationTable')
+    })
+
+    it('should have afsTable', () => {
+      const {container} = render(<AfsPartsContainer {...props} />)
+      expect(container.textContent).toContain('afsTable')
+    })
+  })
+})