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

package/examples/demo/test/browser/state-driven.browser.test.ts

@@ -0,0 +1,112 @@
+/**
+ * DEMO-04: State-Driven Reset Invariant Test
+ *
+ * Validates that browser back button sends event to actor (State-Driven Reset).
+ * Infrastructure (SignalSyncedHistory) listens to popstate and sends play.route event.
+ * Actor guard validates navigation - infrastructure doesn't decide.
+ */
+
+import { test, vi } from "vitest";
+import { expect } from "vitest";
+import { definePlayer } from "@xmachines/play-xstate";
+import { authMachine } from "../../src/machines/auth-machine.js";
+import { SignalSyncedHistory } from "@xmachines/play-tanstack-react-router";
+
+test("DEMO-04: State-Driven Reset - Browser back sends event to actor", async () => {
+	// Create player without catalog for pure logic testing
+	const createPlayer = definePlayer({ machine: authMachine });
+	const actor = createPlayer();
+	actor.start();
+
+	// Login to dashboard
+	actor.send({ type: "auth.login", username: "test", password: "pass" } as any);
+	expect(actor.getSnapshot().matches("dashboard")).toBe(true);
+	expect(actor.currentRoute.get()).toBe("/");
+
+	// Simulate browser back button: send play.route event to a different public route
+	// (In real app, SignalSyncedHistory listens to popstate and sends this event)
+	actor.send({ type: "play.route", to: "#about" } as any);
+
+	// Actor processes event - navigate to about route (authenticated users can access public routes)
+	const currentState = actor.getSnapshot();
+
+	// Verify actor handled the navigation event
+	expect(currentState).toBeDefined();
+	expect(currentState.matches("about")).toBe(true);
+
+	// Now test guard behavior: authenticated user navigating to / auto-redirects to dashboard
+	actor.send({ type: "play.route", to: "#home" } as any);
+	expect(actor.getSnapshot().matches("dashboard")).toBe(true); // Always guard triggers for authenticated user
+
+	// Logout, then verify user goes back to home
+	actor.send({ type: "auth.logout" } as any);
+	expect(actor.getSnapshot().matches("home")).toBe(true);
+
+	// Simulate browser forward button trying to navigate to / (dashboard requires auth)
+	// Guard should reject dashboard transition because user is logged out, stay at home
+	actor.send({ type: "play.route", to: "#home" } as any);
+
+	const afterNavState = actor.getSnapshot();
+	expect(afterNavState.matches("home")).toBe(true);
+	expect(actor.currentRoute.get()).toBe("/");
+
+	actor.stop();
+
+	// Allow microtasks to complete to prevent async activity warnings
+	await new Promise((resolve) => setTimeout(resolve, 10));
+});
+
+test("DEMO-04b: Browser navigation with SignalSyncedHistory integration", async () => {
+	// Create player with signal-synced history
+	const createPlayer = definePlayer({ machine: authMachine });
+	const actor = createPlayer();
+	actor.start();
+
+	// Initialize SignalSyncedHistory with actor
+	const history = new SignalSyncedHistory(actor, "/");
+	expect(actor.currentRoute.get()).toBe("/");
+
+	// Navigate forward through actor (which updates history)
+	actor.send({ type: "play.route", to: "#home" } as any);
+	await vi.waitFor(
+		() => {
+			expect(actor.currentRoute.get()).toBe("/");
+		},
+		{ timeout: 100 },
+	);
+
+	actor.send({ type: "play.route", to: "#about" } as any);
+	await vi.waitFor(
+		() => {
+			expect(actor.currentRoute.get()).toBe("/about");
+		},
+		{ timeout: 100 },
+	);
+
+	// Simulate browser back button by triggering popstate
+	// In real browser: window.history.back() → popstate event → handlePopstate → syncActorFromUrl
+	// In test: directly trigger the navigation that popstate would cause
+	actor.send({ type: "play.route", to: "#home" } as any);
+	await vi.waitFor(
+		() => {
+			expect(actor.currentRoute.get()).toBe("/");
+		},
+		{ timeout: 100 },
+	);
+
+	// Simulate another back
+	actor.send({ type: "play.route", to: "#home" } as any);
+	await vi.waitFor(
+		() => {
+			expect(actor.currentRoute.get()).toBe("/");
+		},
+		{ timeout: 100 },
+	);
+
+	// Cleanup
+	history.dispose();
+	actor.stop();
+
+	// Allow microtasks to complete
+	await new Promise((resolve) => setTimeout(resolve, 10));
+});

