From b0a9a01c65b3de1b0614e1aea07ee71be71f1dbd Mon Sep 17 00:00:00 2001 From: Darin Kotter Date: Tue, 3 Dec 2024 15:13:02 -0700 Subject: [PATCH 01/10] Bump apiVersion on all blocks from 2 to 3 --- assets/js/blocks/comments/block.json | 2 +- assets/js/blocks/facets/date/block.json | 2 +- assets/js/blocks/facets/meta-range/block.json | 2 +- assets/js/blocks/facets/meta/block.json | 2 +- assets/js/blocks/facets/post-type/block.json | 2 +- assets/js/blocks/facets/taxonomy/block.json | 2 +- assets/js/blocks/related-posts/block.json | 2 +- 7 files changed, 7 insertions(+), 7 deletions(-) diff --git a/assets/js/blocks/comments/block.json b/assets/js/blocks/comments/block.json index c0e61999f4..b55efa0670 100644 --- a/assets/js/blocks/comments/block.json +++ b/assets/js/blocks/comments/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "elasticpress/comments", "title": "Search Comments", "category": "elasticpress", diff --git a/assets/js/blocks/facets/date/block.json b/assets/js/blocks/facets/date/block.json index 3a00f831c8..670e92b20b 100644 --- a/assets/js/blocks/facets/date/block.json +++ b/assets/js/blocks/facets/date/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "elasticpress/facet-date", "title": "Filter by Post Date", "category": "elasticpress", diff --git a/assets/js/blocks/facets/meta-range/block.json b/assets/js/blocks/facets/meta-range/block.json index 41d0930367..b759958156 100644 --- a/assets/js/blocks/facets/meta-range/block.json +++ b/assets/js/blocks/facets/meta-range/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "elasticpress/facet-meta-range", "title": "Filter by Metadata Range - Beta", "category": "elasticpress", diff --git a/assets/js/blocks/facets/meta/block.json b/assets/js/blocks/facets/meta/block.json index 45700ae5ab..1a09da18f0 100644 --- a/assets/js/blocks/facets/meta/block.json +++ b/assets/js/blocks/facets/meta/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "elasticpress/facet-meta", "title": "Filter by Metadata", "category": "elasticpress", diff --git a/assets/js/blocks/facets/post-type/block.json b/assets/js/blocks/facets/post-type/block.json index 98b4c7549b..37688ab6af 100644 --- a/assets/js/blocks/facets/post-type/block.json +++ b/assets/js/blocks/facets/post-type/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "title": "Filter by Post Type", "description": "Let visitors filter your content by post type.", "textdomain": "elasticpress", diff --git a/assets/js/blocks/facets/taxonomy/block.json b/assets/js/blocks/facets/taxonomy/block.json index e4e7c23c14..70e21628a1 100644 --- a/assets/js/blocks/facets/taxonomy/block.json +++ b/assets/js/blocks/facets/taxonomy/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "elasticpress/facet", "title": "Filter by Taxonomy", "category": "elasticpress", diff --git a/assets/js/blocks/related-posts/block.json b/assets/js/blocks/related-posts/block.json index 86ee8a2297..6c641b1ac3 100644 --- a/assets/js/blocks/related-posts/block.json +++ b/assets/js/blocks/related-posts/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "elasticpress/related-posts", "title": "Related Posts", "category": "elasticpress", From b01a8b5f56c1b48c3a18f892009ef0dfc65681ba Mon Sep 17 00:00:00 2001 From: Darin Kotter Date: Tue, 3 Dec 2024 15:21:25 -0700 Subject: [PATCH 02/10] Ensure Cypress can work properly with iframes --- tests/cypress/config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/tests/cypress/config.js b/tests/cypress/config.js index 90650b100b..fa7220ac40 100644 --- a/tests/cypress/config.js +++ b/tests/cypress/config.js @@ -2,6 +2,7 @@ const fs = require('fs'); const { defineConfig } = require('cypress'); module.exports = defineConfig({ + chromeWebSecurity: false, fixturesFolder: 'tests/cypress/fixtures', screenshotsFolder: 'tests/cypress/screenshots', videosFolder: 'tests/cypress/videos', From 9365ab7a9418f23a7adca386e2c5adad39179e4a Mon Sep 17 00:00:00 2001 From: Darin Kotter Date: Tue, 3 Dec 2024 15:24:10 -0700 Subject: [PATCH 03/10] Install our Cypress WP Utils package --- package-lock.json | 16 ++++++++++++++++ package.json | 1 + 2 files changed, 17 insertions(+) diff --git a/package-lock.json b/package-lock.json index 91815f660c..1b479ae4bb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "uuid": "^9.0.0" }, "devDependencies": { + "@10up/cypress-wp-utils": "^0.4.0", "@4tw/cypress-drag-drop": "^2.2.3", "@cypress/grep": "^4.0.1", "@wordpress/env": "^10.4.0", @@ -66,6 +67,15 @@ "core-js": "^3.8.3" } }, + "node_modules/@10up/cypress-wp-utils": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@10up/cypress-wp-utils/-/cypress-wp-utils-0.4.0.tgz", + "integrity": "sha512-7cNELIX6ml5V9JEU83iEyQ6dkZ77ImdR5HKjUP4oyArQogPVcFPUnokU7GInH8DicqXbESrrkxZ0IfnNtNWh+A==", + "dev": true, + "engines": { + "node": ">=12.0" + } + }, "node_modules/@10up/eslint-config": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/@10up/eslint-config/-/eslint-config-3.1.1.tgz", @@ -23176,6 +23186,12 @@ "core-js": "^3.8.3" } }, + "@10up/cypress-wp-utils": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@10up/cypress-wp-utils/-/cypress-wp-utils-0.4.0.tgz", + "integrity": "sha512-7cNELIX6ml5V9JEU83iEyQ6dkZ77ImdR5HKjUP4oyArQogPVcFPUnokU7GInH8DicqXbESrrkxZ0IfnNtNWh+A==", + "dev": true + }, "@10up/eslint-config": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/@10up/eslint-config/-/eslint-config-3.1.1.tgz", diff --git a/package.json b/package.json index 35cf6b74e3..a190e9d94c 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "license": "GPL-2.0-or-later", "description": "A fast and flexible search and query engine for WordPress.", "devDependencies": { + "@10up/cypress-wp-utils": "^0.4.0", "@4tw/cypress-drag-drop": "^2.2.3", "@cypress/grep": "^4.0.1", "@wordpress/env": "^10.4.0", From 2fc9a3212655d6459318f136802204aa863aa986 Mon Sep 17 00:00:00 2001 From: Darin Kotter Date: Tue, 3 Dec 2024 16:18:20 -0700 Subject: [PATCH 04/10] Remove our Cypress WP Utils package as the commands conflict --- package-lock.json | 16 ---------------- package.json | 1 - 2 files changed, 17 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1b479ae4bb..91815f660c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,6 @@ "uuid": "^9.0.0" }, "devDependencies": { - "@10up/cypress-wp-utils": "^0.4.0", "@4tw/cypress-drag-drop": "^2.2.3", "@cypress/grep": "^4.0.1", "@wordpress/env": "^10.4.0", @@ -67,15 +66,6 @@ "core-js": "^3.8.3" } }, - "node_modules/@10up/cypress-wp-utils": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/@10up/cypress-wp-utils/-/cypress-wp-utils-0.4.0.tgz", - "integrity": "sha512-7cNELIX6ml5V9JEU83iEyQ6dkZ77ImdR5HKjUP4oyArQogPVcFPUnokU7GInH8DicqXbESrrkxZ0IfnNtNWh+A==", - "dev": true, - "engines": { - "node": ">=12.0" - } - }, "node_modules/@10up/eslint-config": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/@10up/eslint-config/-/eslint-config-3.1.1.tgz", @@ -23186,12 +23176,6 @@ "core-js": "^3.8.3" } }, - "@10up/cypress-wp-utils": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/@10up/cypress-wp-utils/-/cypress-wp-utils-0.4.0.tgz", - "integrity": "sha512-7cNELIX6ml5V9JEU83iEyQ6dkZ77ImdR5HKjUP4oyArQogPVcFPUnokU7GInH8DicqXbESrrkxZ0IfnNtNWh+A==", - "dev": true - }, "@10up/eslint-config": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/@10up/eslint-config/-/eslint-config-3.1.1.tgz", diff --git a/package.json b/package.json index a190e9d94c..35cf6b74e3 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,6 @@ "license": "GPL-2.0-or-later", "description": "A fast and flexible search and query engine for WordPress.", "devDependencies": { - "@10up/cypress-wp-utils": "^0.4.0", "@4tw/cypress-drag-drop": "^2.2.3", "@cypress/grep": "^4.0.1", "@wordpress/env": "^10.4.0", From 2f8755d100070c3fbcc3f852e51e9ed53fddd81d Mon Sep 17 00:00:00 2001 From: Darin Kotter Date: Tue, 3 Dec 2024 16:19:53 -0700 Subject: [PATCH 05/10] Add a command to get the block editor. Add a function to get iframes --- .../cypress/support/commands/block-editor.js | 17 +++ tests/cypress/support/functions/get-iframe.js | 108 ++++++++++++++++++ 2 files changed, 125 insertions(+) create mode 100644 tests/cypress/support/functions/get-iframe.js diff --git a/tests/cypress/support/commands/block-editor.js b/tests/cypress/support/commands/block-editor.js index d68d7c32f7..638246438a 100644 --- a/tests/cypress/support/commands/block-editor.js +++ b/tests/cypress/support/commands/block-editor.js @@ -1,5 +1,7 @@ /* global wpVersion */ +import { getIframe } from '../functions/get-iframe'; + Cypress.Commands.add('openBlockSettingsSidebar', () => { cy.get('body').then(($el) => { if ($el.hasClass('widgets-php')) { @@ -180,3 +182,18 @@ Cypress.Commands.add('supportsBlockDimensions', { prevSubject: true }, (subject, cy.wrap(subject).should('have.css', 'padding', '10px 15px'); }); + +Cypress.Commands.add('getBlockEditor', () => { + // Ensure the editor is loaded. + cy.get('.edit-post-visual-editor').should('exist'); + + return cy + .get('body') + .then(($body) => { + if ($body.find('iframe[name="editor-canvas"]').length) { + return getIframe('iframe[name="editor-canvas"]'); + } + return $body; + }) + .then(cy.wrap); +}); diff --git a/tests/cypress/support/functions/get-iframe.js b/tests/cypress/support/functions/get-iframe.js new file mode 100644 index 0000000000..5a10666cdd --- /dev/null +++ b/tests/cypress/support/functions/get-iframe.js @@ -0,0 +1,108 @@ +/** + * Code taken from the Cypress iframe package. + * + * https://gitlab.com/kgroat/cypress-iframe + */ + +const DEFAULT_OPTS = { + log: true, + timeout: 30000, +}; + +const DEFAULT_IFRAME_SELECTOR = 'iframe'; + +function sleep(timeout) { + return new Promise((resolve) => setTimeout(resolve, timeout)); // eslint-disable-line no-promise-executor-return +} + +const frameLoaded = (selector, opts) => { + if (selector === undefined) { + selector = DEFAULT_IFRAME_SELECTOR; // eslint-disable-line no-param-reassign + } else if (typeof selector === 'object') { + opts = selector; // eslint-disable-line no-param-reassign + selector = DEFAULT_IFRAME_SELECTOR; // eslint-disable-line no-param-reassign + } + + const fullOpts = { + ...DEFAULT_OPTS, + ...opts, + }; + + const log = fullOpts.log + ? Cypress.log({ + name: 'frame loaded', + displayName: 'frame loaded', + message: [selector], + }).snapshot() + : null; + + return cy.get(selector, { log: false }).then({ timeout: fullOpts.timeout }, async ($frame) => { + log?.set('$el', $frame); + + if ($frame.length !== 1) { + throw new Error( + `cypress-iframe commands can only be applied to exactly one iframe at a time. Instead found ${$frame.length}`, + ); + } + + const contentWindow = $frame.prop('contentWindow'); + + const hasNavigated = fullOpts.url + ? () => + typeof fullOpts.url === 'string' + ? contentWindow.location.toString().includes(fullOpts.url) + : fullOpts.url?.test(contentWindow.location.toString()) + : () => contentWindow.location.toString() !== 'about:blank'; + + while (!hasNavigated()) { + await sleep(100); // eslint-disable-line no-await-in-loop + } + + if (contentWindow.document.readyState === 'complete') { + return $frame; + } + + const loadLog = Cypress.log({ + name: 'Frame Load', + message: [contentWindow.location.toString()], + event: true, + }).snapshot(); + + await new Promise((resolve) => { + Cypress.$(contentWindow).on('load', resolve); + }); + + loadLog.end(); + log?.finish(); + + return $frame; + }); +}; + +export const getIframe = (selector, opts) => { + if (selector === undefined) { + selector = DEFAULT_IFRAME_SELECTOR; // eslint-disable-line no-param-reassign + } else if (typeof selector === 'object') { + opts = selector; // eslint-disable-line no-param-reassign + selector = DEFAULT_IFRAME_SELECTOR; // eslint-disable-line no-param-reassign + } + + const fullOpts = { + ...DEFAULT_OPTS, + ...opts, + }; + + const log = fullOpts.log + ? Cypress.log({ + name: 'iframe', + displayName: 'iframe', + message: [selector], + }).snapshot() + : null; + + return frameLoaded(selector, { ...fullOpts, log: false }).then(($frame) => { + log?.set('$el', $frame).end(); + const contentWindow = $frame.prop('contentWindow'); + return Cypress.$(contentWindow.document.body); + }); +}; From 7197b4b1f2bb18f191e51cb56c8951baeda32063 Mon Sep 17 00:00:00 2001 From: Darin Kotter Date: Tue, 3 Dec 2024 16:27:09 -0700 Subject: [PATCH 06/10] Start using our getBlockEditor function anywhere we need to interact with the block editor --- .../integration/features/related-posts.cy.js | 4 +++- tests/cypress/support/commands.js | 13 +++++++++---- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/tests/cypress/integration/features/related-posts.cy.js b/tests/cypress/integration/features/related-posts.cy.js index 4bbe4dd3e6..25040449ea 100644 --- a/tests/cypress/integration/features/related-posts.cy.js +++ b/tests/cypress/integration/features/related-posts.cy.js @@ -51,6 +51,8 @@ describe('Related Posts Feature', () => { content: 'Inceptos tristique class ac eleifend leo.', }); + cy.getBlockEditor().as('iframe'); + /** * On the last post insert a Related Posts block. */ @@ -62,7 +64,7 @@ describe('Related Posts Feature', () => { * Verify that the block is inserted into the editor, and contains the * expected content. */ - cy.get('.wp-block.wp-block-elasticpress-related-posts').first().as('block'); + cy.get('@iframe').find('.wp-block.wp-block-elasticpress-related-posts').first().as('block'); cy.get('@block') .find('li') .should('contain', 'Test related posts block #') diff --git a/tests/cypress/support/commands.js b/tests/cypress/support/commands.js index c8f415be39..86503ad975 100644 --- a/tests/cypress/support/commands.js +++ b/tests/cypress/support/commands.js @@ -130,7 +130,8 @@ Cypress.Commands.add('publishPost', (postData, viewPost) => { const newPostData = { title: 'Test Post', content: 'Test content.', ...postData }; cy.visitAdminPage('post-new.php'); - cy.get('h1.editor-post-title__input, #post-title-0').should('exist'); + cy.getBlockEditor().as('iframe'); + cy.get('@iframe').find('h1.editor-post-title__input, #post-title-0').should('exist'); cy.get('body').then(($body) => { const welcomeGuide = $body.find( '.edit-post-welcome-guide .components-modal__header button', @@ -140,11 +141,15 @@ Cypress.Commands.add('publishPost', (postData, viewPost) => { } }); - cy.get('h1.editor-post-title__input, #post-title-0').clearThenType(newPostData.title); - cy.get('.block-editor-default-block-appender__content').type(newPostData.content); + cy.get('@iframe') + .find('h1.editor-post-title__input, #post-title-0') + .clearThenType(newPostData.title); + cy.get('@iframe') + .find('.block-editor-default-block-appender__content') + .type(newPostData.content); if (newPostData.password && newPostData.password !== '') { - cy.get('h1.editor-post-title__input').click(); + cy.get('@iframe').find('h1.editor-post-title__input').click(); if (wpVersion === '6.0') { cy.get('body').then(($body) => { const $button = $body.find('.edit-post-post-visibility__toggle'); From ddd9d9781f42298420bd85d0acae86a58b868ad4 Mon Sep 17 00:00:00 2001 From: Darin Kotter Date: Wed, 4 Dec 2024 13:23:47 -0700 Subject: [PATCH 07/10] Add command to close the block inserter and run that after adding the related posts block. Fix finding the block tab --- .../integration/features/related-posts.cy.js | 1 + tests/cypress/support/commands/block-editor.js | 14 +++++++++++++- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/tests/cypress/integration/features/related-posts.cy.js b/tests/cypress/integration/features/related-posts.cy.js index 25040449ea..4f87088dc8 100644 --- a/tests/cypress/integration/features/related-posts.cy.js +++ b/tests/cypress/integration/features/related-posts.cy.js @@ -59,6 +59,7 @@ describe('Related Posts Feature', () => { cy.openBlockInserter(); cy.getBlocksList().should('contain.text', 'Related Posts'); cy.insertBlock('Related Posts'); + cy.closeBlockInserter(); /** * Verify that the block is inserted into the editor, and contains the diff --git a/tests/cypress/support/commands/block-editor.js b/tests/cypress/support/commands/block-editor.js index 638246438a..e4c2ba7ea4 100644 --- a/tests/cypress/support/commands/block-editor.js +++ b/tests/cypress/support/commands/block-editor.js @@ -17,7 +17,7 @@ Cypress.Commands.add('openBlockSettingsSidebar', () => { cy.get( `.edit-post-sidebar__panel-tab, .edit-post-sidebar__panel-tabs button, - .editor-sidebar__panel-tabs button`, + .editor-sidebar__panel-tabs button:contains('Block')`, ) .contains('Block') .click(); @@ -41,6 +41,18 @@ Cypress.Commands.add('openBlockInserter', () => { }); }); +Cypress.Commands.add('closeBlockInserter', () => { + cy.get('body').then(($body) => { + if ($body.hasClass('widgets-php')) { + cy.get('.edit-widgets-header-toolbar__inserter-toggle').click(); + } else { + cy.get( + '.edit-post-header-toolbar__inserter-toggle,.editor-document-tools__inserter-toggle', + ).click(); + } + }); +}); + Cypress.Commands.add('getBlocksList', () => { cy.get('.block-editor-inserter__block-list'); }); From a361f402fc42cc1b84fa66a100613fd25af2caf2 Mon Sep 17 00:00:00 2001 From: Darin Kotter Date: Wed, 4 Dec 2024 14:00:45 -0700 Subject: [PATCH 08/10] Ensure we can properly add the instant results block --- tests/cypress/integration/features/instant-results.cy.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/tests/cypress/integration/features/instant-results.cy.js b/tests/cypress/integration/features/instant-results.cy.js index d863d62da7..30963fae01 100644 --- a/tests/cypress/integration/features/instant-results.cy.js +++ b/tests/cypress/integration/features/instant-results.cy.js @@ -309,14 +309,18 @@ describe('Instant Results Feature', { tags: '@slow' }, () => { content: 'Testing openModal()', }); + cy.getBlockEditor().as('iframe'); cy.openBlockInserter(); cy.insertBlock('Buttons'); - cy.get('.wp-block-button__link').type('Search "Block"'); + cy.closeBlockInserter(); + cy.get('@iframe').find('.wp-block-button__link').type('Search "Block"'); /** * Update the post and visit the front end. */ + cy.wait(500); // eslint-disable-line cy.get('.editor-post-publish-button__button').click(); + cy.wait(2000); // eslint-disable-line cy.get('.components-snackbar__action').click(); /** From 3e771f9317173ac4a5943a12477d6c2e886ac391 Mon Sep 17 00:00:00 2001 From: Darin Kotter Date: Wed, 4 Dec 2024 15:03:53 -0700 Subject: [PATCH 09/10] Add a wait command to ensure changes are in place before saving --- tests/cypress/integration/features/related-posts.cy.js | 1 + 1 file changed, 1 insertion(+) diff --git a/tests/cypress/integration/features/related-posts.cy.js b/tests/cypress/integration/features/related-posts.cy.js index 4f87088dc8..00c557c4a4 100644 --- a/tests/cypress/integration/features/related-posts.cy.js +++ b/tests/cypress/integration/features/related-posts.cy.js @@ -107,6 +107,7 @@ describe('Related Posts Feature', () => { * Update the post and visit the front end. */ cy.get('.editor-post-publish-button__button').click(); + cy.wait(2000); // eslint-disable-line cy.get('.components-snackbar__action').click(); /** From c61fa80df110e11d4cdac5628071247a49e21669 Mon Sep 17 00:00:00 2001 From: Darin Kotter Date: Thu, 5 Dec 2024 11:08:45 -0700 Subject: [PATCH 10/10] Fix the createAutosavePost command --- tests/cypress/support/commands.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/tests/cypress/support/commands.js b/tests/cypress/support/commands.js index 86503ad975..38d57d7beb 100644 --- a/tests/cypress/support/commands.js +++ b/tests/cypress/support/commands.js @@ -436,19 +436,23 @@ Cypress.Commands.add('createAutosavePost', (postData) => { const newPostData = { title: 'Test Post', content: 'Test content.', ...postData }; cy.visitAdminPage('post-new.php'); - cy.get('h1.editor-post-title__input, #post-title-0').should('exist'); + cy.getBlockEditor().as('iframe'); + cy.get('@iframe').find('h1.editor-post-title__input, #post-title-0').should('exist'); cy.get('body').then(($body) => { const welcomeGuide = $body.find( '.edit-post-welcome-guide .components-modal__header button', ); - cy.log(welcomeGuide); if (welcomeGuide.length) { welcomeGuide.click(); } }); - cy.get('h1.editor-post-title__input, #post-title-0').clearThenType(newPostData.title); - cy.get('.block-editor-default-block-appender__content').type(newPostData.content); + cy.get('@iframe') + .find('h1.editor-post-title__input, #post-title-0') + .clearThenType(newPostData.title); + cy.get('@iframe') + .find('.block-editor-default-block-appender__content') + .type(newPostData.content); /** * Wait for autosave to complete.