@instructure/quiz-core 22.17.0 → 22.18.0

package/src/common/components/shared/FormattedDuration/__tests__/FormattedDuration.test.js

@@ -0,0 +1,177 @@
+import React from 'react'
+import {render} from '@testing-library/react'
+import {expect, describe, it} from 'vitest'
+import runAxeCheck from '@instructure/ui-axe-check'
+import FormattedDuration, {breakdownSeconds} from '../index'
+
+describe('FormattedDuration Presenter', () => {
+  const TEN_SECONDS = 10
+  const SEVEN_SECONDS = 7
+  const FIFTY_NINE_SECONDS = 59
+  const FIVE_MINUTES = 60 * 5
+  const SEVEN_MINUTES = 60 * 7
+  const TWO_HOURS = 60 * 60 * 2
+  const ONE_DAY = 86400
+
+  function renderComponent(props = {}) {
+    return render(<FormattedDuration seconds={3600} {...props} />)
+  }
+
+  describe('#breakdownSeconds', () => {
+    describe('includeDays', () => {
+      it('outputs a hash with correct values', () => {
+        const time = ONE_DAY + TWO_HOURS + SEVEN_MINUTES
+        const output = breakdownSeconds(time, true)
+        expect(output).toEqual({
+          days: 1,
+          hours: 2,
+          minutes: 7,
+          seconds: 0,
+        })
+      })
+    })
+
+    describe('with time limit in hours', () => {
+      it('outputs a hash with correct hours', () => {
+        const output = breakdownSeconds(TWO_HOURS)
+        expect(output.hours).toBe(2)
+      })
+
+      describe('with minutes', () => {
+        it('outputs a hash with correct hours and minutes', () => {
+          const output = breakdownSeconds(TWO_HOURS + FIVE_MINUTES)
+          expect(output.hours).toBe(2)
+          expect(output.minutes).toBe(5)
+        })
+
+        describe('with seconds', () => {
+          it('outputs a hash with correct hours and minutes and seconds', () => {
+            const output = breakdownSeconds(TWO_HOURS + FIVE_MINUTES + TEN_SECONDS)
+            expect(output.hours).toBe(2)
+            expect(output.minutes).toBe(5)
+            expect(output.seconds).toBe(10)
+          })
+        })
+      })
+    })
+
+    describe('with time limit in minutes', () => {
+      it('outputs a hash with hours to 0', () => {
+        const output = breakdownSeconds(FIVE_MINUTES)
+        expect(output.hours).toBe(0)
+      })
+
+      it('outputs a hash with correct minutes', () => {
+        const output = breakdownSeconds(SEVEN_MINUTES)
+        expect(output.minutes).toBe(7)
+      })
+
+      describe('with seconds', () => {
+        it('outputs a hash with correct minutes and seconds', () => {
+          const output = breakdownSeconds(SEVEN_MINUTES + FIFTY_NINE_SECONDS)
+          expect(output.minutes).toBe(7)
+          expect(output.seconds).toBe(59)
+        })
+      })
+    })
+
+    describe('with time limit in seconds', () => {
+      it('outputs a hash with hours to 0', () => {
+        const output = breakdownSeconds(FIFTY_NINE_SECONDS)
+        expect(output.hours).toBe(0)
+      })
+
+      it('outputs a hash with minutes to 0', () => {
+        const output = breakdownSeconds(FIFTY_NINE_SECONDS)
+        expect(output.minutes).toBe(0)
+      })
+
+      it('outputs a hash with seconds set correctly', () => {
+        const output = breakdownSeconds(SEVEN_SECONDS + TEN_SECONDS)
+        expect(output.seconds).toBe(17)
+      })
+    })
+
+    describe('with 0 passed in', () => {
+      it('outputs a hash with hours, minutes, and seconds set to 0', () => {
+        const output = breakdownSeconds(0)
+        expect(output.hours).toBe(0)
+        expect(output.minutes).toBe(0)
+        expect(output.seconds).toBe(0)
+      })
+    })
+
+    describe('with null passed in', () => {
+      it('outputs a hash with hours, minutes, and seconds set to 0', () => {
+        const output = breakdownSeconds(null)
+        expect(output.hours).toBe(0)
+        expect(output.minutes).toBe(0)
+        expect(output.seconds).toBe(0)
+      })
+    })
+
+    describe('with undefined passed in', () => {
+      it('outputs a hash with hours, minutes, and seconds set to 0', () => {
+        const output = breakdownSeconds(void 0)
+        expect(output.hours).toBe(0)
+        expect(output.minutes).toBe(0)
+        expect(output.seconds).toBe(0)
+      })
+    })
+  })
+
+  describe('#render', () => {
+    describe('with hours', () => {
+      it('displays the hours, minutes, and seconds', () => {
+        const {container} = renderComponent({seconds: TWO_HOURS + FIVE_MINUTES + TEN_SECONDS})
+        const text = container.textContent
+        expect(text).toContain('02')
+        expect(text).toContain('05')
+        expect(text).toContain('10')
+      })
+    })
+
+    describe('with no hours', () => {
+      it('does display the minutes and seconds', () => {
+        const {container} = renderComponent({seconds: FIVE_MINUTES + TEN_SECONDS})
+        const text = container.textContent
+        expect(text).toContain('05')
+        expect(text).toContain('10')
+      })
+    })
+
+    describe('with minutes', () => {
+      it('displays the minutes and seconds', () => {
+        const {container} = renderComponent({seconds: FIVE_MINUTES + TEN_SECONDS})
+        const text = container.textContent
+        expect(text).toContain('05')
+        expect(text).toContain('10')
+      })
+    })
+
+    describe('with no minutes', () => {
+      it('displays the minutes and seconds', () => {
+        const {container} = renderComponent({seconds: TEN_SECONDS})
+        const text = container.textContent
+        expect(text).toContain('00')
+        expect(text).toContain('10')
+      })
+    })
+
+    describe('with no time', () => {
+      it('displays the minutes and seconds', () => {
+        const {container} = renderComponent({seconds: 0})
+        const text = container.textContent
+        expect(text).toContain('00')
+        expect(text).not.toContain('10')
+      })
+    })
+  })
+
+  describe('a11y tests', () => {
+    it('should meet a11y standards', async () => {
+      const {container} = renderComponent()
+      expect(await runAxeCheck(container)).toBe(true)
+    })
+  })
+})

