Fix cart and checkout frontend e2e tests (woocommerce#4199)

* Wip: fix e2e fe tests

* Test that navigation ends

* Fix waitForNavigation

* comment out failing php test

* click the dom element

* Ensure navigation happens by waiting for it. Test page title.

* remove skip and update docs

* Revert "comment out failing php test"

This reverts commit 7c40e8c.

* Fix USD from merge conflict

* Add missing check for page title

* Try page.waitForFunction for text search

* test to see checkout page title is correct

* test checkout page url on CI

* unde jest config change

* Fix assertion for checkout page

* remove extra localStorage item remove call

Co-authored-by: Mike Jolley <[email protected]>
Co-authored-by: Nadir Seghir <[email protected]>

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.
 

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

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`,