plugin: add tests for UI components

Author: jamiebrynes7

biome.json

@@ -73,7 +73,8 @@
   "overrides": [
     {
       "includes": [
-        "**/*.test.ts"
+        "**/*.test.ts",
+        "**/*.test.tsx"
       ],
       "linter": {
         "rules": {

plugin/src/factories/data.ts

@@ -29,6 +29,7 @@ export function makeTask(id: string, opts?: Partial<Task>): Task {
     section: opts?.section,
 
     due: opts?.due,
+    duration: opts?.duration,
     deadline: opts?.deadline,
   };
 }

plugin/src/factories/settings.ts

@@ -0,0 +1,23 @@
+import type { Settings } from "@/settings";
+
+export function makeSettings(overrides?: Partial<Settings>): Settings {
+  return {
+    apiTokenSecretId: "swt-todoist-api-token",
+    tokenStorage: "secrets",
+    fadeToggle: true,
+    autoRefreshToggle: false,
+    autoRefreshInterval: 60,
+    renderDateIcon: true,
+    renderProjectIcon: true,
+    renderLabelsIcon: true,
+    shouldWrapLinksInParens: false,
+    addTaskButtonAddsPageLink: "content",
+    taskCreationDefaultDueDate: "none",
+    taskCreationDefaultProject: null,
+    taskCreationDefaultLabels: [],
+    defaultAddTaskAction: "add",
+    debugLogging: false,
+    version: 0,
+    ...overrides,
+  };
+}

plugin/src/mocks/obsidian.ts

@@ -1,6 +1,57 @@
 // biome-ignore lint/correctness/noUnusedFunctionParameters: mocks with empty impl
 export function setIcon(parent: HTMLElement, iconId: string, size?: number): void {}
 
+// biome-ignore lint/correctness/noUnusedFunctionParameters: mocks with empty impl
+export function setTooltip(el: HTMLElement, text: string, options?: TooltipOptions): void {}
+
+export type TooltipOptions = {
+  placement?: string;
+};
+
 export class App {}
 export class PluginSettingTab {}
 export class Setting {}
+
+export class MarkdownRenderChild {
+  containerEl: HTMLElement;
+  constructor(containerEl: HTMLElement) {
+    this.containerEl = containerEl;
+  }
+}
+
+export class Notice {}
+
+export class Menu {
+  addItem(cb: (item: MenuItem) => void): this {
+    cb(new MenuItem());
+    return this;
+  }
+  // biome-ignore lint/correctness/noUnusedFunctionParameters: mocks with empty impl
+  showAtPosition(position: { x: number; y: number }): this {
+    return this;
+  }
+}
+
+export class MenuItem {
+  // biome-ignore lint/correctness/noUnusedFunctionParameters: mocks with empty impl
+  setTitle(title: string): this {
+    return this;
+  }
+  // biome-ignore lint/correctness/noUnusedFunctionParameters: mocks with empty impl
+  onClick(cb: (evt: MouseEvent | KeyboardEvent) => void): this {
+    return this;
+  }
+}
+
+// biome-ignore lint/complexity/noStaticOnlyClass: mock must match Obsidian's class-based API
+export class MarkdownRenderer {
+  static renderMarkdown(
+    markdown: string,
+    el: HTMLElement,
+    _sourcePath: string,
+    _component: unknown,
+  ): Promise<void> {
+    el.textContent = markdown;
+    return Promise.resolve();
+  }
+}

plugin/src/ui/components/callout/index.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Callout, type Contents } from "./index";
+
+describe("Callout", () => {
+  it("should render title and icon", () => {
+    render(<Callout title="Test Title" iconId="info" className="test-class" />);
+
+    expect(screen.getByText("Test Title")).toBeInTheDocument();
+  });
+
+  it("should render flat string contents as list items", () => {
+    const contents: Contents[] = ["Item 1", "Item 2", "Item 3"];
+
+    render(<Callout title="Title" iconId="info" className="test" contents={contents} />);
+
+    expect(screen.getByText("Item 1")).toBeInTheDocument();
+    expect(screen.getByText("Item 2")).toBeInTheDocument();
+    expect(screen.getByText("Item 3")).toBeInTheDocument();
+
+    const listItems = document.querySelectorAll("li");
+    expect(listItems).toHaveLength(3);
+  });
+
+  it("should render nested Contents objects with recursive lists", () => {
+    const contents: Contents[] = [
+      {
+        msg: "Parent",
+        children: ["Child 1", "Child 2"],
+      },
+    ];
+
+    render(<Callout title="Title" iconId="info" className="test" contents={contents} />);
+
+    expect(screen.getByText("Parent")).toBeInTheDocument();
+    expect(screen.getByText("Child 1")).toBeInTheDocument();
+    expect(screen.getByText("Child 2")).toBeInTheDocument();
+
+    const nestedList = document.querySelectorAll("ul ul");
+    expect(nestedList).toHaveLength(1);
+  });
+
+  it("should render with no contents and no list", () => {
+    const { container } = render(<Callout title="Title" iconId="info" className="test" />);
+
+    expect(container.querySelector(".callout-contents")).not.toBeInTheDocument();
+  });
+
+  it("should apply className to root element", () => {
+    const { container } = render(<Callout title="Title" iconId="info" className="my-class" />);
+
+    expect(container.querySelector(".todoist-callout.my-class")).toBeInTheDocument();
+  });
+});

plugin/src/ui/components/obsidian-icon/index.test.tsx

@@ -0,0 +1,41 @@
+import { render } from "@testing-library/react";
+import * as obsidian from "obsidian";
+import { describe, expect, it, type MockInstance, vi } from "vitest";
+
+import { ObsidianIcon } from "./index";
+
+describe("ObsidianIcon", () => {
+  it("should render div with obsidian-icon class and correct data-icon-size", () => {
+    const { container } = render(<ObsidianIcon id="check" size="m" />);
+
+    const div = container.querySelector(".obsidian-icon");
+    expect(div).toBeInTheDocument();
+    expect(div).toHaveAttribute("data-icon-size", "m");
+  });
+
+  it("should call setIcon with correct element and icon ID", () => {
+    const spy: MockInstance = vi.spyOn(obsidian, "setIcon");
+
+    render(<ObsidianIcon id="my-icon" size="s" />);
+
+    expect(spy).toHaveBeenCalledWith(expect.any(HTMLElement), "my-icon");
+    spy.mockRestore();
+  });
+
+  it("should pass through additional HTML attributes", () => {
+    const { container } = render(
+      <ObsidianIcon id="check" size="l" data-testid="custom" aria-label="icon" />,
+    );
+
+    const div = container.querySelector(".obsidian-icon");
+    expect(div).toHaveAttribute("data-testid", "custom");
+    expect(div).toHaveAttribute("aria-label", "icon");
+  });
+
+  it("should merge additional className", () => {
+    const { container } = render(<ObsidianIcon id="check" size="s" className="extra-class" />);
+
+    const div = container.querySelector(".obsidian-icon.extra-class");
+    expect(div).toBeInTheDocument();
+  });
+});

plugin/src/ui/components/token-validation-icon/index.test.tsx

@@ -0,0 +1,39 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import type { TokenValidation } from "@/token";
+
+import { TokenValidationIcon } from "./index";
+
+describe("TokenValidationIcon", () => {
+  it("should return null for kind 'none'", () => {
+    const status: TokenValidation.Result = { kind: "none" };
+    const { container } = render(<TokenValidationIcon status={status} />);
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("should render loader icon for 'in-progress' status", () => {
+    const status: TokenValidation.Result = { kind: "in-progress" };
+    const { container } = render(<TokenValidationIcon status={status} />);
+
+    const icon = container.querySelector(".token-validation-in-progress");
+    expect(icon).toBeInTheDocument();
+  });
+
+  it("should render error icon for 'error' status", () => {
+    const status: TokenValidation.Result = { kind: "error", message: "Bad token" };
+    const { container } = render(<TokenValidationIcon status={status} />);
+
+    const icon = container.querySelector(".token-validation-error");
+    expect(icon).toBeInTheDocument();
+  });
+
+  it("should render success icon for 'success' status", () => {
+    const status: TokenValidation.Result = { kind: "success" };
+    const { container } = render(<TokenValidationIcon status={status} />);
+
+    const icon = container.querySelector(".token-validation-success");
+    expect(icon).toBeInTheDocument();
+  });
+});

plugin/src/ui/query/QueryError.test.tsx

@@ -0,0 +1,34 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { ParsingError } from "@/query/parser";
+
+import { QueryError } from "./QueryError";
+
+describe("QueryError", () => {
+  it("should render ParsingError messages", () => {
+    const error = new ParsingError(["Invalid filter", "Missing field"]);
+
+    render(<QueryError error={error} />);
+
+    expect(screen.getByText("Error: Query parsing failed")).toBeInTheDocument();
+    expect(screen.getByText("Invalid filter")).toBeInTheDocument();
+    expect(screen.getByText("Missing field")).toBeInTheDocument();
+  });
+
+  it("should render generic Error message", () => {
+    const error = new Error("Something went wrong");
+
+    render(<QueryError error={error} />);
+
+    expect(screen.getByText("Error: Query parsing failed")).toBeInTheDocument();
+    expect(screen.getByText("Something went wrong")).toBeInTheDocument();
+  });
+
+  it("should render unknown error fallback for non-Error objects", () => {
+    render(<QueryError error="not an error" />);
+
+    expect(screen.getByText("Error: Query parsing failed")).toBeInTheDocument();
+    expect(screen.getByText(/Unknown error occurred/)).toBeInTheDocument();
+  });
+});

plugin/src/ui/query/QueryHeader.test.tsx

@@ -0,0 +1,93 @@
+import { render, screen } from "@testing-library/react";
+import type React from "react";
+import { describe, expect, it, vi } from "vitest";
+import { create } from "zustand";
+
+import { type MarkdownEditButton, MarkdownEditButtonContext, PluginContext } from "@/ui/context";
+
+import { QueryHeader } from "./QueryHeader";
+
+const mockPlugin = {
+  services: {
+    todoist: {
+      actions: {
+        closeTask: vi.fn(),
+      },
+    },
+  },
+} as unknown as ReturnType<typeof PluginContext.use>;
+
+const mockEditClick = vi.fn();
+const mockEditButtonStore = create<MarkdownEditButton>(() => ({
+  click: mockEditClick,
+}));
+
+const Wrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return (
+    <PluginContext.Provider value={mockPlugin}>
+      <MarkdownEditButtonContext.Provider value={mockEditButtonStore}>
+        {children}
+      </MarkdownEditButtonContext.Provider>
+    </PluginContext.Provider>
+  );
+};
+
+describe("QueryHeader", () => {
+  it("should render query title", () => {
+    render(
+      <QueryHeader
+        title="My Tasks"
+        isFetching={false}
+        refresh={vi.fn()}
+        refreshedTimestamp={undefined}
+      />,
+      { wrapper: Wrapper },
+    );
+
+    expect(screen.getByText("My Tasks")).toBeInTheDocument();
+  });
+
+  it("should render three control buttons", () => {
+    const { container } = render(
+      <QueryHeader
+        title="Tasks"
+        isFetching={false}
+        refresh={vi.fn()}
+        refreshedTimestamp={undefined}
+      />,
+      { wrapper: Wrapper },
+    );
+
+    expect(container.querySelector(".add-task")).toBeInTheDocument();
+    expect(container.querySelector(".refresh-query")).toBeInTheDocument();
+    expect(container.querySelector(".edit-query")).toBeInTheDocument();
+  });
+
+  it("should show 'is-refreshing' class during fetch", () => {
+    const { container } = render(
+      <QueryHeader
+        title="Tasks"
+        isFetching={true}
+        refresh={vi.fn()}
+        refreshedTimestamp={undefined}
+      />,
+      { wrapper: Wrapper },
+    );
+
+    expect(container.querySelector(".refresh-query.is-refreshing")).toBeInTheDocument();
+  });
+
+  it("should not show 'is-refreshing' class when not fetching", () => {
+    const { container } = render(
+      <QueryHeader
+        title="Tasks"
+        isFetching={false}
+        refresh={vi.fn()}
+        refreshedTimestamp={undefined}
+      />,
+      { wrapper: Wrapper },
+    );
+
+    expect(container.querySelector(".refresh-query.is-refreshing")).not.toBeInTheDocument();
+  });
+});