@instructure/quiz-core 22.17.0 → 22.18.0

package/src/moderating/components/events/__tests__/SessionStartEvent.test.js

@@ -0,0 +1,67 @@
+import React from 'react'
+
+import SessionStartEvent from '../SessionStartEvent'
+import {render, screen, fireEvent} from '@testing-library/react'
+import {expect} from 'vitest'
+
+describe('SessionStartEvent', () => {
+  const currentEventData = {
+    ipAddress: 'ip-address',
+    browserSessionID: 'guid',
+    eventDate: '2016-09-28 18:45:25',
+    browserString: 'Chrome 55.0.2881.0',
+    userPlatform: 'Mac OS X 10.11.6',
+    multipleSessionAttempt: false,
+  }
+
+  const props = {
+    currentEventData: currentEventData,
+    startTime: new Date('2016-09-28T18:45:24.700Z|232982772'),
+  }
+  describe('when dropdown is closed', () => {
+    beforeEach(() => {
+      render(<SessionStartEvent {...props} />)
+    })
+    it('should show the dropdown toggle', () => {
+      expect(screen.getByText('Session started')).toBeDefined()
+    })
+    it('should not show the event details', () => {
+      expect(screen.queryByText(/client ip address/i)).toBeNull()
+      expect(screen.queryByText(/browser session id/i)).toBeNull()
+      expect(screen.queryByText(/browser/i)).toBeNull()
+      expect(screen.queryByText(/operating system/i)).toBeNull()
+    })
+  })
+  describe('when dropdown is open', () => {
+    beforeEach(() => {
+      render(<SessionStartEvent {...props} />)
+      const expand = screen.getByRole('button', {name: 'Session started'})
+      fireEvent.click(expand)
+    })
+    it('should show the event details', () => {
+      expect(screen.getByText('Client IP address')).toBeDefined()
+      expect(screen.getByText('Browser session ID')).toBeDefined()
+      expect(screen.getByText('Browser')).toBeDefined()
+      expect(screen.getByText('Operating System')).toBeDefined()
+    })
+    it('should not show the breach alert if there is no breach', () => {
+      expect(screen.queryByText(/submission attempt started from a different device/i)).toBeNull()
+    })
+  })
+  describe('when there is a session breach', () => {
+    const tmpCurrentEventData = {...currentEventData}
+    tmpCurrentEventData.multipleSessionAttempt = true
+    const propsWithBreach = {
+      currentEventData: tmpCurrentEventData,
+      startTime: new Date('2016-09-28T18:45:24.700Z|232982772'),
+    }
+    it('should show the breach alert', () => {
+      render(<SessionStartEvent {...propsWithBreach} />)
+      const expand = screen.getAllByRole('button', {name: /session started/i})
+      fireEvent.click(expand[0])
+      expect(
+        screen.queryAllByText(/submission attempt started from a different device/i),
+      ).not.toBeNull()
+    })
+  })
+})

package/src/moderating/components/events/__tests__/SessionSubmitEvent.test.js

