@instructure/quiz-core 22.17.0 → 22.18.0

package/src/common/components/LearnosityCalculator/index.js

@@ -0,0 +1,119 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+
+import {appendFeature, destroyFeature, toggleFeature} from '../../../taking/learnosity'
+
+export class LearnosityCalculator extends Component {
+  static propTypes = {
+    activeCalculatorId: PropTypes.string,
+    appendFeature: PropTypes.func.isRequired,
+    calculatorType: PropTypes.oneOf(['none', 'basic', 'scientific']),
+    destroyFeature: PropTypes.func.isRequired,
+    featureId: PropTypes.string,
+    quizSessionId: PropTypes.string,
+    render: PropTypes.func.isRequired,
+    setActiveCalculatorId: PropTypes.func,
+    toggleFeature: PropTypes.func.isRequired,
+    iceTopNavBarEnabled: PropTypes.bool,
+    setCalculatorEnabled: PropTypes.func,
+  }
+
+  static defaultProps = {
+    activeCalculatorId: null,
+    appendFeature,
+    calculatorType: 'none',
+    destroyFeature,
+    featureId: null,
+    quizSessionId: null,
+    setActiveCalculatorId: Function.prototype,
+    toggleFeature,
+    iceTopNavBarEnabled: false,
+    setCalculatorEnabled: () => {},
+  }
+
+  state = {
+    learnosityCalculatorReady: false,
+    featureId: this.props.featureId || `calc_${new Date().getTime()}`,
+  }
+
+  handleClick = () => {
+    this.toggle()
+    this.props.setActiveCalculatorId(this.state.featureId)
+  }
+
+  componentDidMount() {
+    if (this.props.calculatorType !== 'none') {
+      this.initializeLearnosity()
+    }
+  }
+
+  componentWillUnmount() {
+    this.destroyLearnosity()
+  }
+
+  componentDidUpdate(prevProps) {
+    if (
+      this.props.calculatorType !== 'none' &&
+      (prevProps.calculatorType === 'none' ||
+        (this.props.quizSessionId && !prevProps.quizSessionId))
+    ) {
+      this.initializeLearnosity()
+    } else if (this.props.calculatorType === 'none' && prevProps.calculatorType !== 'none') {
+      this.destroyLearnosity()
+    } else if (
+      this.props.activeCalculatorId !== prevProps.activeCalculatorId &&
+      this.props.activeCalculatorId !== this.state.featureId
+    ) {
+      this.toggle(false)
+    }
+  }
+
+  async initializeLearnosity() {
+    if (!this.props.quizSessionId) return
+    await this.props.appendFeature(this.props.quizSessionId, {
+      type: 'calculator',
+      mode: this.props.calculatorType,
+      feature_id: this.state.featureId,
+    })
+
+    if (this.props.calculatorType === 'none') return
+    this.setState({
+      learnosityCalculatorReady: true,
+    })
+
+    this.props.setCalculatorEnabled(true)
+  }
+
+  destroyLearnosity() {
+    this.props.destroyFeature(this.state.featureId)
+  }
+
+  toggle(onOff) {
+    this.props.toggleFeature(this.state.featureId, onOff)
+  }
+
+  renderCalculator() {
+    return (
+      <>
+        {this.props.render({
+          toggleCalculator: this.handleClick,
+          enabled: this.state.learnosityCalculatorReady,
+          iceTopNavBarEnabled: this.props.iceTopNavBarEnabled,
+        })}
+        <div hidden>
+          <span className={`learnosity-feature feature-${this.state.featureId}`} />
+        </div>
+      </>
+    )
+  }
+
+  render() {
+    if (!this.props.quizSessionId || this.props.calculatorType === 'none') {
+      return null
+    }
+
+    return this.renderCalculator()
+  }
+}
+
+export default LearnosityCalculator

