@dyyz1993/create-agent 1.9.0 → 2.0.1

package/templates/agent/src/mainview/__tests__/setup.ts

@@ -1,37 +1,40 @@
-import "@testing-library/jest-dom/vitest";
+import { expect } from "vitest";
+import * as matchers from "@testing-library/jest-dom/matchers";
+
+expect.extend(matchers);
 
 Object.defineProperty(window, "matchMedia", {
-  writable: true,
-  value: (query: string) => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: () => {},
-    removeListener: () => {},
-    addEventListener: () => {},
-    removeEventListener: () => {},
-    dispatchEvent: () => false,
-  }),
+	writable: true,
+	value: (query: string) => ({
+		matches: false,
+		media: query,
+		onchange: null,
+		addListener: () => {},
+		removeListener: () => {},
+		addEventListener: () => {},
+		removeEventListener: () => {},
+		dispatchEvent: () => false,
+	}),
 });
 
 const localStorageMock = (() => {
-  let store: Record<string, string> = {};
-  return {
-    getItem: (key: string) => store[key] ?? null,
-    setItem: (key: string, value: string) => {
-      store[key] = String(value);
-    },
-    removeItem: (key: string) => {
-      delete store[key];
-    },
-    clear: () => {
-      store = {};
-    },
-    get length() {
-      return Object.keys(store).length;
-    },
-    key: (i: number) => Object.keys(store)[i] ?? null,
-  };
+	let store: Record<string, string> = {};
+	return {
+		getItem: (key: string) => store[key] ?? null,
+		setItem: (key: string, value: string) => {
+			store[key] = String(value);
+		},
+		removeItem: (key: string) => {
+			delete store[key];
+		},
+		clear: () => {
+			store = {};
+		},
+		get length() {
+			return Object.keys(store).length;
+		},
+		key: (i: number) => Object.keys(store)[i] ?? null,
+	};
 })();
 
 Object.defineProperty(window, "localStorage", { value: localStorageMock });

package/templates/agent/src/mainview/__tests__/theme-variables.test.ts

@@ -0,0 +1,36 @@
+import { describe, it, expect } from "vitest";
+import { readFileSync } from "fs";
+import { resolve, dirname } from "path";
+
+function extractVarNames(css: string, selector: string): string[] {
+  const regex = new RegExp(`${selector.replace(".", "\\.")}\\s*\\{([^}]+)\\}`, "s");
+  const match = css.match(regex);
+  if (!match) return [];
+  const vars = match[1].match(/--[\w-]+/g);
+  return vars ? [...new Set(vars)].sort() : [];
+}
+
+describe("CSS Variables", () => {
+  const cssPath = resolve(dirname(import.meta.url.replace("file://", "")), "../index.css");
+  const css = readFileSync(cssPath, "utf-8");
+
+  it("should have matching variables in :root and .dark", () => {
+    const rootVars = extractVarNames(css, ":root");
+    const darkVars = extractVarNames(css, ".dark");
+
+    expect(rootVars.length).toBeGreaterThan(0);
+    expect(darkVars.length).toBeGreaterThan(0);
+    expect(rootVars).toEqual(darkVars);
+  });
+
+  it("should have all required variable categories", () => {
+    const allVars = css.match(/--[\w-]+/g) || [];
+    const uniqueVars = [...new Set(allVars)];
+
+    const requiredPrefixes = ["bg-", "text-", "border-", "accent-"];
+    for (const prefix of requiredPrefixes) {
+      const hasPrefix = uniqueVars.some((v) => v.includes(prefix));
+      expect(hasPrefix, `Missing CSS variables with prefix: ${prefix}`).toBe(true);
+    }
+  });
+});

package/templates/agent/src/mainview/components/common/ErrorBoundary.tsx

@@ -1,58 +1 @@
-import React, { Component, type ErrorInfo, type ReactNode } from "react";
-
-interface Props {
-  children: ReactNode;
-  fallback?: ReactNode;
-}
-
-interface State {
-  hasError: boolean;
-  error: Error | null;
-}
-
-export class ErrorBoundary extends Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = { hasError: false, error: null };
-  }
-
-  static getDerivedStateFromError(error: Error): State {
-    return { hasError: true, error };
-  }
-
-  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
-    console.error("[ErrorBoundary]", error, errorInfo);
-  }
-
-  handleRetry = (): void => {
-    this.setState({ hasError: false, error: null });
-  };
-
-  render(): ReactNode {
-    if (this.state.hasError) {
-      if (this.props.fallback) {
-        return this.props.fallback;
-      }
-
-      return (
-        <div className="flex flex-col items-center justify-center h-full p-8 bg-[var(--color-bg-primary)] text-[var(--color-text-primary)]">
-          <div className="text-4xl mb-4">⚠️</div>
-          <h2 className="text-lg font-semibold mb-2">Something went wrong</h2>
-          <p className="text-sm text-[var(--color-text-secondary)] mb-4 max-w-md text-center">
-            {this.state.error?.message || "An unexpected error occurred"}
-          </p>
-          <button
-            onClick={this.handleRetry}
-            className="px-4 py-2 bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] text-white rounded-lg transition-colors text-sm"
-            role="button"
-            aria-label="Retry"
-          >
-            Retry
-          </button>
-        </div>
-      );
-    }
-
-    return this.props.children;
-  }
-}
+export { ErrorBoundary } from "@shared/components/ErrorBoundary";

package/templates/agent/src/mainview/components/common/LanguageSwitcher.tsx

@@ -4,6 +4,7 @@ export function LanguageSwitcher() {
   const { locale, setLocale } = useLocaleStore();
   return (
     <button
+      data-testid="language-switcher"
       onClick={() => setLocale(locale === "en" ? "zh" : "en")}
       className="px-1.5 py-0.5 rounded text-xs hover:bg-[var(--color-bg-hover)] transition-colors text-[var(--color-text-secondary)]"
       title={locale === "en" ? "切换到中文" : "Switch to English"}

package/templates/agent/src/mainview/components/common/ThemeToggle.tsx

@@ -6,6 +6,7 @@ export function ThemeToggle() {
 
   return (
     <button
+      data-testid="theme-toggle"
       onClick={toggleTheme}
       className="p-1.5 rounded-md hover:bg-[var(--color-bg-hover)] transition-colors"
       title={theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}