@@ -0,0 +1,67 @@
+import React from 'react'
+
+import SessionSubmitEvent from '../SessionSubmitEvent'
+import {render, screen, fireEvent} from '@testing-library/react'
+import {expect} from 'vitest'
+
+describe('SessionSubmitEvent', () => {
+  const currentEventData = {
+    ipAddress: 'ip-address',
+    browserSessionID: 'guid',
+    eventDate: '2016-09-28 18:45:25',
+    browserString: 'Chrome 55.0.2881.0',
+    userPlatform: 'Mac OS X 10.11.6',
+    multipleSessionAttempt: false,
+  }
+
+  const props = {
+    currentEventData: currentEventData,
+    startTime: new Date('2016-09-28T18:45:24.700Z|232982772'),
+  }
+  describe('when dropdown is closed', () => {
+    beforeEach(() => {
+      render(<SessionSubmitEvent {...props} />)
+    })
+    it('should show the dropdown toggle', () => {
+      expect(screen.queryByText(/session submitted/i)).not.toBeNull()
+    })
+    it('should not show the event details', () => {
+      expect(screen.queryByText(/client ip address/i)).toBeNull()
+      expect(screen.queryByText(/browser session id/i)).toBeNull()
+      expect(screen.queryByText(/browser/i)).toBeNull()
+      expect(screen.queryByText(/operating system/i)).toBeNull()
+    })
+  })
+  describe('when dropdown is open', () => {
+    beforeEach(() => {
+      render(<SessionSubmitEvent {...props} />)
+      const expand = screen.queryByRole('button', {name: /session submitted/i})
+      fireEvent.click(expand)
+    })
+    it('should show the event details', () => {
+      expect(screen.getByText('Client IP address')).toBeDefined()
+      expect(screen.getByText('Browser session ID')).toBeDefined()
+      expect(screen.getByText('Browser')).toBeDefined()
+      expect(screen.getByText('Operating System')).toBeDefined()
+    })
+    it('should not show the breach alert if there is no breach', () => {
+      expect(screen.queryByText(/submission attempt started from a different device/i)).toBeNull()
+    })
+  })
+  describe('when there is a session breach', () => {
+    const tmpCurrentEventData = {...currentEventData}
+    tmpCurrentEventData.multipleSessionAttempt = true
+    const propsWithBreach = {
+      currentEventData: tmpCurrentEventData,
+      startTime: new Date('2016-09-28T18:45:24.700Z|232982772'),
+    }
+    it('should show the breach alert', () => {
+      render(<SessionSubmitEvent {...propsWithBreach} />)
+      const expand = screen.getAllByRole('button', {name: /session submitted/i})
+      fireEvent.click(expand[0])
+      expect(
+        screen.queryAllByText(/submission attempt started from a different device/i),
+      ).not.toBeNull()
+    })
+  })
+})

package/src/moderating/components/events/styles.js

@@ -0,0 +1,27 @@
+const generateStyle = componentTheme => {
+  return {
+    answerMediaIcon: {
+      marginRight: componentTheme.answerMediaIconMargin,
+    },
+
+    embeddedImage: {
+      '>img': {
+        maxHeight: '400px',
+        maxWidth: '400px',
+        margin: componentTheme.embeddedImageMargin,
+        paddingRight: componentTheme.embeddedImagePadding,
+      },
+    },
+
+    mediaToggle: {
+      margin: componentTheme.mediaToggleMargin,
+      textAlign: 'left',
+      borderBottom: `1px solid ${componentTheme.mediaToggleColor}`,
+      borderLeft: `1px solid ${componentTheme.mediaToggleColor}`,
+      borderRight: `1px solid ${componentTheme.mediaToggleColor}`,
+      borderRadius: '5px',
+    },
+  }
+}
+
+export default generateStyle

package/src/moderating/components/events/theme.js

@@ -0,0 +1,11 @@
+const generateComponentTheme = ({spacing, colors}) => {
+  return {
+    answerMediaIconMargin: spacing.xSmall,
+    embeddedImageMargin: spacing.xSmall,
+    embeddedImagePadding: spacing.small,
+    mediaToggleMargin: spacing.xSmall,
+    mediaToggleColor: colors.contrasts.grey1214,
+  }
+}
+
+export default generateComponentTheme

package/src/moderating/components/resources/AccommodationsModal/ExtraAttemptSettings/ExtraAttemptsInput/index.js

