@zap-wunschlachen/wl-shared-components 1.0.0

package/tests/unit/components/Core/OtpInput.spec.ts

@@ -0,0 +1,709 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount, flushPromises } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import OtpInput from '@components/OtpInput/OtpInput.vue';
+
+// Mock vue-i18n
+const mockT = vi.fn().mockImplementation((key: string, params?: Record<string, any>) => {
+  const translations: Record<string, string> = {
+    'wl.otp_input.enter_sms_code': 'Enter SMS Code',
+    'wl.otp_input.code_was_sent': 'Code sent to number {phoneNumber}',
+    'wl.otp_input.confirm': 'Confirm',
+    'wl.otp_input.resend': 'Resend'
+  };
+
+  let translation = translations[key] || key;
+
+  // Handle parameter interpolation
+  if (params) {
+    Object.keys(params).forEach(param => {
+      translation = translation.replace(`{${param}}`, params[param]);
+    });
+  }
+
+  return translation;
+});
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: mockT
+  })
+}));
+
+describe('OtpInput', () => {
+  const defaultProps = {
+    phoneNumber: '+1234567890',
+    submitFn: vi.fn(),
+    resendFn: vi.fn()
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // Test default behavior and rendering
+  describe('Default Behavior', () => {
+    it('renders with required props', () => {
+      const wrapper = mount(OtpInput, {
+        props: defaultProps
+      });
+      
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.find('.wl-otp-input').exists()).toBe(true);
+      expect(wrapper.find('.title-container').exists()).toBe(true);
+      expect(wrapper.find('.input-container').exists()).toBe(true);
+      expect(wrapper.find('.message-container').exists()).toBe(true);
+      expect(wrapper.find('.button-container').exists()).toBe(true);
+      expect(wrapper.vm.phoneNumber).toBe('+1234567890');
+    });
+
+    it('displays phone number in title', () => {
+      const wrapper = mount(OtpInput, {
+        props: defaultProps
+      });
+
+      expect(wrapper.find('.title-container p').text()).toContain('+1234567890');
+    });
+
+    it('has data-testid for testing', () => {
+      const wrapper = mount(OtpInput, {
+        props: defaultProps
+      });
+      
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('initializes with default state', () => {
+      const wrapper = mount(OtpInput, {
+        props: defaultProps
+      });
+      
+      expect(wrapper.vm.internalValue).toBe('');
+      expect(wrapper.vm.localOtpState).toBe('default');
+      expect(wrapper.vm.message).toBe('');
+      expect(wrapper.vm.loading).toBe(false);
+      expect(wrapper.vm.disableSubmitBtn).toBe(false);
+      expect(wrapper.vm.disableResendBtn).toBe(false);
+    });
+  });
+
+  // Test i18n functionality
+  describe('Internationalization', () => {
+    it('uses i18n for title text', () => {
+      const wrapper = mount(OtpInput, {
+        props: defaultProps
+      });
+      
+      expect(mockT).toHaveBeenCalledWith('wl.otp_input.enter_sms_code');
+      expect(wrapper.find('h2').text()).toBe('Enter SMS Code');
+    });
+
+    it('uses i18n for button labels', () => {
+      const wrapper = mount(OtpInput, {
+        props: defaultProps
+      });
+      
+      expect(mockT).toHaveBeenCalledWith('wl.otp_input.confirm');
+      expect(mockT).toHaveBeenCalledWith('wl.otp_input.resend');
+    });
+
+    it('displays phone number in description text', () => {
+      const wrapper = mount(OtpInput, {
+        props: {
+          ...defaultProps,
+          phoneNumber: '+9876543210'
+        }
+      });
+
+      expect(wrapper.find('.title-container p').text()).toContain('+9876543210');
+    });
+  });
+
+  // Test validation states
+  describe('Validation States', () => {
+    it('handles default state', () => {
+      const wrapper = mount(OtpInput, {
+        props: {
+          ...defaultProps,
+          otpState: 'default'
+        }
+      });
+      
+      expect(wrapper.vm.state).toBe('default');
+      expect(wrapper.vm.error).toBe(false);
+      expect(wrapper.vm.statusMessageStyle.visibility).toBe('hidden');
+    });
+
+    it('handles error state', () => {
+      const wrapper = mount(OtpInput, {
+        props: {
+          ...defaultProps,
+          otpState: 'error',
+          message: 'Invalid code'
+        }
+      });
+      
+      expect(wrapper.vm.state).toBe('error');
+      expect(wrapper.vm.error).toBe(true);
+      expect(wrapper.vm.statusMessageStyle.visibility).toBe('visible');
+      expect(wrapper.vm.statusMessageStyle.color).toBe('var(--Error-Red-0) !important');
+      expect(wrapper.find('p[role="alert"]').text()).toBe('Invalid code');
+    });
+
+    it('handles success state', () => {
+      const wrapper = mount(OtpInput, {
+        props: {
+          ...defaultProps,
+          otpState: 'success',
+          message: 'Code verified'
+        }
+      });
+      
+      expect(wrapper.vm.state).toBe('success');
+      expect(wrapper.vm.error).toBe(false);
+      expect(wrapper.vm.statusMessageStyle.visibility).toBe('visible');
+      expect(wrapper.vm.statusMessageStyle.color).toBe('var(--Success-Green-0) !important');
+      expect(wrapper.find('p[role="status"]').text()).toBe('Code verified');
+    });
+
+    it('updates state when otpState prop changes', async () => {
+      const wrapper = mount(OtpInput, {
+        props: {
+          ...defaultProps,
+          otpState: 'default'
+        }
+      });
+      
+      expect(wrapper.vm.state).toBe('default');
+      
+      await wrapper.setProps({ otpState: 'error' });
+      
+      expect(wrapper.vm.state).toBe('error');
+    });
+
+    it('resets state to default when input changes', () => {
+      const wrapper = mount(OtpInput, {
+        props: {
+          ...defaultProps,
+          otpState: 'error'
+        }
+      });
+      
+      expect(wrapper.vm.state).toBe('error');
+      
+      wrapper.vm.onResetError();
+      
+      expect(wrapper.vm.localOtpState).toBe('default');
+    });
+  });
+
+  // Test v-model functionality
+  describe('v-model', () => {
+    it('initializes internalValue as empty string', () => {
+      const wrapper = mount(OtpInput, {
+        props: defaultProps
+      });
+      
+      expect(wrapper.vm.internalValue).toBe('');
+    });
+
+    it('emits update:modelValue when internalValue changes', async () => {
+      const wrapper = mount(OtpInput, {
+        props: defaultProps
+      });
+      
+      wrapper.vm.internalValue = '1234';
+      await nextTick();
+      
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+      expect(wrapper.emitted('update:modelValue')?.[1]).toEqual(['1234']); // Index 1 because immediate: true causes first emission
+    });
+
+    it('emits update:modelValue immediately on mount', () => {
+      const wrapper = mount(OtpInput, {
+        props: defaultProps
+      });
+      
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['']);
+    });
+  });
+
+  // Test button functionality
+  describe('Button Functionality', () => {
+    it('calls submitFn when submit button is clicked', async () => {
+      const submitFn = vi.fn();
+      const wrapper = mount(OtpInput, {
+        props: {
+          ...defaultProps,
+          submitFn
+        }
+      });
+      
+      wrapper.vm.onSubmit();
+      
+      expect(submitFn).toHaveBeenCalled();
+    });
+
+    it('calls resendFn and clears input when resend button is clicked', async () => {
+      const resendFn = vi.fn();
+      const wrapper = mount(OtpInput, {
+        props: {
+          ...defaultProps,
+          resendFn
+        }
+      });
+      
+      wrapper.vm.internalValue = '1234';
+      wrapper.vm.onResend();
+      
+      expect(wrapper.vm.internalValue).toBe('');
+      expect(resendFn).toHaveBeenCalled();
+    });
+
+    it('disables submit button when disableSubmitBtn is true', () => {
+      const wrapper = mount(OtpInput, {
+        props: {
+          ...defaultProps,
+          disableSubmitBtn: true
+        }
+      });
+      
+      expect(wrapper.vm.disableSubmitBtn).toBe(true);
+    });
+
+    it('disables resend button when disableResendBtn is true', () => {
+      const wrapper = mount(OtpInput, {
+        props: {
+          ...defaultProps,
+          disableResendBtn: true
+        }
+      });
+      
+      expect(wrapper.vm.disableResendBtn).toBe(true);
+    });
+  });
+
+  // Test loading state
+  describe('Loading State', () => {
+    it('handles loading prop', () => {
+      const wrapper = mount(OtpInput, {
+        props: {
+          ...defaultProps,
+          loading: true
+        }
+      });
+      
+      expect(wrapper.vm.loading).toBe(true);
+    });
+
+    it('passes loading to v-otp-input', () => {
+      const wrapper = mount(OtpInput, {
+        props: {
+          ...defaultProps,
+          loading: true
+        }
+      });
+      
+      // v-otp-input is stubbed, but we can verify the component renders
+      expect(wrapper.find('[data-testid="v-otp-input"]').exists()).toBe(true);
+    });
+  });
+
+  // Test color customization
+  describe('Color Customization', () => {
+    it('uses default colors', () => {
+      const wrapper = mount(OtpInput, {
+        props: defaultProps
+      });
+      
+      expect(wrapper.vm.colors.error).toBe('var(--Error-Red-0)');
+      expect(wrapper.vm.colors.success).toBe('var(--Success-Green-0)');
+    });
+
+    it('accepts custom colors', () => {
+      const customColors = {
+        error: '#FF0000',
+        success: '#00FF00'
+      };
+      
+      const wrapper = mount(OtpInput, {
+        props: {
+          ...defaultProps,
+          colors: customColors
+        }
+      });
+      
+      expect(wrapper.vm.colors.error).toBe('#FF0000');
+      expect(wrapper.vm.colors.success).toBe('#00FF00');
+    });
+
+    it('applies custom error color to status message', () => {
+      const wrapper = mount(OtpInput, {
+        props: {
+          ...defaultProps,
+          otpState: 'error',
+          colors: { error: '#FF0000' }
+        }
+      });
+      
+      expect(wrapper.vm.statusMessageStyle.color).toBe('#FF0000 !important');
+    });
+
+    it('applies custom success color to status message', () => {
+      const wrapper = mount(OtpInput, {
+        props: {
+          ...defaultProps,
+          otpState: 'success',
+          colors: { success: '#00FF00' }
+        }
+      });
+      
+      expect(wrapper.vm.statusMessageStyle.color).toBe('#00FF00 !important');
+    });
+  });
+
+  // Test computed properties
+  describe('Computed Properties', () => {
+    it('computes statusMessageStyle correctly for default state', () => {
+      const wrapper = mount(OtpInput, {
+        props: defaultProps
+      });
+      
+      const style = wrapper.vm.statusMessageStyle;
+      expect(style.visibility).toBe('hidden');
+      expect(style.minHeight).toBe('1.5em');
+    });
+
+    it('computes statusMessageStyle correctly for error state', () => {
+      const wrapper = mount(OtpInput, {
+        props: {
+          ...defaultProps,
+          otpState: 'error'
+        }
+      });
+      
+      const style = wrapper.vm.statusMessageStyle;
+      expect(style.visibility).toBe('visible');
+      expect(style.color).toBe('var(--Error-Red-0) !important');
+      expect(style.minHeight).toBe('1.5em');
+    });
+
+    it('computes statusMessageStyle correctly for success state', () => {
+      const wrapper = mount(OtpInput, {
+        props: {
+          ...defaultProps,
+          otpState: 'success'
+        }
+      });
+      
+      const style = wrapper.vm.statusMessageStyle;
+      expect(style.visibility).toBe('visible');
+      expect(style.color).toBe('var(--Success-Green-0) !important');
+      expect(style.minHeight).toBe('1.5em');
+    });
+  });
+
+  // Test form submission
+  describe('Form Submission', () => {
+    it('prevents default form submission', async () => {
+      const submitFn = vi.fn();
+      const wrapper = mount(OtpInput, {
+        props: {
+          ...defaultProps,
+          submitFn
+        }
+      });
+      
+      const form = wrapper.find('form');
+      const preventDefault = vi.fn();
+      
+      await form.trigger('submit', {
+        preventDefault
+      });
+      
+      // Due to @submit.prevent, preventDefault should be called by Vue
+      // In actual usage, but in tests we can verify the form exists
+      expect(form.exists()).toBe(true);
+    });
+  });
+
+  // Test slots
+  describe('Slots', () => {
+    it('renders default buttons when no slot provided', () => {
+      const wrapper = mount(OtpInput, {
+        props: defaultProps
+      });
+      
+      // Two Button components should be rendered
+      expect(wrapper.findAllComponents({ name: 'Button' })).toHaveLength(2);
+    });
+
+    it('renders custom buttons slot', () => {
+      const wrapper = mount(OtpInput, {
+        props: defaultProps,
+        slots: {
+          buttons: '<div data-testid="custom-buttons">Custom Buttons</div>'
+        }
+      });
+      
+      expect(wrapper.find('[data-testid="custom-buttons"]').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="custom-buttons"]').text()).toBe('Custom Buttons');
+    });
+  });
+
+  // Test accessibility
+  describe('Accessibility', () => {
+    it('has proper form labeling', () => {
+      const wrapper = mount(OtpInput, {
+        props: defaultProps
+      });
+      
+      const form = wrapper.find('form');
+      expect(form.attributes('aria-labelledby')).toBe('page-heading');
+      
+      const heading = wrapper.find('#page-heading');
+      expect(heading.exists()).toBe(true);
+    });
+
+    it('links form to error message when in error state', () => {
+      const wrapper = mount(OtpInput, {
+        props: {
+          ...defaultProps,
+          otpState: 'error'
+        }
+      });
+      
+      const form = wrapper.find('form');
+      expect(form.attributes('aria-describedby')).toBe('form-error');
+      
+      const errorMessage = wrapper.find('#form-error');
+      expect(errorMessage.exists()).toBe(true);
+      expect(errorMessage.attributes('role')).toBe('alert');
+      expect(errorMessage.attributes('aria-live')).toBe('assertive');
+    });
+
+    it('has proper status message for success state', () => {
+      const wrapper = mount(OtpInput, {
+        props: {
+          ...defaultProps,
+          otpState: 'success'
+        }
+      });
+      
+      const statusMessage = wrapper.find('#form-success');
+      expect(statusMessage.exists()).toBe(true);
+      expect(statusMessage.attributes('role')).toBe('status');
+      expect(statusMessage.attributes('aria-live')).toBe('polite');
+      expect(statusMessage.attributes('aria-atomic')).toBe('true');
+    });
+
+    it('has proper form structure', () => {
+      const wrapper = mount(OtpInput, {
+        props: defaultProps
+      });
+      
+      expect(wrapper.find('form').exists()).toBe(true);
+      expect(wrapper.find('h2').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="v-otp-input"]').exists()).toBe(true);
+    });
+  });
+
+  // Test OTP input configuration
+  describe('OTP Input Configuration', () => {
+    it('configures v-otp-input with correct props', () => {
+      const wrapper = mount(OtpInput, {
+        props: {
+          ...defaultProps,
+          loading: true,
+          otpState: 'error'
+        }
+      });
+      
+      // v-otp-input is stubbed, but we can verify the component structure
+      expect(wrapper.find('[data-testid="v-otp-input"]').exists()).toBe(true);
+    });
+
+    it('sets autofocus on v-otp-input', () => {
+      const wrapper = mount(OtpInput, {
+        props: defaultProps
+      });
+      
+      // With stubbed components, we verify the structure exists
+      expect(wrapper.find('[data-testid="v-otp-input"]').exists()).toBe(true);
+    });
+  });
+
+  // Test edge cases
+  describe('Edge Cases', () => {
+    it('handles empty phone number', () => {
+      const wrapper = mount(OtpInput, {
+        props: {
+          ...defaultProps,
+          phoneNumber: ''
+        }
+      });
+
+      const descriptionText = wrapper.find('.title-container p').text();
+      expect(descriptionText).toBe('Code sent to number');
+    });
+
+    it('handles special characters in phone number', () => {
+      const wrapper = mount(OtpInput, {
+        props: {
+          ...defaultProps,
+          phoneNumber: '+1 (234) 567-8900'
+        }
+      });
+
+      expect(wrapper.find('.title-container p').text()).toContain('+1 (234) 567-8900');
+    });
+
+    it('handles undefined message', () => {
+      const wrapper = mount(OtpInput, {
+        props: {
+          ...defaultProps,
+          message: undefined
+        }
+      });
+      
+      // When undefined is passed, the component uses the default empty string
+      expect(wrapper.vm.message).toBe('');
+    });
+
+    it('handles empty message', () => {
+      const wrapper = mount(OtpInput, {
+        props: {
+          ...defaultProps,
+          message: ''
+        }
+      });
+      
+      expect(wrapper.vm.message).toBe('');
+    });
+
+    it('handles invalid otpState', () => {
+      const wrapper = mount(OtpInput, {
+        props: {
+          ...defaultProps,
+          otpState: 'invalid' as any
+        }
+      });
+      
+      expect(wrapper.vm.localOtpState).toBe('invalid');
+      // Should still work, just won't match enum values
+    });
+  });
+
+  // Test event handling
+  describe('Event Handling', () => {
+    it('triggers onResetError when OTP input changes', () => {
+      const wrapper = mount(OtpInput, {
+        props: {
+          ...defaultProps,
+          otpState: 'error'
+        }
+      });
+      
+      expect(wrapper.vm.state).toBe('error');
+      
+      wrapper.vm.onResetError();
+      
+      expect(wrapper.vm.localOtpState).toBe('default');
+    });
+
+    it('clears input and calls resend function on resend', () => {
+      const resendFn = vi.fn();
+      const wrapper = mount(OtpInput, {
+        props: {
+          ...defaultProps,
+          resendFn
+        }
+      });
+      
+      wrapper.vm.internalValue = '123456';
+      wrapper.vm.onResend();
+      
+      expect(wrapper.vm.internalValue).toBe('');
+      expect(resendFn).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  // Test complex scenarios
+  describe('Complex Scenarios', () => {
+    it('handles complete OTP workflow', async () => {
+      const submitFn = vi.fn();
+      const resendFn = vi.fn();
+      
+      const wrapper = mount(OtpInput, {
+        props: {
+          phoneNumber: '+1234567890',
+          submitFn,
+          resendFn,
+          otpState: 'default',
+          message: ''
+        }
+      });
+      
+      // Initial state
+      expect(wrapper.vm.state).toBe('default');
+      expect(wrapper.vm.internalValue).toBe('');
+      
+      // User enters invalid code
+      wrapper.vm.internalValue = '1234';
+      await wrapper.setProps({ 
+        otpState: 'error', 
+        message: 'Invalid code' 
+      });
+      
+      expect(wrapper.vm.state).toBe('error');
+      expect(wrapper.vm.error).toBe(true);
+      
+      // User starts typing again (resets error)
+      wrapper.vm.onResetError();
+      expect(wrapper.vm.localOtpState).toBe('default');
+      
+      // User enters correct code
+      wrapper.vm.internalValue = '5678';
+      await wrapper.setProps({ 
+        otpState: 'success', 
+        message: 'Code verified' 
+      });
+      
+      expect(wrapper.vm.state).toBe('success');
+      expect(wrapper.vm.error).toBe(false);
+      
+      // User submits
+      wrapper.vm.onSubmit();
+      expect(submitFn).toHaveBeenCalled();
+    });
+
+    it('works with all props configured', () => {
+      const wrapper = mount(OtpInput, {
+        props: {
+          phoneNumber: '+1 (555) 123-4567',
+          message: 'Test message',
+          otpState: 'success',
+          submitFn: vi.fn(),
+          resendFn: vi.fn(),
+          loading: true,
+          colors: {
+            error: '#FF0000',
+            success: '#00FF00'
+          },
+          disableSubmitBtn: true,
+          disableResendBtn: false
+        }
+      });
+      
+      expect(wrapper.vm.phoneNumber).toBe('+1 (555) 123-4567');
+      expect(wrapper.vm.message).toBe('Test message');
+      expect(wrapper.vm.state).toBe('success');
+      expect(wrapper.vm.loading).toBe(true);
+      expect(wrapper.vm.colors.error).toBe('#FF0000');
+      expect(wrapper.vm.colors.success).toBe('#00FF00');
+      expect(wrapper.vm.disableSubmitBtn).toBe(true);
+      expect(wrapper.vm.disableResendBtn).toBe(false);
+    });
+  });
+});