test: update tests

tests/unit/components/layout/AppHeader.test.ts

@@ -1,6 +1,7 @@
 import AppHeader from "$components/layout/AppHeader.svelte";
 import { themeState } from "$states/theme.svelte";
-import { fireEvent, render, screen } from "@testing-library/svelte";
+import { render, screen } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it } from "vitest";
 
 describe("AppHeader.svelte", () => {
@@ -9,15 +10,16 @@ describe("AppHeader.svelte", () => {
   });
 
   it("should toggle theme on button click", async () => {
+    const user = userEvent.setup();
     render(AppHeader);
 
     const toggleButton = screen.getByRole("button", { name: /toggle theme/i });
 
     themeState.current = "dark";
-    await fireEvent.click(toggleButton);
+    await user.click(toggleButton);
     expect(themeState.current).toBe("light");
 
-    await fireEvent.click(toggleButton);
+    await user.click(toggleButton);
     expect(themeState.current).toBe("dark");
   });
 });

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

@@ -1,22 +1,46 @@
-import PreviewControls from "$components/panel/PreviewControls.svelte";
-import { cleanup, render, screen } from "@testing-library/svelte";
-import { afterEach, describe, expect, it } from "vitest";
+import { SlideDirection } from "$lib/constants";
+import { render, screen } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import PreviewControlsTest from "./PreviewControlsTest.svelte";
 