package/src/common/components/MaskedTextInput/MaskedTextInput.stories.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import {MaskedTextInput} from './index'
+
+const props = {
+  renderLabel: 'Example of a masked text input',
+  checkboxLabel: 'Select to show the current value',
+  value: 'Is it secret? Is it safe?',
+  onMaskedChange: Function.prototype,
+}
+
+export default {
+  title: MaskedTextInput.name,
+}
+
+export const whenMasked = () => <MaskedTextInput {...props} />
+export const whenUnmasked = () => <MaskedTextInput {...props} masked={false} />

package/src/common/components/MaskedTextInput/__tests__/index.test.js

@@ -0,0 +1,42 @@
+import {expect, vi} from 'vitest'
+import React from 'react'
+import {render, screen} from '../../../../../tests/util/rtlRenderOverride'
+import userEvent from '@testing-library/user-event'
+
+import {MaskedTextInput} from '../index'
+
+describe('MaskedTextInput', () => {
+  let props
+  beforeEach(() => {
+    props = {
+      renderLabel: 'Test Input',
+      checkboxLabel: 'Unmask',
+      onMaskedChange: vi.fn(),
+    }
+  })
+
+  it('renders a text input when unmasked', () => {
+    render(<MaskedTextInput {...props} masked={false} />)
+
+    const input = screen.getByLabelText(props.renderLabel)
+
+    expect(input.type).toBe('text')
+  })
+
+  it('renders a password input when masked', () => {
+    render(<MaskedTextInput {...props} />)
+
+    const input = screen.getByLabelText(props.renderLabel)
+
+    expect(input.type).toBe('password')
+  })
+
+  it('calls the appropriate callback when the "Unmask" checkbox is checked', async () => {
+    render(<MaskedTextInput {...props} />)
+
+    const checkbox = screen.getByLabelText(props.checkboxLabel)
+    await userEvent.click(checkbox)
+
+    expect(props.onMaskedChange).toHaveBeenCalledTimes(1)
+  })
+})

package/src/common/components/MaskedTextInput/index.js

@@ -0,0 +1,55 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+
+import {View} from '@instructure/ui-view'
+import {Checkbox} from '@instructure/ui-checkbox'
+import {omitProps} from '@instructure/ui-react-utils'
+
+import {TextInput} from '@instructure/quiz-common/components/TextInput/index'
+
+const maskedTextInputPropTypes = {
+  /**
+   * The label to be used for the checkbox that controls whether the input is masked
+   */
+  checkboxLabel: PropTypes.string.isRequired,
+  /**
+   * Whether or not the input text is masked
+   */
+  masked: PropTypes.bool,
+  /**
+   * The function to call when the user clicks the checkbox to either mask or unmask the input
+   */
+  onMaskedChange: PropTypes.func,
+}
+
+export class MaskedTextInput extends Component {
+  static propTypes = {
+    ...maskedTextInputPropTypes,
+    ...TextInput.propTypes,
+  }
+
+  static defaultProps = {
+    ...TextInput.defaultProps,
+    masked: true,
+    onMaskedChange: Function.prototype,
+  }
+
+  render() {
+    const {checkboxLabel, masked, onMaskedChange, type} = this.props
+    const textInputProps = {
+      ...omitProps(this.props, maskedTextInputPropTypes),
+      type: masked ? 'password' : type,
+    }
+
+    return (
+      <View as="div">
+        <TextInput {...textInputProps} />
+        <View as="div" margin="small 0">
+          <Checkbox label={checkboxLabel} checked={!masked} onChange={onMaskedChange} />
+        </View>
+      </View>
+    )
+  }
+}
+
+export default MaskedTextInput

