From c791693cefacefe71c1efe7c0944c7a325f4c9dc Mon Sep 17 00:00:00 2001 From: Benjamin Intal Date: Sat, 8 Jan 2022 18:42:28 +0800 Subject: [PATCH 01/13] Run wp 5.9 test --- .github/workflows/e2e-test-wp57.yml | 115 ---------------------------- .github/workflows/e2e-test.yml | 2 +- .wp-env.json | 11 ++- 3 files changed, 9 insertions(+), 119 deletions(-) delete mode 100644 .github/workflows/e2e-test-wp57.yml diff --git a/.github/workflows/e2e-test-wp57.yml b/.github/workflows/e2e-test-wp57.yml deleted file mode 100644 index 5d4cec77..00000000 --- a/.github/workflows/e2e-test-wp57.yml +++ /dev/null @@ -1,115 +0,0 @@ -name: e2e-test-wp57 -on: - push: - branches: [ master ] - pull_request: - branches: [ master ] - -jobs: - test: - runs-on: ubuntu-latest - strategy: - fail-fast: false - matrix: - containers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20] - total-machines: [20] - wp-versions: ['5.7.2'] # Use this specific WP version - - steps: - - uses: actions/checkout@v2 # Checkout the current branch (e2e). - - uses: actions/checkout@v2 # Checkout the Stackable Free repo. - with: - repository: 'gambitph/Stackable' # Stackable free repo - ref: 'develop' # Branch to checkout - path: 'Stackable' - - uses: actions/checkout@v2 # Checkout the Stackable Premium repo. - with: - repository: 'bfintal/Stackable-Premium' # Stackable premium repo - ref: 'develop' # Branch to checkout - path: 'Stackable/pro__premium_only' - token: '${{ secrets.ACCESS_KEY }}' - - # Change the PHP version to v7.4.1 - - name: Setup PHP v7.4.1 - uses: shivammathur/setup-php@v2 - with: - php-version: '7.4.1' - - # Check the current PHP version installed - - name: Check PHP version - run: php -v - - # Install all dependencies from composer.json - - name: Install dependencies - working-directory: Stackable - run: | - composer require wp-phpunit/wp-phpunit:${{ matrix.wp-versions }} --dev - composer require roots/wordpress:${{ matrix.wp-versions }} --dev - composer install --prefer-dist --no-progress - # Install all dependencies from composer.json - - name: Install dependencies in premium - working-directory: Stackable/pro__premium_only - run: | - composer require wp-phpunit/wp-phpunit:${{ matrix.wp-versions }} --dev - composer require roots/wordpress:${{ matrix.wp-versions }} --dev - composer install --prefer-dist --no-progress - - name: Cache node modules - uses: actions/cache@v2 - env: - cache-name: cache-node-modules - with: - path: ~/.npm - key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }} - restore-keys: | - ${{ runner.os }}-build-${{ env.cache-name }}- - ${{ runner.os }}-build- - ${{ runner.os }}- - - name: Setup Node - uses: actions/setup-node@v1 - with: - node-version: 14.x - - - name: Install @wordpress/env - run: npm install -g @wordpress/env - - - name: Build Stackable Premium - run: | - cd Stackable - npm ci - cd pro__premium_only - npm ci - npm run build --if-present - # Install all dependencies from composer.json - - name: Install WordPress Version - run: | - composer require roots/wordpress:${{ matrix.wp-versions }} --dev - - name: Run WordPress Environment - run: wp-env start - - - name: Run Test Suite - uses: cypress-io/github-action@v2 - with: - command: npm run cy:run:parallel -- --machine-number=${{ matrix.containers }} --total-machines=${{ matrix.total-machines }} --spec=cypress/integration/v3/**/*.spec.js --browser=chrome --env=STACKABLE_PREMIUM_CODE=${{ secrets.STACKABLE_PREMIUM_CODE }},GITHUB_ACTIONS=1 --config=baseUrl=http://localhost:8889 - - - name: Upload E2E Test Results - uses: actions/upload-artifact@v2 - with: - name: e2e-test-results-${{ matrix.containers }} - path: cypress/results/e2e-test-results.xml - - publish-test-results: - name: Publish E2E Test Results - needs: test - runs-on: ubuntu-latest - - steps: - - name: Download Artifacts - uses: actions/download-artifact@v2 - with: - path: artifacts - - - name: Publish E2E Test Results - uses: EnricoMi/publish-unit-test-result-action@v1 - with: - files: artifacts/**/*.xml - check_name: E2E Test Results diff --git a/.github/workflows/e2e-test.yml b/.github/workflows/e2e-test.yml index 4b902586..9bd6765c 100644 --- a/.github/workflows/e2e-test.yml +++ b/.github/workflows/e2e-test.yml @@ -37,7 +37,7 @@ jobs: # Check the current PHP version installed - name: Check PHP version run: php -v - + # Install all dependencies from composer.json - name: Install dependencies working-directory: Stackable diff --git a/.wp-env.json b/.wp-env.json index 3af4c70d..e83ef75e 100644 --- a/.wp-env.json +++ b/.wp-env.json @@ -1,5 +1,10 @@ { - "core": "https://wordpress.org/latest.zip", - "themes": [ "WordPress/theme-experiments/tt1-blocks#tt1-blocks@0.4.7" ], - "plugins": [ ".", "./Stackable" ] + "core": "https://wordpress.org/nightly-builds/wordpress-latest.zip", + "themes": [ + "WordPress/theme-experiments/tt1-blocks#tt1-blocks@0.4.7" + ], + "plugins": [ + ".", + "./Stackable" + ] } From 2dc0163a0a20d613a5874c82eb3a55263d2ce864 Mon Sep 17 00:00:00 2001 From: Benjamin Intal Date: Tue, 11 Jan 2022 17:07:03 +0800 Subject: [PATCH 02/13] fix: added provisions to make Cypress get and jQuery find to work with Gutenberg's iframes --- cypress/support/gutenberg/commands/editor.js | 57 ++++++++++++++++++++ cypress/support/stackable/commands/index.js | 2 +- 2 files changed, 58 insertions(+), 1 deletion(-) diff --git a/cypress/support/gutenberg/commands/editor.js b/cypress/support/gutenberg/commands/editor.js index 16687e5b..c30808c9 100644 --- a/cypress/support/gutenberg/commands/editor.js +++ b/cypress/support/gutenberg/commands/editor.js @@ -7,6 +7,63 @@ import { import { setBaseAndExtent } from '../util' import { isArray } from 'lodash' +// In WordPress 5.9, previewing Gutenberg in tablet/mobile now replaces the +// editor area with an iframe. This produces an error because the Cypress get +// command doesn't include the contents of an iframe. +// +// This overwrites the get command to also include the contents of the iframe. +// If the normal get command fails, we try again within the iframe. +Cypress.Commands.overwrite( 'get', ( originalFn, selector, options ) => { + // Turn off logging to help speed up tests. + const newOptions = Object.assign( options || {}, { log: false } ) + + if ( selector === 'iframe[name="editor-canvas"]' || selector === 'body' ) { + return originalFn( selector, newOptions ) + } + + return originalFn( 'body', { log: false } ).then( $body => { + try { + if ( $body.find( selector ).length > 0 ) { + return originalFn( selector, newOptions ) + } + } catch ( $err ) { + return originalFn( selector, newOptions ) + } + + if ( $body.find( 'iframe[name="editor-canvas"]' ).length > 0 ) { + return new Cypress.Promise( resolve => { + originalFn( 'iframe[name="editor-canvas"]' ).then( $iframe => { + const jQueryObj = Cypress.$( $iframe[ 0 ].contentDocument.body.querySelector( selector ) ) + resolve( jQueryObj ) + } ) + } ) + } + + return originalFn( selector, newOptions ) + } ) +} ); + +// In connection to the above fix, we also need to override the jQuery find +// command since it also doesn't handle iframes. So when the jQuery find command +// looks for an element that doesn't exist, also retry whether it's found inside +// the editor iframe. +( function( $ ) { + const oldFind = $.fn.find + $.fn.find = function() { + const findResults = oldFind.apply( this, arguments ) + + if ( ! findResults.length ) { + const iframe = oldFind.apply( this, [ 'iframe[name="editor-canvas"]' ] ) + if ( iframe.length ) { + const iframeBody = $( iframe[ 0 ].contentDocument.body ) + return iframeBody.find( arguments[ 0 ] ) + } + } + + return findResults + } +}( Cypress.$ ) ) + /** * Register functions to Cypress Commands. */ diff --git a/cypress/support/stackable/commands/index.js b/cypress/support/stackable/commands/index.js index c20cc8b6..656636b2 100644 --- a/cypress/support/stackable/commands/index.js +++ b/cypress/support/stackable/commands/index.js @@ -6,7 +6,7 @@ import { modifyLogFunc } from '../util' /** * Overwrite Cypress Commands */ -Cypress.Commands.overwrite( 'get', modifyLogFunc() ) +// Cypress.Commands.overwrite( 'get', modifyLogFunc() ) // Don't overwrite the get command, it's overwritten by the Gutenberg get command already. Cypress.Commands.overwrite( 'click', modifyLogFunc() ) Cypress.Commands.overwrite( 'type', modifyLogFunc() ) Cypress.Commands.overwrite( 'reload', modifyLogFunc() ) From 2ad54c7a71b78303d8ab65355d7cd0e8c4c9167b Mon Sep 17 00:00:00 2001 From: Benjamin Intal Date: Tue, 11 Jan 2022 17:16:36 +0800 Subject: [PATCH 03/13] fix: updated WP 5.9 post title selector --- cypress/support/gutenberg/commands/editor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/support/gutenberg/commands/editor.js b/cypress/support/gutenberg/commands/editor.js index c30808c9..614b7143 100644 --- a/cypress/support/gutenberg/commands/editor.js +++ b/cypress/support/gutenberg/commands/editor.js @@ -292,7 +292,7 @@ export function wp() { export function typePostTitle( title ) { cy .get( '.edit-post-visual-editor__post-title-wrapper' ) - .find( 'textarea.editor-post-title__input' ) + .find( 'textarea.editor-post-title__input, .editor-post-title__input' ) // In WP 5.9, it's no longer a textarea. .type( `{selectall}${ title }`, { force: true } ) cy.publish() } From b0b483480b9ebfa9f3cf384867cb022a800d3151 Mon Sep 17 00:00:00 2001 From: Benjamin Intal Date: Wed, 12 Jan 2022 04:43:30 +0800 Subject: [PATCH 04/13] fix: checks for not.exist throws errors if get doesn't exist --- .../v2/features/optimization-settings.spec.js | 2 +- .../v2/features/role-manager.spec.js | 20 +++++++++---------- .../integration/v3/blocks/other-tests.spec.js | 2 +- cypress/support/gutenberg/commands/blocks.js | 3 ++- cypress/support/stackable/helpers/advanced.js | 7 ++++++- cypress/support/wordpress/commands/plugins.js | 2 +- 6 files changed, 21 insertions(+), 15 deletions(-) diff --git a/cypress/integration/v2/features/optimization-settings.spec.js b/cypress/integration/v2/features/optimization-settings.spec.js index e92311d5..eb418273 100644 --- a/cypress/integration/v2/features/optimization-settings.spec.js +++ b/cypress/integration/v2/features/optimization-settings.spec.js @@ -39,7 +39,7 @@ function optimizationSettings() { cy.visit( previewUrl ) // CSS & JS files should not be present because there are no Stackable blocks. cssJsSelectors.forEach( selector => { - cy.get( selector ).should( 'not.exist' ) + cy.get( 'body' ).should( 'not.have.descendants', selector ) } ) cy.visit( editorUrl ) diff --git a/cypress/integration/v2/features/role-manager.spec.js b/cypress/integration/v2/features/role-manager.spec.js index 41f7539b..0f68933a 100644 --- a/cypress/integration/v2/features/role-manager.spec.js +++ b/cypress/integration/v2/features/role-manager.spec.js @@ -19,12 +19,12 @@ function roleManagerTest() { // By default, full site editing mode is set for all roles // Content only mode notice should not be present // Test this for administrator - cy.get( '.ugb-editor-mode-notice' ).should( 'not.exist' ) + cy.get( 'body' ).should( 'not.have.descendants', '.ugb-editor-mode-notice' ) } ) coreblocks.forEach( blockName => { // Test this for core blocks as well. cy.addBlock( blockName ) - cy.get( '.ugb-editor-mode-notice' ).should( 'not.exist' ) + cy.get( 'body' ).should( 'not.have.descendants', '.ugb-editor-mode-notice' ) } ) cy.savePost() @@ -57,11 +57,11 @@ function roleManagerTest() { cy.visit( editorUrl ) blocks.forEach( blockName => { cy.selectBlock( blockName ) - cy.get( '.ugb-editor-mode-notice' ).should( 'not.exist' ) + cy.get( 'body' ).should( 'not.have.descendants', '.ugb-editor-mode-notice' ) } ) coreblocks.forEach( blockName => { cy.selectBlock( blockName ) - cy.get( '.ugb-editor-mode-notice' ).should( 'not.exist' ) + cy.get( 'body' ).should( 'not.have.descendants', '.ugb-editor-mode-notice' ) } ) cy.savePost() } ) @@ -98,18 +98,18 @@ function roleManagerTest() { cy.openInspector( blockName, 'Style' ) cy.selectBlock( blockName ) cy.get( '.ugb-editor-mode-notice' ).should( 'exist' ) - cy.get( 'button[tooltip="Copy & Paste Styles"]' ).should( 'not.exist' ) - cy.get( 'button[aria-label="Dynamic Fields"]' ).should( 'not.exist' ) + cy.get( 'body' ).should( 'not.have.descendants', 'button[tooltip="Copy & Paste Styles"]' ) + cy.get( 'body' ).should( 'not.have.descendants', 'button[aria-label="Dynamic Fields"]' ) } ) coreblocks.forEach( blockName => { cy.selectBlock( blockName ) cy.get( '.ugb-editor-mode-notice' ).should( 'exist' ) - cy.get( 'button[tooltip="Copy & Paste Styles"]' ).should( 'not.exist' ) - cy.get( 'button[aria-label="Dynamic Fields"]' ).should( 'not.exist' ) + cy.get( 'body' ).should( 'not.have.descendants', 'button[tooltip="Copy & Paste Styles"]' ) + cy.get( 'body' ).should( 'not.have.descendants', 'button[aria-label="Dynamic Fields"]' ) } ) - cy.get( 'button[aria-label="Stackable Settings"]' ).should( 'not.exist' ) - cy.get( 'button[aria-label="Open Design Library"]' ).should( 'not.exist' ) + cy.get( 'body' ).should( 'not.have.descendants', 'button[aria-label="Stackable Settings"]' ) + cy.get( 'body' ).should( 'not.have.descendants', 'button[aria-label="Open Design Library"]' ) // The blocklist should only contain 4 text blocks. // 2 of which are Stackable blocks. diff --git a/cypress/integration/v3/blocks/other-tests.spec.js b/cypress/integration/v3/blocks/other-tests.spec.js index 2b798f35..9042ad17 100644 --- a/cypress/integration/v3/blocks/other-tests.spec.js +++ b/cypress/integration/v3/blocks/other-tests.spec.js @@ -26,7 +26,7 @@ function addInnerBlocksToQueryLoop() { // Filter out button & icon button when adding inner blocks. // We'll add button group instead. stkBlocks - .filter( blockName => ! Array( 'stackable/button', 'stackable/icon-button' ).includes( blockName ) ) + .filter( blockName => ! Array( 'stackable/button', 'stackable/icon-button', 'stackable/icon-list' ).includes( blockName ) ) .forEach( blockName => { cy.addInnerBlock( 'core/post-template', blockName ) } ) diff --git a/cypress/support/gutenberg/commands/blocks.js b/cypress/support/gutenberg/commands/blocks.js index 2c6f6e95..7fc104f5 100644 --- a/cypress/support/gutenberg/commands/blocks.js +++ b/cypress/support/gutenberg/commands/blocks.js @@ -27,7 +27,7 @@ Cypress.Commands.add( 'addNewColumn', { prevSubject: true }, addNewColumn ) * Command for asserting block error. */ export function assertBlockError() { - cy.get( '.block-editor-warning' ).should( 'not.exist' ) + cy.get( 'body' ).should( 'not.have.descendants', '.block-editor-warning' ) } /** @@ -247,6 +247,7 @@ export function addInnerBlock( blockName = 'ugb/accordion', blockToAdd = 'ugb/ac if ( $editor.find( '.block-editor-block-variation-picker' ).length ) { cy.get( '.block-editor-block-variation-picker' ) .find( '.block-editor-block-variation-picker__skip button' ) + .first() // There can be multiple buttons. .click( { force: true } ) } } ) diff --git a/cypress/support/stackable/helpers/advanced.js b/cypress/support/stackable/helpers/advanced.js index cce1dbba..2670893c 100644 --- a/cypress/support/stackable/helpers/advanced.js +++ b/cypress/support/stackable/helpers/advanced.js @@ -722,7 +722,12 @@ class AdvancedModule extends Module { cy.savePost() cy.getPostUrls().then( ( { editorUrl, previewUrl } ) => { cy.visit( previewUrl ) - cy.get( MAIN_SELECTOR ).should( assertionValue ) + if ( assertionValue === 'exist' ) { + cy.get( MAIN_SELECTOR ).should( assertionValue ) + } else { + // Use this instead because get( MAIN_SELECTOR ) sometimes fails. + cy.get( 'body' ).should( 'not.have.descendants', MAIN_SELECTOR ) + } cy.visit( editorUrl ) selectInspector() } ) diff --git a/cypress/support/wordpress/commands/plugins.js b/cypress/support/wordpress/commands/plugins.js index 68f5fe2c..faad6074 100644 --- a/cypress/support/wordpress/commands/plugins.js +++ b/cypress/support/wordpress/commands/plugins.js @@ -44,5 +44,5 @@ export function activatePlugin( slug ) { * plugin activation. */ export function assertPluginError() { - cy.get( '.xdebug-error' ).should( 'not.exist' ) + cy.get( 'body' ).should( 'not.have.descendants', '.xdebug-error' ) } From 85a95097dcd43c75c1b6a1e5c6c46e469e6b0924 Mon Sep 17 00:00:00 2001 From: Benjamin Intal Date: Sat, 15 Jan 2022 12:22:16 +0800 Subject: [PATCH 05/13] fix: changed when to get styles to ensure they're applied --- cypress/support/gutenberg/commands/assertions.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/cypress/support/gutenberg/commands/assertions.js b/cypress/support/gutenberg/commands/assertions.js index b7d1905b..33f7d5f4 100644 --- a/cypress/support/gutenberg/commands/assertions.js +++ b/cypress/support/gutenberg/commands/assertions.js @@ -103,7 +103,6 @@ export function _assertComputedStyle( selector, pseudoEl, _cssObject, assertType parentEl.parentElement.offsetHeight // eslint-disable-line no-unused-expressions const assertionCallback = ( element, pseudoEl, parentEl ) => { - const computedStyles = Object.assign( {}, pick( win.getComputedStyle( element, pseudoEl || undefined ), ...keys( _cssObject ).map( camelCase ) ) ) const expectedStylesToEnqueue = keys( _cssObject ).map( key => `${ key }: ${ convertExpectedValueForEnqueue( _cssObject[ key ] ) } !important` ).join( '; ' ) @@ -121,6 +120,8 @@ export function _assertComputedStyle( selector, pseudoEl, _cssObject, assertType element.parentNode.insertBefore( dummyStyle, element ) } + const computedStyles = Object.assign( {}, pick( win.getComputedStyle( element, pseudoEl || undefined ), ...keys( _cssObject ).map( camelCase ) ) ) + element.offsetHeight // eslint-disable-line no-unused-expressions element.parentElement.offsetHeight // eslint-disable-line no-unused-expressions parentEl.parentElement.offsetHeight // eslint-disable-line no-unused-expressions From 12a09266d31ab5e5aa9b6615c0ce726d57e1a9fa Mon Sep 17 00:00:00 2001 From: Benjamin Intal Date: Thu, 3 Feb 2022 16:39:28 +0800 Subject: [PATCH 06/13] test fix/performance --- .github/workflows/e2e-test.yml | 2 +- .wp-env.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/e2e-test.yml b/.github/workflows/e2e-test.yml index 9bd6765c..46aa54b3 100644 --- a/.github/workflows/e2e-test.yml +++ b/.github/workflows/e2e-test.yml @@ -19,7 +19,7 @@ jobs: - uses: actions/checkout@v2 # Checkout the Stackable Free repo. with: repository: 'gambitph/Stackable' # Stackable free repo - ref: 'develop' # Branch to checkout + ref: 'fix/performance' # Branch to checkout path: 'Stackable' - uses: actions/checkout@v2 # Checkout the Stackable Premium repo. with: diff --git a/.wp-env.json b/.wp-env.json index e83ef75e..885c5d05 100644 --- a/.wp-env.json +++ b/.wp-env.json @@ -1,5 +1,5 @@ { - "core": "https://wordpress.org/nightly-builds/wordpress-latest.zip", + "core": "https://wordpress.org/latest.zip", "themes": [ "WordPress/theme-experiments/tt1-blocks#tt1-blocks@0.4.7" ], From b56b79a72e42779e7edc47046a6f3da9c81cd5e0 Mon Sep 17 00:00:00 2001 From: Benjamin Intal Date: Thu, 3 Feb 2022 19:06:48 +0800 Subject: [PATCH 07/13] fix: open the hex input in custom color pickers --- cypress/support/gutenberg/commands/controls.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/cypress/support/gutenberg/commands/controls.js b/cypress/support/gutenberg/commands/controls.js index 0e15c031..dd5115c4 100644 --- a/cypress/support/gutenberg/commands/controls.js +++ b/cypress/support/gutenberg/commands/controls.js @@ -279,10 +279,14 @@ function colorControl( name, value, options = {} ) { cy .get( '.components-popover__content .components-color-picker' ) - .find( 'button[aria-label="Show detailed inputs"]' ) - .click( { force: true } ) - cy - .get( 'input[maxlength="6"]' ) + // Expand the custom color field if it's not expanded. + .then( $el => { + if ( $el.find( 'button[aria-label="Show detailed inputs"]' ).length > 0 ) { + cy.get( 'button[aria-label="Show detailed inputs"]' ).click( { force: true } ) + } + return cy.wrap( $el ) + } ) + .find( 'input.components-input-control__input' ) .type( `{selectall}${ value.replace( '#', '' ) }{enter}`, { force: true } ) selector() From 251c94b5b4288484caa410a489bb07e8be49c677 Mon Sep 17 00:00:00 2001 From: Benjamin Intal Date: Sat, 5 Feb 2022 16:21:56 +0800 Subject: [PATCH 08/13] try headed mode --- .github/workflows/e2e-test.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/e2e-test.yml b/.github/workflows/e2e-test.yml index 46aa54b3..e3e27fcb 100644 --- a/.github/workflows/e2e-test.yml +++ b/.github/workflows/e2e-test.yml @@ -87,7 +87,7 @@ jobs: - name: Run Test Suite uses: cypress-io/github-action@v2 with: - command: npm run cy:run:parallel -- --machine-number=${{ matrix.containers }} --total-machines=${{ matrix.total-machines }} --spec=cypress/integration/v3/**/*.spec.js --browser=chrome --env=STACKABLE_PREMIUM_CODE=${{ secrets.STACKABLE_PREMIUM_CODE }},GITHUB_ACTIONS=1 --config=baseUrl=http://localhost:8889 + command: npm run cy:run:parallel -- --machine-number=${{ matrix.containers }} --total-machines=${{ matrix.total-machines }} --spec=cypress/integration/v3/**/*.spec.js --headed --browser=chrome --env=STACKABLE_PREMIUM_CODE=${{ secrets.STACKABLE_PREMIUM_CODE }},GITHUB_ACTIONS=1 --config=baseUrl=http://localhost:8889 # STACKABLE_PREMIUM_CODE contains a premium license key for Stackable Premium - name: Upload E2E Test Results From 8cd3ba008325fdad4123838022cd0f080841c981 Mon Sep 17 00:00:00 2001 From: Benjamin Intal Date: Sun, 6 Feb 2022 11:44:08 +0800 Subject: [PATCH 09/13] Try 10 virtual machines only since some can't connect --- .github/workflows/e2e-test.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/e2e-test.yml b/.github/workflows/e2e-test.yml index e3e27fcb..ada7d486 100644 --- a/.github/workflows/e2e-test.yml +++ b/.github/workflows/e2e-test.yml @@ -11,8 +11,8 @@ jobs: strategy: fail-fast: false matrix: - containers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20] # Enumerate the total-machines as a range, this must match the total-machines number below. - total-machines: [20] # The number of concurrent test machines to run. You can lower this when there are only a few tests you know will run (max 20). + containers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] # Enumerate the total-machines as a range, this must match the total-machines number below. + total-machines: [10] # The number of concurrent test machines to run. You can lower this when there are only a few tests you know will run (max 20). steps: - uses: actions/checkout@v2 # Checkout the current branch (e2e). From a139a073c795ba38f482988f5cc5d659a27484e4 Mon Sep 17 00:00:00 2001 From: Benjamin Intal Date: Sun, 6 Feb 2022 19:18:08 +0800 Subject: [PATCH 10/13] fix: flakiness when inserting then selecting blocks and selecting blocks on tablet/mobile preview --- cypress/support/gutenberg/commands/blocks.js | 6 ++---- cypress/support/gutenberg/commands/editor.js | 13 +++++++++++-- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/cypress/support/gutenberg/commands/blocks.js b/cypress/support/gutenberg/commands/blocks.js index 7fc104f5..340a9d21 100644 --- a/cypress/support/gutenberg/commands/blocks.js +++ b/cypress/support/gutenberg/commands/blocks.js @@ -72,6 +72,8 @@ export function addBlock( blockName = 'ugb/accordion', options = {} ) { cy.wp().then( wp => { const block = wp.blocks.createBlock( blockName ) + const { clientId: newBlockId, attributes: { className } } = block + new Cypress.Promise( resolve => { wp.data.dispatch( 'core/editor' ).insertBlock( block ) .then( dispatchResolver( resolve ) ) @@ -83,10 +85,6 @@ export function addBlock( blockName = 'ugb/accordion', options = {} ) { .find( `button[aria-label="${ variation }"]` ) .click( { force: true } ) } - } ) - - cy.wp().then( wp => { - const { clientId: newBlockId, attributes: { className } } = last( wp.data.select( 'core/block-editor' ).getBlocks() ) new Cypress.Promise( resolve => { wp.data.dispatch( 'core/block-editor' ).selectBlock( newBlockId ).then( dispatchResolver( resolve ) ) diff --git a/cypress/support/gutenberg/commands/editor.js b/cypress/support/gutenberg/commands/editor.js index 614b7143..e8808079 100644 --- a/cypress/support/gutenberg/commands/editor.js +++ b/cypress/support/gutenberg/commands/editor.js @@ -33,8 +33,17 @@ Cypress.Commands.overwrite( 'get', ( originalFn, selector, options ) => { if ( $body.find( 'iframe[name="editor-canvas"]' ).length > 0 ) { return new Cypress.Promise( resolve => { originalFn( 'iframe[name="editor-canvas"]' ).then( $iframe => { - const jQueryObj = Cypress.$( $iframe[ 0 ].contentDocument.body.querySelector( selector ) ) - resolve( jQueryObj ) + const body = $iframe[ 0 ].contentDocument.body + if ( body && body.querySelector( '.block-editor-block-list__layout' ) ) { + const jQueryObj = Cypress.$( body.querySelector( selector ) ) + resolve( jQueryObj ) + } else { + setTimeout( () => { + const body = $iframe[ 0 ].contentDocument.body + const jQueryObj = Cypress.$( body.querySelector( selector ) ) + resolve( jQueryObj ) + }, 200 ) + } } ) } ) } From db558e3883b827f292a644e31d8fdc61fe7bff8f Mon Sep 17 00:00:00 2001 From: Benjamin Intal Date: Wed, 9 Feb 2022 01:31:26 +0800 Subject: [PATCH 11/13] run e2e on develop --- .github/workflows/e2e-test-wp58.yml | 115 ++++++++++++++++++++++++++++ .github/workflows/e2e-test.yml | 2 +- 2 files changed, 116 insertions(+), 1 deletion(-) create mode 100644 .github/workflows/e2e-test-wp58.yml diff --git a/.github/workflows/e2e-test-wp58.yml b/.github/workflows/e2e-test-wp58.yml new file mode 100644 index 00000000..1b5549cd --- /dev/null +++ b/.github/workflows/e2e-test-wp58.yml @@ -0,0 +1,115 @@ +name: e2e-test-wp58 +on: + push: + branches: [ master ] + pull_request: + branches: [ master ] + +jobs: + test: + runs-on: ubuntu-latest + strategy: + fail-fast: false + matrix: + containers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] # Enumerate the total-machines as a range, this must match the total-machines number below. + total-machines: [10] # The number of concurrent test machines to run. You can lower this when there are only a few tests you know will run (max 20). + wp-versions: ['5.8.3'] # Use this specific WP version + + steps: + - uses: actions/checkout@v2 # Checkout the current branch (e2e). + - uses: actions/checkout@v2 # Checkout the Stackable Free repo. + with: + repository: 'gambitph/Stackable' # Stackable free repo + ref: 'develop' # Branch to checkout + path: 'Stackable' + - uses: actions/checkout@v2 # Checkout the Stackable Premium repo. + with: + repository: 'bfintal/Stackable-Premium' # Stackable premium repo + ref: 'develop' # Branch to checkout + path: 'Stackable/pro__premium_only' + token: '${{ secrets.ACCESS_KEY }}' + + # Change the PHP version to v7.4.1 + - name: Setup PHP v7.4.1 + uses: shivammathur/setup-php@v2 + with: + php-version: '7.4.1' + + # Check the current PHP version installed + - name: Check PHP version + run: php -v + + # Install all dependencies from composer.json + - name: Install dependencies + working-directory: Stackable + run: | + composer require wp-phpunit/wp-phpunit:${{ matrix.wp-versions }} --dev + composer require roots/wordpress:${{ matrix.wp-versions }} --dev + composer install --prefer-dist --no-progress + # Install all dependencies from composer.json + - name: Install dependencies in premium + working-directory: Stackable/pro__premium_only + run: | + composer require wp-phpunit/wp-phpunit:${{ matrix.wp-versions }} --dev + composer require roots/wordpress:${{ matrix.wp-versions }} --dev + composer install --prefer-dist --no-progress + - name: Cache node modules + uses: actions/cache@v2 + env: + cache-name: cache-node-modules + with: + path: ~/.npm + key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }} + restore-keys: | + ${{ runner.os }}-build-${{ env.cache-name }}- + ${{ runner.os }}-build- + ${{ runner.os }}- + - name: Setup Node + uses: actions/setup-node@v1 + with: + node-version: 14.x + + - name: Install @wordpress/env + run: npm install -g @wordpress/env + + - name: Build Stackable Premium + run: | + cd Stackable + npm ci + cd pro__premium_only + npm ci + npm run build --if-present + # Install all dependencies from composer.json + - name: Install WordPress Version + run: | + composer require roots/wordpress:${{ matrix.wp-versions }} --dev + - name: Run WordPress Environment + run: wp-env start + + - name: Run Test Suite + uses: cypress-io/github-action@v2 + with: + command: npm run cy:run:parallel -- --machine-number=${{ matrix.containers }} --total-machines=${{ matrix.total-machines }} --spec=cypress/integration/v3/**/*.spec.js --browser=chrome --env=STACKABLE_PREMIUM_CODE=${{ secrets.STACKABLE_PREMIUM_CODE }},GITHUB_ACTIONS=1 --config=baseUrl=http://localhost:8889 + + - name: Upload E2E Test Results + uses: actions/upload-artifact@v2 + with: + name: e2e-test-results-${{ matrix.containers }} + path: cypress/results/e2e-test-results.xml + + publish-test-results: + name: Publish E2E Test Results + needs: test + runs-on: ubuntu-latest + + steps: + - name: Download Artifacts + uses: actions/download-artifact@v2 + with: + path: artifacts + + - name: Publish E2E Test Results + uses: EnricoMi/publish-unit-test-result-action@v1 + with: + files: artifacts/**/*.xml + check_name: E2E Test Results diff --git a/.github/workflows/e2e-test.yml b/.github/workflows/e2e-test.yml index ada7d486..223ecf81 100644 --- a/.github/workflows/e2e-test.yml +++ b/.github/workflows/e2e-test.yml @@ -19,7 +19,7 @@ jobs: - uses: actions/checkout@v2 # Checkout the Stackable Free repo. with: repository: 'gambitph/Stackable' # Stackable free repo - ref: 'fix/performance' # Branch to checkout + ref: 'develop' # Branch to checkout path: 'Stackable' - uses: actions/checkout@v2 # Checkout the Stackable Premium repo. with: From ee7c9466704c385289aa346b4249cd479b0fceb9 Mon Sep 17 00:00:00 2001 From: Benjamin Intal Date: Wed, 9 Feb 2022 20:15:50 +0800 Subject: [PATCH 12/13] fix: innerBlockUniqueClass can return multiple class names [skip ci] --- cypress/support/gutenberg/commands/assertions.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/support/gutenberg/commands/assertions.js b/cypress/support/gutenberg/commands/assertions.js index 33f7d5f4..3b980662 100644 --- a/cypress/support/gutenberg/commands/assertions.js +++ b/cypress/support/gutenberg/commands/assertions.js @@ -638,7 +638,7 @@ export function assertFrontendStyles( subject, alias ) { // Get the class selector. const classList = ( isParent ? Array.from( blockElement.classList ) - : Array.from( blockElement.querySelector( `.${ innerBlockUniqueClass }` ).classList ) ).map( _class => `.${ _class }` ).join( '' ) + : Array.from( blockElement.querySelector( `.${ innerBlockUniqueClass.replace( / /g, '.' ) }` ).classList ) ).map( _class => `.${ _class }` ).join( '' ) // Remove all blocks inside .entry-content. doc.querySelector( '.entry-content' ).innerHTML = '' From cf4149cfe78ed80c28117b6f3510099f72e89143 Mon Sep 17 00:00:00 2001 From: Benjamin Intal Date: Thu, 3 Mar 2022 00:44:15 +0800 Subject: [PATCH 13/13] support for navigation panel & flakiness on finding Stackable tabs --- cypress/support/gutenberg/util.js | 3 ++- cypress/support/stackable/commands/inspector.js | 8 +++++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/cypress/support/gutenberg/util.js b/cypress/support/gutenberg/util.js index 0cefd153..bbf780c2 100644 --- a/cypress/support/gutenberg/util.js +++ b/cypress/support/gutenberg/util.js @@ -31,7 +31,8 @@ export function withInspectorTabMemory( options = {} ) { cy.document().then( doc => { const optionsToPass = args.length === argumentLength ? args.pop() : {} - const activePanel = doc.querySelector( 'button.components-panel__body-toggle[aria-expanded="true"]' ).innerText + // Don't include the Navigation panel. + const activePanel = doc.querySelector( '.components-panel__body:not(.ugb-panel--navigation-view) button.components-panel__body-toggle[aria-expanded="true"]' ).innerText // This is for stackable only. // After asserting the frontend, go back to the previous state. diff --git a/cypress/support/stackable/commands/inspector.js b/cypress/support/stackable/commands/inspector.js index 565e6a5d..7d37b285 100644 --- a/cypress/support/stackable/commands/inspector.js +++ b/cypress/support/stackable/commands/inspector.js @@ -38,13 +38,15 @@ export function openInspector( subject, tab, selector ) { cy.selectBlock( subject, selector ) cy.toggleSidebar( 'edit-post/block', true ) + // Ensure the block tab is open. cy - .get( 'button.edit-post-sidebar__panel-tab' ) - .contains( containsRegExp( 'Block' ) ) + .get( '.edit-post-sidebar__panel-tabs' ) + .contains( 'button', 'Block' ) .click( { force: true } ) + // Open the Stackable tab we want. cy - .get( `button[aria-label="${ tab } Tab"]` ) + .get( `button.edit-post-sidebar__panel-tab[aria-label="${ tab } Tab"]` ) .click( { force: true } ) }