Fix site editor E2E tests for Gutenberg latest (https://github.com/woocommerce/woocommerce-blocks/pull/6080)

* Add handling of editor context via GUTENBERG_EDITOR_CONTEXT env var
* Fix flaky tests around editing templates
* Wait for save template response to complete
This commit is contained in:
Tomasz Tunik 2022-03-23 14:18:00 +01:00 committed by GitHub
parent f8c5e910d2
commit fdb8dde033
4 changed files with 86 additions and 62 deletions

View File

@ -49,6 +49,7 @@ jobs:
- name: E2E Tests (WP latest with Gutenberg plugin)
env:
WOOCOMMERCE_BLOCKS_PHASE: 3
GUTENBERG_EDITOR_CONTEXT: 'gutenberg'
run: |
chmod -R 767 ./ #needed for permissions issues
JSON='{"plugins": ["https://downloads.wordpress.org/plugin/woocommerce.latest-stable.zip","https://github.com/WP-API/Basic-Auth/archive/master.zip","https://downloads.wordpress.org/plugin/gutenberg.latest-stable.zip", "."] }'

View File

@ -136,7 +136,7 @@
"patch-package": "6.4.7",
"postcss": "8.2.13",
"postcss-loader": "4.2.0",
"prettier": "npm:wp-prettier@^2.0.5",
"prettier": "npm:wp-prettier@2.0.5",
"progress-bar-webpack-plugin": "2.1.0",
"promptly": "3.2.0",
"react-docgen": "5.4.0",
@ -11717,27 +11717,27 @@
}
},
"node_modules/@wordpress/e2e-test-utils/node_modules/@wordpress/api-fetch": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/@wordpress/api-fetch/-/api-fetch-6.0.1.tgz",
"integrity": "sha512-rodFmGcnhI5gLKRueabLHiNrPpl/i+DCD23xg8/xs2Iyr47YFZZN4KB8WKaRVDxPZQJAB67IqMLs/h4U02HdmA==",
"version": "6.1.1",
"resolved": "https://registry.npmjs.org/@wordpress/api-fetch/-/api-fetch-6.1.1.tgz",
"integrity": "sha512-6RHPgwLC+gg8geRsCAXgBW27X4NbV31IHH1rQR0LWecQutTfIrcW/RE2nJtX86X/ayFkBpM//9TflJ57r5o3lQ==",
"dev": true,
"dependencies": {
"@babel/runtime": "^7.16.0",
"@wordpress/i18n": "^4.3.1",
"@wordpress/url": "^3.4.1"
"@wordpress/i18n": "^4.4.1",
"@wordpress/url": "^3.5.1"
},
"engines": {
"node": ">=12"
}
},
"node_modules/@wordpress/e2e-test-utils/node_modules/@wordpress/i18n": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-4.3.1.tgz",
"integrity": "sha512-4xeGUOhZL+Xl97VPSEslWJxCjQPuK2I8AEJWe5cb1u/YOcgTzOav2QN7T7wYzt3Os5bfqNBmTFMfOr+1goFPrw==",
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-4.4.1.tgz",
"integrity": "sha512-cDD3dxynq0P+HwB1dwUD2xpmjTr55oyuB0Mybcr8N4sTrbl/bDj5VRrh8bdps7KSqIdM4OuMtxJKLbg3y5CktA==",
"dev": true,
"dependencies": {
"@babel/runtime": "^7.16.0",
"@wordpress/hooks": "^3.3.1",
"@wordpress/hooks": "^3.4.1",
"gettext-parser": "^1.3.1",
"lodash": "^4.17.21",
"memize": "^1.1.0",
@ -11906,9 +11906,9 @@
}
},
"node_modules/@wordpress/hooks": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/@wordpress/hooks/-/hooks-3.3.1.tgz",
"integrity": "sha512-Eyc5YYX8010Ihr6Ab4lq9G7J9DmPiLnGf6C4WwEMf0iQ9SBw8hcp2TCwkSyC12DU7iY0o11FYGfgdGW3UpPiYA==",
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/@wordpress/hooks/-/hooks-3.4.1.tgz",
"integrity": "sha512-+RODEvxNsx3KW5nvk4KbnYMNFYvWA4Fduf784Ht7PJoL2L3z63Wm2blRh7a21hDEFHGPgWkne0f3Fgr/dqalHA==",
"dependencies": {
"@babel/runtime": "^7.16.0"
},
@ -12043,12 +12043,12 @@
}
},
"node_modules/@wordpress/keycodes": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/@wordpress/keycodes/-/keycodes-3.3.1.tgz",
"integrity": "sha512-d/8wCjqB8c5426i8kLSRDxR/tezZFR0R/OOPFLoh/XnKiuRda/8OuPdSTUDmsLCam+yjV9K5uRm0KcMiZeFu7A==",
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/@wordpress/keycodes/-/keycodes-3.4.1.tgz",
"integrity": "sha512-z/pIY0JtLVCxMClKZFnSbhumDbTDf69F4vHYLESNRdAJktqPRRzKsSeg69tJKI+00QzVakKWAvoyyyjopmxoCQ==",
"dependencies": {
"@babel/runtime": "^7.16.0",
"@wordpress/i18n": "^4.3.1",
"@wordpress/i18n": "^4.4.1",
"lodash": "^4.17.21"
},
"engines": {
@ -12056,12 +12056,12 @@
}
},
"node_modules/@wordpress/keycodes/node_modules/@wordpress/i18n": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-4.3.1.tgz",
"integrity": "sha512-4xeGUOhZL+Xl97VPSEslWJxCjQPuK2I8AEJWe5cb1u/YOcgTzOav2QN7T7wYzt3Os5bfqNBmTFMfOr+1goFPrw==",
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-4.4.1.tgz",
"integrity": "sha512-cDD3dxynq0P+HwB1dwUD2xpmjTr55oyuB0Mybcr8N4sTrbl/bDj5VRrh8bdps7KSqIdM4OuMtxJKLbg3y5CktA==",
"dependencies": {
"@babel/runtime": "^7.16.0",
"@wordpress/hooks": "^3.3.1",
"@wordpress/hooks": "^3.4.1",
"gettext-parser": "^1.3.1",
"lodash": "^4.17.21",
"memize": "^1.1.0",
@ -14848,9 +14848,9 @@
}
},
"node_modules/@wordpress/url": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/@wordpress/url/-/url-3.4.1.tgz",
"integrity": "sha512-EeE/qCTe2wYxvEhH4ygV8CONX7j1aQaZF5LUg+QHZ+cnV5Bo8SkcLZdOHqczwvljqwVnKc+ybzQx/WLE+APNSw==",
"version": "3.5.1",
"resolved": "https://registry.npmjs.org/@wordpress/url/-/url-3.5.1.tgz",
"integrity": "sha512-m4gjNdOkwaZ9NOVk/lYtpW4GoxHU0ZSv6WX3pFYRDSPdI1eX45uA8RrhPBYuj/e/XPUBiS+FXDilR0uvqqz9FA==",
"dependencies": {
"@babel/runtime": "^7.16.0",
"lodash": "^4.17.21"
@ -57278,24 +57278,24 @@
},
"dependencies": {
"@wordpress/api-fetch": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/@wordpress/api-fetch/-/api-fetch-6.0.1.tgz",
"integrity": "sha512-rodFmGcnhI5gLKRueabLHiNrPpl/i+DCD23xg8/xs2Iyr47YFZZN4KB8WKaRVDxPZQJAB67IqMLs/h4U02HdmA==",
"version": "6.1.1",
"resolved": "https://registry.npmjs.org/@wordpress/api-fetch/-/api-fetch-6.1.1.tgz",
"integrity": "sha512-6RHPgwLC+gg8geRsCAXgBW27X4NbV31IHH1rQR0LWecQutTfIrcW/RE2nJtX86X/ayFkBpM//9TflJ57r5o3lQ==",
"dev": true,
"requires": {
"@babel/runtime": "^7.16.0",
"@wordpress/i18n": "^4.3.1",
"@wordpress/url": "^3.4.1"
"@wordpress/i18n": "^4.4.1",
"@wordpress/url": "^3.5.1"
}
},
"@wordpress/i18n": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-4.3.1.tgz",
"integrity": "sha512-4xeGUOhZL+Xl97VPSEslWJxCjQPuK2I8AEJWe5cb1u/YOcgTzOav2QN7T7wYzt3Os5bfqNBmTFMfOr+1goFPrw==",
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-4.4.1.tgz",
"integrity": "sha512-cDD3dxynq0P+HwB1dwUD2xpmjTr55oyuB0Mybcr8N4sTrbl/bDj5VRrh8bdps7KSqIdM4OuMtxJKLbg3y5CktA==",
"dev": true,
"requires": {
"@babel/runtime": "^7.16.0",
"@wordpress/hooks": "^3.3.1",
"@wordpress/hooks": "^3.4.1",
"gettext-parser": "^1.3.1",
"lodash": "^4.17.21",
"memize": "^1.1.0",
@ -57429,9 +57429,9 @@
}
},
"@wordpress/hooks": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/@wordpress/hooks/-/hooks-3.3.1.tgz",
"integrity": "sha512-Eyc5YYX8010Ihr6Ab4lq9G7J9DmPiLnGf6C4WwEMf0iQ9SBw8hcp2TCwkSyC12DU7iY0o11FYGfgdGW3UpPiYA==",
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/@wordpress/hooks/-/hooks-3.4.1.tgz",
"integrity": "sha512-+RODEvxNsx3KW5nvk4KbnYMNFYvWA4Fduf784Ht7PJoL2L3z63Wm2blRh7a21hDEFHGPgWkne0f3Fgr/dqalHA==",
"requires": {
"@babel/runtime": "^7.16.0"
}
@ -57532,22 +57532,22 @@
}
},
"@wordpress/keycodes": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/@wordpress/keycodes/-/keycodes-3.3.1.tgz",
"integrity": "sha512-d/8wCjqB8c5426i8kLSRDxR/tezZFR0R/OOPFLoh/XnKiuRda/8OuPdSTUDmsLCam+yjV9K5uRm0KcMiZeFu7A==",
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/@wordpress/keycodes/-/keycodes-3.4.1.tgz",
"integrity": "sha512-z/pIY0JtLVCxMClKZFnSbhumDbTDf69F4vHYLESNRdAJktqPRRzKsSeg69tJKI+00QzVakKWAvoyyyjopmxoCQ==",
"requires": {
"@babel/runtime": "^7.16.0",
"@wordpress/i18n": "^4.3.1",
"@wordpress/i18n": "^4.4.1",
"lodash": "^4.17.21"
},
"dependencies": {
"@wordpress/i18n": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-4.3.1.tgz",
"integrity": "sha512-4xeGUOhZL+Xl97VPSEslWJxCjQPuK2I8AEJWe5cb1u/YOcgTzOav2QN7T7wYzt3Os5bfqNBmTFMfOr+1goFPrw==",
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-4.4.1.tgz",
"integrity": "sha512-cDD3dxynq0P+HwB1dwUD2xpmjTr55oyuB0Mybcr8N4sTrbl/bDj5VRrh8bdps7KSqIdM4OuMtxJKLbg3y5CktA==",
"requires": {
"@babel/runtime": "^7.16.0",
"@wordpress/hooks": "^3.3.1",
"@wordpress/hooks": "^3.4.1",
"gettext-parser": "^1.3.1",
"lodash": "^4.17.21",
"memize": "^1.1.0",
@ -59681,9 +59681,9 @@
}
},
"@wordpress/url": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/@wordpress/url/-/url-3.4.1.tgz",
"integrity": "sha512-EeE/qCTe2wYxvEhH4ygV8CONX7j1aQaZF5LUg+QHZ+cnV5Bo8SkcLZdOHqczwvljqwVnKc+ybzQx/WLE+APNSw==",
"version": "3.5.1",
"resolved": "https://registry.npmjs.org/@wordpress/url/-/url-3.5.1.tgz",
"integrity": "sha512-m4gjNdOkwaZ9NOVk/lYtpW4GoxHU0ZSv6WX3pFYRDSPdI1eX45uA8RrhPBYuj/e/XPUBiS+FXDilR0uvqqz9FA==",
"requires": {
"@babel/runtime": "^7.16.0",
"lodash": "^4.17.21"

View File

@ -101,6 +101,10 @@ const SELECTORS = {
'WooCommerce Single Product Block'
),
},
templates: {
templateActions:
'[aria-label="Templates list - Content"] [aria-label="Actions"]',
},
};
const CUSTOMIZED_STRING = 'My awesome customization';
@ -120,7 +124,6 @@ describe( 'Store Editing Templates', () => {
const EXPECTED_TEMPLATE = defaultTemplateProps( 'Single Product' );
await goToSiteEditor( '?postType=wp_template' );
const templates = await getAllTemplates();
try {
@ -167,6 +170,8 @@ describe( 'Store Editing Templates', () => {
await visitTemplateAndAddCustomParagraph( 'single-product' );
await goToSiteEditor( '?postType=wp_template' );
// we need to wait for the selector to show up, sometimes the loading is delayed and test becomes flaky
await page.waitForSelector( SELECTORS.templates.templateActions );
const templates = await getAllTemplates();
try {
@ -220,7 +225,6 @@ describe( 'Store Editing Templates', () => {
const EXPECTED_TEMPLATE = defaultTemplateProps( 'Product Catalog' );
await goToSiteEditor( '?postType=wp_template' );
const templates = await getAllTemplates();
try {
@ -264,6 +268,7 @@ describe( 'Store Editing Templates', () => {
await visitTemplateAndAddCustomParagraph( 'archive-product' );
await goToSiteEditor( '?postType=wp_template' );
await page.waitForSelector( SELECTORS.templates.templateActions );
const templates = await getAllTemplates();
try {
@ -320,7 +325,6 @@ describe( 'Store Editing Templates', () => {
);
await goToSiteEditor( '?postType=wp_template' );
const templates = await getAllTemplates();
try {
@ -365,6 +369,7 @@ describe( 'Store Editing Templates', () => {
await visitTemplateAndAddCustomParagraph( 'taxonomy-product_cat' );
await goToSiteEditor( '?postType=wp_template' );
await page.waitForSelector( SELECTORS.templates.templateActions );
const templates = await getAllTemplates();
try {
@ -415,7 +420,6 @@ describe( 'Store Editing Templates', () => {
const EXPECTED_TEMPLATE = defaultTemplateProps( 'Products by Tag' );
await goToSiteEditor( '?postType=wp_template' );
const templates = await getAllTemplates();
try {
@ -460,6 +464,7 @@ describe( 'Store Editing Templates', () => {
await visitTemplateAndAddCustomParagraph( 'taxonomy-product_tag' );
await goToSiteEditor( '?postType=wp_template' );
await page.waitForSelector( SELECTORS.templates.templateActions );
const templates = await getAllTemplates();
try {

View File

@ -9,9 +9,8 @@ import {
pressKeyWithModifier,
switchUserToAdmin,
visitAdminPage,
visitSiteEditor,
} from '@wordpress/e2e-test-utils';
import { getQueryArgs } from '@wordpress/url';
import { addQueryArgs } from '@wordpress/url';
import { WP_ADMIN_DASHBOARD } from '@woocommerce/e2e-utils';
/**
@ -29,6 +28,8 @@ import { elementExists, getElementData, getTextContent } from './page-utils';
*/
export const BASE_URL = config.get( 'url' );
export const GUTENBERG_EDITOR_CONTEXT =
process.env.GUTENBERG_EDITOR_CONTEXT || 'core';
export const DEFAULT_TIMEOUT = 30000;
const SELECTORS = {
@ -143,21 +144,33 @@ export const isBlockInsertedInWidgetsArea = async ( blockName ) => {
*
* There are two different possible site editor pages:
*
* 1. `themes.php?page=gutenberg-edit-site` is the one used and available if the Gutenberg plugin is enabled.
* 2. `site-editor.php` is the one available in WP Core.
* 1. `themes.php?page=gutenberg-edit-site` this is a legacy editor access used for WP <=5.8.
* 2. `site-editor.php` is the new way of accessing the editor in WP >=5.9+.
*
* @param {string} query String to be serialized as query portion of URL.
* @param {'core' | 'gutenberg'} [editorContext='core'] Whether to go to the Gutenberg URL or the Core one.
*/
export async function goToSiteEditor( query, editorContext = 'core' ) {
if ( editorContext === 'gutenberg' ) {
const queryArgs = getQueryArgs( query );
export async function goToSiteEditor(
query,
editorContext = GUTENBERG_EDITOR_CONTEXT
) {
// There is a bug in Gutenberg/WPCore now that makes it impossible to rely on site-editor.php on setups
// with locally installed Gutenberg. Details in https://github.com/WordPress/gutenberg/issues/39639.
// TODO: Update to always use site-editor.php once WordPress 6.0 is released and fix is verified.
// Remove usage of GUTENBERG_EDITOR_CONTEXT from from here and from workflows.
await visitSiteEditor( queryArgs );
} else {
await visitAdminPage( 'site-editor.php', query );
await disableSiteEditorWelcomeGuide();
let editorPath = 'site-editor.php';
let queryString = query;
if ( editorContext === 'gutenberg' ) {
editorPath = 'themes.php';
queryString = addQueryArgs( queryString, {
page: 'gutenberg-edit-site',
} );
}
await visitAdminPage( editorPath, queryString );
await disableSiteEditorWelcomeGuide();
}
/**
@ -179,8 +192,13 @@ export async function saveTemplate() {
await page.click( saveButton );
await page.waitForSelector( savePrompt );
await page.click( confirmSave );
await page.waitForSelector( `${ saveButton }[aria-disabled="true"]` );
await page.waitForResponse( ( res ) => {
// Will match both templates and template_parts endpoints.
return res.url().includes( '/wp/v2/template' );
} );
}
/**