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

describe("ExpansionPanel Component", () => {
  const props: ExpansionPanelProps = {
    ariaControls: "controlled-element-id",
    children: <div>Content</div>,
    className: "custom-class",
    collapseIcon: "collapse-icon-class",
    collapseSVGIcon: {
      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",
    },
    dir: "ltr",
    disabled: false,
    expanded: false,
    expandIcon: "expand-icon-class",
    expandSVGIcon: {
      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",
    },
    id: "expansion-panel-id",
    style: { color: "red" },
    subtitle: <span>Subtitle</span>,
    tabIndex: 0,
    title: <span>Title</span>,
  };

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

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