@react-chess-tools/react-chess-puzzle 0.6.2 → 1.0.1

package/src/components/ChessPuzzle/parts/__tests__/Hint.test.tsx

@@ -0,0 +1,158 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { ChessPuzzle } from "../..";
+import { Hint } from "../Hint";
+import { Puzzle } from "../../../../utils";
+
+describe("ChessPuzzle.Hint", () => {
+  const mockPuzzle: Puzzle = {
+    fen: "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1",
+    moves: ["e4", "e5"],
+  };
+
+  it("should have correct displayName", () => {
+    expect(Hint.displayName).toBe("ChessPuzzle.Hint");
+  });
+
+  it("should forward ref to button element", () => {
+    const ref = React.createRef<HTMLElement>();
+
+    render(
+      <ChessPuzzle.Root puzzle={mockPuzzle}>
+        <Hint ref={ref} />
+      </ChessPuzzle.Root>,
+    );
+
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+  });
+
+  it("should forward ref when using asChild", () => {
+    const ref = React.createRef<HTMLElement>();
+
+    render(
+      <ChessPuzzle.Root puzzle={mockPuzzle}>
+        <Hint ref={ref} asChild>
+          <button>Custom Hint</button>
+        </Hint>
+      </ChessPuzzle.Root>,
+    );
+
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+  });
+
+  it("should be visible when status matches showOn", () => {
+    render(
+      <ChessPuzzle.Root puzzle={mockPuzzle}>
+        <Hint showOn={["not-started"]}>Hint</Hint>
+      </ChessPuzzle.Root>,
+    );
+
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+
+  it("should be hidden when status does not match showOn", () => {
+    render(
+      <ChessPuzzle.Root puzzle={mockPuzzle}>
+        <Hint showOn={["solved"]}>Hint</Hint>
+      </ChessPuzzle.Root>,
+    );
+
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  });
+
+  it("should default to showing on not-started and in-progress statuses", () => {
+    render(
+      <ChessPuzzle.Root puzzle={mockPuzzle}>
+        <Hint>Hint</Hint>
+      </ChessPuzzle.Root>,
+    );
+
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+
+  it("should accept multiple statuses in showOn", () => {
+    render(
+      <ChessPuzzle.Root puzzle={mockPuzzle}>
+        <Hint showOn={["not-started", "in-progress", "failed", "solved"]}>
+          Hint
+        </Hint>
+      </ChessPuzzle.Root>,
+    );
+
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+
+  it("should render custom element when asChild is true", () => {
+    render(
+      <ChessPuzzle.Root puzzle={mockPuzzle}>
+        <Hint asChild>
+          <button className="custom-button">Custom Hint</button>
+        </Hint>
+      </ChessPuzzle.Root>,
+    );
+
+    const button = screen.getByRole("button");
+    expect(button).toHaveTextContent("Custom Hint");
+    expect(button).toHaveClass("custom-button");
+  });
+
+  it("should compose onClick handlers with asChild", () => {
+    const childOnClick = jest.fn();
+
+    render(
+      <ChessPuzzle.Root puzzle={mockPuzzle}>
+        <Hint asChild>
+          <button onClick={childOnClick}>Hint</button>
+        </Hint>
+      </ChessPuzzle.Root>,
+    );
+
+    fireEvent.click(screen.getByRole("button"));
+    expect(childOnClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("should throw error when used outside ChessPuzzle.Root", () => {
+    const consoleError = jest
+      .spyOn(console, "error")
+      .mockImplementation(() => {});
+
+    expect(() => {
+      render(<Hint>Hint</Hint>);
+    }).toThrow();
+
+    consoleError.mockRestore();
+  });
+
+  it("should render text children", () => {
+    render(
+      <ChessPuzzle.Root puzzle={mockPuzzle}>
+        <Hint>Show Hint</Hint>
+      </ChessPuzzle.Root>,
+    );
+
+    expect(screen.getByRole("button")).toHaveTextContent("Show Hint");
+  });
+
+  it("should render element children", () => {
+    render(
+      <ChessPuzzle.Root puzzle={mockPuzzle}>
+        <Hint>
+          <span data-testid="child">Hint Icon</span>
+        </Hint>
+      </ChessPuzzle.Root>,
+    );
+
+    expect(screen.getByTestId("child")).toBeInTheDocument();
+  });
+
+  it("should render without children", () => {
+    render(
+      <ChessPuzzle.Root puzzle={mockPuzzle}>
+        <Hint aria-label="Show hint" />
+      </ChessPuzzle.Root>,
+    );
+
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+});

package/src/components/ChessPuzzle/parts/__tests__/PuzzleBoard.test.tsx

@@ -0,0 +1,140 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { ChessPuzzle } from "../..";
+import { PuzzleBoard } from "../PuzzleBoard";
+import { Puzzle } from "../../../../utils";
+import { ChessGame } from "@react-chess-tools/react-chess-game";
+
+describe("ChessPuzzle.PuzzleBoard", () => {
+  const mockPuzzle: Puzzle = {
+    fen: "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1",
+    moves: ["e4", "e5"],
+  };
+
+  it("should have correct displayName", () => {
+    expect(PuzzleBoard.displayName).toBe("ChessPuzzle.PuzzleBoard");
+  });
+
+  it("should forward ref to underlying Board component", () => {
+    const ref = React.createRef<HTMLDivElement>();
+
+    render(
+      <ChessPuzzle.Root puzzle={mockPuzzle}>
+        <PuzzleBoard ref={ref} />
+      </ChessPuzzle.Root>,
+    );
+
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+  });
+
+  it("should allow focusing via ref", () => {
+    const ref = React.createRef<HTMLDivElement>();
+
+    render(
+      <ChessPuzzle.Root puzzle={mockPuzzle}>
+        <PuzzleBoard ref={ref} tabIndex={0} />
+      </ChessPuzzle.Root>,
+    );
+
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+
+    // Note: focus() doesn't work in JSDOM, but we can verify the ref points to the element
+    // In a real browser, ref.current?.focus() would set document.activeElement to ref.current
+  });
+
+  it("should apply custom className", () => {
+    const { container } = render(
+      <ChessPuzzle.Root puzzle={mockPuzzle}>
+        <PuzzleBoard className="custom-puzzle-board-class" />
+      </ChessPuzzle.Root>,
+    );
+
+    const board = container.querySelector('[style*="position: relative"]');
+    expect(board).toHaveClass("custom-puzzle-board-class");
+  });
+
+  it("should apply custom style", () => {
+    const customStyle = { border: "2px solid blue", margin: "15px" };
+
+    const { container } = render(
+      <ChessPuzzle.Root puzzle={mockPuzzle}>
+        <PuzzleBoard style={customStyle} />
+      </ChessPuzzle.Root>,
+    );
+
+    const board = container.querySelector('[style*="position: relative"]');
+    expect(board).toHaveStyle({ border: "2px solid blue" });
+    expect(board).toHaveStyle({ margin: "15px" });
+  });
+
+  it("should apply custom id", () => {
+    const { container } = render(
+      <ChessPuzzle.Root puzzle={mockPuzzle}>
+        <PuzzleBoard id="custom-puzzle-board-id" />
+      </ChessPuzzle.Root>,
+    );
+
+    const board = container.querySelector('[style*="position: relative"]');
+    expect(board).toHaveAttribute("id", "custom-puzzle-board-id");
+  });
+
+  it("should apply data-* attributes", () => {
+    render(
+      <ChessPuzzle.Root puzzle={mockPuzzle}>
+        <PuzzleBoard data-testid="puzzle-board" data-custom="puzzle-value" />
+      </ChessPuzzle.Root>,
+    );
+
+    const board = screen.getByTestId("puzzle-board");
+    expect(board).toHaveAttribute("data-custom", "puzzle-value");
+  });
+
+  it("should apply aria-* attributes", () => {
+    const { container } = render(
+      <ChessPuzzle.Root puzzle={mockPuzzle}>
+        <PuzzleBoard aria-label="Puzzle board" aria-describedby="puzzle-desc" />
+      </ChessPuzzle.Root>,
+    );
+
+    const board = container.querySelector('[style*="position: relative"]');
+    expect(board).toHaveAttribute("aria-label", "Puzzle board");
+    expect(board).toHaveAttribute("aria-describedby", "puzzle-desc");
+  });
+
+  it("should accept custom onClick handler", () => {
+    const handleClick = jest.fn();
+
+    const { container } = render(
+      <ChessPuzzle.Root puzzle={mockPuzzle}>
+        <PuzzleBoard onClick={handleClick} />
+      </ChessPuzzle.Root>,
+    );
+
+    const board = container.querySelector(
+      '[style*="position: relative"]',
+    ) as HTMLElement;
+    board?.click();
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("should throw error when used outside ChessPuzzle.Root", () => {
+    // Suppress console.error for this test
+    const consoleError = jest
+      .spyOn(console, "error")
+      .mockImplementation(() => {});
+
+    expect(() => {
+      render(
+        <ChessGame.Root>
+          <PuzzleBoard />
+        </ChessGame.Root>,
+      );
+    }).toThrow(
+      "useChessPuzzleContext must be used within a ChessPuzzle component",
+    );
+
+    consoleError.mockRestore();
+  });
+});

package/src/components/ChessPuzzle/parts/__tests__/Reset.test.tsx

@@ -0,0 +1,341 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { ChessPuzzle } from "../..";
+import { Reset } from "../Reset";
+import { Puzzle } from "../../../../utils";
+
+describe("ChessPuzzle.Reset", () => {
+  const mockPuzzle: Puzzle = {
+    fen: "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1",
+    moves: ["e4", "e5"],
+  };
+
+  describe("displayName", () => {
+    it("should have correct displayName", () => {
+      expect(Reset.displayName).toBe("ChessPuzzle.Reset");
+    });
+  });
+
+  describe("ref forwarding", () => {
+    it("should forward ref to button element", () => {
+      const ref = React.createRef<HTMLElement>();
+
+      render(
+        <ChessPuzzle.Root puzzle={mockPuzzle}>
+          <Reset
+            ref={ref}
+            showOn={["not-started", "in-progress", "failed", "solved"]}
+          />
+        </ChessPuzzle.Root>,
+      );
+
+      expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+    });
+
+    it("should forward ref when using asChild", () => {
+      const ref = React.createRef<HTMLElement>();
+
+      render(
+        <ChessPuzzle.Root puzzle={mockPuzzle}>
+          <Reset
+            ref={ref}
+            asChild
+            showOn={["not-started", "in-progress", "failed", "solved"]}
+          >
+            <button>Custom Reset</button>
+          </Reset>
+        </ChessPuzzle.Root>,
+      );
+
+      expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+    });
+
+    it("should support callback refs", () => {
+      let capturedRef: HTMLElement | null = null;
+      const callbackRef = (ref: HTMLElement | null) => {
+        capturedRef = ref;
+      };
+
+      render(
+        <ChessPuzzle.Root puzzle={mockPuzzle}>
+          <Reset
+            ref={callbackRef}
+            showOn={["not-started", "in-progress", "failed", "solved"]}
+          />
+        </ChessPuzzle.Root>,
+      );
+
+      expect(capturedRef).toBeInstanceOf(HTMLButtonElement);
+    });
+  });
+
+  describe("visibility based on showOn prop", () => {
+    it("should be visible when status matches showOn", () => {
+      render(
+        <ChessPuzzle.Root puzzle={mockPuzzle}>
+          <Reset showOn={["not-started"]}>Reset</Reset>
+        </ChessPuzzle.Root>,
+      );
+
+      expect(screen.getByRole("button")).toBeInTheDocument();
+    });
+
+    it("should be hidden when status does not match showOn", () => {
+      render(
+        <ChessPuzzle.Root puzzle={mockPuzzle}>
+          <Reset showOn={["solved"]}>Reset</Reset>
+        </ChessPuzzle.Root>,
+      );
+
+      expect(screen.queryByRole("button")).not.toBeInTheDocument();
+    });
+
+    it("should default to showing on failed and solved statuses", () => {
+      // Default showOn is ["failed", "solved"], so it should be hidden at start
+      render(
+        <ChessPuzzle.Root puzzle={mockPuzzle}>
+          <Reset>Reset</Reset>
+        </ChessPuzzle.Root>,
+      );
+
+      expect(screen.queryByRole("button")).not.toBeInTheDocument();
+    });
+
+    it("should accept multiple statuses in showOn", () => {
+      render(
+        <ChessPuzzle.Root puzzle={mockPuzzle}>
+          <Reset showOn={["not-started", "in-progress", "failed", "solved"]}>
+            Reset
+          </Reset>
+        </ChessPuzzle.Root>,
+      );
+
+      expect(screen.getByRole("button")).toBeInTheDocument();
+    });
+  });
+
+  describe("prop spreading", () => {
+    it("should apply custom className", () => {
+      render(
+        <ChessPuzzle.Root puzzle={mockPuzzle}>
+          <Reset className="custom-reset-class" showOn={["not-started"]}>
+            Reset
+          </Reset>
+        </ChessPuzzle.Root>,
+      );
+
+      expect(screen.getByRole("button")).toHaveClass("custom-reset-class");
+    });
+
+    it("should apply custom id", () => {
+      render(
+        <ChessPuzzle.Root puzzle={mockPuzzle}>
+          <Reset id="reset-button" showOn={["not-started"]}>
+            Reset
+          </Reset>
+        </ChessPuzzle.Root>,
+      );
+
+      expect(screen.getByRole("button")).toHaveAttribute("id", "reset-button");
+    });
+
+    it("should apply data-* attributes", () => {
+      render(
+        <ChessPuzzle.Root puzzle={mockPuzzle}>
+          <Reset
+            data-testid="reset"
+            data-custom="value"
+            showOn={["not-started"]}
+          >
+            Reset
+          </Reset>
+        </ChessPuzzle.Root>,
+      );
+
+      const button = screen.getByTestId("reset");
+      expect(button).toHaveAttribute("data-custom", "value");
+    });
+
+    it("should apply aria-* attributes", () => {
+      render(
+        <ChessPuzzle.Root puzzle={mockPuzzle}>
+          <Reset aria-label="Reset puzzle" showOn={["not-started"]}>
+            Reset
+          </Reset>
+        </ChessPuzzle.Root>,
+      );
+
+      expect(screen.getByRole("button")).toHaveAttribute(
+        "aria-label",
+        "Reset puzzle",
+      );
+    });
+
+    it("should apply disabled attribute", () => {
+      render(
+        <ChessPuzzle.Root puzzle={mockPuzzle}>
+          <Reset disabled showOn={["not-started"]}>
+            Reset
+          </Reset>
+        </ChessPuzzle.Root>,
+      );
+
+      expect(screen.getByRole("button")).toBeDisabled();
+    });
+  });
+
+  describe("asChild pattern", () => {
+    it("should render custom element when asChild is true", () => {
+      render(
+        <ChessPuzzle.Root puzzle={mockPuzzle}>
+          <Reset asChild showOn={["not-started"]}>
+            <button className="custom-button">Custom Reset</button>
+          </Reset>
+        </ChessPuzzle.Root>,
+      );
+
+      const button = screen.getByRole("button");
+      expect(button).toHaveTextContent("Custom Reset");
+      expect(button).toHaveClass("custom-button");
+    });
+
+    it("should merge className with asChild element", () => {
+      render(
+        <ChessPuzzle.Root puzzle={mockPuzzle}>
+          <Reset asChild className="reset-class" showOn={["not-started"]}>
+            <button className="child-class">Reset</button>
+          </Reset>
+        </ChessPuzzle.Root>,
+      );
+
+      const button = screen.getByRole("button");
+      expect(button).toHaveClass("reset-class");
+      expect(button).toHaveClass("child-class");
+    });
+
+    it("should compose onClick handlers with asChild", () => {
+      const childOnClick = jest.fn();
+
+      render(
+        <ChessPuzzle.Root puzzle={mockPuzzle}>
+          <Reset asChild showOn={["not-started"]}>
+            <button onClick={childOnClick}>Reset</button>
+          </Reset>
+        </ChessPuzzle.Root>,
+      );
+
+      fireEvent.click(screen.getByRole("button"));
+      expect(childOnClick).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("functionality", () => {
+    it("should call onReset callback when clicked", () => {
+      const handleReset = jest.fn();
+
+      render(
+        <ChessPuzzle.Root puzzle={mockPuzzle}>
+          <Reset onReset={handleReset} showOn={["not-started"]}>
+            Reset
+          </Reset>
+        </ChessPuzzle.Root>,
+      );
+
+      fireEvent.click(screen.getByRole("button"));
+      expect(handleReset).toHaveBeenCalledTimes(1);
+    });
+
+    it("should pass puzzle context to onReset callback", () => {
+      const handleReset = jest.fn();
+
+      render(
+        <ChessPuzzle.Root puzzle={mockPuzzle}>
+          <Reset onReset={handleReset} showOn={["not-started"]}>
+            Reset
+          </Reset>
+        </ChessPuzzle.Root>,
+      );
+
+      fireEvent.click(screen.getByRole("button"));
+      expect(handleReset).toHaveBeenCalledWith(
+        expect.objectContaining({
+          puzzle: mockPuzzle,
+          status: expect.any(String),
+          changePuzzle: expect.any(Function),
+        }),
+      );
+    });
+
+    it("should have type button by default", () => {
+      render(
+        <ChessPuzzle.Root puzzle={mockPuzzle}>
+          <Reset showOn={["not-started"]}>Reset</Reset>
+        </ChessPuzzle.Root>,
+      );
+
+      expect(screen.getByRole("button")).toHaveAttribute("type", "button");
+    });
+  });
+
+  describe("context validation", () => {
+    it("should throw error when used outside ChessPuzzle.Root", () => {
+      const consoleError = jest
+        .spyOn(console, "error")
+        .mockImplementation(() => {});
+
+      expect(() => {
+        render(<Reset showOn={["not-started"]}>Reset</Reset>);
+      }).toThrow();
+
+      consoleError.mockRestore();
+    });
+  });
+
+  describe("children", () => {
+    it("should render text children", () => {
+      render(
+        <ChessPuzzle.Root puzzle={mockPuzzle}>
+          <Reset showOn={["not-started"]}>Reset Puzzle</Reset>
+        </ChessPuzzle.Root>,
+      );
+
+      expect(screen.getByRole("button")).toHaveTextContent("Reset Puzzle");
+    });
+
+    it("should render element children", () => {
+      render(
+        <ChessPuzzle.Root puzzle={mockPuzzle}>
+          <Reset showOn={["not-started"]}>
+            <span data-testid="child">Reset Icon</span>
+          </Reset>
+        </ChessPuzzle.Root>,
+      );
+
+      expect(screen.getByTestId("child")).toBeInTheDocument();
+    });
+
+    it("should render without children", () => {
+      render(
+        <ChessPuzzle.Root puzzle={mockPuzzle}>
+          <Reset showOn={["not-started"]} aria-label="Reset" />
+        </ChessPuzzle.Root>,
+      );
+
+      expect(screen.getByRole("button")).toBeInTheDocument();
+    });
+  });
+
+  describe("backward compatibility", () => {
+    it("should work with minimal props when status matches default showOn", () => {
+      // Since default showOn is ["failed", "solved"], we need to set showOn to see the button
+      render(
+        <ChessPuzzle.Root puzzle={mockPuzzle}>
+          <Reset showOn={["not-started"]}>Reset</Reset>
+        </ChessPuzzle.Root>,
+      );
+
+      expect(screen.getByRole("button")).toBeInTheDocument();
+    });
+  });
+});

package/src/components/ChessPuzzle/parts/__tests__/Root.test.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { ChessPuzzle } from "../..";
+import { Root } from "../Root";
+import { Puzzle } from "../../../../utils";
+
+describe("ChessPuzzle.Root", () => {
+  const mockPuzzle: Puzzle = {
+    fen: "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1",
+    moves: ["e4", "e5"],
+  };
+
+  it("should have correct displayName", () => {
+    expect(Root.displayName).toBe("ChessPuzzle.Root");
+  });
+
+  it("should render children correctly", () => {
+    render(
+      <ChessPuzzle.Root puzzle={mockPuzzle}>
+        <div data-testid="child">Child Component</div>
+      </ChessPuzzle.Root>,
+    );
+
+    expect(screen.getByTestId("child")).toBeInTheDocument();
+    expect(screen.getByText("Child Component")).toBeInTheDocument();
+  });
+
+  it("should render multiple children", () => {
+    render(
+      <ChessPuzzle.Root puzzle={mockPuzzle}>
+        <div data-testid="child-1">Child 1</div>
+        <div data-testid="child-2">Child 2</div>
+        <div data-testid="child-3">Child 3</div>
+      </ChessPuzzle.Root>,
+    );
+
+    expect(screen.getByTestId("child-1")).toBeInTheDocument();
+    expect(screen.getByTestId("child-2")).toBeInTheDocument();
+    expect(screen.getByTestId("child-3")).toBeInTheDocument();
+  });
+});