test: fix tests and typescript typechecks

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

@@ -38,6 +38,7 @@ describe("Button.svelte", () => {
     });
 
     const button = container.querySelector("button");
+    if (!button) throw new Error("Button element not found");
     await fireEvent.click(button);
 
     expect(onclick).toHaveBeenCalledTimes(1);

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

@@ -1,6 +1,6 @@
-import { render, screen, fireEvent } from "@testing-library/svelte";
-import { describe, expect, it } from "vitest";
 import ColorPicker from "$components/ui/ColorPicker.svelte";
+import { fireEvent, render, screen } from "@testing-library/svelte";
+import { describe, expect, it } from "vitest";
 
 describe("ColorPicker.svelte", () => {
   it("should render with initial value", () => {
@@ -23,6 +23,7 @@ describe("ColorPicker.svelte", () => {
     });
 
     const input = container.querySelector(".color-input");
+    if (!input) throw new Error("Input element not found");
     await fireEvent.input(input, { target: { value: "#ff0000" } });
 
     expect(screen.getByText("#ff0000")).toBeInTheDocument();

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

@@ -1,6 +1,6 @@
-import { render, screen, fireEvent } from "@testing-library/svelte";
-import { describe, expect, it, vi } from "vitest";
 import RangeSlider from "$components/ui/RangeSlider.svelte";
+import { fireEvent, render, screen } from "@testing-library/svelte";
+import { describe, expect, it, vi } from "vitest";
 
 describe("RangeSlider.svelte", () => {
   it("should render with default props", () => {
@@ -39,6 +39,7 @@ describe("RangeSlider.svelte", () => {
     });
 
     const slider = container.querySelector(".slider");
+    if (!slider) throw new Error("Slider element not found");
     await fireEvent.input(slider, { target: { value: "75" } });
 
     expect(screen.getByText("75")).toBeInTheDocument();
@@ -54,6 +55,7 @@ describe("RangeSlider.svelte", () => {
     });
 
     const slider = container.querySelector(".slider");
+    if (!slider) throw new Error("Slider element not found");
     await fireEvent.change(slider, { target: { value: "75" } });
 
     expect(onchange).toHaveBeenCalled();

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

@@ -1,6 +1,6 @@
-import { render, screen, fireEvent } from "@testing-library/svelte";
-import { describe, expect, it } from "vitest";
 import SelectFont from "$components/ui/SelectFont.svelte";
+import { fireEvent, render, screen } from "@testing-library/svelte";
+import { describe, expect, it } from "vitest";
 
 describe("SelectFont.svelte", () => {
   const fonts = [
@@ -33,7 +33,7 @@ describe("SelectFont.svelte", () => {
       },
     });
 
-    fonts.forEach(font => {
+    fonts.forEach((font) => {
       const options = screen.queryAllByText(font);
       expect(options.length).toBeGreaterThan(0);
     });
@@ -47,6 +47,7 @@ describe("SelectFont.svelte", () => {
     });
 
     const select = container.querySelector(".select-input");
+    if (!select) throw new Error("Select element not found");
     await fireEvent.change(select, { target: { value: "Verdana" } });
 
     expect(select).toHaveValue("Verdana");
@@ -60,6 +61,7 @@ describe("SelectFont.svelte", () => {
     });
 
     const select = container.querySelector(".select-input");
+    if (!select) throw new Error("Select element not found");
 
     await fireEvent.change(select, { target: { value: "Georgia" } });
     expect(select).toHaveValue("Georgia");