diff --git a/packages/components/slider/__tests__/slider.test.tsx b/packages/components/slider/__tests__/slider.test.tsx index 61872e6aca..0100c814c2 100644 --- a/packages/components/slider/__tests__/slider.test.tsx +++ b/packages/components/slider/__tests__/slider.test.tsx @@ -287,4 +287,87 @@ describe("Slider", () => { expect(marks).toHaveLength(3); }); + + it("should move thumb after clicking mark (single thumb)", async function () { + const {getByRole, container} = render( + , + ); + + const marks = container.querySelectorAll("[data-slot='mark']"); + + expect(marks).toHaveLength(3); + + await act(async () => { + await userEvent.click(marks[1]); + }); + + const slider = getByRole("slider"); + + expect(slider).toHaveProperty("value", "0.5"); + expect(slider).toHaveAttribute("aria-valuetext", "0.5"); + }); + + it("should move thumb after clicking mark (left and right thumbs)", async function () { + const {getAllByRole, container} = render( + , + ); + + const marks = container.querySelectorAll("[data-slot='mark']"); + + expect(marks).toHaveLength(3); + + await act(async () => { + await userEvent.click(marks[1]); + }); + + const [leftSlider, rightSlider] = getAllByRole("slider"); + + expect(leftSlider).toHaveProperty("value", "0.5"); + expect(leftSlider).toHaveAttribute("aria-valuetext", "0.5"); + + expect(rightSlider).toHaveProperty("value", "0.8"); + expect(rightSlider).toHaveAttribute("aria-valuetext", "0.8"); + }); });