package/examples/demo/test/browser/tanstack-integration.browser.test.tsx

@@ -0,0 +1,61 @@
+/**
+ * TanStack Integration Tests
+ *
+ * Validates that PlayRouterProvider properly integrates TanStack Router.
+ */
+import { describe, it, expect, beforeEach, afterEach } from "vitest";
+import { render, screen, waitFor, cleanup } from "@testing-library/react";
+import App from "../../src/App.js";
+
+describe("TanStack Router Integration", () => {
+	beforeEach(() => {
+		window.history.replaceState(null, "", "/");
+	});
+
+	afterEach(() => {
+		cleanup();
+	});
+
+	it("renders with RouterProvider context", async () => {
+		render(<App />);
+
+		await waitFor(() => {
+			expect(screen.getByRole("heading", { name: /Welcome/i })).toBeInTheDocument();
+		});
+	});
+
+	it("detects window.history.pushState naturally (no manual popstate)", async () => {
+		render(<App />);
+
+		// Navigate using window.history.pushState
+		window.history.pushState(null, "", "/dashboard");
+
+		// TanStack Router's createPlayRouter detects this automatically
+		// No manual popstate dispatch needed!
+
+		await waitFor(
+			() => {
+				expect(window.location.pathname).toBe("/dashboard");
+			},
+			{ timeout: 1000 },
+		);
+	});
+
+	it("handles browser back button", async () => {
+		render(<App />);
+
+		// Navigate forward
+		window.history.pushState(null, "", "/settings");
+		await waitFor(() => expect(window.location.pathname).toBe("/settings"));
+
+		// Navigate back
+		window.history.back();
+
+		await waitFor(
+			() => {
+				expect(window.location.pathname).toBe("/");
+			},
+			{ timeout: 1000 },
+		);
+	});
+});

package/examples/demo/test/browser/uat-xstate-route-regression.browser.test.ts

@@ -0,0 +1,58 @@
+/**
+ * UAT Test 6 Regression Tests - play.route event handling
+ *
+ * TODO: Rewrite after SignalSyncedHistory removal (Phase 16.19-04)
+ *
+ * These tests verified UAT scenarios using the now-deleted SignalSyncedHistory
+ * and createPlayRouter APIs. The tested behaviors are:
+ * 1. Opening with /someinvalidstate - should stay at current state (no crash)
+ * 2. Opening with /about - should render About component, not Login
+ * 3. Back/forward navigation - rendering should sync with URL
+ * 4. Auth state persistence - navigating between authenticated/anonymous states preserves auth
+ *
+ * Migration: Rewrite using TanStackReactRouterBridge + RouteMap directly.
+ * See packages/play-tanstack-react-router/test/tanstack-router-bridge.test.ts
+ * for the new testing pattern.
+ *
+ * The core behavior is covered by the integration tests in tanstack-router-bridge.test.ts.
+ */
+
+import { test } from "vitest";
+
+// All tests skipped pending migration to TanStackReactRouterBridge API
+// TODO: Migrate each test using TanStackReactRouterBridge directly
+
+test.skip("UAT-1: Opening with /someinvalidstate stays at current state", () => {
+	// TODO: Rewrite using TanStackReactRouterBridge
+	// Original test used createPlayRouter({ actor, machine, initialPath: '/someinvalidstate' })
+	// New test should use: new TanStackReactRouterBridge(router, actor, routeMap)
+});
+
+test.skip("UAT-2: Opening with /about renders About component, not Login", () => {
+	// TODO: Rewrite using TanStackReactRouterBridge
+});
+
+test.skip("UAT-2b: Opening with / renders Home component", () => {
+	// TODO: Rewrite using TanStackReactRouterBridge
+});
+
+test.skip("UAT-2c: Opening with /contact renders Contact component, not Login", () => {
+	// TODO: Rewrite using TanStackReactRouterBridge
+});
+
+test.skip("UAT-3: Back/forward navigation - rendering syncs with URL", () => {
+	// TODO: Rewrite using TanStackReactRouterBridge
+	// The bridge.connect()/disconnect() pattern replaces SignalSyncedHistory.getHistory().back()
+});
+
+test.skip("UAT-4: Auth state preserved when navigating between authenticated/anonymous states", () => {
+	// TODO: Rewrite using TanStackReactRouterBridge
+});
+
+test.skip("UAT-4b: Browser back/forward preserves auth state", () => {
+	// TODO: Rewrite using TanStackReactRouterBridge
+});
+
+test.skip("UAT-5: Protected route with play.route respects authentication guard", () => {
+	// TODO: Rewrite using TanStackReactRouterBridge
+});

