@xmachines/play-tanstack-react-router 1.0.0-beta.1

package/examples/demo/test/browser/back-button-duplicate.browser.test.tsx

@@ -0,0 +1,148 @@
+/**
+ * Browser test: GAP-12 validation - No duplicate history entries
+ *
+ * Validates the architectural fix:
+ * - Components send goto.* events (semantic navigation)
+ * - Browser back/forward sends play.route events
+ * - SignalSyncedHistory prevents duplicate entries via isProcessingBrowserNavigation flag
+ *
+ * Test sequence:
+ * 1. Login → auto-redirect to /dashboard
+ * 2. Click "About" button → sends goto.about event → /about
+ * 3. Click "Home" button → sends goto.home event → /home
+ * 4. Browser back → should go to /about (unique)
+ * 5. Browser back → should go to /dashboard (unique, NOT /home duplicate)
+ *
+ * Expected history: [/, /dashboard, /about, /home]
+ * History length: 4 entries (no duplicates)
+ */
+
+import { test, expect, afterEach } from "vitest";
+import { render, screen, cleanup, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import App from "../../src/App.js";
+
+afterEach(async () => {
+	cleanup();
+});
+
+test("GAP-12: navigation via goto.* events creates single history entries", async () => {
+	// Reset URL BEFORE rendering to ensure clean initial state
+	window.history.pushState({}, "", "/");
+
+	render(<App />);
+	const user = userEvent.setup();
+
+	// Record initial history length
+	const initialLength = window.history.length;
+	console.log(`\n=== Initial history length: ${initialLength} ===`);
+
+	// Step 0: Navigate to login page (if not already there)
+	console.log("\n=== Step 0: Navigate to login ===");
+	if (!screen.queryByLabelText(/username/i)) {
+		await user.click(screen.getByRole("button", { name: /login/i }));
+		await new Promise((resolve) => setTimeout(resolve, 50));
+	}
+
+	// Step 1: Login (sets isAuthenticated=true, auto-redirects to dashboard at /)
+	console.log("\n=== Step 1: Login ===");
+	await user.type(screen.getByLabelText(/username/i), "testuser");
+	await user.type(screen.getByLabelText(/password/i), "password123");
+	await user.click(screen.getByRole("button", { name: /log in/i }));
+
+	// Should auto-redirect to dashboard (at /)
+	await waitFor(
+		() => {
+			expect(window.location.pathname).toBe("/");
+		},
+		{ timeout: 2000 },
+	);
+	console.log("✓ At dashboard (path: /)");
+
+	// Step 2: Navigate to /about via goto.about event
+	console.log("\n=== Step 2: Navigate to /about (goto.about event) ===");
+	const aboutButton = screen
+		.getAllByRole("button")
+		.find((btn) => btn.textContent?.includes("About"));
+	if (!aboutButton) throw new Error("About button not found");
+	await user.click(aboutButton);
+
+	await waitFor(
+		() => {
+			expect(window.location.pathname).toBe("/about");
+		},
+		{ timeout: 2000 },
+	);
+	console.log("✓ At /about");
+
+	// Step 3: Navigate to home via goto.home event
+	// Since user is authenticated, home (/) auto-redirects to dashboard (also /)
+	console.log(
+		"\n=== Step 3: Navigate to home (goto.home event) - authenticated user stays at dashboard ===",
+	);
+	const homeButton = screen
+		.getAllByRole("button")
+		.find((btn) => btn.textContent?.includes("Home"));
+	if (!homeButton) throw new Error("Home button not found");
+	await user.click(homeButton);
+
+	// Authenticated users navigating to / stay at dashboard (/)
+	await waitFor(
+		() => {
+			expect(window.location.pathname).toBe("/");
+		},
+		{ timeout: 2000 },
+	);
+	console.log("✓ At / (dashboard - authenticated user auto-redirect)");
+
+	// Expected history at this point: [/, / (dashboard), /about, /]
+	// Each navigation should create SINGLE entry (no duplicates)
+	const expectedLength = initialLength + 3; // login, about, home->dashboard (all create history entries)
+	console.log(
+		`\n=== History length after navigation: ${window.history.length}, expected: ${expectedLength} ===`,
+	);
+
+	// Step 4: Browser back button #1 (expect /about)
+	console.log("\n=== Step 4: Back button #1 (expect /about) ===");
+	window.history.back();
+
+	await waitFor(
+		() => {
+			console.log(`Current pathname after back #1: ${window.location.pathname}`);
+			expect(window.location.pathname).toBe("/about");
+		},
+		{ timeout: 2000 },
+	);
+	console.log("✓ Back #1 correct: / → /about");
+
+	// Step 5: Browser back button #2 (expect /, NOT duplicate /about!)
+	console.log("\n=== Step 5: Back button #2 (expect /) ===");
+	window.history.back();
+
+	await waitFor(
+		() => {
+			console.log(`Current pathname after back #2: ${window.location.pathname}`);
+			return window.location.pathname === "/";
+		},
+		{ timeout: 2000 },
+	);
+
+	// This validates GAP-12 is fixed
+	// If pathname is /about (duplicate), GAP-12 not fixed
+	// If pathname is / (dashboard), history is unique (GAP-12 resolved)
+
+	if (window.location.pathname === "/about") {
+		console.error("❌ GAP-12 NOT FIXED: Back button went to /about again instead of /");
+		console.error("This indicates duplicate history entries are still being created");
+		console.error("Expected history: [/, / (dashboard), /about, /]");
+		console.error(
+			"Actual history appears to be: [/, / (dashboard), /about, /about, /, /] (duplicates!)",
+		);
+		throw new Error("GAP-12 still present: duplicate history entries detected");
+	}
+
+	expect(window.location.pathname).toBe("/");
+	console.log("✓ Back #2 correct: /about → / (dashboard)");
+	console.log("✅ GAP-12 RESOLVED: Navigation creates unique history entries");
+	console.log("✅ goto.* events + isProcessingBrowserNavigation flag working correctly");
+}, 10000); // 10 second timeout

package/examples/demo/test/browser/back-forward-sync.browser.test.tsx

@@ -0,0 +1,149 @@
+/**
+ * Browser Back/Forward URL Sync Tests
+ *
+ * Tests that browser back/forward navigation keeps URL in sync with actor state.
+ */
+
+import { test, expect, afterEach } from "vitest";
+import { render, screen, cleanup, waitFor } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+import App from "../../src/App.js";
+
+afterEach(async () => {
+	cleanup();
+});
+
+test("Back/Forward: URL stays in sync with actor state", async () => {
+	// Reset URL BEFORE rendering
+	window.history.pushState({}, "", "/");
+
+	const { unmount } = render(<App />);
+	const user = userEvent.setup();
+
+	console.log("Initial URL:", window.location.pathname);
+	expect(window.location.pathname).toBe("/");
+
+	// Navigate to About using the "Back to Home" pattern - click directly in nav
+	const buttons = screen.getAllByRole("button");
+	const aboutButton = buttons.find((b) => b.textContent?.trim() === "About");
+	expect(aboutButton).toBeDefined();
+	await user.click(aboutButton!);
+
+	// Wait for navigation
+	await waitFor(
+		() => {
+			console.log("After clicking About, URL:", window.location.pathname);
+			expect(window.location.pathname).toBe("/about");
+		},
+		{ timeout: 2000 },
+	);
+
+	// Use browser back to go back to home
+	window.history.back();
+	await waitFor(
+		() => {
+			console.log("After back(), URL:", window.location.pathname);
+			expect(window.location.pathname).toBe("/");
+		},
+		{ timeout: 2000 },
+	);
+
+	// Use browser forward to go forward to about
+	window.history.forward();
+	await waitFor(
+		() => {
+			console.log("After forward(), URL:", window.location.pathname);
+			expect(window.location.pathname).toBe("/about");
+		},
+		{ timeout: 2000 },
+	);
+
+	unmount();
+});
+
+test("Back/Forward: Multiple rapid navigations", async () => {
+	// Reset URL BEFORE rendering
+	window.history.pushState({}, "", "/");
+
+	const { unmount } = render(<App />);
+	const user = userEvent.setup();
+
+	// Get all navigation buttons
+	const getButton = (name: string) => {
+		const buttons = screen.getAllByRole("button");
+		return buttons.find((b) => b.textContent?.trim() === name);
+	};
+
+	// Navigate through multiple pages quickly
+	await user.click(getButton("About")!);
+	await waitFor(
+		() => {
+			expect(window.location.pathname).toBe("/about");
+		},
+		{ timeout: 2000 },
+	);
+
+	// Go back and forth
+	window.history.back();
+	await waitFor(
+		() => {
+			console.log("After back(), URL:", window.location.pathname);
+			expect(window.location.pathname).toBe("/");
+		},
+		{ timeout: 2000 },
+	);
+
+	window.history.forward();
+	await waitFor(
+		() => {
+			console.log("After forward(), URL:", window.location.pathname);
+			expect(window.location.pathname).toBe("/about");
+		},
+		{ timeout: 2000 },
+	);
+
+	unmount();
+});
+
+test("Back/Forward: Works correctly", async () => {
+	// Reset URL BEFORE rendering
+	window.history.pushState({}, "", "/");
+
+	const { unmount } = render(<App />);
+	const user = userEvent.setup();
+
+	// Get navigation button helper
+	const getButton = (name: string) => {
+		const buttons = screen.getAllByRole("button");
+		return buttons.find((b) => b.textContent?.trim() === name);
+	};
+
+	// Simple navigation test
+	await user.click(getButton("About")!);
+	await waitFor(
+		() => {
+			expect(window.location.pathname).toBe("/about");
+		},
+		{ timeout: 2000 },
+	);
+
+	// Back
+	window.history.back();
+	await waitFor(
+		() => {
+			expect(window.location.pathname).toBe("/");
+		},
+		{ timeout: 2000 },
+	);
+
+	// Forward
+	window.history.forward();
+	await waitFor(
+		() => {
+			expect(window.location.pathname).toBe("/about");
+		},
+		{ timeout: 2000 },
+	);
+
+	unmount();
+});

package/examples/demo/test/browser/direct-navigation.browser.test.ts

@@ -0,0 +1,146 @@
+/**
+ * GAP: Direct route navigation doesn't load correct page
+ *
+ * Tests that navigating directly to a route URL (e.g., /contact) loads the correct page.
+ * This reproduces the issue: going to http://localhost:3002/contact does not load contact page.
+ */
+
+import { test, expect } from "vitest";
+import { definePlayer } from "@xmachines/play-xstate";
+import { authMachine } from "../../src/machines/auth-machine.js";
+import { catalog } from "../../src/machines/catalog.js";
+import { SignalSyncedHistory } from "@xmachines/play-tanstack-react-router";
+import { extractMachineRoutes } from "@xmachines/play-router";
+
+test("Direct navigation to /contact loads contact page", async () => {
+	const createPlayer = definePlayer({ machine: authMachine, catalog });
+	const actor = createPlayer();
+	actor.start();
+
+	// Extract route tree from machine
+	const routeTree = extractMachineRoutes(authMachine);
+	// Initialize with /contact as initial path - simulates direct navigation
+	const history = new SignalSyncedHistory(actor, routeTree, "/contact");
+
+	await new Promise((resolve) => setTimeout(resolve, 100));
+
+	const snapshot = actor.getSnapshot();
+	console.log(`Direct /contact: state=${snapshot.value}, route=${actor.currentRoute.get()}`);
+
+	expect(snapshot.matches("contact")).toBe(true);
+	expect(actor.currentRoute.get()).toBe("/contact");
+
+	const view = actor.currentView.get();
+	expect(view).toBeTruthy();
+	expect(view?.component).toBe("Contact");
+
+	history.dispose();
+	actor.stop();
+});
+
+test("Direct navigation to /about loads about page", async () => {
+	const createPlayer = definePlayer({ machine: authMachine, catalog });
+	const actor = createPlayer();
+	actor.start();
+
+	const routeTree = extractMachineRoutes(authMachine);
+	const history = new SignalSyncedHistory(actor, routeTree, "/about");
+
+	await new Promise((resolve) => setTimeout(resolve, 100));
+
+	const snapshot = actor.getSnapshot();
+	console.log(`Direct /about: state=${snapshot.value}, route=${actor.currentRoute.get()}`);
+
+	expect(snapshot.matches("about")).toBe(true);
+	expect(actor.currentRoute.get()).toBe("/about");
+
+	const view = actor.currentView.get();
+	expect(view).toBeTruthy();
+	expect(view?.component).toBe("About");
+
+	history.dispose();
+	actor.stop();
+});
+
+test("Direct navigation to /home loads home page", async () => {
+	const createPlayer = definePlayer({ machine: authMachine, catalog });
+	const actor = createPlayer();
+	actor.start();
+
+	const routeTree = extractMachineRoutes(authMachine);
+	// Home route is actually "/" not "/home"
+	const history = new SignalSyncedHistory(actor, routeTree, "/");
+
+	await new Promise((resolve) => setTimeout(resolve, 100));
+
+	const snapshot = actor.getSnapshot();
+	console.log(`Direct /home: state=${snapshot.value}, route=${actor.currentRoute.get()}`);
+
+	expect(snapshot.matches("home")).toBe(true);
+	// Home state uses "/" as route (not "/home")
+	expect(actor.currentRoute.get()).toBe("/");
+
+	const view = actor.currentView.get();
+	expect(view).toBeTruthy();
+	expect(view?.component).toBe("Home");
+
+	history.dispose();
+	actor.stop();
+});
+
+test("Direct navigation to protected route while unauthenticated redirects to login", async () => {
+	const createPlayer = definePlayer({ machine: authMachine, catalog });
+	const actor = createPlayer();
+	actor.start();
+
+	// Try to navigate directly to protected route /dashboard while unauthenticated
+	// Dashboard route is "/" with auth guard, unauthenticated user stays at home (also "/")
+	const routeTree = extractMachineRoutes(authMachine);
+	const history = new SignalSyncedHistory(actor, routeTree, "/");
+
+	await new Promise((resolve) => setTimeout(resolve, 100));
+
+	const snapshot = actor.getSnapshot();
+	console.log(
+		`Direct /dashboard (unauthenticated): state=${snapshot.value}, route=${actor.currentRoute.get()}`,
+	);
+
+	// Unauthenticated user navigating to "/" stays at home (not redirected to login)
+	// Dashboard's always guard redirects to home if not authenticated
+	expect(snapshot.matches("home")).toBe(true);
+
+	history.dispose();
+	actor.stop();
+});
+
+test("Direct navigation to protected route while authenticated loads dashboard", async () => {
+	const createPlayer = definePlayer({ machine: authMachine, catalog });
+	const actor = createPlayer();
+	actor.start();
+
+	// Login first
+	actor.send({ type: "auth.login", username: "test", password: "pass" } as any);
+	expect(actor.getSnapshot().matches("dashboard")).toBe(true);
+
+	// Now navigate directly to /dashboard (which is route "/")
+	const routeTree = extractMachineRoutes(authMachine);
+	const history = new SignalSyncedHistory(actor, routeTree, "/");
+
+	await new Promise((resolve) => setTimeout(resolve, 100));
+
+	const snapshot = actor.getSnapshot();
+	console.log(
+		`Direct /dashboard (authenticated): state=${snapshot.value}, route=${actor.currentRoute.get()}`,
+	);
+
+	expect(snapshot.matches("dashboard")).toBe(true);
+	// Dashboard route is "/" (not "/dashboard")
+	expect(actor.currentRoute.get()).toBe("/");
+
+	const view = actor.currentView.get();
+	expect(view).toBeTruthy();
+	expect(view?.component).toBe("Dashboard");
+
+	history.dispose();
+	actor.stop();
+});