@coreui/react-pro 5.22.0 → 5.23.0

package/src/components/one-time-password-input/__tests__/COneTimePassword.spec.tsx

@@ -0,0 +1,361 @@
+import * as React from 'react'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { COneTimePassword } from '../COneTimePassword'
+import { COneTimePasswordInput } from '../COneTimePasswordInput'
+
+// Test helpers
+const customAriaLabel = (index: number, total: number) => `Code digit ${index + 1} of ${total}`
+
+// Helper to render OTP with default inputs
+const renderOTP = (props = {}) => {
+  return render(
+    <COneTimePassword {...props}>
+      <COneTimePasswordInput />
+      <COneTimePasswordInput />
+      <COneTimePasswordInput />
+      <COneTimePasswordInput />
+    </COneTimePassword>
+  )
+}
+
+describe('COneTimePassword', () => {
+  // Snapshot tests
+  test('loads and displays COneTimePassword component', () => {
+    const { container } = renderOTP()
+    expect(container).toMatchSnapshot()
+  })
+
+  test('COneTimePassword customize props', () => {
+    const { container } = renderOTP({
+      className: 'custom-otp',
+      size: 'lg',
+      disabled: true,
+      readOnly: true,
+      placeholder: '•',
+      type: 'text',
+    })
+    expect(container).toMatchSnapshot()
+    expect(container.querySelector('.form-otp')).toHaveClass('custom-otp')
+    expect(container.querySelector('.form-otp')).toHaveClass('form-otp-lg')
+  })
+
+  // Controlled pattern tests
+  test('works as controlled component with value prop', async () => {
+    const onChange = jest.fn()
+    const { rerender } = renderOTP({ value: '12', onChange })
+
+    const inputs = screen.getAllByRole('textbox')
+    expect(inputs[0]).toHaveValue('1')
+    expect(inputs[1]).toHaveValue('2')
+    expect(inputs[2]).toHaveValue('')
+    expect(inputs[3]).toHaveValue('')
+
+    // Update value prop
+    rerender(
+      <COneTimePassword value="1234" onChange={onChange}>
+        <COneTimePasswordInput />
+        <COneTimePasswordInput />
+        <COneTimePasswordInput />
+        <COneTimePasswordInput />
+      </COneTimePassword>
+    )
+
+    expect(inputs[0]).toHaveValue('1')
+    expect(inputs[1]).toHaveValue('2')
+    expect(inputs[2]).toHaveValue('3')
+    expect(inputs[3]).toHaveValue('4')
+  })
+
+  test('controlled component calls onChange when value changes', () => {
+    const onChange = jest.fn()
+    renderOTP({ value: '', onChange })
+
+    const inputs = screen.getAllByRole('textbox')
+    fireEvent.input(inputs[0], { target: { value: '5' } })
+
+    expect(onChange).toHaveBeenCalledWith('5')
+  })
+
+  // Uncontrolled pattern tests
+  test('works as uncontrolled component without value prop', () => {
+    const onChange = jest.fn()
+    renderOTP({ onChange })
+
+    const inputs = screen.getAllByRole('textbox')
+    expect(inputs[0]).toHaveValue('')
+
+    fireEvent.input(inputs[0], { target: { value: '7' } })
+    expect(inputs[0]).toHaveValue('7')
+    expect(onChange).toHaveBeenCalledWith('7')
+  })
+
+  test('works with defaultValue prop for uncontrolled mode', () => {
+    const onChange = jest.fn()
+    renderOTP({ defaultValue: '9876', onChange })
+
+    const inputs = screen.getAllByRole('textbox')
+    expect(inputs[0]).toHaveValue('9')
+    expect(inputs[1]).toHaveValue('8')
+    expect(inputs[2]).toHaveValue('7')
+    expect(inputs[3]).toHaveValue('6')
+  })
+
+  test('defaultValue works with partial values', () => {
+    renderOTP({ defaultValue: '42' })
+
+    const inputs = screen.getAllByRole('textbox')
+    expect(inputs[0]).toHaveValue('4')
+    expect(inputs[1]).toHaveValue('2')
+    expect(inputs[2]).toHaveValue('')
+    expect(inputs[3]).toHaveValue('')
+  })
+
+  test('controlled mode overrides defaultValue', () => {
+    renderOTP({ defaultValue: '1111', value: '2222' })
+
+    const inputs = screen.getAllByRole('textbox')
+    expect(inputs[0]).toHaveValue('2')
+    expect(inputs[1]).toHaveValue('2')
+    expect(inputs[2]).toHaveValue('2')
+    expect(inputs[3]).toHaveValue('2')
+  })
+
+  // Focus and navigation tests
+  test('auto-focuses next input on valid entry', () => {
+    renderOTP()
+
+    const inputs = screen.getAllByRole('textbox')
+    fireEvent.input(inputs[0], { target: { value: '1' } })
+
+    expect(inputs[1]).toHaveFocus()
+  })
+
+  test('backspace moves to previous input when current is empty', () => {
+    renderOTP({ defaultValue: '12' })
+
+    const inputs = screen.getAllByRole('textbox')
+    inputs[2].focus()
+
+    fireEvent.keyDown(inputs[2], { key: 'Backspace' })
+    expect(inputs[1]).toHaveFocus()
+    expect(inputs[1]).toHaveValue('')
+  })
+
+  test('arrow key navigation works', () => {
+    renderOTP({ defaultValue: '1234' })
+
+    const inputs = screen.getAllByRole('textbox')
+    inputs[1].focus()
+
+    fireEvent.keyDown(inputs[1], { key: 'ArrowRight' })
+    expect(inputs[2]).toHaveFocus()
+
+    fireEvent.keyDown(inputs[2], { key: 'ArrowLeft' })
+    expect(inputs[1]).toHaveFocus()
+  })
+
+  test('linear mode prevents out-of-order focus', () => {
+    renderOTP({ linear: true })
+
+    const inputs = screen.getAllByRole('textbox')
+    fireEvent.focus(inputs[2]) // Try to focus third input
+
+    expect(inputs[0]).toHaveFocus() // Should focus first empty input instead
+  })
+
+  // Paste functionality tests
+  test('paste distributes characters across inputs', () => {
+    const onChange = jest.fn()
+    renderOTP({ onChange })
+
+    const inputs = screen.getAllByRole('textbox')
+    inputs[0].focus()
+
+    fireEvent.paste(inputs[0], { clipboardData: { getData: () => '5678' } })
+
+    expect(inputs[0]).toHaveValue('5')
+    expect(inputs[1]).toHaveValue('6')
+    expect(inputs[2]).toHaveValue('7')
+    expect(inputs[3]).toHaveValue('8')
+    expect(onChange).toHaveBeenLastCalledWith('5678')
+  })
+
+  test('paste from middle input distributes remaining characters', () => {
+    renderOTP({ defaultValue: '12' })
+
+    const inputs = screen.getAllByRole('textbox')
+    inputs[1].focus()
+
+    fireEvent.paste(inputs[1], { clipboardData: { getData: () => '99' } })
+
+    expect(inputs[0]).toHaveValue('1')
+    expect(inputs[1]).toHaveValue('9')
+    expect(inputs[2]).toHaveValue('9')
+    expect(inputs[3]).toHaveValue('')
+  })
+
+  test('paste respects input type validation', () => {
+    renderOTP({ type: 'number' })
+
+    const inputs = screen.getAllByRole('textbox')
+    inputs[0].focus()
+
+    fireEvent.paste(inputs[0], { clipboardData: { getData: () => 'a1b2' } })
+
+    expect(inputs[0]).toHaveValue('1')
+    expect(inputs[1]).toHaveValue('2')
+    expect(inputs[2]).toHaveValue('')
+    expect(inputs[3]).toHaveValue('')
+  })
+
+  // Validation and type tests
+  test('number type only accepts digits', () => {
+    renderOTP({ type: 'number' })
+
+    const inputs = screen.getAllByRole('textbox')
+    fireEvent.input(inputs[0], { target: { value: 'a' } })
+
+    expect(inputs[0]).toHaveValue('')
+  })
+
+  test('text type accepts any character', () => {
+    renderOTP({ type: 'text' })
+
+    const inputs = screen.getAllByRole('textbox')
+    fireEvent.input(inputs[0], { target: { value: 'a' } })
+
+    expect(inputs[0]).toHaveValue('a')
+  })
+
+  // Completion and submission tests
+  test('calls onComplete when all fields are filled', () => {
+    const onComplete = jest.fn()
+    renderOTP({ onComplete })
+
+    const inputs = screen.getAllByRole('textbox')
+    fireEvent.input(inputs[0], { target: { value: '1' } })
+    fireEvent.input(inputs[1], { target: { value: '2' } })
+    fireEvent.input(inputs[2], { target: { value: '3' } })
+    fireEvent.input(inputs[3], { target: { value: '4' } })
+
+    expect(onComplete).toHaveBeenCalledWith('1234')
+  })
+
+  test('autoSubmit submits form when complete', async () => {
+    const onSubmit = jest.fn((e) => e.preventDefault())
+
+    render(
+      <form onSubmit={onSubmit}>
+        <COneTimePassword autoSubmit>
+          <COneTimePasswordInput />
+          <COneTimePasswordInput />
+          <COneTimePasswordInput />
+          <COneTimePasswordInput />
+        </COneTimePassword>
+      </form>
+    )
+
+    const inputs = screen.getAllByRole('textbox')
+    fireEvent.input(inputs[0], { target: { value: '1' } })
+    fireEvent.input(inputs[1], { target: { value: '2' } })
+    fireEvent.input(inputs[2], { target: { value: '3' } })
+    fireEvent.input(inputs[3], { target: { value: '4' } })
+
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalled()
+    })
+  })
+
+  // Disabled and readonly tests
+  test('disabled prop disables all inputs', () => {
+    renderOTP({ disabled: true })
+
+    const inputs = screen.getAllByRole('textbox')
+    inputs.forEach((input) => {
+      expect(input).toBeDisabled()
+    })
+  })
+
+  test('readOnly prop makes all inputs readonly', () => {
+    renderOTP({ readOnly: true })
+
+    const inputs = screen.getAllByRole('textbox')
+    inputs.forEach((input) => {
+      expect(input).toHaveAttribute('readonly')
+    })
+  })
+
+  // Masked input tests
+  test('masked prop sets input type to password', () => {
+    renderOTP({ masked: true })
+
+    const inputs = document.querySelectorAll('input[type="password"]')
+    expect(inputs).toHaveLength(4)
+    inputs.forEach((input) => {
+      expect(input).toHaveAttribute('type', 'password')
+    })
+  })
+
+  // Hidden input tests
+  test('creates hidden input with combined value', () => {
+    renderOTP({ name: 'otp', id: 'test-otp' })
+
+    const hiddenInput = document.querySelector('input[type="hidden"]')
+    expect(hiddenInput).toBeInTheDocument()
+    expect(hiddenInput).toHaveAttribute('name', 'otp')
+    expect(hiddenInput).toHaveAttribute('id', 'test-otp')
+
+    const inputs = screen.getAllByRole('textbox')
+    fireEvent.input(inputs[0], { target: { value: '9' } })
+
+    expect(hiddenInput).toHaveValue('9')
+  })
+
+  // Accessibility tests
+  test('provides proper ARIA labels', () => {
+    renderOTP()
+
+    const inputs = screen.getAllByRole('textbox')
+    expect(inputs[0]).toHaveAttribute('aria-label', 'Digit 1 of 4')
+    expect(inputs[1]).toHaveAttribute('aria-label', 'Digit 2 of 4')
+    expect(inputs[2]).toHaveAttribute('aria-label', 'Digit 3 of 4')
+    expect(inputs[3]).toHaveAttribute('aria-label', 'Digit 4 of 4')
+  })
+
+  test('custom ariaLabel function works', () => {
+    renderOTP({ ariaLabel: customAriaLabel })
+
+    const inputs = screen.getAllByRole('textbox')
+    expect(inputs[0]).toHaveAttribute('aria-label', 'Code digit 1 of 4')
+  })
+
+  test('applies form validation classes', () => {
+    renderOTP({ invalid: true })
+
+    const inputs = screen.getAllByRole('textbox')
+    inputs.forEach((input) => {
+      expect(input).toHaveClass('is-invalid')
+    })
+  })
+
+  // Placeholder tests
+  test('single character placeholder applies to all inputs', () => {
+    renderOTP({ placeholder: '•' })
+
+    const inputs = screen.getAllByRole('textbox')
+    inputs.forEach((input) => {
+      expect(input).toHaveAttribute('placeholder', '•')
+    })
+  })
+
+  test('multi-character placeholder distributes by index', () => {
+    renderOTP({ placeholder: 'ABCD' })
+
+    const inputs = screen.getAllByRole('textbox')
+    expect(inputs[0]).toHaveAttribute('placeholder', 'A')
+    expect(inputs[1]).toHaveAttribute('placeholder', 'B')
+    expect(inputs[2]).toHaveAttribute('placeholder', 'C')
+    expect(inputs[3]).toHaveAttribute('placeholder', 'D')
+  })
+})