package/src/common/components/shared/FormattedDuration/index.js

@@ -0,0 +1,81 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+
+import t from '@instructure/quiz-i18n/format-message'
+import {withI18nSupport} from '@instructure/quiz-common/with-i18n-support'
+import {AccessibleContent} from '@instructure/ui-a11y-content'
+
+import {formatTime} from '../../../util/formatTimespan'
+import {Text} from '@instructure/ui-text'
+
+export const DAY_IN_SECONDS = 86400
+export const HOUR_IN_SECONDS = 3600
+export const MINUTE_IN_SECONDS = 60
+
+/**
+ * @param  {integer} seconds Number of seconds
+ * @return {object}
+ */
+export function breakdownSeconds(seconds, includeDays = false) {
+  if (seconds <= 0 || seconds === null || seconds === void 0) {
+    return {
+      ...(includeDays && {days: 0}),
+      hours: 0,
+      minutes: 0,
+      seconds: 0,
+    }
+  }
+
+  return {
+    seconds: seconds % MINUTE_IN_SECONDS,
+    minutes: Math.floor(seconds / MINUTE_IN_SECONDS) % MINUTE_IN_SECONDS,
+    hours: includeDays
+      ? Math.floor((seconds % DAY_IN_SECONDS) / HOUR_IN_SECONDS)
+      : Math.floor(seconds / HOUR_IN_SECONDS),
+    ...(includeDays && {days: Math.floor(seconds / DAY_IN_SECONDS)}),
+  }
+}
+
+export class FormattedTimer extends withI18nSupport(Component) {
+  static propTypes = {
+    fontSize: Text.propTypes.size,
+    fontWeight: Text.propTypes.weight,
+    seconds: PropTypes.number,
+  }
+
+  static defaultProps = {
+    fontSize: Text.defaultProps.size,
+    fontWeight: Text.defaultProps.weight,
+    seconds: 0,
+  }
+
+  static contextTypes = {
+    locale: PropTypes.string,
+  }
+
+  render() {
+    const {hours, minutes, seconds} = breakdownSeconds(this.props.seconds)
+    const altText = formatTime(this.props.seconds)
+    const display =
+      hours > 0
+        ? t('{ hours }:{ minutes }:{ seconds }', {
+            hours: this.formatDecimal2MinIntegerNoFraction(hours),
+            minutes: this.formatDecimal2MinIntegerNoFraction(minutes),
+            seconds: this.formatDecimal2MinIntegerNoFraction(seconds),
+          })
+        : t('{ minutes }:{ seconds }', {
+            minutes: this.formatDecimal2MinIntegerNoFraction(minutes),
+            seconds: this.formatDecimal2MinIntegerNoFraction(seconds),
+          })
+
+    return (
+      <AccessibleContent alt={altText}>
+        <Text color="primary" size={this.props.fontSize} weight={this.props.fontWeight}>
+          {display}
+        </Text>
+      </AccessibleContent>
+    )
+  }
+}
+
+export default FormattedTimer

