@coreui/vue-pro 5.16.0 → 5.17.0

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

@@ -0,0 +1,210 @@
+import { mount } from '@vue/test-utils'
+import { COneTimePassword as Component, COneTimePasswordInput } from '../../../index'
+
+const ComponentName = 'COneTimePassword'
+
+const defaultWrapper = mount(Component, {
+  propsData: {},
+  slots: {
+    default: [
+      '<COneTimePasswordInput />',
+      '<COneTimePasswordInput />',
+      '<COneTimePasswordInput />',
+      '<COneTimePasswordInput />',
+    ],
+  },
+})
+
+const customWrapper = mount(Component, {
+  propsData: {
+    disabled: true,
+    readonly: true,
+    invalid: true,
+    size: 'lg',
+    type: 'text',
+    placeholder: '•',
+    masked: true,
+  },
+  slots: {
+    default: [
+      '<COneTimePasswordInput />',
+      '<COneTimePasswordInput />',
+      '<COneTimePasswordInput />',
+      '<COneTimePasswordInput />',
+    ],
+  },
+})
+
+const withValueWrapper = mount(Component, {
+  propsData: {
+    defaultValue: '1234',
+  },
+  slots: {
+    default: [
+      '<COneTimePasswordInput />',
+      '<COneTimePasswordInput />',
+      '<COneTimePasswordInput />',
+      '<COneTimePasswordInput />',
+    ],
+  },
+})
+
+describe(`Loads and display ${ComponentName} component`, () => {
+  it('has a name', () => {
+    expect(Component.name).toMatch(ComponentName)
+  })
+  it('renders correctly', () => {
+    expect(defaultWrapper.html()).toMatchSnapshot()
+  })
+  it('contain correct classes', () => {
+    expect(defaultWrapper.find('.form-otp').exists()).toBe(true)
+    expect(defaultWrapper.find('input[type="hidden"]').exists()).toBe(true)
+  })
+})
+
+describe(`Customize ${ComponentName} component`, () => {
+  it('renders correctly', () => {
+    expect(customWrapper.html()).toMatchSnapshot()
+  })
+  it('contain size classes', () => {
+    expect(customWrapper.find('.form-otp-lg').exists()).toBe(true)
+  })
+  it('has hidden input', () => {
+    expect(customWrapper.find('input[type="hidden"]').exists()).toBe(true)
+  })
+})
+
+describe(`${ComponentName} with default value`, () => {
+  it('renders correctly', () => {
+    expect(withValueWrapper.html()).toMatchSnapshot()
+  })
+  it('has hidden input with value', () => {
+    const hiddenInput = withValueWrapper.find('input[type="hidden"]')
+    expect(hiddenInput.exists()).toBe(true)
+  })
+})
+
+describe(`${ComponentName} form integration`, () => {
+  it('works in a form', () => {
+    const wrapper = mount({
+      components: { COneTimePassword: Component, COneTimePasswordInput },
+      template: `
+        <form>
+          <COneTimePassword name="otp" id="test-otp">
+            <COneTimePasswordInput />
+            <COneTimePasswordInput />
+            <COneTimePasswordInput />
+            <COneTimePasswordInput />
+          </COneTimePassword>
+        </form>
+      `,
+    })
+
+    const hiddenInput = wrapper.find('input[type="hidden"]')
+    expect(hiddenInput.exists()).toBe(true)
+    expect(hiddenInput.attributes('name')).toBe('otp')
+    expect(hiddenInput.attributes('id')).toBe('test-otp')
+  })
+})
+
+describe(`${ComponentName} accessibility`, () => {
+  it('has proper role attributes', () => {
+    const wrapper = mount({
+      components: { COneTimePassword: Component, COneTimePasswordInput },
+      template: `
+        <COneTimePassword>
+          <COneTimePasswordInput />
+          <COneTimePasswordInput />
+          <COneTimePasswordInput />
+          <COneTimePasswordInput />
+        </COneTimePassword>
+      `,
+    })
+
+    expect(wrapper.find('[role="group"]').exists()).toBe(true)
+  })
+})
+
+describe(`${ComponentName} validation`, () => {
+  it('applies validation classes when invalid', () => {
+    const wrapper = mount({
+      components: { COneTimePassword: Component, COneTimePasswordInput },
+      template: `
+        <COneTimePassword invalid>
+          <COneTimePasswordInput />
+          <COneTimePasswordInput />
+          <COneTimePasswordInput />
+          <COneTimePasswordInput />
+        </COneTimePassword>
+      `,
+    })
+
+    expect(wrapper.html()).toContain('is-invalid')
+  })
+
+  it('applies validation classes when valid', () => {
+    const wrapper = mount({
+      components: { COneTimePassword: Component, COneTimePasswordInput },
+      template: `
+        <COneTimePassword valid>
+          <COneTimePasswordInput />
+          <COneTimePasswordInput />
+          <COneTimePasswordInput />
+          <COneTimePasswordInput />
+        </COneTimePassword>
+      `,
+    })
+
+    expect(wrapper.html()).toContain('is-valid')
+  })
+})
+
+describe(`${ComponentName} props`, () => {
+  it('applies disabled state', () => {
+    const wrapper = mount({
+      components: { COneTimePassword: Component, COneTimePasswordInput },
+      template: `
+        <COneTimePassword disabled>
+          <COneTimePasswordInput />
+          <COneTimePasswordInput />
+          <COneTimePasswordInput />
+          <COneTimePasswordInput />
+        </COneTimePassword>
+      `,
+    })
+
+    expect(wrapper.html()).toContain('disabled')
+  })
+
+  it('applies readonly state', () => {
+    const wrapper = mount({
+      components: { COneTimePassword: Component, COneTimePasswordInput },
+      template: `
+        <COneTimePassword readonly>
+          <COneTimePasswordInput />
+          <COneTimePasswordInput />
+          <COneTimePasswordInput />
+          <COneTimePasswordInput />
+        </COneTimePassword>
+      `,
+    })
+
+    expect(wrapper.html()).toContain('readonly')
+  })
+
+  it('applies masked state', () => {
+    const wrapper = mount({
+      components: { COneTimePassword: Component, COneTimePasswordInput },
+      template: `
+        <COneTimePassword masked>
+          <COneTimePasswordInput />
+          <COneTimePasswordInput />
+          <COneTimePasswordInput />
+          <COneTimePasswordInput />
+        </COneTimePassword>
+      `,
+    })
+
+    expect(wrapper.html()).toContain('type="password"')
+  })
+})

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

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`COneTimePassword Component rendering COneTimePassword customize props 1`] = `"<div class="form-otp" role="group"><input type="text" class="form-otp-control" tabindex="0" aria-label="Digit 1 of 0" inputmode="numeric" pattern="[0-9]*" maxlength="1" autocomplete="off" value=""><input type="text" class="form-otp-control" tabindex="-1" aria-label="Digit 2 of 0" inputmode="numeric" pattern="[0-9]*" maxlength="1" autocomplete="off" value=""><input type="text" class="form-otp-control" tabindex="-1" aria-label="Digit 3 of 0" inputmode="numeric" pattern="[0-9]*" maxlength="1" autocomplete="off" value=""><input type="text" class="form-otp-control" tabindex="-1" aria-label="Digit 4 of 0" inputmode="numeric" pattern="[0-9]*" maxlength="1" autocomplete="off" value=""><input type="hidden" value=""></div>"`;
+
+exports[`COneTimePassword Component rendering loads and displays COneTimePassword component 1`] = `"<div class="form-otp" role="group"><input type="text" class="form-otp-control" tabindex="0" aria-label="Digit 1 of 0" inputmode="numeric" pattern="[0-9]*" maxlength="1" autocomplete="off" value=""><input type="text" class="form-otp-control" tabindex="-1" aria-label="Digit 2 of 0" inputmode="numeric" pattern="[0-9]*" maxlength="1" autocomplete="off" value=""><input type="text" class="form-otp-control" tabindex="-1" aria-label="Digit 3 of 0" inputmode="numeric" pattern="[0-9]*" maxlength="1" autocomplete="off" value=""><input type="text" class="form-otp-control" tabindex="-1" aria-label="Digit 4 of 0" inputmode="numeric" pattern="[0-9]*" maxlength="1" autocomplete="off" value=""><input type="hidden" value=""></div>"`;
+
+exports[`COneTimePassword with default value renders correctly 1`] = `
+"<div class="form-otp" role="group">
+  <conetimepasswordinput></conetimepasswordinput>
+  <conetimepasswordinput></conetimepasswordinput>
+  <conetimepasswordinput></conetimepasswordinput>
+  <conetimepasswordinput></conetimepasswordinput><input type="hidden" value="">
+</div>"
+`;
+
+exports[`Customize COneTimePassword component renders correctly 1`] = `
+"<div class="form-otp form-otp-lg" role="group">
+  <conetimepasswordinput></conetimepasswordinput>
+  <conetimepasswordinput></conetimepasswordinput>
+  <conetimepasswordinput></conetimepasswordinput>
+  <conetimepasswordinput></conetimepasswordinput><input type="hidden" disabled="" value="">
+</div>"
+`;
+
+exports[`Loads and display COneTimePassword component renders correctly 1`] = `
+"<div class="form-otp" role="group">
+  <conetimepasswordinput></conetimepasswordinput>
+  <conetimepasswordinput></conetimepasswordinput>
+  <conetimepasswordinput></conetimepasswordinput>
+  <conetimepasswordinput></conetimepasswordinput><input type="hidden" value="">
+</div>"
+`;

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

@@ -0,0 +1,4 @@
+import { COneTimePassword } from './COneTimePassword'
+import { COneTimePasswordInput } from './COneTimePasswordInput'
+
+export { COneTimePassword, COneTimePasswordInput }

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

@@ -0,0 +1,13 @@
+export const isValidInput = (value: string, type: 'number' | 'text'): boolean => {
+  if (type === 'number') {
+    return /^\d$/.test(value)
+  }
+  return /^.$/u.test(value)
+}
+
+export const extractValidChars = (value: string, type: 'number' | 'text'): string => {
+  if (type === 'number') {
+    return value.replace(/\D/g, '')
+  }
+  return value
+}