Fix cart and checkout frontend e2e tests (https://github.com/woocommerce/woocommerce-blocks/pull/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 7c40e8caf3aa32e35e3b70eb32051251b06e0613. * 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 <mike.jolley@me.com> Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com>
This commit is contained in:
Raluca Stan
GitHub
parent
d1f55724e6
commit
7deea0eee8
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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`,
|
||||
|
|
|
|||
Loading…
Reference in New Issue