import React from "react";
import { render } from "@testing-library/react";
import "@testing-library/jest-dom";
import { RangeSliderProps } from "../RangeSliderProps";
import RangeSlider from "../RangeSlider";
 
describe("RangeSlider Component", () => {
  const props: RangeSliderProps = {
    ariaDescribedBy: "description",
    ariaLabelledBy: "label",
    className: "custom-class",
    defaultValue: { start: 10, end: 50 },
    dir: "ltr",
    disabled: false,
    endTabIndex: 0,
    id: "range-slider",
    max: 100,
    min: 0,
    name: "rangeSlider",
    required: false,
    startTabIndex: 0,
    step: 5,
    style: { color: "blue" },
    valid: true,
    validationMessage: "",
    validityStyles: true,
    value: { start: 20, end: 60 },
    vertical: false,
  };
 
  it("renders all props correctly", () => {
    render(<RangeSlider {...props} />);
  });
 
  it("matches the snapshot", () => {
    const { asFragment } = render(<RangeSlider {...props} />);
    expect(asFragment()).toMatchSnapshot();
  });
});