@akiojin/gwt 4.9.1 → 4.11.6

package/src/cli/ui/__tests__/components/common/Input.test.tsx

@@ -1,100 +0,0 @@
-/**
- * @vitest-environment happy-dom
- */
-import { describe, it, expect, beforeEach, vi } from "vitest";
-import { render } from "@testing-library/react";
-import React from "react";
-import { Input } from "../../../components/common/Input.js";
-import { Window } from "happy-dom";
-
-describe("Input", () => {
-  beforeEach(() => {
-    // Setup happy-dom
-    const window = new Window();
-    globalThis.window = window as unknown as typeof globalThis.window;
-    globalThis.document =
-      window.document as unknown as typeof globalThis.document;
-  });
-
-  it("should render with value", () => {
-    const onChange = vi.fn();
-    const onSubmit = vi.fn();
-    const { container } = render(
-      <Input value="test" onChange={onChange} onSubmit={onSubmit} />,
-    );
-
-    expect(container).toBeDefined();
-  });
-
-  it("should render with placeholder", () => {
-    const onChange = vi.fn();
-    const onSubmit = vi.fn();
-    const { getByText } = render(
-      <Input
-        value=""
-        onChange={onChange}
-        onSubmit={onSubmit}
-        placeholder="Enter text..."
-      />,
-    );
-
-    expect(getByText("Enter text...")).toBeDefined();
-  });
-
-  it("should render with label", () => {
-    const onChange = vi.fn();
-    const onSubmit = vi.fn();
-    const { getByText } = render(
-      <Input value="" onChange={onChange} onSubmit={onSubmit} label="Name:" />,
-    );
-
-    expect(getByText("Name:")).toBeDefined();
-  });
-
-  it("should render label and placeholder together", () => {
-    const onChange = vi.fn();
-    const onSubmit = vi.fn();
-    const { getByText } = render(
-      <Input
-        value=""
-        onChange={onChange}
-        onSubmit={onSubmit}
-        label="Branch name:"
-        placeholder="feature/..."
-      />,
-    );
-
-    expect(getByText("Branch name:")).toBeDefined();
-    expect(getByText("feature/...")).toBeDefined();
-  });
-
-  it("should accept mask prop for password input", () => {
-    const onChange = vi.fn();
-    const onSubmit = vi.fn();
-    const { container } = render(
-      <Input value="secret" onChange={onChange} onSubmit={onSubmit} mask="*" />,
-    );
-
-    expect(container).toBeDefined();
-  });
-
-  it("should call onChange when value changes", () => {
-    const onChange = vi.fn();
-    const onSubmit = vi.fn();
-    render(<Input value="" onChange={onChange} onSubmit={onSubmit} />);
-
-    // Note: Simulating input requires ink-testing-library
-    // For now, we just verify the component structure
-    expect(onChange).not.toHaveBeenCalled();
-  });
-
-  it("should call onSubmit when submitted", () => {
-    const onChange = vi.fn();
-    const onSubmit = vi.fn();
-    render(<Input value="test" onChange={onChange} onSubmit={onSubmit} />);
-
-    // Note: Simulating submit requires ink-testing-library
-    // For now, we just verify the component structure
-    expect(onSubmit).not.toHaveBeenCalled();
-  });
-});

package/src/cli/ui/__tests__/components/common/LoadingIndicator.test.tsx

