Skip to content

Commit aed9a78

Browse files
michalczaplinskimichalczaplinski
committed
Add an e2e test for multiple inherited and custom queries used in the same template
1 parent a958a2a commit aed9a78

File tree

1 file changed

+162
-51
lines changed

1 file changed

+162
-51
lines changed

‎test/e2e/specs/interactivity/instant-search.spec.ts

+162-51
Original file line numberDiff line numberDiff line change
@@ -722,62 +722,58 @@ test.describe( 'Instant Search', () => {
722722
} );
723723
} );
724724

725-
test.describe( 'Multiple Inherited (Default) Queries', () => {
726-
test.beforeEach( async ( { page } ) => {
727-
// Navigate to the home page
728-
await page.goto( '/' );
729-
} );
730-
731-
test.beforeAll( async ( { requestUtils } ) => {
725+
test.describe( 'Multiple Inherited and Custom Queries', () => {
726+
test( 'should keep the search state in sync across multiple inherited queries', async ( {
727+
page,
728+
requestUtils,
729+
} ) => {
732730
await requestUtils.updateTemplate( 'wp_template', {
733731
slug: 'home',
734732
content: `
735-
<!-- wp:query {"enhancedPagination":true,"queryId":1111,"query":{"inherit":true,"perPage":2,"order":"desc","orderBy":"date"}} -->
736-
<div class="wp-block-query" data-testid="default-query-1">
737-
<!-- wp:search {"label":"1st-instant-search","buttonText":"Search"} /-->
738-
<!-- wp:post-template -->
739-
<!-- wp:post-title {"level":3} /-->
740-
<!-- wp:post-excerpt /-->
741-
<!-- /wp:post-template -->
742-
<!-- wp:query-pagination -->
743-
<!-- wp:query-pagination-previous /-->
744-
<!-- wp:query-pagination-numbers /-->
745-
<!-- wp:query-pagination-next /-->
746-
<!-- /wp:query-pagination -->
747-
<!-- wp:query-no-results -->
748-
<!-- wp:paragraph -->
749-
<p>No results found.</p>
750-
<!-- /wp:paragraph -->
751-
<!-- /wp:query-no-results -->
752-
</div>
753-
<!-- /wp:query -->
754-
755-
756-
<!-- wp:query {"enhancedPagination":true,"queryId":2222,"query":{"inherit":true,"perPage":2,"order":"desc","orderBy":"date"}} -->
757-
<div class="wp-block-query" data-testid="default-query-2">
758-
<!-- wp:search {"label":"2nd-instant-search","buttonText":"Search"} /-->
759-
<!-- wp:post-template -->
760-
<!-- wp:post-title {"level":3} /-->
761-
<!-- wp:post-excerpt /-->
762-
<!-- /wp:post-template -->
763-
<!-- wp:query-pagination -->
764-
<!-- wp:query-pagination-previous /-->
765-
<!-- wp:query-pagination-numbers /-->
766-
<!-- wp:query-pagination-next /-->
767-
<!-- /wp:query-pagination -->
768-
<!-- wp:query-no-results -->
769-
<!-- wp:paragraph -->
770-
<p>No results found.</p>
771-
<!-- /wp:paragraph -->
772-
<!-- /wp:query-no-results -->
773-
</div>
774-
<!-- /wp:query -->`,
733+
<!-- wp:query {"enhancedPagination":true,"queryId":1111,"query":{"inherit":true,"perPage":2,"order":"desc","orderBy":"date"}} -->
734+
<div class="wp-block-query" data-testid="default-query-1">
735+
<!-- wp:search {"label":"1st-instant-search","buttonText":"Search"} /-->
736+
<!-- wp:post-template -->
737+
<!-- wp:post-title {"level":3} /-->
738+
<!-- wp:post-excerpt /-->
739+
<!-- /wp:post-template -->
740+
<!-- wp:query-pagination -->
741+
<!-- wp:query-pagination-previous /-->
742+
<!-- wp:query-pagination-numbers /-->
743+
<!-- wp:query-pagination-next /-->
744+
<!-- /wp:query-pagination -->
745+
<!-- wp:query-no-results -->
746+
<!-- wp:paragraph -->
747+
<p>No results found.</p>
748+
<!-- /wp:paragraph -->
749+
<!-- /wp:query-no-results -->
750+
</div>
751+
<!-- /wp:query -->
752+
753+
754+
<!-- wp:query {"enhancedPagination":true,"queryId":2222,"query":{"inherit":true,"perPage":2,"order":"desc","orderBy":"date"}} -->
755+
<div class="wp-block-query" data-testid="default-query-2">
756+
<!-- wp:search {"label":"2nd-instant-search","buttonText":"Search"} /-->
757+
<!-- wp:post-template -->
758+
<!-- wp:post-title {"level":3} /-->
759+
<!-- wp:post-excerpt /-->
760+
<!-- /wp:post-template -->
761+
<!-- wp:query-pagination -->
762+
<!-- wp:query-pagination-previous /-->
763+
<!-- wp:query-pagination-numbers /-->
764+
<!-- wp:query-pagination-next /-->
765+
<!-- /wp:query-pagination -->
766+
<!-- wp:query-no-results -->
767+
<!-- wp:paragraph -->
768+
<p>No results found.</p>
769+
<!-- /wp:paragraph -->
770+
<!-- /wp:query-no-results -->
771+
</div>
772+
<!-- /wp:query -->`,
775773
} );
776-
} );
777774

778-
test( 'should keep the search state in sync across multiple inherited queries', async ( {
779-
page,
780-
} ) => {
775+
await page.goto( '/' );
776+
781777
// Get search inputs
782778
const firstQuerySearch = page.getByLabel( '1st-instant-search' );
783779
const secondQuerySearch = page.getByLabel( '2nd-instant-search' );
@@ -805,6 +801,121 @@ test.describe( 'Instant Search', () => {
805801
await expect( secondQueryPosts ).toHaveCount( 1 );
806802
await expect( secondQueryPosts ).toContainText( 'Unique Post' );
807803
} );
804+
805+
test( 'should handle searches independently when a Default and a Custom query are placed in a home template', async ( {
806+
page,
807+
requestUtils,
808+
} ) => {
809+
// Set up: Add one inherited and one custom query to the home template
810+
await requestUtils.updateTemplate( 'wp_template', {
811+
slug: 'home',
812+
content: `
813+
<!-- wp:query {"enhancedPagination":true,"queryId":1111,"query":{"inherit":true,"perPage":2,"order":"desc","orderBy":"date"}} -->
814+
<div class="wp-block-query" data-testid="default-query">
815+
<!-- wp:search {"label":"Default Query Search","buttonText":"Search"} /-->
816+
<!-- wp:post-template -->
817+
<!-- wp:post-title {"level":3} /-->
818+
<!-- wp:post-excerpt /-->
819+
<!-- /wp:post-template -->
820+
<!-- wp:query-pagination -->
821+
<!-- wp:query-pagination-previous /-->
822+
<!-- wp:query-pagination-numbers /-->
823+
<!-- wp:query-pagination-next /-->
824+
<!-- /wp:query-pagination -->
825+
<!-- wp:query-no-results -->
826+
<!-- wp:paragraph -->
827+
<p>No results found.</p>
828+
<!-- /wp:paragraph -->
829+
<!-- /wp:query-no-results -->
830+
</div>
831+
<!-- /wp:query -->
832+
833+
834+
<!-- wp:query {"enhancedPagination":true,"queryId":2222,"query":{"inherit":false,"perPage":2,"order":"desc","orderBy":"date"}} -->
835+
<div class="wp-block-query" data-testid="custom-query">
836+
<!-- wp:search {"label":"Custom Query Search","buttonText":"Search"} /-->
837+
<!-- wp:post-template -->
838+
<!-- wp:post-title {"level":3} /-->
839+
<!-- wp:post-excerpt /-->
840+
<!-- /wp:post-template -->
841+
<!-- wp:query-pagination -->
842+
<!-- wp:query-pagination-previous /-->
843+
<!-- wp:query-pagination-numbers /-->
844+
<!-- wp:query-pagination-next /-->
845+
<!-- /wp:query-pagination -->
846+
<!-- wp:query-no-results -->
847+
<!-- wp:paragraph -->
848+
<p>No results found.</p>
849+
<!-- /wp:paragraph -->
850+
<!-- /wp:query-no-results -->
851+
</div>
852+
<!-- /wp:query -->`,
853+
} );
854+
855+
await page.goto( '/' );
856+
857+
// Get search inputs
858+
const defaultQuerySearch = page.getByLabel(
859+
'Default Query Search'
860+
);
861+
const customQuerySearch = page.getByLabel( 'Custom Query Search' );
862+
863+
// Search for "Unique" in the default query
864+
await defaultQuerySearch.fill( 'Unique' );
865+
866+
// Verify that the URL has been updated with the search parameter
867+
await expect( page ).toHaveURL( /instant-search=Unique/ );
868+
869+
// Verify that the custom query search input has no value
870+
await expect( customQuerySearch ).toHaveValue( '' );
871+
872+
// Verify that the default query has only one post which is the "Unique" post
873+
const defaultQueryPosts = page
874+
.getByTestId( 'default-query' )
875+
.getByRole( 'heading', { level: 3 } );
876+
await expect( defaultQueryPosts ).toHaveCount( 1 );
877+
await expect( defaultQueryPosts ).toContainText( 'Unique Post' );
878+
879+
// Verify that the custom query shows exactly 2 posts: First Test Post and Second Test Post
880+
const customQuery = page.getByTestId( 'custom-query' );
881+
const posts = customQuery.getByRole( 'heading', { level: 3 } );
882+
await expect( posts ).toHaveCount( 2 );
883+
await expect( posts ).toContainText( [
884+
'First Test Post',
885+
'Second Test Post',
886+
] );
887+
888+
// Search for "Third" in the custom query
889+
await customQuerySearch.fill( 'Third' );
890+
891+
// Verify that the URL has been updated with the search parameter
892+
await expect( page ).toHaveURL(
893+
/instant-search=Unique&instant-search-2222=Third/
894+
);
895+
896+
// Verify that the default query search input still has "Unique"
897+
await expect( defaultQuerySearch ).toHaveValue( 'Unique' );
898+
899+
// Verify that the default query has only one post which is the "Unique" post
900+
await expect( defaultQueryPosts ).toHaveCount( 1 );
901+
await expect( defaultQueryPosts ).toContainText( 'Unique Post' );
902+
903+
// Verify that the custom query has only one post which is the "Third Test Post"
904+
const customQueryPosts = page
905+
.getByTestId( 'custom-query' )
906+
.getByRole( 'heading', { level: 3 } );
907+
await expect( customQueryPosts ).toHaveCount( 1 );
908+
await expect( customQueryPosts ).toContainText( 'Third Test Post' );
909+
910+
// Clear default query search
911+
await defaultQuerySearch.fill( '' );
912+
await expect( page ).not.toHaveURL( /instant-search=Unique/ );
913+
await expect( page ).toHaveURL( /instant-search-2222=Third/ );
914+
915+
// Clear custom query search
916+
await customQuerySearch.fill( '' );
917+
await expect( page ).not.toHaveURL( /instant-search-2222=Third/ );
918+
} );
808919
} );
809920

810921
test.describe( 'Editor', () => {

0 commit comments

Comments
 (0)