Files
imphnen-frontend-service/libs/ui/src/molecules/stepper/stepper.spec.tsx
T

49 lines
1.6 KiB
TypeScript

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');
});
});