@@ -1,148 +0,0 @@
-/**
- * @vitest-environment happy-dom
- */
-import React from "react";
-import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
-import { act, render } from "@testing-library/react";
-import { LoadingIndicator } from "../../../components/common/LoadingIndicator.js";
-import { Window } from "happy-dom";
-
-const advanceTimersBy = async (ms: number) => {
-  await act(async () => {
-    if (typeof vi.advanceTimersByTimeAsync === "function") {
-      await vi.advanceTimersByTimeAsync(ms);
-    } else if (typeof vi.advanceTimersByTime === "function") {
-      vi.advanceTimersByTime(ms);
-    } else {
-      await new Promise((resolve) => setTimeout(resolve, ms));
-    }
-  });
-};
-
-beforeEach(() => {
-  if (typeof vi.useFakeTimers === "function") {
-    vi.useFakeTimers();
-  }
-  const window = new Window();
-  globalThis.window = window as unknown as typeof globalThis.window;
-  globalThis.document =
-    window.document as unknown as typeof globalThis.document;
-});
-
-afterEach(() => {
-  if (typeof vi.clearAllTimers === "function") {
-    vi.clearAllTimers();
-  }
-  if (typeof vi.useRealTimers === "function") {
-    vi.useRealTimers();
-  }
-});
-
-describe("LoadingIndicator", () => {
-  const getSpinnerText = (container: HTMLElement) => {
-    return container.querySelector("ink-text")?.textContent ?? "";
-  };
-
-  const getMessageText = (container: HTMLElement) => {
-    const texts = container.querySelectorAll("ink-text");
-    return texts.length > 1 ? (texts[1]?.textContent ?? "") : "";
-  };
-
-  it("does not render before the delay elapses", async () => {
-    const { container } = render(
-      <LoadingIndicator isLoading={true} message="Loading data" delay={50} />,
-    );
-
-    expect(container.textContent).toBe("");
-
-    await advanceTimersBy(20);
-
-    expect(container.textContent).toBe("");
-  });
-
-  it("renders after the delay elapses", async () => {
-    const { container } = render(
-      <LoadingIndicator isLoading={true} message="Loading data" delay={30} />,
-    );
-
-    await advanceTimersBy(30);
-
-    expect(getMessageText(container)).toContain("Loading data");
-  });
-
-  it("stops rendering when loading becomes false", async () => {
-    const { container, rerender } = render(
-      <LoadingIndicator isLoading={true} message="Loading data" delay={10} />,
-    );
-
-    await advanceTimersBy(10);
-
-    expect(getMessageText(container)).toContain("Loading data");
-
-    await act(async () => {
-      rerender(
-        <LoadingIndicator
-          isLoading={false}
-          message="Loading data"
-          delay={10}
-        />,
-      );
-      if (typeof vi.advanceTimersByTimeAsync === "function") {
-        await vi.advanceTimersByTimeAsync(0);
-      }
-    });
-
-    expect(container.textContent).toBe("");
-  });
-
-  it("cycles through spinner frames over time", async () => {
-    const customFrames = [".", "..", "..."];
-    const { container } = render(
-      <LoadingIndicator
-        isLoading={true}
-        message="Loading data"
-        delay={0}
-        interval={5}
-        frames={customFrames}
-      />,
-    );
-
-    await advanceTimersBy(0);
-
-    const firstFrame = getSpinnerText(container);
-
-    await advanceTimersBy(5);
-
-    const secondFrame = getSpinnerText(container);
-
-    await advanceTimersBy(5);
-
-    const thirdFrame = getSpinnerText(container);
-
-    expect(secondFrame).not.toEqual(firstFrame);
-    expect(thirdFrame).not.toEqual(secondFrame);
-    expect(customFrames).toContain(firstFrame ?? "");
-    expect(customFrames).toContain(secondFrame ?? "");
-    expect(customFrames).toContain(thirdFrame ?? "");
-    expect(getMessageText(container)).toContain("Loading data");
-  });
-
-  it("keeps rendering even when only a single frame is provided", async () => {
-    const { container } = render(
-      <LoadingIndicator
-        isLoading={true}
-        message="Loading data"
-        delay={0}
-        interval={10}
-        frames={["*"]}
-      />,
-    );
-
-    await advanceTimersBy(0);
-    expect(getSpinnerText(container)).toBe("*");
-
-    await advanceTimersBy(30);
-    expect(getSpinnerText(container)).toBe("*");
-    expect(getMessageText(container)).toContain("Loading data");
-  });
-});

