Merge pull request #1244 from dxc-technology/jialecl-removingMaterial…

…-slider Removing Material from slider
dxc-technology · Sep 21, 2022 · 18ada02 · 18ada02
2 parents feed711 + 220419c
commit 18ada02
Show file tree

Hide file tree

Showing 4 changed files with 328 additions and 172 deletions.
diff --git a/lib/src/slider/Slider.stories.tsx b/lib/src/slider/Slider.stories.tsx
@@ -171,7 +171,13 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Large limit values labels" theme="light" level={4} />
-      <DxcSlider label="Slider" helperText="Help message" showLimitsValues labelFormatCallback={labelFormat} size="large" />
+      <DxcSlider
+        label="Slider"
+        helperText="Help message"
+        showLimitsValues
+        labelFormatCallback={labelFormat}
+        size="large"
+      />
     </ExampleContainer>
   </>
 );
diff --git a/lib/src/slider/Slider.test.js b/lib/src/slider/Slider.test.js
@@ -4,10 +4,13 @@ import userEvent from "@testing-library/user-event";
 import DxcSlider from "./Slider";
 
 describe("Slider component tests", () => {
-  test("Slider renders with correct text", () => {
-    const { getByText } = render(<DxcSlider minValue={0} maxValue={100} showLimitsValues />);
+  test("Slider renders with correct text and label id", () => {
+    const { getByText, getByRole } = render(<DxcSlider label="label" minValue={0} maxValue={100} showLimitsValues />);
     expect(getByText("0")).toBeTruthy();
     expect(getByText("100")).toBeTruthy();
+    const sliderId = getByText("label").getAttribute("id");
+    expect(getByRole("slider").getAttribute("aria-labelledby")).toBe(sliderId);
+    expect(getByRole("slider").getAttribute("aria-orientation")).toBe("horizontal");
   });
   test("Slider renders with correct initial value when it is uncontrolled", () => {
     const { getByRole } = render(
@@ -18,6 +21,19 @@ describe("Slider component tests", () => {
     expect(slider.getAttribute("aria-valuenow")).toBe("30");
     expect(input.value).toBe("30");
   });
+  test("Slider correct limit values", () => {
+    const { getByRole, getByText } = render(
+      <DxcSlider defaultValue={125} minValue={30} maxValue={125} showLimitsValues />
+    );
+    const slider = getByRole("slider");
+    expect(slider.getAttribute("aria-valuemin")).toBe("30");
+    expect(slider.getAttribute("aria-valuemax")).toBe("125");
+    userEvent.tab();
+    fireEvent.keyDown(slider, { key: "ArrowRight", code: "ArrowRight", keyCode: 39, charCode: 39 });
+    expect(slider.getAttribute("aria-valuenow")).toBe("125");
+    expect(getByText("30")).toBeTruthy();
+    expect(getByText("125")).toBeTruthy();
+  });
   test("Calls correct function onChange in controlled slider", () => {
     const onChange = jest.fn();
     const { getByRole } = render(
@@ -44,7 +60,7 @@ describe("Slider component tests", () => {
     expect(getByRole("slider").getAttribute("aria-valuenow")).toBe("25");
     expect(getByRole("textbox").value).toBe("25");
   });
-  test("Disabled slider have disabled input", () => {
+  test("Disabled slider have disabled input and slider", () => {
     const onChange = jest.fn();
     const { getByRole } = render(
       <DxcSlider minValue={0} maxValue={100} onChange={onChange} showLimitsValues disabled showInput value={13} />
@@ -54,17 +70,32 @@ describe("Slider component tests", () => {
     });
     expect(getByRole("textbox").hasAttribute("disabled")).toBeTruthy();
     expect(getByRole("textbox").value).toBe("13");
+    expect(getByRole("slider").hasAttribute("disabled")).toBeTruthy();
   });
-  test("Calls correct function onDragEnd", () => {
+  test("Calls correct function onDragEnd when it is uncontrolled", () => {
     const onDragEnd = jest.fn();
-    const { getByRole } = render(
-      <DxcSlider minValue={0} maxValue={100} showLimitsValues showInput onDragEnd={onDragEnd} value={25} />
-    );
+    const { getByRole } = render(<DxcSlider minValue={0} maxValue={150} onDragEnd={onDragEnd} showInput />);
+    const slider = getByRole("slider");
+    act(() => {
+      fireEvent.mouseDown(slider);
+    });
+    act(() => {
+      fireEvent.mouseUp(slider, { target: { value: 120 } });
+    });
+    expect(onDragEnd).toHaveBeenCalledWith("120");
+  });
+  test("Calls correct function onDragEnd when it is controlled", () => {
+    const onDragEnd = jest.fn();
+    const { getByRole } = render(<DxcSlider minValue={0} maxValue={150} value={50} onDragEnd={onDragEnd} showInput />);
+    const slider = getByRole("slider");
+    act(() => {
+      fireEvent.mouseDown(slider);
+    });
     act(() => {
-      fireEvent.mouseDown(getByRole("slider"));
-      fireEvent.mouseUp(getByRole("slider"));
+      fireEvent.mouseUp(slider, { target: { value: 120 } });
     });
-    expect(onDragEnd).toHaveBeenCalled();
+    expect(onDragEnd).toHaveBeenCalledWith("120");
+    expect(slider.getAttribute("aria-valuenow")).toBe("50");
   });
   test("Calls correct function labelFormatCallback", () => {
     const labelFormatCallback = jest.fn((x) => `${x}$`);