import React from "react";
import { render } from "@testing-library/react";
import "@testing-library/jest-dom";
import { EditorProps } from "../EditorProps";
import Editor from "../Editor";
import { EditorTools } from "@progress/kendo-react-editor";
const { Bold, Italic } = EditorTools;

describe("Editor Component", () => {
  const props: EditorProps = {
    dataTestId: "test-id",
    ariaDescribedBy: "descriptionId",
    ariaLabel: "Editor Label",
    ariaLabelledBy: "labelId",
    className: "custom-class",
    contentStyle: { color: "red" },
    defaultContent: "<p>Initial content</p>",
    defaultEditMode: "div",
    dir: "ltr",
    keyboardNavigation: true,
    preserveWhitespace: "full",
    resizable: true,
    style: { border: "1px solid black" },
    tools: [[Bold, Italic]],
    value: "<p>Editor content</p>",
  };

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

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