[WIP] Add tests for slider.tsx

Author: b-yogesh

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

@@ -0,0 +1,71 @@
+import { describe, expect, it } from "vitest";
+import { fireEvent, render, screen, waitFor } 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";
+
+describe("Slider", () => {
+  it("should render the Slider component", async () => {
+    render(
+      <Slider
+        id="slider"
+        type={"Slider"}
+        min={0}
+        max={100}
+        value={50}
+        onChange={() => {}}
+        style={{ width: "300px" }}
+      />,
+    );
+
+    const slider = await waitFor(() => 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");
+  });
+
+  it("should fire 'value' property", async () => {
+    const { recordedEvents, onChange } = createChangeHandler();
+    const theme = createTheme();
+    render(
+      <ThemeProvider theme={theme}>
+        <Slider
+          id="sliderId"
+          type={"Slider"}
+          ariaLabel={"slider"}
+          onChange={onChange}
+          value={60}
+        />
+      </ThemeProvider>,
+    );
+    await waitFor(() => {
+      const slider = screen.getByRole("slider");
+      expect(slider).toBeInTheDocument();
+    });
+
+    const slider = screen.getByRole("slider");
+    expect(slider).toBeInTheDocument();
+
+    const thumb = document.querySelector(".MuiSlider-thumb");
+    expect(thumb).toBeInTheDocument();
+
+    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),
+      });
+    }
+  });
+});

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

@@ -1,25 +1,85 @@
 import MuiSlider from "@mui/material/Slider";
+import type { OverridableStringUnion } from "@mui/types";
 
 import type { ComponentProps, ComponentState } from "@/index";
+import type { ReactNode } from "react";
 
-interface SliderState extends ComponentState {}
-
-interface SliderProps extends ComponentProps, SliderState {
+interface SliderState extends ComponentState {
   defaultValue?: number;
+  ariaLabel?: string;
+  color?: OverridableStringUnion<
+    "primary" | "secondary" | "success" | "error" | "info" | "warning",
+    string
+  >;
+  disableSwap?: boolean;
+  getAriaValueText?: (value: number, index: number) => string;
+  min?: number;
+  max?: number;
+  marks?: boolean | { value: number; label?: ReactNode }[];
+  orientation?: "horizontal" | "vertical";
+  step?: number;
+  size?: OverridableStringUnion<"small" | "medium", string>;
+  track?: "inverted" | "normal" | false;
+  value?: number | number[];
+  valueLabelDisplay?: "auto" | "on" | "off";
 }
 
+interface SliderProps extends ComponentProps, SliderState {}
+
 export const Slider = ({
+  type,
   id,
   style,
   defaultValue,
-  // onChange,
+  ariaLabel,
+  color,
+  disableSwap,
+  getAriaValueText,
+  min,
+  max,
+  marks,
+  orientation,
+  step,
+  size,
+  track,
+  value,
+  valueLabelDisplay,
+  onChange,
 }: SliderProps) => {
+  const handleSlide = (
+    _event: Event,
+    value: number | number[],
+    _activeThumb: number,
+  ) => {
+    console.log(_event, value, _activeThumb);
+    if (id) {
+      onChange({
+        componentType: type,
+        id: id,
+        property: "value",
+        value: value,
+      });
+    }
+  };
   return (
     <MuiSlider
       id={id}
-      style={style}
       defaultValue={defaultValue}
-      // onChange={onChange}
+      aria-label={ariaLabel}
+      color={color}
+      style={style}
+      disableSwap={disableSwap}
+      getAriaValueText={getAriaValueText}
+      min={min}
+      max={max}
+      marks={marks}
+      orientation={orientation}
+      step={step}
+      size={size}
+      track={track}
+      value={value ?? 0}
+      valueLabelDisplay={valueLabelDisplay}
+      onChange={handleSlide}
     />
   );
 };