WIP: Cypress tests for the Facets feature

tests/cypress/integration/features/facets.spec.js

@@ -0,0 +1,108 @@
+describe('Facets Feature', () => {
+	/**
+	 * Create a facets widget.
+	 *
+	 * @param {string} title The widget title
+	 * @param {string} category The category slug.
+	 */
+	function createWidget(title, category) {
+		cy.intercept('/wp-json/wp/v2/widget-types/*/encode*').as('legacyWidgets');
+		cy.openWidgetsPage();
+
+		cy.get('.edit-widgets-header-toolbar__inserter-toggle').click();
+		cy.get('.block-editor-inserter__panel-content [class*="legacy-widget/ep-facet"]').click({
+			force: true,
+		});
+		cy.wait('@legacyWidgets');
+		// eslint-disable-next-line cypress/no-unnecessary-waiting -- JS processing
+		cy.wait(1000);
+
+		cy.get('.is-opened .widget-ep-facet')
+			.last()
+			.within(() => {
+				cy.get('input[name^="widget-ep-facet"][name$="[title]"]').clearThenType(
+					title,
+					true,
+				);
+				cy.get('select[name^="widget-ep-facet"][name$="[facet]"]').select(category);
+			});
+
+		/**
+		 * Wait for WordPress to recognize the title typed.
+		 *
+		 * @todo investigate why this is needed.
+		 */
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(2000);
+
+		cy.get('.edit-widgets-header__actions .components-button.is-primary').click();
+		cy.get('body').should('contain.text', 'Widgets saved.');
+	}
+
+	before(() => {
+		cy.maybeEnableFeature('facets');
+
+		cy.wpCli('widget reset --all');
+		cy.wpCli('elasticpress index --setup --yes');
+
+		// Initial widget that will be used for all tests.
+		createWidget('Facet (categories)', 'category');
+	});
+
+	it('Can see the widget in the frontend', () => {
+		cy.visit('/');
+
+		// Check if the widget is visible.
+		cy.get('.widget_ep-facet').should('be.visible');
+		cy.contains('.widget-title', 'Facet (categories)').should('be.visible');
+	});
+
+	it('Can use widgets', () => {
+		// Create a second widget, so we can test both working together.
+		createWidget('Facet (Tags)', 'post_tag');
+
+		cy.visit('/');
+
+		// We should have two widgets now, one of them the created above.
+		cy.get('.widget_ep-facet').should('have.length', 2);
+		cy.contains('.widget-title', 'Facet (Tags)').should('be.visible');
+
+		// Check if the widget search works. Additionally, checks a hyphenated slug category.
+		cy.get('.widget_ep-facet').first().as('firstWidget');
+		cy.get('@firstWidget').find('.facet-search').clearThenType('Parent C');
+		cy.get('@firstWidget').contains('.term', 'Parent Category').should('be.visible');
+		cy.get('@firstWidget').contains('.term', 'Child Category').should('not.be.visible');
+
+		// Searching in the first widget should not affect the second.
+		cy.get('.widget_ep-facet').last().as('lastWidget');
+		cy.get('@lastWidget').contains('.term', 'content').should('be.visible');
+
+		// Clear the search input and click in a term that was not visible before.
+		cy.get('@firstWidget').find('.facet-search').clear();
+		cy.get('@firstWidget').contains('.term', 'Classic').click();
+
+		// URL should have changed and selected term should be marked as checked.
+		cy.url().should('include', 'ep_filter_category=classic');
+		cy.get('@firstWidget')
+			.contains('.term', 'Classic')
+			.find('.ep-checkbox')
+			.should('have.class', 'checked');
+
+		// Visible articles should contain the selected category.
+		cy.get('article').each(($article) => {
+			cy.wrap($article).contains('.cat-links a', 'Classic').should('be.visible');
+		});
+
+		// Check pagination.
+		cy.get('.next.page-numbers').click();
+		cy.url().should('include', 'page/2/?ep_filter_category=classic');
+		cy.get('article').each(($article) => {
+			cy.wrap($article).contains('.cat-links a', 'Classic').should('be.visible');
+		});
+
+		// Check if pagination resets when clicking on a different term.
+		cy.get('@firstWidget').contains('.term', 'Post Formats').click();
+		cy.url().should('include', 'ep_filter_category=classic%2Cpost-formats');
+		cy.url().should('not.include', 'page');
+	});
+});

