feat: dyamic stepper form forgot password

libs/ui/src/molecules/stepper/stepper.spec.tsx

@@ -0,0 +1,48 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Stepper, StepperProps } from './Stepper';
+
+vi.mock('@imphnen-frontend-service/utils', () => ({
+  cn: (...args: string[]) => args.filter(Boolean).join(' '),
+}));
+
+describe('Stepper', () => {
+  const renderStepper = (props: StepperProps) => render(<Stepper {...props} />);
+
+  it('renders with correct step information', () => {
+    renderStepper({ currentStep: 2, totalSteps: 5 });
+
+    expect(screen.getByText('Langkah 2 dari 5')).toBeInTheDocument();
+  });
+
+  it('applies custom className correctly', () => {
+    const customClass = 'custom-stepper';
+    renderStepper({
+      currentStep: 1,
+      totalSteps: 3,
+      className: customClass,
+    });
+
+    const stepperElement = screen.getByText('Langkah 1 dari 3').parentElement;
+    expect(stepperElement).toHaveClass('text-center');
+    expect(stepperElement).toHaveClass('mb-4');
+    expect(stepperElement).toHaveClass(customClass);
+  });
+
+  it('handles step 0 correctly', () => {
+    renderStepper({ currentStep: 0, totalSteps: 3 });
+    expect(screen.getByText('Langkah 0 dari 3')).toBeInTheDocument();
+  });
+
+  it('handles equal currentStep and totalSteps', () => {
+    renderStepper({ currentStep: 3, totalSteps: 3 });
+    expect(screen.getByText('Langkah 3 dari 3')).toBeInTheDocument();
+  });
+
+  it('applies correct text styling classes', () => {
+    renderStepper({ currentStep: 1, totalSteps: 2 });
+    const textElement = screen.getByText('Langkah 1 dari 2');
+    expect(textElement).toHaveClass('text-neutral-400');
+    expect(textElement).toHaveClass('text-lg');
+  });
+});