feat(slider): add tests for thumb move on mark click

heroui-inc · May 17, 2024 · 4efded2 · 4efded2
1 parent 583f4ad
commit 4efded2
Showing 1 changed file with 83 additions and 0 deletions.
diff --git 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(
+      <Slider
+        hideThumb
+        defaultValue={0.2}
+        label="The Label"
+        marks={[
+          {
+            value: 0.2,
+            label: "20%",
+          },
+          {
+            value: 0.5,
+            label: "50%",
+          },
+          {
+            value: 0.8,
+            label: "80%",
+          },
+        ]}
+        maxValue={1}
+        minValue={0}
+        step={0.1}
+      />,
+    );
+
+    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(
+      <Slider
+        hideThumb
+        defaultValue={[0.2, 0.8]}
+        label="The Label"
+        marks={[
+          {
+            value: 0.2,
+            label: "20%",
+          },
+          {
+            value: 0.5,
+            label: "50%",
+          },
+          {
+            value: 0.8,
+            label: "80%",
+          },
+        ]}
+        maxValue={1}
+        minValue={0}
+        step={0.1}
+      />,
+    );
+
+    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");
+  });
 });