diff --git a/packages/wow-ui/src/components/Stepper/Stepper.stories.tsx b/packages/wow-ui/src/components/Stepper/Stepper.stories.tsx index 498ac9f1..c53ad1f9 100644 --- a/packages/wow-ui/src/components/Stepper/Stepper.stories.tsx +++ b/packages/wow-ui/src/components/Stepper/Stepper.stories.tsx @@ -63,7 +63,7 @@ export const Default: Story = { }, }; -export const StepperWithMarkers: Story = { +export const StepperWithLabels: Story = { args: { step: 1, maxStep: 3, diff --git a/packages/wow-ui/src/components/Stepper/Stepper.test.tsx b/packages/wow-ui/src/components/Stepper/Stepper.test.tsx new file mode 100644 index 00000000..96c27b5a --- /dev/null +++ b/packages/wow-ui/src/components/Stepper/Stepper.test.tsx @@ -0,0 +1,106 @@ +import { cleanup, render, screen } from "@testing-library/react"; + +import Stepper from "@/components/Stepper"; + +describe("Stepper rendering Test", () => { + beforeEach(() => { + render(); + }); + + it("should render Stepper", () => { + const stepper = screen.getByRole("progressbar"); + expect(stepper).toBeInTheDocument(); + }); + + it("should render with attributes aria-label stepper", () => { + const stepper = screen.getByRole("progressbar"); + + expect(stepper).toHaveAttribute("aria-label", "stepper"); + }); +}); + +describe("Stepper step state Test", () => { + beforeEach(() => { + render(); + }); + it("should stepper min value is 1", () => { + const stepper = screen.getByRole("progressbar"); + expect(stepper).toHaveAttribute("aria-valuemin", "1"); + }); + + it("should stepper value is 3", () => { + const stepper = screen.getByRole("progressbar"); + expect(stepper).toHaveAttribute("aria-valuetext", "3"); + }); + + it("should stepper max value is 5", () => { + const stepper = screen.getByRole("progressbar"); + expect(stepper).toHaveAttribute("aria-valuemax", "5"); + }); +}); + +describe("Stepper Labels Rendering Test", () => { + beforeEach(() => { + render( + + ); + }); + it("should stepper label render", () => { + const step1 = screen.getByText("Step1"); + expect(step1).toBeInTheDocument(); + + const step2 = screen.getByText("Step2"); + expect(step2).toBeInTheDocument(); + + const step3 = screen.getByText("Step3"); + expect(step3).toBeInTheDocument(); + + const step4 = screen.getByText("Step4"); + expect(step4).toBeInTheDocument(); + + const step5 = screen.getByText("Step5"); + expect(step5).toBeInTheDocument(); + }); +}); + +describe("Control step change Test", () => { + it("should stepper step state change when external step changed ", async () => { + const checkStepValue = async (step: number) => { + render(); + const stepper = screen.getByRole("progressbar"); + expect(stepper).toHaveAttribute("aria-valuetext", step.toString()); + cleanup(); + }; + + await checkStepValue(1); + await checkStepValue(2); + await checkStepValue(3); + await checkStepValue(4); + await checkStepValue(5); + }); + + it("should stepper maxStep state change when external maxStep changed ", async () => { + const checkMaxStepValue = async (maxStep: number) => { + render(); + const stepper = screen.getByRole("progressbar"); + expect(stepper).toHaveAttribute("aria-valuemax", maxStep.toString()); + cleanup(); + }; + + await checkMaxStepValue(1); + await checkMaxStepValue(2); + await checkMaxStepValue(3); + await checkMaxStepValue(4); + await checkMaxStepValue(5); + }); +}); diff --git a/packages/wow-ui/src/components/Stepper/index.tsx b/packages/wow-ui/src/components/Stepper/index.tsx index 2deaa207..967a9ffb 100644 --- a/packages/wow-ui/src/components/Stepper/index.tsx +++ b/packages/wow-ui/src/components/Stepper/index.tsx @@ -30,7 +30,7 @@ const checkStepperStatus = (number: number, step: number) => { * @param {number} width Stepper의 가로 길이를 자유롭게 정할 수 있어요. 단, 278px 이상이어야 합니다. */ -const Stepper = ({ step, maxStep = 3, labels, width }: StepperProps) => { +const Stepper = ({ step = 1, maxStep = 3, labels, width }: StepperProps) => { const fillStepper = useCallback((maxStep: number, step: number) => { const ratio = (step - 1) / (maxStep - 1); return ratio > 1 ? "100%" : `${ratio * 100}%`;