test(cookbook-app-react-router): stop reading window.location in tests

Author: odinr

.changeset/cookbook-app-react-router_stop-reading-window-location.md

@@ -0,0 +1,9 @@
+---
+"@equinor/fusion-framework-cookbook-app-react-router": patch
+---
+
+Tests no longer read or seed `window.location`/`window.history`. Now that
+`resolveFusion` defaults navigation to in-memory history, real browser
+location never reflects the app's navigation state — assertions read
+`app.navigation.path.pathname` instead, and link `href` assertions match on
+path rather than full origin.

cookbooks/app-react-router/src/__tests__/routing-with-api-mock.test.tsx

@@ -9,7 +9,6 @@ import App from '../App';
 testWithApiMock(
   'navigates to Products and renders the loaded, seeded catalogue',
   async ({ render }) => {
-    window.history.pushState(null, '', '/');
     const { getByTitle, getByText, unmount } = await render(<App />);
 
     await getByTitle('Products').click();
@@ -23,7 +22,6 @@ testWithApiMock(
 testWithApiMock(
   'navigates to a product detail route and renders the loaded product',
   async ({ render, app }) => {
-    window.history.pushState(null, '', '/');
     const { getByText, unmount } = await render(<App />);
 
     app.navigation.navigate('/products/1');
@@ -37,7 +35,6 @@ testWithApiMock(
 testWithApiMock(
   'navigates to Users and renders the loaded, seeded directory',
   async ({ render }) => {
-    window.history.pushState(null, '', '/');
     const { getByTitle, getByText, unmount } = await render(<App />);
 
     await getByTitle('Users').click();

cookbooks/app-react-router/src/__tests__/routing.test.tsx

@@ -32,20 +32,16 @@ test('navigates to a route nested under prefix() and renders it', async ({ rende
 });
 
 test('navigation module navigates the app to a new route', async ({ render, app }) => {
-  // the browser page (and its history) is shared across tests in this file, so start from a
-  // known location rather than assuming this is the first test to touch it
-  window.history.pushState(null, '', '/');
-
   const { getByRole, unmount } = await render(<App />);
 
-  expect(window.location.pathname).toBe('/');
+  expect(app.navigation.path.pathname).toBe('/');
 
   app.navigation.navigate('/pages/error-test');
 
   // error-test's loader always throws, so the router's error boundary is what renders here,
   // not the route's default-exported component.
   await expect.element(getByRole('heading', { name: /error encountered/i })).toBeInTheDocument();
-  expect(window.location.pathname).toBe('/pages/error-test');
+  expect(app.navigation.path.pathname).toBe('/pages/error-test');
 
   await unmount();
 });

cookbooks/app-react-router/src/components/Navigation.test.tsx

@@ -4,8 +4,6 @@ import { testWithRouter } from '../__tests__/test-with-router';
 import { Navigation } from './Navigation';
 
 testWithRouter('renders a sidebar link for each top-level page', async ({ render }) => {
-  window.history.pushState(null, '', '/');
-
   const { getByText, unmount } = await render(<Navigation />);
 
   await expect.element(getByText('Home')).toBeInTheDocument();
@@ -16,30 +14,26 @@ testWithRouter('renders a sidebar link for each top-level page', async ({ render
   await unmount();
 });
 
-testWithRouter('navigating to a page updates the URL', async ({ render }) => {
-  window.history.pushState(null, '', '/');
-
+testWithRouter('navigating to a page updates the URL', async ({ render, app }) => {
   const { getByText, unmount } = await render(<Navigation />);
 
   await getByText('Products').click();
 
-  expect(window.location.pathname).toBe('/products');
+  await vi.waitFor(() => expect(app.navigation.path.pathname).toBe('/products'));
 
   await unmount();
 });
 
-testWithRouter('the active link swaps when navigating to a different page', async ({ render }) => {
-  window.history.pushState(null, '', '/');
-
+testWithRouter('the active link swaps when navigating to a different page', async ({ render, app }) => {
   const { getByText, unmount } = await render(<Navigation />);
 
   // active state is only reflected as a styled-components color, not a DOM attribute
   const colorOf = (label: string) => getComputedStyle(getByText(label).element()).color;
 
   // navigate via the router's own click handler first, so its internal location is
-  // guaranteed to be in sync with the URL rather than relying on the initial pushState above
+  // guaranteed to be in sync rather than relying on the initial location above
   await getByText('Home').click();
-  await vi.waitFor(() => expect(window.location.pathname).toBe('/'));
+  await vi.waitFor(() => expect(app.navigation.path.pathname).toBe('/'));
 
   // Users is never navigated to in this test, so its color is a stable "inactive" reference
   const inactiveColor = colorOf('Users');

cookbooks/app-react-router/src/components/product/ProductCard.test.tsx

@@ -19,9 +19,7 @@ testWithRouter(
     await expect.element(getByText(/✓ in stock/i)).toBeInTheDocument();
 
     const link = getByRole('link', { name: /view details/i });
-    await expect
-      .element(link)
-      .toHaveAttribute('href', `${window.location.origin}/products/${baseProduct.id}`);
+    await expect.element(link).toHaveAttribute('href', expect.stringContaining(`/products/${baseProduct.id}`));
 
     await unmount();
   },

cookbooks/app-react-router/src/routes/layout.test.tsx

@@ -8,7 +8,6 @@ import Layout from './layout';
 test('renders the header, sidebar navigation, and the matched child route content', async ({
   render,
 }) => {
-  window.history.pushState(null, '', '/');
   const routes: RouteObject[] = [
     {
       path: '/',
@@ -32,7 +31,6 @@ test('renders the loader while a navigation is pending, then the outlet once it
   render,
   app,
 }) => {
-  window.history.pushState(null, '', '/');
   // held open until the assertion below has observed the loading state
   let resolveLoader = (_value?: unknown) => {};
   const pendingLoad = new Promise((resolve) => {

cookbooks/app-react-router/src/routes/products/[id]/index.test.tsx

@@ -26,7 +26,7 @@ testWithRouter('renders the loaded product in the details view', async ({ render
   await expect.element(getByText(/✓ in stock/i)).toBeInTheDocument();
 
   const backLink = getByRole('link', { name: /back to products/i });
-  await expect.element(backLink).toHaveAttribute('href', `${window.location.origin}/products`);
+  await expect.element(backLink).toHaveAttribute('href', expect.stringContaining('/products'));
 
   await unmount();
 });

cookbooks/app-react-router/src/routes/users/[id]/index.test.tsx

@@ -25,7 +25,7 @@ testWithRouter(
     await expect.element(getByText(user.name)).toBeInTheDocument();
 
     const backLink = getByRole('link', { name: /back to users/i });
-    await expect.element(backLink).toHaveAttribute('href', `${window.location.origin}/users`);
+    await expect.element(backLink).toHaveAttribute('href', expect.stringContaining('/users'));
 
     await unmount();
   },