Update tests

Author: b-yogesh

chartlets.js/packages/lib/src/plugins/mui/Slider.test.tsx

@@ -1,12 +1,13 @@
-import { describe, expect, it } from "vitest";
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { Slider } from "./Slider";
-import { createChangeHandler } from "@/plugins/mui/common.test";
 import "@testing-library/jest-dom";
-import { createTheme, ThemeProvider } from "@mui/material";
+import { createChangeHandler } from "@/plugins/mui/common.test";
+import { useState } from "react";
+import type { ComponentChangeEvent } from "@/types/state/event";
 
 describe("Slider", () => {
-  it("should render the Slider component", async () => {
+  it("should render the Slider component", () => {
     render(
       <Slider
         id="slider"
@@ -15,57 +16,100 @@ describe("Slider", () => {
         max={100}
         value={50}
         onChange={() => {}}
-        style={{ width: "300px" }}
       />,
     );
 
-    const slider = await waitFor(() => screen.getByRole("slider"));
+    const slider = screen.getByRole("slider");
     expect(slider).toBeDefined();
 
     expect(slider.getAttribute("aria-orientation")).toEqual("horizontal");
     expect(slider.getAttribute("min")).toEqual("0");
     expect(slider.getAttribute("max")).toEqual("100");
+    expect(slider.getAttribute("value")).toEqual("50");
   });
 
-  it("should fire 'value' property", async () => {
-    const { recordedEvents, onChange } = createChangeHandler();
-    const theme = createTheme();
+  it("should render the Slider component", () => {
     render(
-      <ThemeProvider theme={theme}>
+      <Slider
+        id="slider"
+        type={"Slider"}
+        min={0}
+        max={100}
+        value={50}
+        onChange={() => {}}
+      />,
+    );
+
+    const slider = screen.getByRole("slider");
+    expect(slider).toBeDefined();
+
+    expect(slider.getAttribute("aria-orientation")).toEqual("horizontal");
+    expect(slider.getAttribute("min")).toEqual("0");
+    expect(slider.getAttribute("max")).toEqual("100");
+    expect(slider.getAttribute("value")).toEqual("50");
+  });
+
+  it("should fire 'value' property", () => {
+    const { recordedEvents, onChange } = createChangeHandler();
+
+    const TestSlider = () => {
+      const [sliderValue, setSliderValue] = useState(60);
+
+      const handleChange = (event: ComponentChangeEvent) => {
+        setSliderValue(event.value as number);
+        onChange(event);
+      };
+
+      return (
         <Slider
-          id="sliderId"
           type={"Slider"}
-          ariaLabel={"slider"}
-          onChange={onChange}
-          value={60}
+          data-testid="sliderId"
+          id="sliderId"
+          aria-label={"slider"}
+          min={0}
+          max={1000}
+          onChange={handleChange} // Use the local handleChange
+          value={sliderValue} // Connect the value
         />
-      </ThemeProvider>,
-    );
-    await waitFor(() => {
-      const slider = screen.getByRole("slider");
-      expect(slider).toBeInTheDocument();
-    });
+      );
+    };
 
-    const slider = screen.getByRole("slider");
+    render(<TestSlider />);
+    const slider = screen.getByTestId("sliderId");
     expect(slider).toBeInTheDocument();
-
-    const thumb = document.querySelector(".MuiSlider-thumb");
-    expect(thumb).toBeInTheDocument();
+    expect(screen.getByRole("slider")).toHaveValue("60");
 
     const input = document.querySelector("input")?.value;
     expect(input).toEqual("60");
 
-    if (thumb) {
-      fireEvent.mouseDown(slider, { clientX: 0.1 });
-      fireEvent.mouseMove(slider, { clientX: 0.1 });
-      fireEvent.mouseUp(slider);
-      expect(recordedEvents.length).toEqual(1);
-      expect(recordedEvents[0]).toEqual({
-        componentType: "Slider",
-        id: "sliderId",
-        property: "value",
-        value: 2, //expect.any(Number),
-      });
-    }
+    const sliderBounds = {
+      left: 100,
+      width: 200,
+      top: 0,
+      bottom: 0,
+      height: 20,
+    };
+    vi.spyOn(slider, "getBoundingClientRect").mockReturnValue(
+      sliderBounds as DOMRect,
+    );
+
+    // The value selected should be 100
+    const clientX = sliderBounds.left + sliderBounds.width * 0.1;
+
+    fireEvent.mouseDown(slider, { clientX: clientX });
+    fireEvent.mouseMove(slider, { clientX: clientX });
+    fireEvent.mouseUp(slider);
+    expect(recordedEvents.length).toEqual(1);
+
+    expect(recordedEvents[0]).toEqual({
+      componentType: "Slider",
+      id: "sliderId",
+      property: "value",
+      value: 100,
+    });
+
+    expect(screen.getByRole("slider")).toHaveValue("100");
+    const updated_input = document.querySelector("input");
+    expect(updated_input?.value).toEqual("100");
   });
 });

chartlets.js/packages/lib/src/plugins/mui/Slider.tsx

@@ -22,6 +22,7 @@ interface SliderState extends ComponentState {
   track?: "inverted" | "normal" | false;
   value?: number | number[];
   valueLabelDisplay?: "auto" | "on" | "off";
+  ["data-testid"]?: string;
 }
 
 interface SliderProps extends ComponentProps, SliderState {}
@@ -45,13 +46,18 @@ export const Slider = ({
   value,
   valueLabelDisplay,
   onChange,
+  ...props
 }: SliderProps) => {
+  // We need to drop children prop because we want to access the data-testid for
+  // tests and slider does not accept children components
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { children: _, ...sliderProps } = props;
+
   const handleSlide = (
     _event: Event,
     value: number | number[],
     _activeThumb: number,
   ) => {
-    console.log(_event, value, _activeThumb);
     if (id) {
       onChange({
         componentType: type,
@@ -63,6 +69,7 @@ export const Slider = ({
   };
   return (
     <MuiSlider
+      {...sliderProps}
       id={id}
       defaultValue={defaultValue}
       aria-label={ariaLabel}