Files
calendar/packages/ui/components/editor/Editor.test.tsx
T
7e2a0d1a1b fix: calcom UI circle dep (#19839)
* editor circle dep fix

* circle dep fix in select

* fix barrel export types

---------

Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
2025-03-07 09:26:26 -07:00

73 lines
2.6 KiB
TypeScript

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, it, expect, vi } from "vitest";
import { Editor } from "./Editor";
import type { TextEditorProps } from "./types";
describe("Editor", () => {
const defaultProps: TextEditorProps = {
getText: vi.fn(),
setText: vi.fn(),
variables: ["name", "email"],
height: "200px",
placeholder: "Start typing...",
};
it("renders editor with default props", () => {
render(<Editor {...defaultProps} />);
expect(screen.getByRole("textbox")).toBeInTheDocument();
expect(screen.getByText("Start typing...")).toBeInTheDocument();
});
it("renders toolbar", () => {
render(<Editor {...defaultProps} />);
expect(screen.getByText("Normal")).toBeInTheDocument();
expect(screen.getByText("add_variable")).toBeInTheDocument();
});
it("excludes toolbar items", () => {
render(<Editor {...defaultProps} excludedToolbarItems={["bold", "italic"]} />);
expect(screen.queryByTitle("Bold")).not.toBeInTheDocument();
expect(screen.queryByTitle("Italic")).not.toBeInTheDocument();
});
it("renders variables plugin when variables are provided", () => {
render(<Editor {...defaultProps} />);
expect(screen.getByText("add_variable")).toBeInTheDocument();
});
it("does not render variables plugin when variables are not provided", () => {
render(<Editor {...defaultProps} variables={undefined} />);
expect(screen.queryByText("add_variable")).not.toBeInTheDocument();
});
it("disables lists when disableLists is true", () => {
render(<Editor {...defaultProps} disableLists={true} />);
expect(screen.queryByTitle("Bullet List")).not.toBeInTheDocument();
expect(screen.queryByTitle("Numbered List")).not.toBeInTheDocument();
});
it("calls getText when text is entered", async () => {
const user = userEvent.setup();
render(<Editor {...defaultProps} />);
const editor = screen.getByRole("textbox");
await user.type(editor, "Hello, world!");
expect(defaultProps.getText).toHaveBeenCalled();
});
it("applies custom height", () => {
render(<Editor {...defaultProps} height="300px" />);
const editorInner = screen.getByRole("textbox").parentElement;
expect(editorInner).toHaveStyle({ height: "300px" });
});
it("handles first render and update template", () => {
const setFirstRender = vi.fn();
render(
<Editor {...defaultProps} updateTemplate={true} firstRender={true} setFirstRender={setFirstRender} />
);
expect(setFirstRender).toHaveBeenCalled();
});
});