Shopper → Checkout → Can place an order as guest (https://github.com/woocommerce/woocommerce-blocks/pull/6009)

* Add "goToCheckout" method in "shopper.block"

Instead of using "shopper.goToCheckoutBlock" method, it will much easier
to maintain the following structure "shopper.block.goToCheckout"

* Create a constant for billing details

* Create "fillBillingDetails" shopper method

* Add "placeOrder" method to "shopper"

* Enable "Cash on delivery" payment method for our test

* Update "@woocommerce/e2e-utils" package

Some new useful e2e utility functions weren't avaiable in the previous version

* Add E2E test for "Can place an order as guest"

* Fix mini-cart failing E2E tests

In case this fix woocommerce/woocommerce-blocks#6006 isn't merged yet, this commit can be used to pass all
E2E tests

Co-authored-by: Saad Tarhi <saad.tarhi@automattic.com>
This commit is contained in:
Saad Tarhi 2022-03-08 14:52:40 +01:00 committed by GitHub
parent fc01576a38
commit 1e15672b7b
6 changed files with 143 additions and 31 deletions

View File

@ -71,7 +71,7 @@
"@typescript-eslint/eslint-plugin": "4.14.1",
"@typescript-eslint/parser": "4.14.1",
"@woocommerce/api": "0.2.0",
"@woocommerce/e2e-utils": "0.1.6",
"@woocommerce/e2e-utils": "^0.2.0",
"@woocommerce/eslint-plugin": "1.2.0",
"@woocommerce/woocommerce-rest-api": "1.0.1",
"@wordpress/api-fetch": "5.2.6",
@ -9013,12 +9013,12 @@
"dev": true
},
"node_modules/@woocommerce/e2e-utils": {
"version": "0.1.6",
"resolved": "https://registry.npmjs.org/@woocommerce/e2e-utils/-/e2e-utils-0.1.6.tgz",
"integrity": "sha512-gWSEgFIjMqaqiiIyrpa1epIHkmBBAfk6WfRojva1f5ZmffSJCc0VbX2jQQRdFm1BuEYr8KGCCYo+q8NIjlMZ7g==",
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/@woocommerce/e2e-utils/-/e2e-utils-0.2.0.tgz",
"integrity": "sha512-bEHzAdGSJhWksDJDPi5vxpbOM2sItQqzn0jDWthrYgchP489mBbRMSVnatYm3vAgWT9DVuvPbTrzzgETiTT1Jg==",
"dev": true,
"dependencies": {
"@wordpress/deprecated": "^2.10.0",
"@wordpress/deprecated": "^3.2.3",
"@wordpress/e2e-test-utils": "^4.16.1",
"config": "3.3.3",
"faker": "^5.1.0",
@ -9028,16 +9028,6 @@
"@woocommerce/api": "^0.2.0"
}
},
"node_modules/@woocommerce/e2e-utils/node_modules/@wordpress/deprecated": {
"version": "2.12.3",
"resolved": "https://registry.npmjs.org/@wordpress/deprecated/-/deprecated-2.12.3.tgz",
"integrity": "sha512-qr+yDfTQfI3M4h6oY6IeHWwoHr4jxbILjSlV+Ht6Jjto9Owap6OuzSqR13Ev4xqIoG4C7b5B3gZXVfwVDae1zg==",
"dev": true,
"dependencies": {
"@babel/runtime": "^7.13.10",
"@wordpress/hooks": "^2.12.3"
}
},
"node_modules/@woocommerce/e2e-utils/node_modules/@wordpress/e2e-test-utils": {
"version": "4.16.1",
"resolved": "https://registry.npmjs.org/@wordpress/e2e-test-utils/-/e2e-test-utils-4.16.1.tgz",
@ -49194,28 +49184,18 @@
}
},
"@woocommerce/e2e-utils": {
"version": "0.1.6",
"resolved": "https://registry.npmjs.org/@woocommerce/e2e-utils/-/e2e-utils-0.1.6.tgz",
"integrity": "sha512-gWSEgFIjMqaqiiIyrpa1epIHkmBBAfk6WfRojva1f5ZmffSJCc0VbX2jQQRdFm1BuEYr8KGCCYo+q8NIjlMZ7g==",
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/@woocommerce/e2e-utils/-/e2e-utils-0.2.0.tgz",
"integrity": "sha512-bEHzAdGSJhWksDJDPi5vxpbOM2sItQqzn0jDWthrYgchP489mBbRMSVnatYm3vAgWT9DVuvPbTrzzgETiTT1Jg==",
"dev": true,
"requires": {
"@wordpress/deprecated": "^2.10.0",
"@wordpress/deprecated": "^3.2.3",
"@wordpress/e2e-test-utils": "^4.16.1",
"config": "3.3.3",
"faker": "^5.1.0",
"fishery": "^1.2.0"
},
"dependencies": {
"@wordpress/deprecated": {
"version": "2.12.3",
"resolved": "https://registry.npmjs.org/@wordpress/deprecated/-/deprecated-2.12.3.tgz",
"integrity": "sha512-qr+yDfTQfI3M4h6oY6IeHWwoHr4jxbILjSlV+Ht6Jjto9Owap6OuzSqR13Ev4xqIoG4C7b5B3gZXVfwVDae1zg==",
"dev": true,
"requires": {
"@babel/runtime": "^7.13.10",
"@wordpress/hooks": "^2.12.3"
}
},
"@wordpress/e2e-test-utils": {
"version": "4.16.1",
"resolved": "https://registry.npmjs.org/@wordpress/e2e-test-utils/-/e2e-test-utils-4.16.1.tgz",

View File

@ -119,7 +119,7 @@
"@typescript-eslint/eslint-plugin": "4.14.1",
"@typescript-eslint/parser": "4.14.1",
"@woocommerce/api": "0.2.0",
"@woocommerce/e2e-utils": "0.1.6",
"@woocommerce/e2e-utils": "^0.2.0",
"@woocommerce/eslint-plugin": "1.2.0",
"@woocommerce/woocommerce-rest-api": "1.0.1",
"@wordpress/api-fetch": "5.2.6",

View File

@ -255,6 +255,21 @@ const createReviews = ( id, fixture = fixtures.ReviewsInProduct( id ) ) =>
create: fixture,
} );
/**
* Enable Cash on delivery payments.
*
* This is not called directly but is called within enablePaymentGateways.
*
* @return {Promise} a promise that resolves to an server response data, or
* rejects if the request failed.
*/
const enableCashOnDelivery = () =>
WooCommerce.post( 'payment_gateways/cod', {
description: 'Cash on delivery',
enabled: true,
settings: { instructions: 'Cash on delivery' },
} );
/**
* Enable Cheque payments.
*
@ -276,7 +291,8 @@ const enableCheque = () =>
* @return {Promise} a promise that resolves to an array of server response
* data, or rejects if the request failed.
*/
const enablePaymentGateways = () => Promise.all( [ enableCheque() ] );
const enablePaymentGateways = () =>
Promise.all( [ enableCashOnDelivery(), enableCheque() ] );
/**
* Create shipping zones.

View File

@ -0,0 +1,55 @@
/**
* External dependencies
*/
import { verifyCheckboxIsSet } from '@woocommerce/e2e-utils';
/**
* Internal dependencies
*/
import { shopper } from '../../../utils';
import { SIMPLE_PRODUCT_NAME, BILLING_DETAILS } from '../../../utils/constants';
const block = {
name: 'Checkout',
};
if ( process.env.WOOCOMMERCE_BLOCKS_PHASE < 2 )
// eslint-disable-next-line jest/no-focused-tests
test.only( `skipping ${ block.name } tests`, () => {} );
describe( 'Shopper → Checkout → Can place an order as guest', () => {
beforeAll( async () => {
await shopper.block.emptyCart();
} );
afterAll( async () => {
await shopper.block.emptyCart();
} );
it( 'allows customer to place an order as guest', async () => {
await shopper.logout();
await shopper.goToShop();
await shopper.addToCartFromShopPage( SIMPLE_PRODUCT_NAME );
await shopper.block.goToCheckout();
await shopper.block.fillBillingDetails( BILLING_DETAILS );
// Select the "Cash on delivery" payment method & verify it was set
await expect( page ).toClick(
'.wc-block-components-payment-method-label',
{
text: 'Cash on delivery',
}
);
await verifyCheckboxIsSet(
'#radio-control-wc-payment-method-options-cod'
);
// Click on the "Place Order" button
await shopper.block.placeOrder();
// Verify that the order was successful
await expect( page ).toMatch(
'Thank you. Your order has been received.'
);
} );
} );

View File

@ -12,3 +12,4 @@ const baseUrl = config.get( 'url' );
export const SHOP_CART_BLOCK_PAGE = baseUrl + 'cart-block';
export const SHOP_CHECKOUT_BLOCK_PAGE = baseUrl + 'checkout-block';
export const SIMPLE_PRODUCT_NAME = 'Woo Single #1';
export const BILLING_DETAILS = config.get( 'addresses.customer.billing' );

View File

@ -68,6 +68,12 @@ export const shopper = {
} );
},
goToCheckout: async () => {
await page.goto( SHOP_CHECKOUT_BLOCK_PAGE, {
waitUntil: 'networkidle0',
} );
},
/**
* For some reason "wcShopper.emptyCart" sometimes result in an error, but using the same
* implementation here fixes the problem.
@ -99,5 +105,59 @@ export const shopper = {
text: 'Your cart is currently empty.',
} );
},
placeOrder: async () => {
await Promise.all( [
page.waitForNavigation( {
waitUntil: 'networkidle0',
} ),
expect( page ).toClick( '.wc-block-components-button__text', {
text: 'Place Order',
} ),
] );
},
fillBillingDetails: async ( customerBillingDetails ) => {
await expect( page ).toFill(
'#billing-first_name',
customerBillingDetails.firstname
);
await expect( page ).toFill(
'#billing-last_name',
customerBillingDetails.lastname
);
await expect( page ).toFill(
'#components-form-token-input-0',
customerBillingDetails.country
);
await expect( page ).toFill(
'#billing-address_1',
customerBillingDetails.addressfirstline
);
await expect( page ).toFill(
'#billing-address_2',
customerBillingDetails.addresssecondline
);
await expect( page ).toFill(
'#billing-city',
customerBillingDetails.city
);
await expect( page ).toFill(
'#components-form-token-input-2',
customerBillingDetails.state
);
await expect( page ).toFill(
'#billing-postcode',
customerBillingDetails.postcode
);
await expect( page ).toFill(
'#phone',
customerBillingDetails.phone
);
await expect( page ).toFill(
'#email',
customerBillingDetails.email
);
},
},
};