package/examples/demo/test/browser/xstate-route-events.browser.test.ts

@@ -0,0 +1,293 @@
+/**
+ * Browser play.route Event Tests
+ *
+ * Validates that browser navigation (back/forward, direct URLs) sends play.route
+ * events to the actor for states with meta.route.
+ *
+ * **KNOWN ISSUE:** Vitest v4 browser mode crashes when calling baseHistory.back()
+ * multiple times in a single test. These tests are skipped until the issue is resolved.
+ * See test notes in this file for current limitations.
+ *
+ * Run with: npm run test:browser -w demo-app
+ */
+
+import { test, expect, vi } 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.skip("Browser back button sends play.route event with correct state ID", async () => {
+	const createPlayer = definePlayer({ machine: authMachine, catalog });
+	const actor = createPlayer();
+	actor.start();
+
+	// Login first (authenticated state)
+	actor.send({ type: "auth.login", username: "test", password: "pass" } as any);
+	expect(actor.getSnapshot().matches("dashboard")).toBe(true);
+
+	// Extract route tree for bidirectional mapping
+	const routeTree = extractMachineRoutes(authMachine);
+
+	// Spy on actor.send to capture events
+	const sentEvents: any[] = [];
+	const originalSend = actor.send.bind(actor);
+	actor.send = vi.fn((event: any) => {
+		sentEvents.push(event);
+		return originalSend(event);
+	});
+
+	// Initialize history with route tree
+	const history = new SignalSyncedHistory(actor, routeTree, "/dashboard");
+	const baseHistory = history.getHistory();
+
+	await new Promise((resolve) => setTimeout(resolve, 100));
+
+	// Clear initialization events
+	sentEvents.length = 0;
+
+	// Navigate forward
+	actor.send({ type: "goto.home" } as any);
+	await new Promise((resolve) => setTimeout(resolve, 100));
+
+	actor.send({ type: "goto.about" } as any);
+	await new Promise((resolve) => setTimeout(resolve, 100));
+
+	// Clear forward navigation events
+	sentEvents.length = 0;
+
+	// Click back button (simulated)
+	baseHistory.back();
+	await new Promise((resolve) => setTimeout(resolve, 150));
+
+	// Verify play.route event was sent
+	const xstateRouteEvents = sentEvents.filter((e) => e.type === "play.route");
+	expect(xstateRouteEvents.length).toBeGreaterThan(0);
+	expect(xstateRouteEvents[0].to).toBe("#home");
+
+	history.dispose();
+	actor.stop();
+
+	await new Promise((resolve) => setTimeout(resolve, 50));
+});
+
+test.skip("Direct URL navigation sends play.route event", async () => {
+	const createPlayer = definePlayer({ machine: authMachine, catalog });
+	const actor = createPlayer();
+
+	// Spy on actor.send before starting
+	const sentEvents: any[] = [];
+	const originalSend = actor.send.bind(actor);
+	actor.send = vi.fn((event: any) => {
+		sentEvents.push(event);
+		return originalSend(event);
+	});
+
+	actor.start();
+
+	// Extract route tree
+	const routeTree = extractMachineRoutes(authMachine);
+
+	// Navigate directly to /about (simulates typing URL in address bar)
+	const history = new SignalSyncedHistory(actor, routeTree, "/about");
+
+	await new Promise((resolve) => setTimeout(resolve, 100));
+
+	// Verify play.route event was sent during initialization
+	const xstateRouteEvents = sentEvents.filter((e) => e.type === "play.route");
+	expect(xstateRouteEvents.length).toBeGreaterThan(0);
+	expect(xstateRouteEvents[0].to).toBe("#about");
+
+	// Verify state changed correctly
+	const snapshot = actor.getSnapshot();
+	expect(snapshot.matches("about")).toBe(true);
+
+	history.dispose();
+	actor.stop();
+
+	await new Promise((resolve) => setTimeout(resolve, 50));
+});
+
+test.skip("Forward button sends play.route event", async () => {
+	const createPlayer = definePlayer({ machine: authMachine, catalog });
+	const actor = createPlayer();
+	actor.start();
+
+	// Login
+	actor.send({ type: "auth.login", username: "test", password: "pass" } as any);
+
+	const routeTree = extractMachineRoutes(authMachine);
+
+	// Spy on actor.send
+	const sentEvents: any[] = [];
+	const originalSend = actor.send.bind(actor);
+	actor.send = vi.fn((event: any) => {
+		sentEvents.push(event);
+		return originalSend(event);
+	});
+
+	const history = new SignalSyncedHistory(actor, routeTree, "/dashboard");
+	const baseHistory = history.getHistory();
+
+	await new Promise((resolve) => setTimeout(resolve, 100));
+
+	// Navigate forward
+	actor.send({ type: "goto.home" } as any);
+	await new Promise((resolve) => setTimeout(resolve, 100));
+
+	actor.send({ type: "goto.about" } as any);
+	await new Promise((resolve) => setTimeout(resolve, 100));
+
+	// Go back
+	baseHistory.back();
+	await new Promise((resolve) => setTimeout(resolve, 150));
+
+	// Clear events
+	sentEvents.length = 0;
+
+	// Go forward
+	baseHistory.forward();
+	await new Promise((resolve) => setTimeout(resolve, 150));
+
+	// Verify play.route event was sent
+	const xstateRouteEvents = sentEvents.filter((e) => e.type === "play.route");
+	expect(xstateRouteEvents.length).toBeGreaterThan(0);
+	expect(xstateRouteEvents[0].to).toBe("#about");
+
+	history.dispose();
+	actor.stop();
+
+	await new Promise((resolve) => setTimeout(resolve, 50));
+});
+
+test.skip("URL bar sync reflects state ID changes", async () => {
+	const createPlayer = definePlayer({ machine: authMachine, catalog });
+	const actor = createPlayer();
+	actor.start();
+
+	const routeTree = extractMachineRoutes(authMachine);
+	const history = new SignalSyncedHistory(actor, routeTree, "/");
+	const baseHistory = history.getHistory();
+
+	await new Promise((resolve) => setTimeout(resolve, 100));
+
+	// Send play.route from actor (simulates state transition)
+	actor.send({ type: "play.route", to: "#about" } as any);
+
+	await new Promise((resolve) => setTimeout(resolve, 150));
+
+	// Verify URL updated
+	const currentLocation = baseHistory.location.pathname;
+	expect(currentLocation).toBe("/about");
+
+	history.dispose();
+	actor.stop();
+
+	await new Promise((resolve) => setTimeout(resolve, 50));
+});
+
+test.skip("Protected route sends play.route with authentication guard", async () => {
+	const createPlayer = definePlayer({ machine: authMachine, catalog });
+	const actor = createPlayer();
+	actor.start();
+
+	// Login as authenticated user
+	actor.send({ type: "auth.login", username: "test", password: "pass" } as any);
+	expect(actor.getSnapshot().matches("dashboard")).toBe(true);
+
+	const routeTree = extractMachineRoutes(authMachine);
+
+	// Spy on actor.send
+	const sentEvents: any[] = [];
+	const originalSend = actor.send.bind(actor);
+	actor.send = vi.fn((event: any) => {
+		sentEvents.push(event);
+		return originalSend(event);
+	});
+
+	const history = new SignalSyncedHistory(actor, routeTree, "/dashboard");
+
+	await new Promise((resolve) => setTimeout(resolve, 100));
+
+	// Clear initialization events
+	sentEvents.length = 0;
+
+	// Navigate directly to protected route
+	const baseHistory = history.getHistory();
+	baseHistory.push("/settings");
+
+	await new Promise((resolve) => setTimeout(resolve, 150));
+
+	// Verify play.route event was sent
+	const xstateRouteEvents = sentEvents.filter((e) => e.type === "play.route");
+	expect(xstateRouteEvents.length).toBeGreaterThan(0);
+	expect(xstateRouteEvents[0].to).toBe("#settings");
+
+	// Verify guard allowed navigation (authenticated user)
+	expect(actor.getSnapshot().matches("settings")).toBe(true);
+
+	history.dispose();
+	actor.stop();
+
+	await new Promise((resolve) => setTimeout(resolve, 50));
+});
+
+test.skip("GAP-12 fix preserved: No duplicate history entries with play.route", async () => {
+	const createPlayer = definePlayer({ machine: authMachine, catalog });
+	const actor = createPlayer();
+	actor.start();
+
+	// Login
+	actor.send({ type: "auth.login", username: "test", password: "pass" } as any);
+
+	const routeTree = extractMachineRoutes(authMachine);
+	const history = new SignalSyncedHistory(actor, routeTree, "/dashboard");
+	const baseHistory = history.getHistory();
+
+	await new Promise((resolve) => setTimeout(resolve, 100));
+
+	// Navigate forward multiple times
+	actor.send({ type: "goto.home" } as any);
+	await new Promise((resolve) => setTimeout(resolve, 100));
+
+	actor.send({ type: "goto.about" } as any);
+	await new Promise((resolve) => setTimeout(resolve, 100));
+
+	actor.send({ type: "goto.contact" } as any);
+	await new Promise((resolve) => setTimeout(resolve, 100));
+
+	// Navigate back 3 times
+	baseHistory.back();
+	await new Promise((resolve) => setTimeout(resolve, 150));
+	expect(actor.currentRoute.get()).toBe("/about");
+
+	baseHistory.back();
+	await new Promise((resolve) => setTimeout(resolve, 150));
+	expect(actor.currentRoute.get()).toBe("/home");
+
+	baseHistory.back();
+	await new Promise((resolve) => setTimeout(resolve, 150));
+	expect(actor.currentRoute.get()).toBe("/dashboard");
+
+	// Navigate forward 3 times - should return to /contact
+	baseHistory.forward();
+	await new Promise((resolve) => setTimeout(resolve, 150));
+	expect(actor.currentRoute.get()).toBe("/home");
+
+	baseHistory.forward();
+	await new Promise((resolve) => setTimeout(resolve, 150));
+	expect(actor.currentRoute.get()).toBe("/about");
+
+	baseHistory.forward();
+	await new Promise((resolve) => setTimeout(resolve, 150));
+	expect(actor.currentRoute.get()).toBe("/contact");
+
+	// Verify we returned to the correct state (no duplicates in history)
+	expect(actor.getSnapshot().matches("contact")).toBe(true);
+
+	history.dispose();
+	actor.stop();
+
+	await new Promise((resolve) => setTimeout(resolve, 50));
+});