package/src/common/components/shared/GenericAsyncSearch/GenericAsyncSearch.js

@@ -0,0 +1,190 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import debounce from 'lodash/fp/debounce'
+import {Spinner} from '@instructure/ui-spinner'
+import t from '@instructure/quiz-i18n/format-message'
+import {SELECT_EMPTY_OPTION} from '@instructure/quiz-common/constants'
+import {Select} from '@instructure/quiz-common/components/Select/index'
+
+export class GenericAsyncSearch extends Component {
+  static propTypes = {
+    debounceDelay: PropTypes.number,
+    minChars: PropTypes.number,
+    onSelectionChange: PropTypes.func.isRequired,
+    label: PropTypes.string,
+    placeholder: PropTypes.string,
+    selectedOption: PropTypes.shape({id: PropTypes.number, text: PropTypes.string}),
+    messages: PropTypes.array,
+    selectAutomation: PropTypes.string,
+    getOptions: PropTypes.func.isRequired,
+    inputRef: PropTypes.func,
+    isRequired: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    debounceDelay: 500,
+    minChars: 3,
+    label: null,
+    placeholder: null,
+    selectAutomation: null,
+    inputRef: () => {},
+    isRequired: false,
+  }
+
+  constructor() {
+    super(...arguments)
+
+    this.search = debounce(this.props.debounceDelay, value => {
+      this.props.getOptions(value).then(options => {
+        this.setState({
+          options: options,
+          highlightedOptionId: options[0]?.id || null,
+          isLoading: false,
+        })
+      })
+    })
+  }
+
+  setInputRef = inputRef => {
+    this.inputRef = inputRef
+    this.props.inputRef?.(inputRef)
+  }
+
+  state = {
+    inputValue: this.props.selectedOption ? this.props.selectedOption.text : '',
+    isShowingOptions: false,
+    isLoading: false,
+    highlightedOptionId: null,
+    shareableSubaccounts: [],
+    options: [],
+  }
+
+  getOption(queryId) {
+    return this.state.options.find(({id}) => id === queryId)
+  }
+
+  handleShowOptions = () => {
+    this.setState({isShowingOptions: true})
+  }
+
+  close = inputValue =>
+    this.setState({
+      isShowingOptions: false,
+      highlightedOptionId: null,
+      inputValue: inputValue,
+    })
+
+  handleBlur = () => this.close(this.props.selectedOption?.text || '')
+
+  handleHighlightOption = (event, optionIdentifier) => {
+    event.persist()
+
+    let option = this.getOption(optionIdentifier.id)
+
+    this.setState({
+      highlightedOptionId: option?.id,
+      inputValue: event.type === 'keydown' ? option?.text : this.state.inputValue,
+    })
+  }
+
+  handleSelectOption = (event, optionIdentifier) => {
+    if (!optionIdentifier || !optionIdentifier.id || optionIdentifier.id === SELECT_EMPTY_OPTION)
+      return
+
+    let option = this.getOption(optionIdentifier.id)
+
+    this.props.onSelectionChange(event, option)
+    this.close(option.text)
+  }
+
+  handleInputChange = event => {
+    const value = event.target.value
+    const shouldSearch = !!value && value.length >= this.props.minChars
+
+    this.setState({
+      inputValue: value,
+      isShowingOptions: true,
+    })
+
+    if (shouldSearch) {
+      this.setState({
+        isLoading: true,
+        options: [],
+        highlightedOptionId: null,
+      })
+
+      this.search(value)
+    }
+  }
+
+  handleKeyDown = event => {
+    if (event.keyCode === 8 && this.state.inputValue === '') {
+      // when backspace key is pressed
+      this.setState({highlightedOptionId: null})
+    }
+  }
+
+  actualOptions = () => {
+    return this.state.options.map(option => (
+      <Select.Option
+        id={option.id}
+        key={option.id}
+        isHighlighted={option.id === this.state.highlightedOptionId}
+      >
+        {option.text}
+      </Select.Option>
+    ))
+  }
+
+  emptyOptionText = () => {
+    if (this.props.minChars > 1 && this.state.inputValue < this.props.minChars) {
+      return t('Search term must be at least { minChars } characters', {
+        minChars: this.props.minChars,
+      })
+    }
+
+    return this.state.inputValue === '' ? t('Write to search') : t('No Results')
+  }
+
+  emptyOrLoadingOption = () => {
+    return (
+      <Select.Option id={SELECT_EMPTY_OPTION} key={SELECT_EMPTY_OPTION}>
+        {this.state.isLoading ? (
+          <Spinner renderTitle={t('Loading')} size="x-small" />
+        ) : (
+          this.emptyOptionText()
+        )}
+      </Select.Option>
+    )
+  }
+
+  renderOptions = () => {
+    return this.state.options.length ? this.actualOptions() : this.emptyOrLoadingOption()
+  }
+
+  render() {
+    return (
+      <Select
+        data-automation={this.props.selectAutomation}
+        renderLabel={this.props.label}
+        placeholder={this.props.placeholder}
+        inputValue={this.state.inputValue}
+        isShowingOptions={this.state.isShowingOptions}
+        inputRef={this.setInputRef}
+        onBlur={this.handleBlur}
+        onRequestHideOptions={this.handleBlur}
+        onInputChange={this.handleInputChange}
+        onRequestShowOptions={this.handleShowOptions}
+        onRequestHighlightOption={this.handleHighlightOption}
+        onRequestSelectOption={this.handleSelectOption}
+        onKeyDown={this.handleKeyDown}
+        messages={this.props.messages}
+        isRequired={this.props.isRequired}
+      >
+        {this.renderOptions()}
+      </Select>
+    )
+  }
+}
+
+export default GenericAsyncSearch

