[pull] master from monkeytypegame:master

backend/.oxlintrc.json

@@ -3,5 +3,13 @@
   "extends": [
     "../packages/oxlint-config/index.jsonc"
     // "@monkeytype/oxlint-config"
+  ],
+  "overrides": [
+    {
+      "files": ["src/**/*.ts"],
+      "rules": {
+        "import/no-cycle": "off" //todo: fix cycles and turn this on
+      }
+    }
   ]
 }

frontend/__tests__/components/AnimatedModal.spec.tsx

@@ -13,8 +13,6 @@ describe("AnimatedModal", () => {
   });
 
   function renderModal(props: {
-    isOpen: boolean;
-    onClose: () => void;
     onEscape?: (e: KeyboardEvent) => void;
     onBackdropClick?: (e: MouseEvent) => void;
     class?: string;
@@ -29,7 +27,7 @@ describe("AnimatedModal", () => {
     modalDiv: HTMLDivElement;
   } {
     const { container } = render(() => (
-      <AnimatedModal id="TestModal" {...props}>
+      <AnimatedModal id="Support" {...props}>
         <div data-testid="modal-content">Test Content</div>
       </AnimatedModal>
     ));
@@ -45,40 +43,34 @@ describe("AnimatedModal", () => {
   }
 
   it("renders dialog with correct id and class", () => {
-    const { dialog } = renderModal({ isOpen: false, onClose: vi.fn() });
+    const { dialog } = renderModal({});
 
-    expect(dialog).toHaveAttribute("id", "TestModal");
+    expect(dialog).toHaveAttribute("id", "SupportModal");
     expect(dialog).toHaveClass("modalWrapper", "hidden");
   });
 
   it("renders children inside modal div", () => {
-    const { modalDiv } = renderModal({ isOpen: false, onClose: vi.fn() });
+    const { modalDiv } = renderModal({});
 
     expect(
       modalDiv.querySelector("[data-testid='modal-content']"),
     ).toHaveTextContent("Test Content");
   });
 
   it("has escape handler attached", () => {
-    const onClose = vi.fn();
-
-    const { dialog } = renderModal({ isOpen: true, onClose });
+    const { dialog } = renderModal({});
 
     expect(dialog.onkeydown).toBeDefined();
   });
 
   it("has backdrop click handler attached", () => {
-    const onClose = vi.fn();
-
-    const { dialog } = renderModal({ isOpen: true, onClose });
+    const { dialog } = renderModal({});
 
     expect(dialog.onmousedown).toBeDefined();
   });
 
   it("applies custom class to dialog", () => {
     const { dialog } = renderModal({
-      isOpen: false,
-      onClose: vi.fn(),
       class: "customClass",
     });
 
@@ -87,11 +79,9 @@ describe("AnimatedModal", () => {
 
   it("renders with animationMode none", () => {
     const { dialog } = renderModal({
-      isOpen: false,
-      onClose: vi.fn(),
       animationMode: "none",
     });
 
-    expect(dialog).toHaveAttribute("id", "TestModal");
+    expect(dialog).toHaveAttribute("id", "SupportModal");
   });
 });

frontend/__tests__/components/Button.spec.tsx

@@ -0,0 +1,167 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, cleanup } from "@solidjs/testing-library";
+import { Button } from "../../src/ts/components/Button";
+
+describe("Button component", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("renders a button element when onClick is provided", () => {
+    const onClick = vi.fn();
+
+    const { container } = render(() => (
+      <Button onClick={onClick} text="Click me" />
+    ));
+
+    const button = container.querySelector("button");
+    expect(button).toBeTruthy();
+    expect(button?.textContent).toContain("Click me");
+  });
+
+  it("renders an anchor element when href is provided", () => {
+    const { container } = render(() => (
+      <Button href="https://example.com" text="Go" />
+    ));
+
+    const anchor = container.querySelector("a");
+    expect(anchor).toBeTruthy();
+    expect(anchor?.getAttribute("href")).toBe("https://example.com");
+    expect(anchor?.getAttribute("target")).toBe("_blank");
+    expect(anchor?.getAttribute("rel")).toContain("noreferrer");
+  });
+
+  it("calls onClick when button is clicked", async () => {
+    const onClick = vi.fn();
+
+    const { container } = render(() => (
+      <Button onClick={onClick} text="Click me" />
+    ));
+
+    const button = container.querySelector("button");
+    button?.click();
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders icon when icon prop is provided", () => {
+    const { container } = render(() => (
+      <Button
+        onClick={() => {
+          //
+        }}
+        icon="fa-test"
+      />
+    ));
+
+    const icon = container.querySelector("i");
+    expect(icon).toBeTruthy();
+    expect(icon?.className).toContain("icon");
+    expect(icon?.className).toContain("fa-test");
+  });
+
+  it("applies fa-fw class when text is missing", () => {
+    const { container } = render(() => (
+      <Button
+        onClick={() => {
+          //
+        }}
+        icon="fa-test"
+      />
+    ));
+
+    const icon = container.querySelector("i");
+    expect(icon?.classList.contains("fa-fw")).toBe(true);
+  });
+
+  it("applies fa-fw class when fixedWidthIcon is true", () => {
+    const { container } = render(() => (
+      <Button
+        onClick={() => {
+          //
+        }}
+        icon="fa-test"
+        text="Hello"
+        fixedWidthIcon
+      />
+    ));
+
+    const icon = container.querySelector("i");
+    expect(icon?.classList.contains("fa-fw")).toBe(true);
+  });
+
+  it("does not apply fa-fw when text is present and fixedWidthIcon is false", () => {
+    const { container } = render(() => (
+      <Button
+        onClick={() => {
+          //
+        }}
+        icon="fa-test"
+        text="Hello"
+      />
+    ));
+
+    const icon = container.querySelector("i");
+    expect(icon?.classList.contains("fa-fw")).toBe(false);
+  });
+
+  it("applies default button class", () => {
+    const { container } = render(() => (
+      <Button
+        onClick={() => {
+          //
+        }}
+        text="Hello"
+      />
+    ));
+
+    const button = container.querySelector("button");
+    expect(button?.classList.contains("button")).toBe(false);
+  });
+
+  it("applies textButton class when type is text", () => {
+    const { container } = render(() => (
+      <Button
+        onClick={() => {
+          //
+        }}
+        text="Hello"
+        type="text"
+      />
+    ));
+
+    const button = container.querySelector("button");
+    expect(button?.classList.contains("textButton")).toBe(true);
+  });
+
+  it("applies custom class when class prop is provided", () => {
+    const { container } = render(() => (
+      <Button
+        onClick={() => {
+          //
+        }}
+        text="Hello"
+        class="custom-class"
+      />
+    ));
+
+    const button = container.querySelector("button");
+    expect(button?.classList.contains("custom-class")).toBe(true);
+  });
+
+  it("renders children content", () => {
+    const { container } = render(() => (
+      <Button
+        onClick={() => {
+          //
+        }}
+      >
+        <span data-testid="child">Child</span>
+      </Button>
+    ));
+
+    const child = container.querySelector('[data-testid="child"]');
+    expect(child).toBeTruthy();
+    expect(child?.textContent).toBe("Child");
+  });
+});