package/examples/demo/test/browser-back-view-rendering.test.ts

@@ -0,0 +1,104 @@
+/**
+ * GAP-11: Browser Back Button View Rendering Test
+ *
+ * Tests that browser back/forward buttons update BOTH URL and rendered view.
+ * This test validates the fix in Plan 10-15 (removing Signal.Computed wrapper).
+ *
+ * Bug: currentView was wrapped in Signal.Computed, which didn't notify watchers
+ * when _viewSignal.set() was called during actor transitions. URL updated but
+ * PlayRenderer's useSignalEffect never received notifications, so view didn't re-render.
+ *
+ * Fix: Changed currentView from Signal.Computed to direct Signal.State exposure.
+ */
+
+import { test, expect, beforeEach, afterEach } from "vitest";
+import { definePlayer } from "@xmachines/play-xstate";
+import { authMachine, catalog } from "@xmachines/play-router-shared";
+import { Signal } from "@xmachines/play-signals";
+import { setupDOMEnvironment, cleanupDOMEnvironment } from "./test-utils.js";
+
+// Setup/cleanup jsdom environment for React Testing Library
+beforeEach(() => {
+	setupDOMEnvironment();
+});
+
+afterEach(() => {
+	cleanupDOMEnvironment();
+});
+
+test("GAP-11: currentView signal propagates changes to useSignalEffect", async () => {
+	// Direct signal test: verify currentView is Signal.State (not Computed)
+	const createPlayer = definePlayer({ machine: authMachine, catalog });
+	const actor = createPlayer();
+	actor.start();
+
+	// Track watcher notifications
+	let notified = false;
+	const watcher = new (Signal as any).subtle.Watcher(() => {
+		notified = true;
+	});
+
+	// Watch currentView signal
+	watcher.watch(actor.currentView);
+
+	// getPending() in microtask to check for notifications
+	await new Promise((resolve) => {
+		queueMicrotask(() => {
+			for (const signal of watcher.getPending()) {
+				signal.get(); // Read signal to acknowledge
+			}
+			resolve(undefined);
+		});
+	});
+
+	// Navigate - should trigger currentView update
+	notified = false; // Reset flag
+	actor.send({ type: "play.route", to: "#home" } as any);
+
+	// Wait for actor transition and check notifications
+	await new Promise((resolve) => setTimeout(resolve, 50));
+
+	await new Promise((resolve) => {
+		queueMicrotask(() => {
+			for (const signal of watcher.getPending()) {
+				signal.get(); // Read signal
+			}
+			resolve(undefined);
+		});
+	});
+
+	// Watcher should have been notified of view change
+	expect(notified).toBe(true);
+
+	actor.stop();
+});
+
+test("GAP-11: Browser back button updates both URL and view", async () => {
+	// Simplified test focusing on signal propagation without full UI rendering
+	const createPlayer = definePlayer({ machine: authMachine, catalog });
+	const actor = createPlayer();
+	actor.start();
+
+	// Initial state
+	expect(actor.currentView.get()).toBeTruthy();
+
+	// Navigate to different states
+	actor.send({ type: "play.route", to: "#home" } as any);
+	await new Promise((resolve) => setTimeout(resolve, 50));
+
+	const homeView = actor.currentView.get();
+	expect(homeView).toBeTruthy();
+	expect(actor.currentRoute.get()).toBe("/");
+
+	actor.send({ type: "play.route", to: "#about" } as any);
+	await new Promise((resolve) => setTimeout(resolve, 50));
+
+	const aboutView = actor.currentView.get();
+	expect(aboutView).toBeTruthy();
+	expect(actor.currentRoute.get()).toBe("/about");
+
+	// Views should be different
+	expect(aboutView).not.toEqual(homeView);
+
+	actor.stop();
+});

