test: make tests less fragile

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

@@ -1,5 +1,5 @@
 import TextInlineEdit from "$components/text/TextInlineEdit.svelte";
-import { cleanup, render } from "@testing-library/svelte";
+import { cleanup, render, screen } from "@testing-library/svelte";
 import { afterEach, describe, expect, it } from "vitest";
 
 afterEach(() => {
@@ -16,7 +16,7 @@ describe("TextInlineEdit.svelte", () => {
       },
     });
 
-    const input = document.querySelector("input[type='text']");
+    const input = screen.getByRole("textbox");
     expect(input).toBeInTheDocument();
     expect(input).toHaveValue("Test text");
   });
@@ -30,7 +30,7 @@ describe("TextInlineEdit.svelte", () => {
       },
     });
 
-    const input = document.querySelector("input[type='text']");
+    const input = screen.getByRole("textbox");
     expect(input).toHaveValue("");
   });
 });

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

@@ -1,10 +1,10 @@
 import TextInput from "$components/text/TextInput.svelte";
-import { fireEvent, render } from "@testing-library/svelte";
+import { fireEvent, render, screen } from "@testing-library/svelte";
 import { describe, expect, it, vi } from "vitest";
 
 describe("TextInput.svelte", () => {
   it("should render with initial value", () => {
-    const { container } = render(TextInput, {
+    render(TextInput, {
       props: {
         text: "Test text",
         onenter: vi.fn(),
@@ -12,13 +12,13 @@ describe("TextInput.svelte", () => {
       },
     });
 
-    const input = container.querySelector("input");
+    const input = screen.getByRole("textbox", { name: /test input/i });
     expect(input).toBeInTheDocument();
     expect(input).toHaveValue("Test text");
   });
 
   it("should update value on input", async () => {
-    const { container } = render(TextInput, {
+    render(TextInput, {
       props: {
         text: "Initial",
         onenter: vi.fn(),
@@ -26,8 +26,7 @@ describe("TextInput.svelte", () => {
       },
     });
 
-    const input = container.querySelector("input");
-    if (!input) throw new Error("Input element not found");
+    const input = screen.getByRole("textbox", { name: /test input/i });
     await fireEvent.input(input, { target: { value: "Updated text" } });
 
     expect(input).toHaveValue("Updated text");
@@ -35,7 +34,7 @@ describe("TextInput.svelte", () => {
 
   it("should call onenter when Enter key is pressed", async () => {
     const onenter = vi.fn();
-    const { container } = render(TextInput, {
+    render(TextInput, {
       props: {
         text: "Test",
         onenter,
@@ -43,8 +42,7 @@ describe("TextInput.svelte", () => {
       },
     });
 
-    const input = container.querySelector("input");
-    if (!input) throw new Error("Input element not found");
+    const input = screen.getByRole("textbox", { name: /test input/i });
     await fireEvent.keyDown(input, { key: "Enter" });
 
     expect(onenter).toHaveBeenCalledTimes(1);
@@ -52,7 +50,7 @@ describe("TextInput.svelte", () => {
 
   it("should not call onenter when other keys are pressed", async () => {
     const onenter = vi.fn();
-    const { container } = render(TextInput, {
+    render(TextInput, {
       props: {
         text: "Test",
         onenter,
@@ -60,8 +58,7 @@ describe("TextInput.svelte", () => {
       },
     });
 
-    const input = container.querySelector("input");
-    if (!input) throw new Error("Input element not found");
+    const input = screen.getByRole("textbox", { name: /test input/i });
     await fireEvent.keyDown(input, { key: "Escape" });
     await fireEvent.keyDown(input, { key: "Tab" });
 

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

@@ -1,6 +1,6 @@
 import TextManager from "$components/text/TextManager.svelte";
 import { textsState } from "$states/texts.svelte";
-import { fireEvent, render, screen, waitFor } from "@testing-library/svelte";
+import { fireEvent, render, screen, waitFor, within } from "@testing-library/svelte";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
 describe("TextManager.svelte", () => {
@@ -98,9 +98,8 @@ describe("TextManager.svelte", () => {
       const textItems = screen.queryAllByRole("listitem");
       expect(textItems).toHaveLength(1);
 
-      const inputs = textItems[0].querySelectorAll('input[type="text"]');
-      expect(inputs).toHaveLength(1);
-      expect(inputs[0]).toHaveValue("Test text");
+      const input = within(textItems[0]).getByRole("textbox");
+      expect(input).toHaveValue("Test text");
     });
 
     it("should call textsState.removeText when delete button is clicked", () => {