-afterEach(() => {
-  cleanup();
-});
+describe("PreviewControls logic", () => {
+  it("should increment current and update direction on next click", async () => {
+    const user = userEvent.setup();
+    render(PreviewControlsTest, { props: { current: 0, max: 3 } });
 
-describe("PreviewControls.svelte", () => {
-  it("should render navigation buttons", () => {
-    render(PreviewControls, {
-      props: {
-        current: 1,
-        direction: "next",
-        max: 3,
-      },
-    });
+    const nextBtn = screen.getByRole("button", { name: /next slide/i });
 
-    const buttons = screen.getAllByRole("button");
-    expect(buttons.length).toBeGreaterThan(0);
+    await user.click(nextBtn);
+
+    expect(screen.getByTestId("current").textContent).toBe("1");
+    expect(screen.getByTestId("direction").textContent).toBe(SlideDirection.NEXT);
+  });
+
+  it("should decrement current on prev click", async () => {
+    const user = userEvent.setup();
+    render(PreviewControlsTest, { props: { current: 2, max: 3 } });
+
+    const prevBtn = screen.getByRole("button", { name: /previous slide/i });
+
+    await user.click(prevBtn);
+
+    expect(screen.getByTestId("current").textContent).toBe("1");
+  });
+
+  it("should handle boundaries and disable buttons", async () => {
+    const user = userEvent.setup();
+    render(PreviewControlsTest, { props: { current: 0, max: 2 } });
+
+    const prevBtn = screen.getByRole("button", { name: /previous slide/i });
+    const nextBtn = screen.getByRole("button", { name: /next slide/i });
+
+    expect(prevBtn).toBeDisabled();
+
+    await user.click(nextBtn);
+
+    expect(screen.getByTestId("current").textContent).toBe("1");
+    expect(nextBtn).toBeDisabled();
+    expect(prevBtn).not.toBeDisabled();
   });
 });

tests/unit/components/panel/PreviewControlsTest.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import PreviewControls from "$components/panel/PreviewControls.svelte";
+
+  import { SlideDirection } from "$lib/constants";
+
+  let { current = 0, max = 5 } = $props();
+  let direction = $state(SlideDirection.NEXT);
+</script>
+
+<PreviewControls bind:current bind:direction {max} />
+
+<div data-testid="current">{current}</div>
+<div data-testid="direction">{direction}</div>

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

@@ -1,14 +1,102 @@
 import PreviewManager from "$components/panel/PreviewManager.svelte";
+import { downloadService } from "$services/downloadService";
+import { konvaStageState } from "$states/konvaStage.svelte";
+import { STATE_DATA } from "$states/persisted.svelte";
 import { textsState } from "$states/texts.svelte";
-import { render } from "@testing-library/svelte";
-import { beforeEach, describe, it } from "vitest";
+import { render, screen, waitFor } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 
-describe("PreviewManager.svelte", () => {
+vi.mock("$services/downloadService", () => ({
+  downloadService: {
+    downloadAll: vi.fn(),
+    downloadPanel: vi.fn(),
+  },
+}));
+
+vi.mock("./Preview.svelte", () => ({
+  default: { render: () => ({}) },
+}));
+describe("PreviewManager Integration", () => {
   beforeEach(() => {
-    textsState.texts.length = 0;
+    vi.clearAllMocks();
+    textsState[STATE_DATA] = [];
   });
 
-  it("should render without crashing", () => {
+  it("should show empty state by aria-label when no texts", () => {
     render(PreviewManager);
+    expect(screen.getByLabelText(/Empty texts info/i)).toBeInTheDocument();
+  });
+
+  it("should toggle navigation buttons availability based on texts length", async () => {
+    textsState[STATE_DATA] = ["1", "2"];
+    render(PreviewManager);
+
+    const nextBtn = screen.getByRole("button", { name: /next slide/i });
+    const prevBtn = screen.getByRole("button", { name: /previous slide/i });
+
+    expect(nextBtn).not.toBeDisabled();
+    expect(prevBtn).toBeDisabled();
+  });
+
+  it("should send correct data to downloadAll service", async () => {
+    const user = userEvent.setup();
+    textsState[STATE_DATA] = ["Apple", "Banana"];
+    render(PreviewManager);
+
+    await user.click(screen.getByRole("button", { name: /download all/i }));
+
+    expect(downloadService.downloadAll).toHaveBeenCalledWith(
+      expect.arrayContaining([
+        expect.objectContaining({ filename: "Apple" }),
+        expect.objectContaining({ filename: "Banana" }),
+      ]),
+    );
+  });
+
+  it("should call downloadPanel with current active text", async () => {
+    const user = userEvent.setup();
+    textsState[STATE_DATA] = ["First", "Second"];
+    konvaStageState.stage = { node: { id: "stage-ref" } } as any;
+
+    render(PreviewManager);
+
+    // Переходим на второй слайд
+    await user.click(screen.getByRole("button", { name: /next slide/i }));
+    await user.click(screen.getByRole("button", { name: /download current/i }));
+
+    expect(downloadService.downloadPanel).toHaveBeenCalledWith(expect.anything(), "Second");
+  });
+
+  it("should return to empty state when texts are removed", async () => {
+    textsState[STATE_DATA] = ["Temp"];
+    render(PreviewManager);
+
+    expect(screen.queryByLabelText(/Empty texts info/i)).not.toBeInTheDocument();
+
+    textsState[STATE_DATA] = [];
+
+    await waitFor(() => {
+      expect(screen.getByLabelText(/Empty texts info/i)).toBeInTheDocument();
+    });
+  });
+
+  it("should automatically correct current index on items deletion", async () => {
+    const user = userEvent.setup();
+    textsState[STATE_DATA] = ["1", "2", "3"];
+    render(PreviewManager);
+
+    // Уходим на последний слайд
+    await user.click(screen.getByRole("button", { name: /next slide/i }));
+    await user.click(screen.getByRole("button", { name: /next slide/i }));
+
+    // Удаляем элементы. Индекс должен упасть с 2 до 0
+    textsState[STATE_DATA] = ["Only one left"];
+
+    await waitFor(() => {
+      // Проверяем, что кнопка "Next" заблокировалась (значит мы на последнем/единственном)
+      expect(screen.getByRole("button", { name: /next slide/i })).toBeDisabled();
+      expect(screen.getByRole("button", { name: /previous slide/i })).toBeDisabled();
+    });
   });
 });

tests/unit/components/text/TextInput.test.ts

@@ -1,5 +1,6 @@
 import TextInput from "$components/text/TextInput.svelte";
-import { fireEvent, render, screen } from "@testing-library/svelte";
+import { render, screen } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 
 describe("TextInput.svelte", () => {
@@ -18,6 +19,7 @@ describe("TextInput.svelte", () => {
   });
 
   it("should update value on input", async () => {
+    const user = userEvent.setup();
     render(TextInput, {
       props: {
         text: "Initial",
@@ -27,41 +29,33 @@ describe("TextInput.svelte", () => {
     });
 
     const input = screen.getByRole("textbox", { name: /test input/i });
-    await fireEvent.input(input, { target: { value: "Updated text" } });
+    await user.clear(input);
+    await user.type(input, "Updated text");
 
     expect(input).toHaveValue("Updated text");
   });
 
-  it("should call onenter when Enter key is pressed", async () => {
-    const onenter = vi.fn();
+  it("should call onenter only on Enter key and not on others", async () => {
+    const user = userEvent.setup();
+    const onenterSpy = vi.fn();
+
     render(TextInput, {
       props: {
-        text: "Test",
-        onenter,
+        text: "test",
+        onenter: onenterSpy,
         ariaLabel: "Test input",
       },
     });
 
     const input = screen.getByRole("textbox", { name: /test input/i });
-    await fireEvent.keyDown(input, { key: "Enter" });
 
-    expect(onenter).toHaveBeenCalledTimes(1);
-  });
+    await user.type(input, "abc");
+    expect(onenterSpy).not.toHaveBeenCalled();
 
-  it("should not call onenter when other keys are pressed", async () => {
-    const onenter = vi.fn();
-    render(TextInput, {
-      props: {
-        text: "Test",
-        onenter,
-        ariaLabel: "Test input",
-      },
-    });
+    await user.keyboard("{Escape}");
+    expect(onenterSpy).not.toHaveBeenCalled();
 
-    const input = screen.getByRole("textbox", { name: /test input/i });
-    await fireEvent.keyDown(input, { key: "Escape" });
-    await fireEvent.keyDown(input, { key: "Tab" });
-
-    expect(onenter).not.toHaveBeenCalled();
+    await user.type(input, "{Enter}");
+    expect(onenterSpy).toHaveBeenCalledTimes(1);
   });
 });

tests/unit/components/text/TextManager.test.ts

@@ -1,193 +1,60 @@
 import TextManager from "$components/text/TextManager.svelte";
 import { textsState } from "$states/texts.svelte";
-import { fireEvent, render, screen, waitFor, within } from "@testing-library/svelte";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it } from "vitest";
 
-describe("TextManager.svelte", () => {
+describe("TextManager", () => {
   beforeEach(() => {
     textsState.clear();
   });
 
-  describe("Rendering", () => {
-    it("should render card with title, input and add button", () => {
-      render(TextManager);
+  it("should add text to state and clear input on button click", async () => {
+    const user = userEvent.setup();
+    render(TextManager);
 
-      const cardTitle = screen.getByText("Тексты панелей");
-      expect(cardTitle).toBeInTheDocument();
-
-      const input = screen.getByRole("textbox");
-      expect(input).toBeInTheDocument();
-
-      const addButton = screen.getByRole("button", { name: /add/i });
-      expect(addButton).toBeInTheDocument();
-    });
-
-    it("should show empty list when textsState.texts is empty", () => {
-      render(TextManager);
-
-      const textItems = screen.queryAllByRole("listitem");
-      expect(textItems).toHaveLength(0);
-    });
+    const input = screen.getByRole("textbox", { name: /input new text/i });
+    const addButton = screen.getByRole("button", { name: /add text/i });
 
+    await user.type(input, "New Note");
+    await user.click(addButton);
 
+    expect(textsState.texts).toHaveLength(1);
+    expect(textsState.texts[0].text).toBe("New Note");
+    expect(input).toHaveValue("");
   });
 
-  describe("Adding text", () => {
-    it("should call textsState.addText when add button is clicked", async () => {
-      const addTextSpy = vi.spyOn(textsState, "addText");
+  it("should add text on enter key", async () => {
+    const user = userEvent.setup();
+    render(TextManager);
 
-      render(TextManager);
-
-      const input = screen.getByRole("textbox");
-      const addButton = screen.getByRole("button", { name: /add/i });
-
-      fireEvent.input(input, { target: { value: "New text" } });
-      fireEvent.click(addButton);
-
-      expect(addTextSpy).toHaveBeenCalledWith("New text");
-    });
-
-    it("should clear input after adding text", async () => {
-      render(TextManager);
-
-      const input = screen.getByRole("textbox");
-      const addButton = screen.getByRole("button", { name: /add/i });
-
-      fireEvent.input(input, { target: { value: "New text" } });
-      fireEvent.click(addButton);
-
-      await waitFor(() => {
-        expect(input).toHaveValue("");
-      });
-    });
-
-    it("should add text when Enter key is pressed", () => {
-      const addTextSpy = vi.spyOn(textsState, "addText");
-
-      render(TextManager);
-
-      const input = screen.getByRole("textbox");
-
-      fireEvent.input(input, { target: { value: "New text" } });
-      fireEvent.keyDown(input, { key: "Enter" });
-
-      expect(addTextSpy).toHaveBeenCalledWith("New text");
-    });
+    const input = screen.getByRole("textbox", { name: /input new text/i });
 
+    await user.type(input, "Enter Note{Enter}");
 
+    expect(textsState.texts).toHaveLength(1);
+    expect(textsState.texts[0].text).toBe("Enter Note");
   });
 
-  describe("List and deletion", () => {
-    it("should render TextInlineEdit for each text", () => {
-      textsState.addText("Text 1");
-      textsState.addText("Text 2");
-      textsState.addText("Text 3");
+  it("should display all items from state", async () => {
+    textsState.addText("First");
+    textsState.addText("Second");
 
-      render(TextManager);
+    render(TextManager);
 
-      const textItems = screen.queryAllByRole("listitem");
-      expect(textItems).toHaveLength(3);
-    });
-
-    it("should pass correct props to TextInlineEdit", () => {
-      textsState.addText("Test text");
-      const textId = textsState.texts[0].id;
-
-      render(TextManager);
-
-      const textItems = screen.queryAllByRole("listitem");
-      expect(textItems).toHaveLength(1);
-
-      const input = within(textItems[0]).getByRole("textbox");
-      expect(input).toHaveValue("Test text");
-    });
-
-    it("should call textsState.removeText when delete button is clicked", () => {
-      textsState.addText("Text to delete");
-      const textId = textsState.texts[0].id;
-      const removeTextSpy = vi.spyOn(textsState, "removeText");
-
-      render(TextManager);
-
-      const deleteButton = screen.getByRole("button", { name: /delete/i });
-      fireEvent.click(deleteButton);
-
-      expect(removeTextSpy).toHaveBeenCalledWith(textId);
-    });
-
-    it("should remove element from DOM after deletion", async () => {
-      textsState.addText("Text to delete");
-
-      render(TextManager);
-
-      let textItems = screen.queryAllByRole("listitem");
-      expect(textItems).toHaveLength(1);
-
-      const deleteButton = screen.getByRole("button", { name: /delete/i });
-      fireEvent.click(deleteButton);
-
-      await waitFor(() => {
-        textItems = screen.queryAllByRole("listitem");
-        expect(textItems).toHaveLength(0);
-      });
-    });
+    const items = screen.getAllByRole("listitem");
+    expect(items).toHaveLength(2);
   });
 
-  describe("Reactivity", () => {
-    it("should update list when textsState.texts changes externally", async () => {
-      render(TextManager);
+  it("should remove text from state when delete button is clicked", async () => {
+    const user = userEvent.setup();
+    textsState.addText("To be deleted");
 
-      let textItems = screen.queryAllByRole("listitem");
-      expect(textItems).toHaveLength(0);
+    render(TextManager);
 
-      textsState.addText("New text");
+    const deleteBtn = screen.getByRole("button", { name: /delete/i });
+    await user.click(deleteBtn);
 
-      await waitFor(() => {
-        textItems = screen.queryAllByRole("listitem");
-        expect(textItems).toHaveLength(1);
-      });
-    });
-
-    it("should update when text is removed externally", async () => {
-      vi.useFakeTimers();
-
-      textsState.addText("Text to remove");
-      const textId = textsState.texts[0].id;
-
-      render(TextManager);
-
-      await waitFor(() => {
-        expect(screen.queryAllByRole("listitem")).toHaveLength(1);
-      });
-
-      textsState.removeText(textId);
-      await vi.advanceTimersByTimeAsync(400);
-
-      await waitFor(() => {
-        expect(screen.queryAllByRole("listitem")).toHaveLength(0);
-      });
-      vi.useRealTimers();
-    });
-  });
-
-  describe("Accessibility", () => {
-    // it("should keep focus in input after adding text", async () => {
-    //   render(TextManager);
-    //   const input = screen.getByRole("textbox");
-    //   const addButton = screen.getByRole("button", { name: /add/i });
-    //   fireEvent.input(input, { target: { value: "New text" } });
-    //   fireEvent.click(addButton);
-    //   await waitFor(() => {
-    //     expect(input).toHaveFocus();
-    //   });
-    // });
-
-    it("should have proper aria-labels for input and button", () => {
-      render(TextManager);
-      const input = screen.getByRole("textbox");
-      expect(input).toHaveAttribute("aria-label", "Input new text");
-      const addButton = screen.getByRole("button", { name: /add/i });
-      expect(addButton).toHaveAttribute("aria-label", "Add text");
-    });
+    expect(textsState.texts).toHaveLength(0);
   });
 });

tests/unit/components/ui/Alignment.test.ts

@@ -1,13 +1,44 @@
-import Alignment from "$components/ui/Alignment.svelte";
-import { render } from "@testing-library/svelte";
-import { describe, it } from "vitest";
+import { TextAlign } from "$lib/constants";
+import { render, screen } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import AlignmentTest from "./AlignmentTest.svelte";
 
 describe("Alignment.svelte", () => {
-  it("should render without crashing", () => {
-    render(Alignment, {
-      props: {
-        align: "left",
-      },
-    });
+  it("should update state for every button by clicking in sequence", async () => {
+    const user = userEvent.setup();
+    render(AlignmentTest);
+
+    const buttons = screen.getAllByRole("button");
+    const stateDisplay = screen.getByTestId("align-value");
+
+    const allButtonsToClick = [...buttons, buttons[0]];
+
+    for (const button of allButtonsToClick) {
+      const label = button.getAttribute("aria-label")?.toLowerCase() || "";
+
+      await user.click(button);
+
+      const finalValue = stateDisplay.textContent?.toLowerCase() || "";
+      expect(label).toContain(finalValue);
+    }
+  });
+
+  it("should have initial state from props", () => {
+    render(AlignmentTest, { props: { align: TextAlign.RIGHT } });
+    expect(screen.getByTestId("align-value").textContent).toBe(TextAlign.RIGHT);
+  });
+
+  it("should sync with initial state and change state", async () => {
+    const user = userEvent.setup();
+    const { rerender } = render(AlignmentTest, { props: { align: TextAlign.RIGHT } });
+    const stateDisplay = screen.getByTestId("align-value");
+
+    expect(stateDisplay.textContent).toBe(TextAlign.RIGHT);
+
+    await rerender({ align: TextAlign.CENTER });
+
+    const centerBtn = screen.getByRole("button", { name: new RegExp(TextAlign.CENTER, "i") });
+    expect(centerBtn).toHaveClass("active");
   });
 });

tests/unit/components/ui/AlignmentTest.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import Alignment from "$components/ui/Alignment.svelte";
+
+  import { TextAlign } from "$lib/constants";
+
+  let { align = TextAlign.LEFT } = $props();
+</script>
+
+<Alignment bind:align />
+
+<div data-testid="align-value">{align}</div>

tests/unit/components/ui/Button.test.ts

@@ -1,5 +1,6 @@
 import Button from "$components/ui/Button.svelte";
-import { fireEvent, render, screen } from "@testing-library/svelte";
+import { render, screen } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 import MockIcon from "./MockIcon.svelte";
 
@@ -25,11 +26,15 @@ describe("Button.svelte", () => {
       },
     });
 
-    expect(screen.getByRole("button", { name: /test button/i })).toBeInTheDocument();
+    const button = screen.getByRole("button", { name: /test button/i });
+    expect(button).toBeInTheDocument();
+    expect(button.textContent.trim()).toBe("");
   });
 
   it("should call onclick handler", async () => {
     const onclick = vi.fn();
+    const user = userEvent.setup();
+
     render(Button, {
       props: {
         icon: MockIcon,
@@ -40,11 +45,27 @@ describe("Button.svelte", () => {
     });
 
     const button = screen.getByRole("button", { name: /test button/i });
-    await fireEvent.click(button);
+    await user.click(button);
 
     expect(onclick).toHaveBeenCalledTimes(1);
   });
 
+  it("should not throw error when clicked without onclick prop", async () => {
+    const user = userEvent.setup();
+
+    render(Button, {
+      props: {
+        icon: MockIcon,
+        label: "Click me",
+        ariaLabel: "Test button",
+      },
+    });
+
+    const button = screen.getByRole("button", { name: /test button/i });
+
+    expect(() => user.click(button)).not.toThrow();
+  });
+
   it("should be disabled when disabled prop is true", () => {
     render(Button, {
       props: {

tests/unit/components/ui/RangeSlider.test.ts

@@ -5,6 +5,7 @@ import { describe, expect, it, vi } from "vitest";
 describe("RangeSlider.svelte", () => {
   it("should call onchange handler", async () => {
     const onchange = vi.fn();
+
     render(RangeSlider, {
       props: {
         value: 50,