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

describe("Stepper Component", () => {
  const steps = [
    { label: "Step 1" },
    { label: "Step 2" },
    { label: "Step 3", optional: true },
  ];

  const props: StepperProps = {
    animationDuration: 400,
    children: <div>Step Content</div>,
    className: "stepper-class",
    dir: "ltr",
    disabled: false,
    errorIcon: "error-icon",
    errorSVGIcon: {
      name: "linkedin",
      content:
        '<path d="M112 32c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48zM64 160v288h96V160H64zm128 0v288h96V288c0-32 32-32 32-32s32 0 32 32v160h96V290.9c0-66.5-13.6-130.9-96-130.9-36.2 0-62.9 32-64 44.9V160h-96z" />',
      viewBox: "0 0 512 512",
    },
    item: (item) => <span>{item.label}</span>,
    items: steps,
    linear: false,
    mode: "steps",
    orientation: "horizontal",
    style: { color: "blue" },
    successIcon: "success-icon",
    successSVGIcon: {
      name: "linkedin",
      content:
        '<path d="M112 32c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48zM64 160v288h96V160H64zm128 0v288h96V288c0-32 32-32 32-32s32 0 32 32v160h96V290.9c0-66.5-13.6-130.9-96-130.9-36.2 0-62.9 32-64 44.9V160h-96z" />',
      viewBox: "0 0 512 512",
    },
    value: 1,
    onChange: jest.fn(),
    onFocus: jest.fn(),
  };

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

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