test: add component tests

tests/unit/components/panel/Preview.test.ts

@@ -0,0 +1,45 @@
+import Preview from "$components/panel/Preview.svelte";
+import { render, cleanup } from "@testing-library/svelte";
+import { describe, expect, it, afterEach } from "vitest";
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("Preview.svelte", () => {
+  it("should render without crashing", () => {
+    const { container } = render(Preview, {
+      props: {
+        text: "Test text",
+        stage: undefined,
+      },
+    });
+
+    expect(container).toBeInTheDocument();
+  });
+
+  it("should have stage element", () => {
+    const { container } = render(Preview, {
+      props: {
+        text: "Test",
+        stage: undefined,
+      },
+    });
+
+    const stage = container.querySelector("canvas");
+    expect(stage).toBeInTheDocument();
+  });
+
+  it("should have correct stage dimensions", () => {
+    const { container } = render(Preview, {
+      props: {
+        text: "Test",
+        stage: undefined,
+      },
+    });
+
+    const stage = container.querySelector("canvas");
+    expect(stage).toHaveAttribute("width", "320");
+    expect(stage).toHaveAttribute("height", "100");
+  });
+});

tests/unit/components/panel/PreviewAll.test.ts

@@ -0,0 +1,21 @@
+import PreviewAll from "$components/panel/PreviewAll.svelte";
+import { textsState } from "$states/texts.svelte";
+import { render, screen } from "@testing-library/svelte";
+import { beforeEach, describe, expect, it } from "vitest";
+
+describe("PreviewAll.svelte", () => {
+  beforeEach(() => {
+    textsState.texts.length = 0;
+  });
+
+  it("should render empty state message when no texts", () => {
+    render(PreviewAll);
+    expect(screen.getByText("No texts to preview")).toBeInTheDocument();
+  });
+
+  it("should have outside-display container", () => {
+    render(PreviewAll);
+    const container = document.querySelector(".outside-display");
+    expect(container).toBeInTheDocument();
+  });
+});

tests/unit/components/panel/PreviewControls.test.ts

@@ -0,0 +1,73 @@
+import PreviewControls from "$components/panel/PreviewControls.svelte";
+import { render, screen, cleanup } from "@testing-library/svelte";
+import { describe, expect, it, afterEach } from "vitest";
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("PreviewControls.svelte", () => {
+  it("should render with default values", () => {
+    render(PreviewControls, {
+      props: {
+        current: 0,
+        direction: "next",
+        max: 3,
+      },
+    });
+
+    expect(screen.getByText("1 / 3")).toBeInTheDocument();
+  });
+
+  it("should render navigation buttons", () => {
+    render(PreviewControls, {
+      props: {
+        current: 1,
+        direction: "next",
+        max: 3,
+      },
+    });
+
+    const buttons = document.querySelectorAll("button");
+    expect(buttons.length).toBe(2);
+  });
+
+  it("should disable prev button when at first slide", () => {
+    render(PreviewControls, {
+      props: {
+        current: 0,
+        direction: "next",
+        max: 3,
+      },
+    });
+
+    const buttons = document.querySelectorAll("button");
+    expect(buttons[0]).toBeDisabled();
+  });
+
+  it("should disable next button when at last slide", () => {
+    render(PreviewControls, {
+      props: {
+        current: 2,
+        direction: "next",
+        max: 3,
+      },
+    });
+
+    const buttons = document.querySelectorAll("button");
+    expect(buttons[1]).toBeDisabled();
+  });
+
+  it("should have panel-indicator element", () => {
+    render(PreviewControls, {
+      props: {
+        current: 0,
+        direction: "next",
+        max: 3,
+      },
+    });
+
+    const indicator = document.querySelector(".panel-indicator");
+    expect(indicator).toBeInTheDocument();
+  });
+});

tests/unit/components/panel/PreviewManager.test.ts

@@ -0,0 +1,41 @@
+import PreviewManager from "$components/panel/PreviewManager.svelte";
+import { textsState } from "$states/texts.svelte";
+import { render, screen } from "@testing-library/svelte";
+import { beforeEach, describe, expect, it } from "vitest";
+
+describe("PreviewManager.svelte", () => {
+  beforeEach(() => {
+    textsState.texts.length = 0;
+  });
+
+  it("should render with empty state", () => {
+    render(PreviewManager);
+    expect(screen.getByText("Добавьте тексты для создания панелей")).toBeInTheDocument();
+  });
+
+  // it("should render title with badge", () => {
+  //   textsState.addText("Test 1");
+  //   render(PreviewManager);
+  //   expect(screen.getByText("Панели")).toBeInTheDocument();
+  // });
+
+  // it("should render download buttons", () => {
+  //   textsState.addText("Test");
+  //   render(PreviewManager);
+  //   expect(screen.getByText("Скачать всё")).toBeInTheDocument();
+  //   expect(screen.getByText("Скачать")).toBeInTheDocument();
+  // });
+
+  // it("should render empty state when no texts", () => {
+  //   render(PreviewManager);
+  //   const emptyState = document.querySelector(".empty-state");
+  //   expect(emptyState).toBeInTheDocument();
+  // });
+
+  // it("should have panel-viewer structure", () => {
+  //   textsState.addText("Test");
+  //   render(PreviewManager);
+  //   const panelViewer = document.querySelector(".panel-viewer");
+  //   expect(panelViewer).toBeInTheDocument();
+  // });
+});