test: make tests less fragile

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

@@ -1,6 +1,6 @@
 import AppHeader from "$components/layout/AppHeader.svelte";
 import { themeState } from "$states/theme.svelte";
-import { fireEvent, render } from "@testing-library/svelte";
+import { fireEvent, render, screen } from "@testing-library/svelte";
 import { beforeEach, describe, expect, it } from "vitest";
 
 describe("AppHeader.svelte", () => {
@@ -9,10 +9,9 @@ describe("AppHeader.svelte", () => {
   });
 
   it("should toggle theme on button click", async () => {
-    const { container } = render(AppHeader);
+    render(AppHeader);
 
-    const toggleButton = container.querySelector("button");
-    if (!toggleButton) throw new Error("Toggle button not found");
+    const toggleButton = screen.getByRole("button", { name: /toggle theme/i });
 
     themeState.theme = "dark";
     await fireEvent.click(toggleButton);

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

@@ -1,11 +1,11 @@
-import { render } from "@testing-library/svelte";
+import { render, screen } from "@testing-library/svelte";
 import { describe, expect, it } from "vitest";
 import CardTest from "./CardTest.svelte";
 
 describe("Card.svelte", () => {
   it("should render without crashing", () => {
     render(CardTest);
-    const card = document.querySelector(".card");
-    expect(card).toBeInTheDocument();
+    expect(screen.getByText("Test Title")).toBeInTheDocument();
+    expect(screen.getByTestId("card-content")).toBeInTheDocument();
   });
 });

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

@@ -1,11 +1,12 @@
-import { render } from "@testing-library/svelte";
+import { render, screen } from "@testing-library/svelte";
 import { describe, expect, it } from "vitest";
 import InputGroupTest from "./InputGroupTest.svelte";
 
 describe("InputGroup.svelte", () => {
   it("should render without crashing", () => {
     render(InputGroupTest);
-    const inputGroup = document.querySelector(".input-group");
-    expect(inputGroup).toBeInTheDocument();
+    expect(screen.getByTestId("input1")).toBeInTheDocument();
+    expect(screen.getByTestId("input2")).toBeInTheDocument();
+    expect(screen.getByTestId("button")).toBeInTheDocument();
   });
 });

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

@@ -1,11 +1,12 @@
-import { render } from "@testing-library/svelte";
+import { render, screen } from "@testing-library/svelte";
 import { describe, expect, it } from "vitest";
 import SettingsGridTest from "./SettingsGridTest.svelte";
 
 describe("SettingsGrid.svelte", () => {
   it("should render without crashing", () => {
     render(SettingsGridTest);
-    const settingsGrid = document.querySelector(".settings-grid");
-    expect(settingsGrid).toBeInTheDocument();
+    expect(screen.getByTestId("item1")).toBeInTheDocument();
+    expect(screen.getByTestId("item2")).toBeInTheDocument();
+    expect(screen.getByTestId("item3")).toBeInTheDocument();
   });
 });

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

@@ -1,11 +1,11 @@
-import { render } from "@testing-library/svelte";
+import { render, screen } from "@testing-library/svelte";
 import { describe, expect, it } from "vitest";
 import SettingsRowTest from "./SettingsRowTest.svelte";
 
 describe("SettingsRow.svelte", () => {
   it("should render without crashing", () => {
     render(SettingsRowTest);
-    const settingRow = document.querySelector(".setting-row");
-    expect(settingRow).toBeInTheDocument();
+    expect(screen.getByText("Test Label")).toBeInTheDocument();
+    expect(screen.getByTestId("test-input")).toBeInTheDocument();
   });
 });