test: Create unit tests for react components in packages/ui/components/form/step (#10442)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
Co-authored-by: Keith Williams <keithwillcode@gmail.com>
1182-refactor-app-list-my-settings-conferencing-and-installed-app-conferencing^2
GitStart-Cal.com 2023-08-11 03:36:55 -03:00 committed by GitHub
parent c244f0fc8e
commit cfe7ea45ec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 69 additions and 2 deletions

View File

@ -17,7 +17,7 @@ const Steps = (props: ISteps) => {
return (
<div className="mt-6 space-y-2">
<p className="text-subtle text-xs font-medium">{stepLabel(currentStep, maxSteps)}</p>
<div className="flex w-full space-x-2 rtl:space-x-reverse">
<div data-testid="step-indicator-container" className="flex w-full space-x-2 rtl:space-x-reverse">
{new Array(maxSteps).fill(0).map((_s, index) => {
return index <= currentStep - 1 ? (
<div
@ -27,9 +27,14 @@ const Steps = (props: ISteps) => {
"bg-inverted h-1 w-full rounded-[1px]",
index < currentStep - 1 ? "cursor-pointer" : ""
)}
data-testid={`step-indicator-${index}`}
/>
) : (
<div key={`step-${index}`} className="bg-emphasis h-1 w-full rounded-[1px] opacity-25" />
<div
key={`step-${index}`}
className="bg-emphasis h-1 w-full rounded-[1px] opacity-25"
data-testid={`step-indicator-${index}`}
/>
);
})}
</div>

View File

@ -0,0 +1,62 @@
/* eslint-disable playwright/no-conditional-in-test */
/* eslint-disable playwright/missing-playwright-await */
import { render, fireEvent } from "@testing-library/react";
import { vi } from "vitest";
import { Steps } from "./Steps";
const MAX_STEPS = 10;
const CURRENT_STEP = 5;
const mockNavigateToStep = vi.fn();
const Props = {
maxSteps: MAX_STEPS,
currentStep: CURRENT_STEP,
navigateToStep: mockNavigateToStep,
stepLabel: (currentStep: number, totalSteps: number) => `Test Step ${currentStep} of ${totalSteps}`,
};
describe("Tests for Steps Component", () => {
test("Should render the correct number of steps", () => {
const { queryByTestId } = render(<Steps {...Props} />);
const stepIndicatorDivs = queryByTestId("step-indicator-container");
const childDivs = stepIndicatorDivs?.querySelectorAll("div");
const count = childDivs?.length;
expect(stepIndicatorDivs).toBeInTheDocument();
expect(count).toBe(MAX_STEPS);
for (let i = 0; i < MAX_STEPS; i++) {
const step = queryByTestId(`step-indicator-${i}`);
if (i < CURRENT_STEP - 1) {
expect(step).toHaveClass("cursor-pointer");
} else {
expect(step).not.toHaveClass("cursor-pointer");
}
}
});
test("Should render correctly the label of the steps", () => {
const { getByText } = render(<Steps {...Props} />);
expect(getByText(`Test Step ${CURRENT_STEP} of ${MAX_STEPS}`)).toBeInTheDocument();
});
test("Should navigate to the correct step when clicked", async () => {
const { getByTestId } = render(<Steps {...Props} />);
for (let i = 0; i < MAX_STEPS; i++) {
const stepIndicator = getByTestId(`step-indicator-${i}`);
if (i < CURRENT_STEP - 1) {
fireEvent.click(stepIndicator);
expect(mockNavigateToStep).toHaveBeenCalledWith(i);
mockNavigateToStep.mockClear();
} else {
expect(mockNavigateToStep).not.toHaveBeenCalled();
}
}
});
});