package/src/common/components/ModuleNavigationButtons/index.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import t from '@instructure/quiz-i18n/format-message'
+import {Button} from '@instructure/ui-buttons'
+import {Flex} from '@instructure/quiz-common'
+import {IconArrowOpenStartLine, IconArrowOpenEndLine} from '@instructure/ui-icons'
+import {View} from '@instructure/ui-view'
+
+export interface ModuleNavigationButtonsProps {
+  onPreviousItem?: () => void
+  onNextItem?: () => void
+  margin?: string
+  maxWidth?: string
+}
+
+export function ModuleNavigationButtons({
+  onPreviousItem,
+  onNextItem,
+  margin = '0 auto',
+  maxWidth = 'none',
+}: ModuleNavigationButtonsProps) {
+  if (!onPreviousItem && !onNextItem) {
+    return null
+  }
+
+  return (
+    <View maxWidth={maxWidth} as="div" margin={margin} width={'100%'}>
+      <Flex justifyItems="space-between">
+        <Flex.Item>
+          {onPreviousItem ? (
+            <Button
+              onClick={onPreviousItem}
+              renderIcon={<IconArrowOpenStartLine />}
+              data-testid="module-navigation-previous"
+            >
+              {t('Previous')}
+            </Button>
+          ) : (
+            <span />
+          )}
+        </Flex.Item>
+        <Flex.Item>
+          {onNextItem ? (
+            <Button onClick={onNextItem} data-testid="module-navigation-next">
+              <Flex alignItems="center" gap="x-small">
+                <Flex.Item>{t('Next')}</Flex.Item>
+                <Flex.Item>
+                  <IconArrowOpenEndLine size="x-small" />
+                </Flex.Item>
+              </Flex>
+            </Button>
+          ) : null}
+        </Flex.Item>
+      </Flex>
+    </View>
+  )
+}

package/src/common/components/Pin/__tests__/Pin.test.js

@@ -0,0 +1,57 @@
+import {expect, vi} from 'vitest'
+import React from 'react'
+import {render, screen, fireEvent} from '@testing-library/react'
+
+import Pin from '../index'
+
+describe('Pin', () => {
+  const defaultProps = {
+    pinSessionItem: vi.fn(),
+    isPinned: true,
+    position: 1,
+  }
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('pin', () => {
+    describe('pinning the item', () => {
+      it('calls pinSessionItem', () => {
+        render(<Pin {...defaultProps} />)
+        const pinBtn = screen.getByRole('button')
+        fireEvent.click(pinBtn)
+        expect(defaultProps.pinSessionItem).toHaveBeenCalled()
+      })
+
+      it('stops the click from propagating', () => {
+        const parentClickSpy = vi.fn()
+        render(
+          // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+          <div onClick={parentClickSpy}>
+            <Pin {...defaultProps} />
+          </div>,
+        )
+        const pinBtn = screen.getByRole('button')
+        fireEvent.click(pinBtn)
+
+        // The parent onClick should NOT have been called because stopPropagation is called
+        expect(parentClickSpy).not.toHaveBeenCalled()
+      })
+    })
+
+    describe('isPinned is true', () => {
+      it('renders the pinned button label', () => {
+        render(<Pin {...defaultProps} isPinned={true} />)
+        expect(screen.getByRole('button', {name: /is pinned/i})).toBeDefined()
+      })
+    })
+
+    describe('isPinned is false', () => {
+      it('renders the unpinned button label', () => {
+        render(<Pin {...defaultProps} isPinned={false} />)
+        expect(screen.getByRole('button', {name: /is unpinned/i})).toBeDefined()
+      })
+    })
+  })
+})

package/src/common/components/Pin/index.js

@@ -0,0 +1,4 @@
+import {Pin as PinPresenter} from './presenter'
+
+export const Pin = PinPresenter
+export default Pin

package/src/common/components/Pin/presenter.js

