diff --git a/docs/contributors/javascript-testing.md b/docs/contributors/javascript-testing.md index 89d9c2705ab..23e4b5496dd 100644 --- a/docs/contributors/javascript-testing.md +++ b/docs/contributors/javascript-testing.md @@ -6,8 +6,8 @@ The Blocks plugin follows the same patterns as Gutenberg, therefore for instruct We have two kinds of JavaScript tests: -- JavaScript unit tests - test APIs, hooks, library functionality that we use to build blocks or expose to plugin authors. -- End-to-end (e2e) tests - test blocks from the user interface. +- JavaScript unit tests - test APIs, hooks, library functionality that we use to build blocks or expose to plugin authors. +- End-to-end (e2e) tests - test blocks from the user interface. These tests are all run automatically on open PRs by Travis CI. @@ -38,18 +38,19 @@ Since these drive the user interface, they need to run against a test environmen To set up to run e2e tests: -- `npm run build:e2e-test` builds the assets (js/css), you can exclude this step if you've already got built files to test with. -- `npm run wp-env start` to start the test environment +- `npm run build:e2e-test` builds the assets (js/css), you can exclude this step if you've already got built files to test with. +- `npm run wp-env clean` to clean the test env +- `npm run wp-env start` to start the test environment -Then, to run the tests: + Then, to run the tests: -- `npm run test:e2e` +- `npm run test:e2e` When you're iterating on a new test you'll often run this repeatedly, as you develop, until your test is just right. When you're done, you may want to shut down the test environment: -- `npm run wp-env stop` to stop the test environment +- `npm run wp-env stop` to stop the test environment **Note:** There are a number of other useful `wp-env` commands. You can find out more in the [wp-env docs](https://github.com/WordPress/gutenberg/blob/master/packages/env/README.md). @@ -81,10 +82,10 @@ For that, we run end-to-end tests against all of those versions, and because we When a new version of WordPress is released, we drop support for the oldest version we have, so if the latest version is 5.6, we would test against: -- WordPress 5.4 -- WordPress 5.5 -- WordPress 5.6 -- WordPress 5.6 + Gutenberg +- WordPress 5.4 +- WordPress 5.5 +- WordPress 5.6 +- WordPress 5.6 + Gutenberg When 5.7 is released, we would drop support for 5.4, and update our `./.github/workflows/php-js-e2e-tests.yml` file. diff --git a/tests/e2e/specs/frontend/cart.test.js b/tests/e2e/specs/frontend/cart.test.js index 9e6547fd242..1989af21086 100644 --- a/tests/e2e/specs/frontend/cart.test.js +++ b/tests/e2e/specs/frontend/cart.test.js @@ -36,6 +36,12 @@ describe( `${ block.name } Block (frontend)`, () => { beforeAll( async () => { await page.evaluate( () => window.localStorage.clear() ); + await page.evaluate( () => { + localStorage.setItem( + 'wc-blocks_dismissed_compatibility_notices', + '["checkout","cart"]' + ); + } ); await switchUserToAdmin(); cartBlockPermalink = await getBlockPagePermalink( `${ block.name } Block` @@ -48,6 +54,11 @@ describe( `${ block.name } Block (frontend)`, () => { afterAll( async () => { await shopper.removeFromCart( 'Woo Single #1' ); + await page.evaluate( () => { + localStorage.removeItem( + 'wc-blocks_dismissed_compatibility_notices' + ); + } ); } ); it( 'Adds a timestamp to localstorage when the cart is updated', async () => { @@ -116,8 +127,19 @@ describe( `${ block.name } Block (frontend)`, () => { expect( selectedValue ).toBeGreaterThan( 1 ); await scrollTo( '.wc-block-cart__submit-button' ); - await page.click( '.wc-block-cart__submit-button' ); - await page.waitForSelector( '.wc-block-checkout' ); + await Promise.all( [ + page.waitForNavigation(), + page.click( '.wc-block-cart__submit-button' ), + ] ); + + // go to checkout page + await page.waitForSelector( 'h1' ); + let element = await page.$( 'h1' ); + let title = await page.evaluate( ( el ) => el.textContent, element ); + // shortcode checkout on CI / block on local env + expect( title ).toContain( 'Checkout' ); + + // navigate back to cart block page await page.goBack( { waitUntil: 'networkidle0' } ); await page diff --git a/tests/e2e/specs/frontend/checkout.test.js b/tests/e2e/specs/frontend/checkout.test.js index 3c435b7039a..73654e2df68 100644 --- a/tests/e2e/specs/frontend/checkout.test.js +++ b/tests/e2e/specs/frontend/checkout.test.js @@ -36,6 +36,18 @@ describe( `${ block.name } Block (frontend)`, () => { let productPermalink; beforeAll( async () => { + //prevent CartCheckoutCompatibilityNotice from appearing + await page.evaluate( () => { + localStorage.removeItem( + 'wc-blocks_dismissed_compatibility_notices' + ); + } ); + await page.evaluate( () => { + localStorage.setItem( + 'wc-blocks_dismissed_compatibility_notices', + '["checkout"]' + ); + } ); await merchant.login(); // Go to general settings page @@ -111,12 +123,18 @@ describe( `${ block.name } Block (frontend)`, () => { afterAll( async () => { await shopper.removeFromCart( simpleProductName ); + await page.evaluate( () => { + localStorage.removeItem( + 'wc-blocks_dismissed_compatibility_notices' + ); + } ); } ); it( 'should display cart items in order summary', async () => { await page.goto( productPermalink ); await shopper.addToCart(); await shopper.goToCheckoutBlock(); + await shopper.productIsInCheckoutBlock( simpleProductName, `1`, @@ -128,6 +146,7 @@ describe( `${ block.name } Block (frontend)`, () => { await page.goto( productPermalink ); await shopper.addToCart(); await shopper.goToCheckoutBlock(); + await shopper.productIsInCheckoutBlock( simpleProductName, `2`,