import React from "react";
import { render } from "@testing-library/react";
import "@testing-library/jest-dom";
import { SliderProps } from "../SliderProps";
import Slider from "../Slider";

describe("Slider Component", () => {
  const props: SliderProps = {
    ariaDescribedBy: "description-id",
    ariaLabel: "slider-label",
    ariaLabelledBy: "label-id",
    buttons: true,
    className: "custom-slider-class",
    defaultValue: 5,
    disabled: false,
    id: "slider-id",
    max: 100,
    min: 0,
    name: "slider-name",
    required: false,
    step: 1,
    style: { color: 'blue' },
    tabIndex: 0,
    valid: true,
    validationMessage: "",
    validityStyles: true,
    value: 50,
    vertical: false
  };

  it("renders all props correctly", () => {
    render(<Slider {...props} />);
  });

  it("matches the snapshot", () => {
    const { asFragment } = render(<Slider {...props} />);
    expect(asFragment()).toMatchSnapshot();
  });
});