Update slider tests

Author: b-yogesh

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

@@ -28,27 +28,6 @@ describe("Slider", () => {
     expect(slider.getAttribute("value")).toEqual("50");
   });
 
-  it("should render the Slider component", () => {
-    render(
-      <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();
 
@@ -63,19 +42,18 @@ describe("Slider", () => {
       return (
         <Slider
           type={"Slider"}
-          data-testid="sliderId"
           id="sliderId"
           aria-label={"slider"}
           min={0}
           max={1000}
-          onChange={handleChange} // Use the local handleChange
-          value={sliderValue} // Connect the value
+          onChange={handleChange}
+          value={sliderValue}
         />
       );
     };
 
     render(<TestSlider />);
-    const slider = screen.getByTestId("sliderId");
+    const slider = screen.getByTestId("slider-test-id");
     expect(slider).toBeInTheDocument();
     expect(screen.getByRole("slider")).toHaveValue("60");
 

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

@@ -22,7 +22,6 @@ interface SliderState extends ComponentState {
   track?: "inverted" | "normal" | false;
   value?: number | number[];
   valueLabelDisplay?: "auto" | "on" | "off";
-  ["data-testid"]?: string;
 }
 
 interface SliderProps extends ComponentProps, SliderState {}
@@ -46,13 +45,7 @@ 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[],
@@ -69,7 +62,6 @@ export const Slider = ({
   };
   return (
     <MuiSlider
-      {...sliderProps}
       id={id}
       defaultValue={defaultValue}
       aria-label={ariaLabel}
@@ -87,6 +79,7 @@ export const Slider = ({
       value={value ?? 0}
       valueLabelDisplay={valueLabelDisplay}
       onChange={handleSlide}
+      data-testid="slider-test-id"
     />
   );
 };