@@ -0,0 +1,88 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import {View} from '@instructure/ui-view'
+import {NumberInput} from '@instructure/quiz-number-input/components/NumberInput/index'
+import t from '@instructure/quiz-i18n/format-message'
+
+class ExtraAttemptsInput extends Component {
+  static propTypes = {
+    label: PropTypes.string.isRequired,
+    max: PropTypes.number.isRequired,
+    min: PropTypes.number,
+    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    parsedValue: PropTypes.number,
+    onChange: PropTypes.func.isRequired,
+    onBlur: PropTypes.func.isRequired,
+    revertValue: PropTypes.number,
+    revert: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    min: 0,
+    revert: false,
+    parsedValue: null,
+    revertValue: null,
+  }
+
+  getMessages = (value, parsedValue, min, max) => {
+    let messages = null
+    if (parsedValue === null && value !== '') {
+      messages = [
+        {
+          type: 'error',
+          text: t('{userInput, string} is not a valid number.', {userInput: value}),
+        },
+      ]
+    } else if (parsedValue < min) {
+      messages = [
+        {
+          type: 'error',
+          text: t('{userInput, number} is below the minimum of {min, number}.', {
+            userInput: parsedValue,
+            min,
+          }),
+        },
+      ]
+    } else if (parsedValue > max) {
+      messages = [
+        {
+          type: 'error',
+          text: t('{userInput, number} is above the maximum of {max, number}.', {
+            userInput: parsedValue,
+            max,
+          }),
+        },
+      ]
+    }
+    return messages
+  }
+
+  onChange = (e = {}, raw, parsedNum) => {
+    const parsed = parsedNum === null ? null : Number(parsedNum)
+    this.props.onChange(e, raw, parsed)
+  }
+
+  render() {
+    const {label, max, min, value, parsedValue, revertValue, revert, onBlur} = this.props
+
+    const step = 1
+    const precision = 0
+
+    return (
+      <View display="block" margin="medium none">
+        <NumberInput
+          renderLabel={label}
+          step={step}
+          value={revert ? revertValue : value}
+          onChange={this.onChange}
+          onBlur={onBlur}
+          messages={this.getMessages(value, parsedValue, min, max)}
+          decimalPrecision={precision}
+          data-automation="sdk-moderation-extra-attempts"
+        />
+      </View>
+    )
+  }
+}
+
+export default ExtraAttemptsInput

package/src/moderating/components/resources/AccommodationsModal/ExtraAttemptSettings/__tests__/index.test.js