package/src/cli/ui/__tests__/components/common/Select.memo.test.tsx

@@ -1,255 +0,0 @@
-/**
- * @vitest-environment happy-dom
- */
-import { describe, it, expect, vi, beforeEach } from "vitest";
-import { render } from "@testing-library/react";
-import React, { useState } from "react";
-import { Window } from "happy-dom";
-import { Select, type SelectItem } from "../../../components/common/Select.js";
-
-/**
- * T082-2: React.memo optimization tests
- * Tests that Select component does not re-render when items array has the same content
- *
- * NOTE: These tests are currently skipped due to issues with happy-dom environment
- * not properly handling React state updates and button clicks.
- * The actual functionality works correctly in production.
- */
-
-describe.skip("Select Component React.memo (T082-2)", () => {
-  beforeEach(() => {
-    const window = new Window();
-    globalThis.window = window as unknown as typeof globalThis.window;
-    globalThis.document =
-      window.document as unknown as typeof globalThis.document;
-    vi.clearAllMocks();
-  });
-
-  it("should not re-render when items array reference changes but content is the same", () => {
-    const onSelect = vi.fn();
-
-    // Wrapper component to track renders
-    function TestWrapper() {
-      const [items, setItems] = useState<SelectItem[]>([
-        { label: "Item 1", value: "1" },
-        { label: "Item 2", value: "2" },
-      ]);
-
-      const [counter, setCounter] = useState(0);
-
-      return (
-        <div>
-          <div data-testid="counter">{counter}</div>
-          <Select items={items} onSelect={onSelect} />
-          <button
-            data-testid="same-content"
-            onClick={() => {
-              // Create new array with same content
-              setItems([
-                { label: "Item 1", value: "1" },
-                { label: "Item 2", value: "2" },
-              ]);
-            }}
-          />
-          <button
-            data-testid="increment"
-            onClick={() => setCounter((c) => c + 1)}
-          />
-        </div>
-      );
-    }
-
-    const { getByTestId } = render(<TestWrapper />);
-
-    // Click "same-content" button to trigger re-render with same items
-    const sameContentButton = getByTestId("same-content") as HTMLButtonElement;
-    sameContentButton.click();
-
-    // With React.memo, Select should not re-render if items content is the same
-    // Without React.memo, this test would show that Select re-renders unnecessarily
-  });
-
-  it("should re-render when items content actually changes", () => {
-    const onSelect = vi.fn();
-
-    function TestWrapper() {
-      const [items, setItems] = useState<SelectItem[]>([
-        { label: "Item 1", value: "1" },
-      ]);
-
-      return (
-        <div>
-          <Select items={items} onSelect={onSelect} />
-          <button
-            data-testid="add-item"
-            onClick={() => {
-              setItems([...items, { label: "Item 2", value: "2" }]);
-            }}
-          />
-        </div>
-      );
-    }
-
-    const { getByTestId, container } = render(<TestWrapper />);
-
-    // Initially should have 1 item
-    expect(container.textContent).toContain("Item 1");
-    expect(container.textContent).not.toContain("Item 2");
-
-    // Click "add-item" button
-    const addButton = getByTestId("add-item") as HTMLButtonElement;
-    addButton.click();
-
-    // Should now have 2 items (Select should re-render)
-    expect(container.textContent).toContain("Item 1");
-    expect(container.textContent).toContain("Item 2");
-  });
-
-  it("should not re-render when other props are the same", () => {
-    const onSelect = vi.fn();
-
-    function TestWrapper() {
-      const [items] = useState<SelectItem[]>([
-        { label: "Item 1", value: "1" },
-        { label: "Item 2", value: "2" },
-      ]);
-      const [unrelatedState, setUnrelatedState] = useState(0);
-
-      return (
-        <div>
-          <div data-testid="unrelated">{unrelatedState}</div>
-          <Select
-            items={items}
-            onSelect={onSelect}
-            limit={10}
-            disabled={false}
-          />
-          <button
-            data-testid="update-unrelated"
-            onClick={() => setUnrelatedState((s) => s + 1)}
-          />
-        </div>
-      );
-    }
-
-    const { getByTestId } = render(<TestWrapper />);
-
-    // Update unrelated state
-    const updateButton = getByTestId("update-unrelated") as HTMLButtonElement;
-    updateButton.click();
-
-    // Verify unrelated state changed
-    expect(getByTestId("unrelated").textContent).toBe("1");
-
-    // With React.memo, Select should not re-render because its props haven't changed
-  });
-
-  it("should re-render when limit prop changes", () => {
-    const onSelect = vi.fn();
-    const items: SelectItem[] = [
-      { label: "Item 1", value: "1" },
-      { label: "Item 2", value: "2" },
-      { label: "Item 3", value: "3" },
-      { label: "Item 4", value: "4" },
-    ];
-
-    function TestWrapper() {
-      const [limit, setLimit] = useState<number | undefined>(2);
-
-      return (
-        <div>
-          <Select items={items} onSelect={onSelect} limit={limit} />
-          <button data-testid="change-limit" onClick={() => setLimit(3)} />
-        </div>
-      );
-    }
-
-    const { getByTestId, container } = render(<TestWrapper />);
-
-    // Initially should show 2 items (limit=2)
-    const initialText = container.textContent;
-    expect(initialText).toContain("Item 1");
-    expect(initialText).toContain("Item 2");
-
-    // Change limit
-    const changeLimitButton = getByTestId("change-limit") as HTMLButtonElement;
-    changeLimitButton.click();
-
-    // Should now show 3 items (Select should re-render)
-    const updatedText = container.textContent;
-    expect(updatedText).toContain("Item 1");
-    expect(updatedText).toContain("Item 2");
-    expect(updatedText).toContain("Item 3");
-  });
-
-  it("should re-render when disabled prop changes", () => {
-    const onSelect = vi.fn();
-    const items: SelectItem[] = [{ label: "Item 1", value: "1" }];
-
-    function TestWrapper() {
-      const [disabled, setDisabled] = useState(false);
-
-      return (
-        <div>
-          <Select items={items} onSelect={onSelect} disabled={disabled} />
-          <button
-            data-testid="toggle-disabled"
-            onClick={() => setDisabled((d) => !d)}
-          />
-        </div>
-      );
-    }
-
-    const { getByTestId } = render(<TestWrapper />);
-
-    // Toggle disabled
-    const toggleButton = getByTestId("toggle-disabled") as HTMLButtonElement;
-    toggleButton.click();
-
-    // Select should re-render with new disabled prop
-  });
-
-  it("should use custom comparison for items array", () => {
-    const onSelect = vi.fn();
-
-    // Two arrays with same content but different references
-    const items1: SelectItem[] = [
-      { label: "Item 1", value: "1" },
-      { label: "Item 2", value: "2" },
-    ];
-
-    const items2: SelectItem[] = [
-      { label: "Item 1", value: "1" },
-      { label: "Item 2", value: "2" },
-    ];
-
-    // Verify they're different references
-    expect(items1).not.toBe(items2);
-
-    // Verify content is the same
-    expect(items1.length).toBe(items2.length);
-    items1.forEach((item, i) => {
-      expect(item.value).toBe(items2[i].value);
-      expect(item.label).toBe(items2[i].label);
-    });
-
-    function TestWrapper() {
-      const [items, setItems] = useState(items1);
-
-      return (
-        <div>
-          <Select items={items} onSelect={onSelect} />
-          <button data-testid="swap-items" onClick={() => setItems(items2)} />
-        </div>
-      );
-    }
-
-    const { getByTestId } = render(<TestWrapper />);
-
-    // Swap to items2 (same content, different reference)
-    const swapButton = getByTestId("swap-items") as HTMLButtonElement;
-    swapButton.click();
-
-    // With custom comparison in React.memo, Select should not re-render
-  });
-});