package/src/common/components/shared/GenericAsyncSearch/__tests__/GenericAsyncSearch.test.js

@@ -0,0 +1,68 @@
+import React from 'react'
+import {render, screen, act} from '@testing-library/react'
+import {expect, vi, beforeEach, afterEach, describe, it} from 'vitest'
+import GenericAsyncSearch from '../GenericAsyncSearch'
+
+describe('<GenericAsyncSearch />', () => {
+  const mockProps = {
+    getOptions: vi.fn(),
+    onSelectionChange: vi.fn(),
+    selectedOption: null,
+    placeholder: 'Search...',
+    label: 'Search select',
+    selectAutomation: 'tag-for-e2e',
+  }
+
+  beforeEach(() => {
+    vi.useFakeTimers({shouldAdvanceTime: true})
+    mockProps.getOptions.mockReset()
+    mockProps.onSelectionChange.mockReset()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('renders without crashing', () => {
+    const {container} = render(<GenericAsyncSearch {...mockProps} />)
+    expect(container.firstChild).toBeTruthy()
+  })
+
+  it('calls getOptions when user types enough characters', async () => {
+    const options = [{id: '1', text: 'test result'}]
+    mockProps.getOptions.mockResolvedValue(options)
+
+    render(<GenericAsyncSearch {...mockProps} minChars={3} />)
+    const input = screen.getByPlaceholderText('Search...')
+
+    // Type into the input using fireEvent (userEvent doesn't work well with fake timers)
+    await act(async () => {
+      // Simulate typing by directly changing the input value
+      input.focus()
+      // Use the component's onInputChange handler
+      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        'value',
+      ).set
+      nativeInputValueSetter.call(input, 'test')
+      input.dispatchEvent(new Event('input', {bubbles: true}))
+    })
+
+    // Advance past debounce delay
+    await act(async () => {
+      vi.advanceTimersByTime(600)
+    })
+
+    expect(mockProps.getOptions).toHaveBeenCalled()
+  })
+
+  it('renders placeholder text', () => {
+    render(<GenericAsyncSearch {...mockProps} />)
+    expect(screen.getByPlaceholderText('Search...')).toBeDefined()
+  })
+
+  it('renders the label', () => {
+    render(<GenericAsyncSearch {...mockProps} />)
+    expect(screen.getByText('Search select')).toBeDefined()
+  })
+})

package/src/common/components/shared/IfFeature/__tests__/index.test.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import {render} from '@testing-library/react'
+import {expect} from 'vitest'
+
+import IfFeature from '../index'
+
+describe('IfFeature', () => {
+  it('should not render children when feature is off', () => {
+    const Wrapped = withContext(IfFeature, {features: []})
+    const {container} = render(
+      <Wrapped name="hot_new_feature">
+        <div>child content</div>
+      </Wrapped>,
+    )
+    expect(container.textContent).not.toContain('child content')
+  })
+
+  it('should render children when feature is on', () => {
+    const Wrapped = withContext(IfFeature, {features: ['hot_new_feature']})
+    const {container} = render(
+      <Wrapped name="hot_new_feature">
+        <div>child content</div>
+      </Wrapped>,
+    )
+    expect(container.textContent).toContain('child content')
+  })
+})

package/src/common/components/shared/IfFeature/__tests__/presenter.test.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import {render} from '@testing-library/react'
+import IfFeature from '../presenter'
+import {expect} from 'vitest'
+
+describe('IfFeature', () => {
+  const props = {
+    children: <div>myChildContent</div>,
+    name: 'feature',
+  }
+
+  describe('with feature off', () => {
+    it('should not render children', () => {
+      const {container} = render(<IfFeature {...props} isOn={false} />)
+      expect(container.textContent).not.toContain('myChildContent')
+    })
+  })
+
+  describe('with feature on', () => {
+    it('should render children', () => {
+      const {container} = render(<IfFeature {...props} isOn={true} />)
+      expect(container.textContent).toContain('myChildContent')
+    })
+  })
+})

package/src/common/components/shared/IfFeature/index.js

@@ -0,0 +1,13 @@
+import {Set} from 'immutable'
+
+import {connect} from '../../../react-redux'
+import {IfFeature as IfFeaturePresenter} from './presenter'
+
+export function mapStateToProps(state, props) {
+  return {
+    isOn: (state.features ?? Set()).includes(props.name),
+  }
+}
+
+export const IfFeature = connect(mapStateToProps)(IfFeaturePresenter)
+export default IfFeature

package/src/common/components/shared/IfFeature/presenter.js

@@ -0,0 +1,24 @@
+import {Component} from 'react'
+import PropTypes from 'prop-types'
+
+export class IfFeature extends Component {
+  static propTypes = {
+    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+    isOn: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    children: null,
+    isOn: false,
+  }
+
+  render() {
+    if (!this.props.isOn) {
+      return null
+    }
+
+    return this.props.children
+  }
+}
+
+export default IfFeature

package/src/common/components/shared/InteractionTypes/__tests__/presenter.test.js

@@ -0,0 +1,84 @@
+import {expect, vi} from 'vitest'
+import React from 'react'
+import {render, screen} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import {List} from 'immutable'
+import {InteractionType} from '@instructure/quiz-interactions'
+
+import InteractionTypes from '../presenter'
+
+const getChoiceButton = () => screen.getByText('Multiple Choice').closest('button')
+const getMultiAnswerButton = () => screen.getByText('Multiple Answer').closest('button')
+const getHotSpotButton = () => screen.getByText('Hot Spot').closest('button')
+const getStimulusButton = () => screen.queryByText('Stimulus')?.closest('button')
+const getPassageButton = () => screen.queryByText('Text Block')?.closest('button')
+
+describe('InteractionTypes', () => {
+  const addItemStub = vi.fn()
+  const addStimulusStub = vi.fn()
+
+  const fakeInteractionType = (slug = 'choice') => new InteractionType({slug})
+
+  const types = List([
+    fakeInteractionType(),
+    fakeInteractionType('multi-answer'),
+    fakeInteractionType('hot-spot'),
+  ])
+
+  const defaultProps = {
+    addItem: addItemStub,
+    addStimulus: addStimulusStub,
+    types,
+    columns: 2,
+  }
+
+  beforeEach(() => {
+    addItemStub.mockReset()
+    addStimulusStub.mockReset()
+  })
+
+  it('renders only interaction buttons when stimulus is NOT allowed', async () => {
+    render(<InteractionTypes {...defaultProps} allowStimulusCreation={false} />)
+
+    expect(getChoiceButton()).toBeDefined()
+    expect(getMultiAnswerButton()).toBeDefined()
+    expect(getHotSpotButton()).toBeDefined()
+
+    expect(getStimulusButton()).toBeUndefined()
+    expect(getPassageButton()).toBeUndefined()
+  })
+
+  it('renders interaction, stimulus, and passage buttons when allowed', async () => {
+    render(<InteractionTypes {...defaultProps} allowStimulusCreation={true} />)
+
+    expect(getChoiceButton()).toBeDefined()
+    expect(getMultiAnswerButton()).toBeDefined()
+    expect(getHotSpotButton()).toBeDefined()
+    expect(getStimulusButton()).toBeDefined()
+    expect(getPassageButton()).toBeDefined()
+  })
+
+  it('calls addItem when an interaction button is clicked', async () => {
+    render(<InteractionTypes {...defaultProps} />)
+
+    userEvent.click(getChoiceButton())
+
+    expect(addItemStub).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls addStimulus(false) when the Stimulus button is clicked', async () => {
+    render(<InteractionTypes {...defaultProps} allowStimulusCreation={true} />)
+
+    userEvent.click(getStimulusButton())
+
+    expect(addStimulusStub).toHaveBeenCalledWith(false)
+  })
+
+  it('calls addStimulus(true) when the Text Block button is clicked', async () => {
+    render(<InteractionTypes {...defaultProps} allowStimulusCreation={true} />)
+
+    userEvent.click(getPassageButton())
+
+    expect(addStimulusStub).toHaveBeenCalledWith(true)
+  })
+})