@@ -0,0 +1,300 @@
+import {expect, vi} from 'vitest'
+import ExtraAttemptSettings from '..'
+import {render, screen, fireEvent, within} from '../../../../../../../tests/util/rtlRenderOverride'
+import userEvent from '@testing-library/user-event'
+import runAxeCheck from '@instructure/ui-axe-check'
+import React from 'react'
+
+describe('ExtraAttempts', () => {
+  const labelText = 'Additional attempts'
+
+  it('should render an input with a label', () => {
+    render(<ExtraAttemptSettings extraAttempts={0} onChange={vi.fn()} />)
+    const input = screen.getByRole('spinbutton', {name: labelText})
+    expect(input).toBeDefined()
+  })
+
+  it('should accept a valid input', async () => {
+    render(<ExtraAttemptSettings extraAttempts={0} onChange={vi.fn()} />)
+    const input = screen.getByRole('spinbutton', {name: labelText})
+
+    await userEvent.clear(input)
+    await userEvent.type(input, '8')
+    fireEvent.blur(input)
+
+    expect(Number(input.value)).toBe(8)
+  })
+
+  it('should accept a value above max and reset on blur with an error message', async () => {
+    render(<ExtraAttemptSettings extraAttempts={5} maxExtraAttempts={20} onChange={vi.fn()} />)
+    const input = screen.getByRole('spinbutton', {name: labelText})
+    const outOfRange = '26'
+
+    await userEvent.clear(input)
+    await userEvent.type(input, outOfRange)
+    fireEvent.blur(input)
+
+    expect(Number(input.value)).toBe(20)
+    expect(screen.getByText(`${outOfRange} is above the maximum of 20.`)).toBeDefined()
+  })
+
+  it('should accept a value below 0 and reset on blur with an error message', async () => {
+    render(<ExtraAttemptSettings extraAttempts={5} maxExtraAttempts={20} onChange={vi.fn()} />)
+    const input = screen.getByRole('spinbutton', {name: labelText})
+    const outOfRange = '-5'
+
+    await userEvent.clear(input)
+    await userEvent.type(input, outOfRange)
+    fireEvent.blur(input)
+
+    expect(Number(input.value)).toBe(0)
+    expect(screen.getByText(`${outOfRange} is below the minimum of 0.`)).toBeDefined()
+  })
+
+  it('should display a value above max when passed as a prop, and clamp on blur', () => {
+    const extraAttempts = 12
+    const max = 10
+    render(
+      <ExtraAttemptSettings
+        extraAttempts={extraAttempts}
+        maxExtraAttempts={max}
+        onChange={vi.fn()}
+      />,
+    )
+    const input = screen.getByRole('spinbutton', {name: new RegExp(labelText)})
+
+    expect(Number(input.value)).toBe(extraAttempts)
+    expect(screen.getByText(`${extraAttempts} is above the maximum of ${max}.`)).toBeDefined()
+
+    fireEvent.blur(input)
+    expect(Number(input.value)).toBe(max)
+  })
+
+  it('should display a value below 0 when passed as a prop, and clamp on blur', () => {
+    const extraAttempts = -12
+    render(
+      <ExtraAttemptSettings
+        extraAttempts={extraAttempts}
+        maxExtraAttempts={10}
+        onChange={vi.fn()}
+      />,
+    )
+    const input = screen.getByRole('spinbutton', {name: new RegExp(labelText)})
+
+    expect(Number(input.value)).toBe(extraAttempts)
+    expect(screen.getByText(`${extraAttempts} is below the minimum of 0.`)).toBeDefined()
+
+    fireEvent.blur(input)
+    expect(Number(input.value)).toBe(0)
+  })
+
+  it('should accept a non-number input and reset on blur with an error message', async () => {
+    render(<ExtraAttemptSettings extraAttempts={5} maxExtraAttempts={20} onChange={vi.fn()} />)
+    const input = screen.getByRole('spinbutton', {name: labelText})
+    const invalidValue = 'apple'
+
+    await userEvent.clear(input)
+    await userEvent.type(input, '6')
+    await userEvent.clear(input)
+    await userEvent.type(input, invalidValue)
+    fireEvent.blur(input)
+    const errMsg = `${invalidValue} is not a valid number.`
+
+    expect(Number(input.value)).toBe(6)
+    expect(screen.getByText(errMsg)).toBeDefined()
+  })
+
+  it('should not show an error message when the input is blank', async () => {
+    render(<ExtraAttemptSettings extraAttempts={5} maxExtraAttempts={20} onChange={vi.fn()} />)
+    const input = screen.getByRole('spinbutton', {name: labelText})
+    await userEvent.clear(input)
+    expect(screen.queryByText(/is not a valid number/)).toBeNull()
+  })
+
+  it('should remove error message after valid input', async () => {
+    render(<ExtraAttemptSettings extraAttempts={5} maxExtraAttempts={20} onChange={vi.fn()} />)
+    const input = screen.getByRole('spinbutton', {name: labelText})
+    const invalidValue = 'apple'
+
+    await userEvent.clear(input)
+    await userEvent.type(input, invalidValue)
+    await userEvent.clear(input)
+    await userEvent.type(input, '6')
+    fireEvent.blur(input)
+    const errorMsg = `${invalidValue} is not a valid number.`
+    expect(screen.queryByText(errorMsg)).toBeNull()
+  })
+
+  it('should callback a valid input', async () => {
+    const onChange = vi.fn()
+    render(<ExtraAttemptSettings extraAttempts={0} onChange={onChange} />)
+    const input = screen.getByRole('spinbutton', {name: labelText})
+
+    await userEvent.clear(input)
+    await userEvent.type(input, '4')
+    fireEvent.blur(input)
+
+    expect(onChange).toHaveBeenCalledWith(4)
+  })
+
+  it('should callback the most recent valid input on invalid input', async () => {
+    const onChange = vi.fn()
+    render(<ExtraAttemptSettings extraAttempts={0} onChange={onChange} />)
+    const input = screen.getByRole('spinbutton', {name: labelText})
+    const invalidValue = '!392afs09'
+
+    await userEvent.clear(input)
+    await userEvent.type(input, '7')
+    fireEvent.blur(input)
+    expect(onChange).toHaveBeenCalledWith(7)
+
+    await userEvent.clear(input)
+    await userEvent.type(input, invalidValue)
+    fireEvent.blur(input)
+    expect(onChange).toHaveBeenCalledWith(7)
+  })
+
+  it('should respond correctly to up-and-down buttons', () => {
+    const onChange = vi.fn()
+
+    render(<ExtraAttemptSettings extraAttempts={9} onChange={onChange} />)
+
+    const input = screen.getByRole('spinbutton', {name: labelText})
+    const [incrementButton, decrementButton] = within(input.parentElement).getAllByRole('button', {
+      hidden: true,
+    })
+
+    userEvent.click(incrementButton)
+    expect(Number(input.value)).toBe(10)
+
+    userEvent.click(decrementButton)
+    expect(Number(input.value)).toBe(9)
+  })
+
+  it('should respond correctly to arrow keys', () => {
+    const onChange = vi.fn()
+    render(<ExtraAttemptSettings extraAttempts={2} onChange={onChange} />)
+    const input = screen.getByRole('spinbutton', {name: labelText})
+
+    fireEvent.keyDown(input, {key: 'ArrowUp', keyCode: 38})
+    expect(Number(input.value)).toBe(3)
+
+    fireEvent.keyDown(input, {key: 'ArrowDown', keyCode: 40})
+    expect(Number(input.value)).toBe(2)
+  })
+
+  it('should ignore up-and-down button events when current value invalid', async () => {
+    const onChange = vi.fn()
+
+    render(<ExtraAttemptSettings extraAttempts={5} onChange={onChange} />)
+
+    const input = screen.getByRole('spinbutton', {name: labelText})
+
+    const [incrementButton, decrementButton] = within(input.parentElement).getAllByRole('button', {
+      hidden: true,
+    })
+
+    const invalidValue = 'ksf0sf90afs'
+
+    await userEvent.clear(input)
+    await userEvent.type(input, invalidValue)
+
+    userEvent.click(incrementButton)
+    userEvent.click(decrementButton)
+    expect(input.value).toBe(invalidValue)
+  })
+
+  it('should ignore arrow keys when current value invalid', async () => {
+    const onChange = vi.fn()
+    render(<ExtraAttemptSettings extraAttempts={5} onChange={onChange} />)
+    const input = screen.getByRole('spinbutton', {name: labelText})
+
+    await userEvent.clear(input)
+    const invalidValue = 'klj3jlk4j3kl2j'
+    await userEvent.type(input, invalidValue)
+
+    fireEvent.keyDown(input, {key: 'ArrowUp', keyCode: 38})
+    fireEvent.keyDown(input, {key: 'ArrowDown', keyCode: 40})
+    expect(input.value).toBe(invalidValue)
+  })
+
+  it('should reset to max on up-and-down button events when input above max', async () => {
+    const onChange = vi.fn()
+    render(<ExtraAttemptSettings extraAttempts={5} maxExtraAttempts={10} onChange={onChange} />)
+
+    const input = screen.getByRole('spinbutton', {name: labelText})
+    const [incrementButton, decrementButton] = within(input.parentElement).getAllByRole('button', {
+      hidden: true,
+    })
+
+    await userEvent.clear(input)
+    await userEvent.type(input, '15')
+    userEvent.click(incrementButton)
+    expect(Number(input.value)).toBe(10)
+
+    await userEvent.clear(input)
+    await userEvent.type(input, '15')
+    userEvent.click(decrementButton)
+    expect(Number(input.value)).toBe(10)
+  })
+
+  it('should reset to min on up-and-down button events when input below 0', async () => {
+    const onChange = vi.fn()
+    render(<ExtraAttemptSettings extraAttempts={5} maxExtraAttempts={10} onChange={onChange} />)
+
+    const input = screen.getByRole('spinbutton', {name: labelText})
+
+    const [incrementButton, decrementButton] = within(input.parentElement).getAllByRole('button', {
+      hidden: true,
+    })
+
+    await userEvent.clear(input)
+    await userEvent.type(input, '-15')
+    userEvent.click(incrementButton)
+    expect(Number(input.value)).toBe(0)
+
+    await userEvent.clear(input)
+    await userEvent.type(input, '-15')
+    userEvent.click(decrementButton)
+    expect(Number(input.value)).toBe(0)
+  })
+
+  it('should reset to max on arrow key events when input above max', async () => {
+    const onChange = vi.fn()
+    render(<ExtraAttemptSettings extraAttempts={5} maxExtraAttempts={10} onChange={onChange} />)
+    const input = screen.getByRole('spinbutton', {name: labelText})
+
+    await userEvent.clear(input)
+    await userEvent.type(input, '25')
+    fireEvent.keyDown(input, {key: 'ArrowUp', keyCode: 38})
+
+    expect(Number(input.value)).toBe(10)
+
+    await userEvent.clear(input)
+    await userEvent.type(input, '25')
+    fireEvent.keyDown(input, {key: 'ArrowDown', keyCode: 40})
+
+    expect(Number(input.value)).toBe(10)
+  })
+
+  it('should reset to min on arrow key events when input below 0', async () => {
+    const onChange = vi.fn()
+    render(<ExtraAttemptSettings extraAttempts={5} maxExtraAttempts={10} onChange={onChange} />)
+    const input = screen.getByRole('spinbutton', {name: labelText})
+
+    await userEvent.clear(input)
+    await userEvent.type(input, '-15')
+    fireEvent.keyDown(input, {key: 'ArrowUp', keyCode: 38})
+    expect(Number(input.value)).toBe(0)
+
+    await userEvent.clear(input)
+    await userEvent.type(input, '-15')
+    fireEvent.keyDown(input, {key: 'ArrowDown', keyCode: 40})
+    expect(Number(input.value)).toBe(0)
+  })
+
+  it('should be accessible', async () => {
+    render(<ExtraAttemptSettings extraAttempts={5} maxExtraAttempts={10} onChange={vi.fn()} />)
+    expect(await runAxeCheck(document.body, {ignores: ['region']})).toBe(true)
+  })
+})

