Add failing test for URLs with hashes

WordPress · Sep 6, 2023 · 83ae05f · 83ae05f
1 parent 43556a0
commit 83ae05f
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 1 deletion.
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-navigate/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-navigate/render.php
@@ -31,6 +31,12 @@
 				data-wp-on--click="actions.router.navigate"
 				href="$link"
 			>link $i</a>
+			<a
+				data-testid="link $i with hash"
+				data-wp-on--click="actions.router.navigate"
+				data-force-navigation="true"
+				href="$link#link-$i-with-hash"
+			>link $i with hash</a>
 HTML;
 		}
 	}

diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-navigate/view.js b/packages/e2e-tests/plugins/interactive-blocks/router-navigate/view.js
@@ -19,7 +19,9 @@
 					state.router.navigations += 1;
 					state.router.status = 'busy';
 
-					await navigate( e.target.href );
+					const force = e.target.dataset.forceNavigation === 'true';
+
+					await navigate( e.target.href, { force } );
 
 					state.router.navigations -= 1;
 

diff --git a/test/e2e/specs/interactivity/router-navigate.spec.ts b/test/e2e/specs/interactivity/router-navigate.spec.ts
@@ -74,4 +74,56 @@ test.describe( 'Router navigate', () => {
 		await expect( status ).toHaveText( 'idle' );
 		await expect( title ).toHaveText( 'Link 2' );
 	} );
+
+	test( 'should update the URL from the last navigation if only varies in the URL fragment', async ( {
+		page,
+		interactivityUtils: utils,
+	} ) => {
+		const link1 = utils.getLink( 'router navigate - link 1' );
+
+		const navigations = page.getByTestId( 'router navigations' );
+		const status = page.getByTestId( 'router status' );
+		const title = page.getByTestId( 'title' );
+
+		await expect( navigations ).toHaveText( '0' );
+		await expect( status ).toHaveText( 'idle' );
+
+		const resolvers: Function[] = [];
+
+		await page.route( link1, async ( route ) => {
+			await new Promise( ( r ) => resolvers.push( r ) );
+			await route.continue();
+		} );
+
+		await page.getByTestId( 'link 1' ).click();
+		await page.getByTestId( 'link 1 with hash' ).click();
+
+		const href = ( await page
+			.getByTestId( 'link 1 with hash' )
+			.getAttribute( 'href' ) ) as string;
+
+		await expect( navigations ).toHaveText( '2' );
+		await expect( status ).toHaveText( 'busy' );
+		await expect( title ).toHaveText( 'Main' );
+
+		{
+			const resolver = resolvers.pop();
+			if ( resolver ) resolver();
+		}
+
+		await expect( navigations ).toHaveText( '1' );
+		await expect( status ).toHaveText( 'busy' );
+		await expect( title ).toHaveText( 'Link 1' );
+		await expect( page ).toHaveURL( href );
+
+		{
+			const resolver = resolvers.pop();
+			if ( resolver ) resolver();
+		}
+
+		await expect( navigations ).toHaveText( '0' );
+		await expect( status ).toHaveText( 'idle' );
+		await expect( title ).toHaveText( 'Link 1' );
+		await expect( page ).toHaveURL( href );
+	} );
 } );