@@ -0,0 +1,39 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+
+import {IconButton} from '@instructure/ui-buttons'
+import {IconPinLine, IconPinSolid} from '@instructure/ui-icons'
+
+import t from '@instructure/quiz-i18n/format-message'
+
+export class Pin extends Component {
+  static propTypes = {
+    isPinned: PropTypes.bool.isRequired,
+    pinSessionItem: PropTypes.func.isRequired,
+    position: PropTypes.number.isRequired,
+  }
+
+  handleClick = e => {
+    e.stopPropagation()
+    this.props.pinSessionItem()
+  }
+
+  render() {
+    const message = this.props.isPinned
+      ? t('Question {position, number} is pinned. Click to unpin.', {position: this.props.position})
+      : t('Question {position, number} is unpinned. Click to pin.', {position: this.props.position})
+    return (
+      <IconButton
+        size="small"
+        onClick={this.handleClick}
+        withBackground={false}
+        withBorder={false}
+        renderIcon={this.props.isPinned ? IconPinSolid : IconPinLine}
+        screenReaderLabel={message}
+        data-automation="sdk-pin-question-button"
+      />
+    )
+  }
+}
+
+export default Pin

package/src/common/components/PreviewFrame/__tests__/index.test.js

@@ -0,0 +1,55 @@
+import React from 'react'
+import {render, screen, fireEvent} from '@testing-library/react'
+import {expect, vi} from 'vitest'
+import PreviewFrame from '..'
+
+describe('PreviewFrame', () => {
+  const childText = 'Some child text'
+
+  it('should render a child element', () => {
+    render(
+      <PreviewFrame onPreviewClose={vi.fn()}>
+        <p>{childText}</p>
+      </PreviewFrame>,
+    )
+    expect(screen.getByText(childText)).toBeDefined()
+  })
+
+  it('should render screen reader text', () => {
+    const {container} = render(
+      <PreviewFrame onPreviewClose={vi.fn()}>
+        <p>{childText}</p>
+      </PreviewFrame>,
+    )
+    expect(container.textContent).toContain('You are in preview mode.')
+  })
+
+  it('should render a preview message', () => {
+    render(
+      <PreviewFrame onPreviewClose={vi.fn()}>
+        <p>{childText}</p>
+      </PreviewFrame>,
+    )
+    expect(screen.getByText('Preview')).toBeDefined()
+  })
+
+  it('should render a close button', () => {
+    render(
+      <PreviewFrame onPreviewClose={vi.fn()}>
+        <p>{childText}</p>
+      </PreviewFrame>,
+    )
+    expect(screen.getByText('Exit Preview')).toBeDefined()
+  })
+
+  it('should call onPreviewClose on close button click', () => {
+    const onChangeStub = vi.fn()
+    render(
+      <PreviewFrame onPreviewClose={onChangeStub}>
+        <p>{childText}</p>
+      </PreviewFrame>,
+    )
+    fireEvent.click(screen.getByText('Exit Preview'))
+    expect(onChangeStub).toHaveBeenCalledTimes(1)
+  })
+})

package/src/common/components/PreviewFrame/index.js

@@ -0,0 +1,30 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import {BarneyBox} from '@instructure/quiz-common/components/BarneyBox/index'
+import {Heading} from '@instructure/ui-heading'
+import {IconEyeSolid} from '@instructure/ui-icons'
+import {Button} from '@instructure/ui-buttons'
+import t from '@instructure/quiz-i18n/format-message'
+
+export class PreviewFrame extends Component {
+  static propTypes = {
+    children: PropTypes.element.isRequired,
+    onPreviewClose: PropTypes.func.isRequired,
+  }
+
+  render() {
+    return (
+      <BarneyBox screenReaderText={t('You are in preview mode.')}>
+        <BarneyBox.Body>{this.props.children}</BarneyBox.Body>
+        <BarneyBox.Footer>
+          <Heading level="h4" color="primary-inverse">
+            <IconEyeSolid variant="icon-inverse" /> &nbsp;{t('Preview')}
+          </Heading>
+          <Button onClick={this.props.onPreviewClose}>{t('Exit Preview')}</Button>
+        </BarneyBox.Footer>
+      </BarneyBox>
+    )
+  }
+}
+
+export default PreviewFrame

package/src/common/components/PrintFontSizeModal/__tests__/presenter.test.js