package/src/moderating/components/resources/AccommodationsModal/ExtraAttemptSettings/index.js

@@ -0,0 +1,79 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import t from '@instructure/quiz-i18n/format-message'
+import ExtraAttemptsInput from './ExtraAttemptsInput'
+
+export class ExtraAttemptSettings extends Component {
+  static propTypes = {
+    onChange: PropTypes.func.isRequired,
+    extraAttempts: PropTypes.number.isRequired,
+    maxExtraAttempts: PropTypes.number,
+  }
+
+  static defaultProps = {
+    maxExtraAttempts: 999,
+  }
+
+  clamp = (value, min, max) => {
+    if (value > max) {
+      return max
+    }
+    if (value < min) {
+      return min
+    }
+    return value
+  }
+
+  state = {
+    rawValue: this.props.extraAttempts, // what the user has typed in
+    parsedRawValue: this.props.extraAttempts, // rawValue parsed to a number, or null if invalid
+    normalizedValue: this.clamp(this.props.extraAttempts, 0, this.props.maxExtraAttempts), // the most recent valid, in-range number
+    revert: false, // display normalizedValue instead of rawValue when true
+  }
+
+  shouldNormalizeOnChange = e => {
+    // Input events from arrow keys or arrow buttons should be normalized immediately
+    const fromButtonInput = e.nativeEvent.target && e.nativeEvent.target.tagName !== 'INPUT'
+    const fromArrowKeys =
+      e.key === 'ArrowUp' || e.key === 'ArrowDown' || e.key === 'up' || e.key === 'down'
+
+    return fromButtonInput || fromArrowKeys
+  }
+
+  onChange = (e, raw, parsed) => {
+    const normalizeImmediately = this.shouldNormalizeOnChange(e)
+    const normalizedValue = this.clamp(parsed, 0, this.props.maxExtraAttempts)
+    const update = {
+      rawValue: normalizeImmediately ? t.number(normalizedValue) : raw,
+      parsedRawValue: normalizeImmediately ? normalizedValue : parsed,
+      revert: false,
+    }
+    if (parsed !== null) {
+      update.normalizedValue = normalizedValue
+    }
+    this.setState(update)
+  }
+
+  onBlur = () => {
+    this.setState({revert: true})
+    this.props.onChange(this.state.normalizedValue)
+  }
+
+  render() {
+    return (
+      <ExtraAttemptsInput
+        label={t('Additional attempts')}
+        max={this.props.maxExtraAttempts}
+        value={this.state.rawValue}
+        parsedValue={this.state.parsedRawValue}
+        revertValue={this.state.normalizedValue}
+        revert={this.state.revert}
+        onChange={this.onChange}
+        onBlur={this.onBlur}
+        messages={this.state.messages}
+      />
+    )
+  }
+}
+
+export default ExtraAttemptSettings