tests/cypress/integration/features/related-posts.spec.js

@@ -1,26 +1,12 @@
 describe('Related Posts Feature', () => {
-	function openWidgetsPage() {
-		cy.visitAdminPage('widgets.php');
-		cy.get('body').then(($body) => {
-			const $button = $body.find(
-				'.edit-widgets-welcome-guide .components-modal__header button',
-			);
-			if ($button.is(':visible')) {
-				$button.click();
-			}
-		});
-	}
-
 	it('Can see the widget in the Dashboard', () => {
-		cy.login();
-
 		// Disable the feature.
 		cy.visitAdminPage('admin.php?page=elasticpress');
 		cy.get('.ep-feature-related_posts .settings-button').click();
 		cy.get('.ep-feature-related_posts [name="settings[active]"][value="0"]').click();
 		cy.get('.ep-feature-related_posts .button-primary').click();
 
-		openWidgetsPage();
+		cy.openWidgetsPage();
 
 		cy.get('.edit-widgets-header-toolbar__inserter-toggle').click();
 		cy.get('.components-search-control__input').clearThenType('ElasticPress Related Posts');
@@ -33,7 +19,7 @@ describe('Related Posts Feature', () => {
 		cy.get('.ep-feature-related_posts [name="settings[active]"][value="1"]').click();
 		cy.get('.ep-feature-related_posts .button-primary').click();
 
-		openWidgetsPage();
+		cy.openWidgetsPage();
 
 		cy.get('.edit-widgets-header-toolbar__inserter-toggle').click();
 		cy.get('.components-search-control__input').clearThenType('ElasticPress Related Posts');
@@ -46,11 +32,9 @@ describe('Related Posts Feature', () => {
 	});
 
 	it('Can instantiate and use the widget', () => {
-		cy.login();
-
 		cy.maybeEnableFeature('related_posts');
 
-		openWidgetsPage();
+		cy.openWidgetsPage();
 
 		cy.get('.edit-widgets-header-toolbar__inserter-toggle').click();
 		cy.get(

tests/cypress/support/commands.js

@@ -46,6 +46,17 @@ Cypress.Commands.add('visitAdminPage', (page = 'index.php') => {
 	}
 });
 
+Cypress.Commands.add('openWidgetsPage', () => {
+	cy.login();
+	cy.visitAdminPage('widgets.php');
+	cy.get('body').then(($body) => {
+		const $button = $body.find('.edit-widgets-welcome-guide .components-modal__header button');
+		if ($button.is(':visible')) {
+			$button.click();
+		}
+	});
+});
+
 Cypress.Commands.add('createTaxonomy', (name = 'Test taxonomy', taxonomy = 'category') => {
 	cy.visitAdminPage(`edit-tags.php?taxonomy=${taxonomy}`);
 	cy.get('#tag-name').click().type(`${name}{enter}`);
@@ -74,8 +85,8 @@ Cypress.Commands.add('openDocumentSettingsPanel', (name) => {
 		});
 });
 
-Cypress.Commands.add('clearThenType', { prevSubject: true }, (subject, text) => {
-	cy.wrap(subject).clear().type(text);
+Cypress.Commands.add('clearThenType', { prevSubject: true }, (subject, text, force = false) => {
+	cy.wrap(subject).clear().type(text, { force });
 });
 
 Cypress.Commands.add('wpCli', (command, ignoreFailures) => {