package/src/components/one-time-password-input/__tests__/__snapshots__/COneTimePassword.spec.tsx.snap

@@ -0,0 +1,130 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`COneTimePassword COneTimePassword customize props 1`] = `
+<div>
+  <div
+    class="form-otp form-otp-lg custom-otp"
+    role="group"
+  >
+    <input
+      aria-label="Digit 1 of 4"
+      autocomplete="off"
+      class="form-otp-control"
+      disabled=""
+      inputmode="text"
+      maxlength="1"
+      pattern=".*"
+      placeholder="•"
+      readonly=""
+      tabindex="0"
+      type="text"
+      value=""
+    />
+    <input
+      aria-label="Digit 2 of 4"
+      autocomplete="off"
+      class="form-otp-control"
+      disabled=""
+      inputmode="text"
+      maxlength="1"
+      pattern=".*"
+      placeholder="•"
+      readonly=""
+      tabindex="-1"
+      type="text"
+      value=""
+    />
+    <input
+      aria-label="Digit 3 of 4"
+      autocomplete="off"
+      class="form-otp-control"
+      disabled=""
+      inputmode="text"
+      maxlength="1"
+      pattern=".*"
+      placeholder="•"
+      readonly=""
+      tabindex="-1"
+      type="text"
+      value=""
+    />
+    <input
+      aria-label="Digit 4 of 4"
+      autocomplete="off"
+      class="form-otp-control"
+      disabled=""
+      inputmode="text"
+      maxlength="1"
+      pattern=".*"
+      placeholder="•"
+      readonly=""
+      tabindex="-1"
+      type="text"
+      value=""
+    />
+    <input
+      disabled=""
+      type="hidden"
+      value=""
+    />
+  </div>
+</div>
+`;
+
+exports[`COneTimePassword loads and displays COneTimePassword component 1`] = `
+<div>
+  <div
+    class="form-otp"
+    role="group"
+  >
+    <input
+      aria-label="Digit 1 of 4"
+      autocomplete="off"
+      class="form-otp-control"
+      inputmode="numeric"
+      maxlength="1"
+      pattern="[0-9]*"
+      tabindex="0"
+      type="text"
+      value=""
+    />
+    <input
+      aria-label="Digit 2 of 4"
+      autocomplete="off"
+      class="form-otp-control"
+      inputmode="numeric"
+      maxlength="1"
+      pattern="[0-9]*"
+      tabindex="-1"
+      type="text"
+      value=""
+    />
+    <input
+      aria-label="Digit 3 of 4"
+      autocomplete="off"
+      class="form-otp-control"
+      inputmode="numeric"
+      maxlength="1"
+      pattern="[0-9]*"
+      tabindex="-1"
+      type="text"
+      value=""
+    />
+    <input
+      aria-label="Digit 4 of 4"
+      autocomplete="off"
+      class="form-otp-control"
+      inputmode="numeric"
+      maxlength="1"
+      pattern="[0-9]*"
+      tabindex="-1"
+      type="text"
+      value=""
+    />
+    <input
+      type="hidden"
+      value=""
+    />
+  </div>
+</div>
+`;

package/src/components/one-time-password-input/index.ts

@@ -0,0 +1,6 @@
+import { COneTimePassword } from './COneTimePassword'
+import { COneTimePasswordInput } from './COneTimePasswordInput'
+
+export { COneTimePassword, COneTimePasswordInput }
+export type { COneTimePasswordProps } from './COneTimePassword'
+export type { COneTimePasswordInputProps } from './COneTimePasswordInput'

package/src/components/one-time-password-input/utils.ts

@@ -0,0 +1,23 @@
+export const isValidInput = (inputValue: string, type: 'number' | 'text'): boolean => {
+  if (inputValue.length !== 1) return false
+
+  switch (type) {
+    case 'number': {
+      return /^\d$/.test(inputValue)
+    }
+    default: {
+      return /^.$/.test(inputValue)
+    }
+  }
+}
+
+export const extractValidChars = (text: string, type: 'number' | 'text'): string => {
+  switch (type) {
+    case 'number': {
+      return text.replaceAll(/\D/g, '')
+    }
+    default: {
+      return text
+    }
+  }
+}