package/examples/demo/test/browser-e2e/auth-flow.browser.test.tsx

@@ -0,0 +1,49 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, expect, test } from "vitest";
+import App from "../../src/App.js";
+
+afterEach(() => {
+	cleanup();
+});
+
+test("browser E2E: login -> dashboard -> profile -> logout", async () => {
+	render(<App />);
+	const user = userEvent.setup();
+
+	const loginEntry =
+		screen.queryByRole("button", { name: /go to login|login/i }) ??
+		screen.getByRole("link", { name: /login/i });
+	await user.click(loginEntry);
+
+	const username = await screen.findByLabelText(/username/i);
+	await user.clear(username);
+	await user.type(username, "alice");
+
+	const submit =
+		screen.queryByRole("button", { name: /^log in$/i }) ??
+		screen.getByRole("button", { name: /^login$/i });
+	await user.click(submit);
+
+	expect(
+		await screen.findByRole("heading", {
+			name: /welcome to the dashboard/i,
+		}),
+	).toBeInTheDocument();
+
+	const profileNav =
+		screen.queryByRole("button", { name: /^profile$/i }) ??
+		screen.getByRole("link", { name: /^profile$/i });
+	await user.click(profileNav);
+
+	expect(await screen.findByText(/profile:\s*alice/i)).toBeInTheDocument();
+
+	await user.click(screen.getByRole("button", { name: /^logout/i }));
+	expect(await screen.findByRole("button", { name: /go to login/i })).toBeInTheDocument();
+});
+
+test("browser E2E: unauthenticated startup shows login affordance", async () => {
+	render(<App />);
+	expect(screen.getByRole("link", { name: /^login$/i })).toBeInTheDocument();
+	expect(screen.getByRole("button", { name: /go to login/i })).toBeInTheDocument();
+});