@@ -0,0 +1,114 @@
+import {expect, vi} from 'vitest'
+import React from 'react'
+import {render, screen, fireEvent, waitFor} from '@testing-library/react'
+import PrintFontSizeModal from '../presenter'
+import runAxeCheck from '@instructure/ui-axe-check'
+
+describe('PrintFontSize Modal', () => {
+  const renderModal = ({onCancel = Function.prototype, isOpen = true, ...options} = {}) => {
+    return render(<PrintFontSizeModal onCancel={onCancel} isOpen={isOpen} {...options} />)
+  }
+
+  describe('modal header', () => {
+    it('renders a the title', () => {
+      renderModal()
+      expect(screen.getByText('Print Quiz')).toBeDefined()
+    })
+
+    it('renders a close button', () => {
+      renderModal()
+      expect(screen.getByText('Close')).toBeDefined()
+    })
+  })
+
+  describe('main content', () => {
+    it('renders the font size radio group', () => {
+      renderModal()
+
+      const mediumRadio = document.querySelector(
+        'input[data-automation="print-font-size-modal-radio-button-medium"]',
+      )
+      expect(mediumRadio).not.toBeNull()
+      expect(mediumRadio.value).toBe('medium')
+
+      const largeRadio = document.querySelector(
+        'input[data-automation="print-font-size-modal-radio-button-large"]',
+      )
+      expect(largeRadio).not.toBeNull()
+      expect(largeRadio.value).toBe('large')
+
+      const xLargeRadio = document.querySelector(
+        'input[data-automation="print-font-size-modal-radio-button-xLarge"]',
+      )
+      expect(xLargeRadio).not.toBeNull()
+      expect(xLargeRadio.value).toBe('xLarge')
+    })
+
+    it('Hides the example text from screen reader', () => {
+      renderModal()
+      const exampleTexts = document.querySelectorAll('p[aria-hidden="true"]')
+
+      expect(exampleTexts.length).toBe(3)
+      exampleTexts.forEach(exampleText => {
+        expect(exampleText.textContent).toBe('Printed quiz question')
+      })
+    })
+
+    it('renders the Remeber Font Size checkbox', () => {
+      renderModal()
+      const checkbox = document.querySelector('input[type="checkbox"]')
+      expect(checkbox).not.toBeNull()
+      // The label text should be in the document
+      expect(screen.getByText(/Remember text size setting/)).toBeDefined()
+    })
+  })
+
+  describe('actions', () => {
+    it('calls onCancel prop when you hit cancel', async () => {
+      const cancelCbStub = vi.fn()
+      render(
+        <PrintFontSizeModal
+          onCancel={cancelCbStub}
+          onSubmit={Function.prototype}
+          onExited={Function.prototype}
+          isOpen
+        />,
+      )
+
+      const cancelButton = screen.getByText('Cancel').closest('button')
+      fireEvent.click(cancelButton)
+      await waitFor(() => expect(cancelCbStub).toHaveBeenCalled())
+    })
+
+    it('calls onSubmit prop with the form data when you hit Print Preview', async () => {
+      const continueCbStub = vi.fn()
+      render(
+        <PrintFontSizeModal
+          onCancel={Function.prototype}
+          onSubmit={continueCbStub}
+          onExited={Function.prototype}
+          isOpen
+        />,
+      )
+
+      // Select 'large' radio button
+      const largeRadio = document.querySelector(
+        'input[data-automation="print-font-size-modal-radio-button-large"]',
+      )
+      fireEvent.click(largeRadio)
+
+      // Default persistedPrintFontSize is 'medium' so rememberTextSizeSetting starts as true
+      const printPreviewButton = screen.getByText('Print Preview').closest('button')
+      fireEvent.click(printPreviewButton)
+
+      await waitFor(() => expect(continueCbStub).toHaveBeenCalledWith('large', true))
+    })
+  })
+
+  describe('a11y tests', () => {
+    it('is accessible', async () => {
+      const {container} = renderModal()
+      expect(await runAxeCheck(container)).toBe(true)
+    })
+  })
+})

package/src/common/components/PrintFontSizeModal/index.js

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