diff --git a/test/e2e/specs/interactivity/instant-search.spec.ts b/test/e2e/specs/interactivity/instant-search.spec.ts
index d381931b5389f5..7845d424cf75ea 100644
--- a/test/e2e/specs/interactivity/instant-search.spec.ts
+++ b/test/e2e/specs/interactivity/instant-search.spec.ts
@@ -719,62 +719,58 @@ test.describe( 'Instant Search', () => {
} );
} );
- test.describe( 'Multiple Inherited (Default) Queries', () => {
- test.beforeEach( async ( { page } ) => {
- // Navigate to the home page
- await page.goto( '/' );
- } );
-
- test.beforeAll( async ( { requestUtils } ) => {
+ test.describe( 'Multiple Inherited and Custom Queries', () => {
+ test( 'should keep the search state in sync across multiple inherited queries', async ( {
+ page,
+ requestUtils,
+ } ) => {
await requestUtils.updateTemplate( 'wp_template', {
slug: 'home',
content: `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
No results found.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
No results found.
-
-
-
-`,
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
No results found.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
No results found.
+
+
+
+ `,
} );
- } );
- test( 'should keep the search state in sync across multiple inherited queries', async ( {
- page,
- } ) => {
+ await page.goto( '/' );
+
// Get search inputs
const firstQuerySearch = page.getByLabel( '1st-instant-search' );
const secondQuerySearch = page.getByLabel( '2nd-instant-search' );
@@ -802,5 +798,120 @@ test.describe( 'Instant Search', () => {
await expect( secondQueryPosts ).toHaveCount( 1 );
await expect( secondQueryPosts ).toContainText( 'Unique Post' );
} );
+
+ test( 'should handle searches independently when a Default and a Custom query are placed in a home template', async ( {
+ page,
+ requestUtils,
+ } ) => {
+ // Set up: Add one inherited and one custom query to the home template
+ await requestUtils.updateTemplate( 'wp_template', {
+ slug: 'home',
+ content: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
No results found.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
No results found.
+
+
+
+ `,
+ } );
+
+ await page.goto( '/' );
+
+ // Get search inputs
+ const defaultQuerySearch = page.getByLabel(
+ 'Default Query Search'
+ );
+ const customQuerySearch = page.getByLabel( 'Custom Query Search' );
+
+ // Search for "Unique" in the default query
+ await defaultQuerySearch.fill( 'Unique' );
+
+ // Verify that the URL has been updated with the search parameter
+ await expect( page ).toHaveURL( /instant-search=Unique/ );
+
+ // Verify that the custom query search input has no value
+ await expect( customQuerySearch ).toHaveValue( '' );
+
+ // Verify that the default query has only one post which is the "Unique" post
+ const defaultQueryPosts = page
+ .getByTestId( 'default-query' )
+ .getByRole( 'heading', { level: 3 } );
+ await expect( defaultQueryPosts ).toHaveCount( 1 );
+ await expect( defaultQueryPosts ).toContainText( 'Unique Post' );
+
+ // Verify that the custom query shows exactly 2 posts: First Test Post and Second Test Post
+ const customQuery = page.getByTestId( 'custom-query' );
+ const posts = customQuery.getByRole( 'heading', { level: 3 } );
+ await expect( posts ).toHaveCount( 2 );
+ await expect( posts ).toContainText( [
+ 'First Test Post',
+ 'Second Test Post',
+ ] );
+
+ // Search for "Third" in the custom query
+ await customQuerySearch.fill( 'Third' );
+
+ // Verify that the URL has been updated with the search parameter
+ await expect( page ).toHaveURL(
+ /instant-search=Unique&instant-search-2222=Third/
+ );
+
+ // Verify that the default query search input still has "Unique"
+ await expect( defaultQuerySearch ).toHaveValue( 'Unique' );
+
+ // Verify that the default query has only one post which is the "Unique" post
+ await expect( defaultQueryPosts ).toHaveCount( 1 );
+ await expect( defaultQueryPosts ).toContainText( 'Unique Post' );
+
+ // Verify that the custom query has only one post which is the "Third Test Post"
+ const customQueryPosts = page
+ .getByTestId( 'custom-query' )
+ .getByRole( 'heading', { level: 3 } );
+ await expect( customQueryPosts ).toHaveCount( 1 );
+ await expect( customQueryPosts ).toContainText( 'Third Test Post' );
+
+ // Clear default query search
+ await defaultQuerySearch.fill( '' );
+ await expect( page ).not.toHaveURL( /instant-search=Unique/ );
+ await expect( page ).toHaveURL( /instant-search-2222=Third/ );
+
+ // Clear custom query search
+ await customQuerySearch.fill( '' );
+ await expect( page ).not.toHaveURL( /instant-search-2222=Third/ );
+ } );
} );
} );