@kadconsulting/dry
Version:
KAD Reusable Component Library
57 lines • 2.56 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { fireEvent, render, screen } from '@testing-library/react';
import { IconNames } from '../Icons/paths';
import ProgressSteps from './ProgressSteps';
const stepsData = [
{
icon: IconNames.User01,
title: 'Your details',
text: 'Company details',
},
{
icon: IconNames.User02,
title: 'Invite your team',
text: 'Please provide your name and email',
},
{
icon: IconNames.User03,
title: 'A few details about your company',
text: 'Start collaborating with your team',
},
];
describe('ProgressSteps', () => {
it('renders without crashing', () => {
render(_jsx(ProgressSteps, { steps: stepsData }));
expect(screen.getByText('Your details')).toBeInTheDocument();
});
it('highlights the active step based on user interaction', () => {
render(_jsx(ProgressSteps, { steps: stepsData }));
const firstStep = screen.getByText('Your details');
const secondStep = screen.getByText('Invite your team');
fireEvent.click(secondStep);
expect(firstStep).not.toHaveClass('active');
expect(secondStep).toHaveClass('active');
});
it('invokes the onStepClick prop when a step is clicked', () => {
const handleStepClick = jest.fn();
render(_jsx(ProgressSteps, { steps: stepsData, onStepClick: handleStepClick }));
const firstStep = screen.getByText('Your details');
fireEvent.click(firstStep);
expect(handleStepClick).toHaveBeenCalledWith(0);
});
it('renders vertical orientation correctly', () => {
const { container } = render(_jsx(ProgressSteps, { steps: stepsData, orientation: 'vertical' }));
const stepsContainer = container.querySelector('.steps-container');
expect(stepsContainer).toHaveClass('vertical');
});
it('renders the progress bar based on the active step', () => {
const { container } = render(_jsx(ProgressSteps, { steps: stepsData }));
let progressBarFill = container.querySelector('.fill');
fireEvent.click(screen.getByText('Invite your team')); // Clicking the second step
// Re-query for the progress bar fill as it may have re-rendered
progressBarFill = container.querySelector('.fill');
// Assuming that the width style will be 66.6667% as it's the second step out of three.
expect(progressBarFill?.style.width).toBe('66.6667%');
});
});
//# sourceMappingURL=ProgressSteps.test.js.map