From 6530f43cf7c44015b404cc66fe859a89289d69ad Mon Sep 17 00:00:00 2001 From: Evan Mullins Date: Wed, 18 Dec 2024 15:16:49 -0500 Subject: [PATCH] rewrite cypress test with testIsolation true --- tests/cypress/integration/global-ctb.cy.js | 95 ++++++++++++--------- tests/cypress/wp-module-support/utils.cy.js | 51 +++++++++++ 2 files changed, 104 insertions(+), 42 deletions(-) create mode 100644 tests/cypress/wp-module-support/utils.cy.js diff --git a/tests/cypress/integration/global-ctb.cy.js b/tests/cypress/integration/global-ctb.cy.js index c7f2be9..d7c0658 100644 --- a/tests/cypress/integration/global-ctb.cy.js +++ b/tests/cypress/integration/global-ctb.cy.js @@ -1,10 +1,14 @@ // +import { wpLogin, wpCli, setCapability } from '../wp-module-support/utils.cy'; + const global_ctb_products = require( '../fixtures/global-ctb-products.json' ); -describe( 'Click to buy', function () { - before( () => { +describe( 'Global Click to Buy', { testIsolation: true }, () => { + beforeEach( () => { + wpLogin(); + wpCli( 'transient delete newfold_marketplace' ); cy.visit( '/wp-admin/index.php' ); - cy.exec( 'npx wp-env run cli wp transient delete newfold_marketplace' ); + cy.intercept( { method: 'GET', @@ -13,6 +17,22 @@ describe( 'Click to buy', function () { global_ctb_products ).as( 'global_ctb_products' ); + cy.intercept( + { + method: 'GET', + url: /newfold-ctb(\/|%2F)v2(\/|%2F)ctb/, + }, + { + body: { + url: 'https://example.com', + }, + } + ).as( 'ctb' ); + } ); + + it( 'CTB Button renders and CTB Modal opens', () => { + // set ctb capability + setCapability( { canAccessGlobalCTB: true } ); cy.visit( '/wp-admin/admin.php?page=' + Cypress.env( 'pluginId' ) + @@ -26,13 +46,13 @@ describe( 'Click to buy', function () { } ); - } ); - - it( 'Button has CTB Attributes', () => { cy.window().then( ( win ) => { - cy.log( `NewfoldRuntime.capabilities.canAccessGlobalCTB: ${ win.NewfoldRuntime.capabilities.canAccessGlobalCTB }` ) + cy.log( + `NewfoldRuntime.capabilities.canAccessGlobalCTB: ${ win.NewfoldRuntime.capabilities.canAccessGlobalCTB }` + ); } ); + // Check CTB Button attributes cy.get( '#marketplace-item-a1ff70f1-9670-4e25-a0e1-a068d3e43a45' ) .scrollIntoView() .should( 'exist' ) @@ -44,44 +64,32 @@ describe( 'Click to buy', function () { '57d6a568-783c-45e2-a388-847cff155897' ) .should( 'have.attr', 'target', '_blank' ); - } ); - - it( 'CTB modal opens successfully', () => { - cy.intercept( - { - method: 'GET', - url: /newfold-ctb(\/|%2F)v2(\/|%2F)ctb/, - }, - { - body: { - url: 'https://example.com', - }, - } - ); cy.get( 'body' ).should( 'not.have.class', 'noscroll' ); + // CTB modal opens successfully cy.get( '[data-action="load-nfd-ctb"]' ).scrollIntoView().click(); // wait for intercept with data - cy.wait( 1000 ); + cy.wait( '@ctb' ); + cy.wait( 250 ); // give time for modal to open // check body for noscroll class cy.get( 'body' ).should( 'have.class', 'noscroll' ); - // check for modal should be.visible + // check for modal content cy.get( '#nfd-global-ctb-container' ).should( 'exist' ); cy.get( '.global-ctb-modal-content' ) .scrollIntoView() .should( 'be.visible' ); - // verify iframe content is visible + // verify iframe src is correct cy.get( '.global-ctb-modal-content iframe' ) .should( 'have.attr', 'src', 'https://example.com' ) .should( 'be.visible' ); - } ); - it( 'CTB iframe dynamic sizing works', () => { + // CTB iframe dynamic sizing works + // Mock the 'frameWidth' and 'frameHeight' message events cy.window().then( ( win ) => { // 'frameWidth' event @@ -103,9 +111,8 @@ describe( 'Click to buy', function () { cy.get( '.global-ctb-modal-content iframe' ) .should( 'have.css', 'width', '800px' ) .and( 'have.css', 'height', '600px' ); - } ); - it( 'X button closes CTB modal', () => { + // X button closes CTB modal // check that cancel button closes modal cy.get( '.global-ctb-modal-close' ).click( { force: true } ); cy.wait( 200 ); @@ -119,28 +126,32 @@ describe( 'Click to buy', function () { } ); it( 'CTB fallback is functional', () => { - cy.intercept( - { - method: 'GET', - url: /newfold-ctb(\/|%2F)v2(\/|%2F)ctb/, - }, - { - statusCode: 500, - } + setCapability( { canAccessGlobalCTB: false } ); + cy.visit( + '/wp-admin/admin.php?page=' + + Cypress.env( 'pluginId' ) + + '#/marketplace' ); cy.get( 'body' ).should( 'not.have.class', 'noscroll' ); - cy.get( '[data-action="load-nfd-ctb"]' ).scrollIntoView().click(); - - // wait for intercept - cy.wait( 1000 ); + cy.get( '#marketplace-item-a1ff70f1-9670-4e25-a0e1-a068d3e43a45' ) + .scrollIntoView() + .should( 'exist' ) + .should( 'be.visible' ); + cy.get( '.nfd-button--primary[data-action="load-nfd-ctb"]' ) + .should( + 'have.attr', + 'href', + 'https://yoa.st/bh-premium?utm_source=wp-admin%2Fadmin.php&utm_medium=brand_plugin' + ) + .click(); - // confirm modal is closed + // confirm modal is still closed cy.get( 'body' ).should( 'not.have.class', 'noscroll' ); cy.get( '#nfd-global-ctb-container' ) .should( 'have.attr', 'aria-hidden' ) .and( 'equal', 'true' ); - cy.get( '.global-ctb-modal-content' ).should( 'not.be.visible' ); + cy.get( '.global-ctb-modal-content' ).should( 'not.exist' ); } ); } ); diff --git a/tests/cypress/wp-module-support/utils.cy.js b/tests/cypress/wp-module-support/utils.cy.js new file mode 100644 index 0000000..1f231f1 --- /dev/null +++ b/tests/cypress/wp-module-support/utils.cy.js @@ -0,0 +1,51 @@ +/** + * Loginto WordPress. + */ +export const wpLogin = () => { + cy.login( Cypress.env( 'wpUsername' ), Cypress.env( 'wpPassword' ) ); +}; + +/** + * wp-cli helper + * + * This wraps the command in the required npx wp-env run cli wp + * + * @param {string} cmd the command to send to wp-cli + * @param {Object} paramArgs any args to pass to exec + */ +export const wpCli = ( cmd, paramArgs ) => { + const defaultArgs = { + env: { + NODE_TLS_REJECT_UNAUTHORIZED: '1', + }, + failOnNonZeroExit: true, + }; + const args = { ...defaultArgs, ...paramArgs }; + cy.exec( `npx wp-env run cli wp ${ cmd }`, args ).then( ( result ) => { + for ( const [ key, value ] of Object.entries( result ) ) { + cy.log( `${ key }: ${ value }` ); + } + } ); +}; + +/** + * Set capability helper + * + * This calls performs a cli command to set a specific capability + * + * @param {*} capJSON json of capabilities + * @param {number} expiration seconds for transient to expire, defualt 3600 (1 hour) + */ +export const setCapability = ( capJSON, expiration = 3600 ) => { + wpCli( + `option update _transient_nfd_site_capabilities '${ JSON.stringify( + capJSON + ) }' --format=json` + ); + // set transient expiration to one hour (default) from now + const expiry = Math.floor( new Date().getTime() / 1000.0 ) + expiration; + // manually set expiration for the transients + wpCli( + `option update _transient_timeout_nfd_site_capabilities ${ expiry }` + ); +};