test: fix e2e tests

.github/workflows/e2e_tests.yml

@@ -18,8 +18,8 @@ jobs:
           node-version: '10.16.0'
       - run: npm ci
       - run: npm install jest --global
-      - run: npm run dist
       - run: npm run test:e2e-docker-up
+      - run: npm run dist
       - run: npm run test:e2e-docker-ping
       - run: npm run test:e2e
       - run: npm run test:e2e-docker-down

client/extensions/woocommerce/woocommerce-services/views/packages/edit-package.js

@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
 import { localize } from 'i18n-calypso';
 import { omit, trim } from 'lodash';
 import { TextControl } from '@wordpress/components';
+import classNames from 'classnames';
 
 /**
  * Internal dependencies
@@ -130,7 +131,7 @@ const EditPackage = props => {
 						placeholder={ translate( '0.0' ) }
 						value={ box_weight || '' }
 						onChange={ value => updateTextField( value, 'box_weight' ) }
-						className={ modalErrors.box_weight ? 'is-error' : '' }
+						className={ classNames( 'form-dimensions-input__box_weight', { 'is-error':modalErrors.box_weight } ) }
 						type="number"
 						suffix={ weightUnit }
 					/>

package.json

@@ -39,7 +39,7 @@
     "@woocommerce/woocommerce-rest-api": "^1.0.1",
     "@wordpress/dependency-extraction-webpack-plugin": "^2.9.0",
     "@wordpress/base-styles": "^3.3.0",
-    "@wordpress/e2e-test-utils": "^2.4.3",
+    "@wordpress/e2e-test-utils": "^5.4.1",
     "archiver": "^1.3.0",
     "babel-jest": "24.7.1",
     "babel-plugin-dynamic-import-node": "2.2.0",
@@ -91,12 +91,12 @@
     "@babel/preset-react": "7.0.0",
     "@babel/runtime": "7.1.2",
     "@hot-loader/react-dom": "^16.14.0",
+    "@woocommerce/e2e-environment": "^0.2.2",
+    "@woocommerce/woocommerce-rest-api": "^1.0.1",
     "@wordpress/babel-preset-default": "^5.0.1",
     "@wordpress/base-styles": "^3.3.0",
     "@wordpress/components": "^11.1.5",
     "@wordpress/element": "^2.19.1",
-    "@woocommerce/e2e-environment": "^0.2.0",
-    "@woocommerce/woocommerce-rest-api": "^1.0.1",
     "autoprefixer": "^6.7.4",
     "babel-eslint": "10.0.1",
     "babel-loader": "8.0.4",

tests/bin/install.sh

@@ -211,6 +211,16 @@ PHP
 		php wp-cli.phar plugin activate wc-services-testing-helper
 
 		php wp-cli.phar option update jetpack_tos_agreed 1
+		php wp-cli.phar option set woocommerce_store_address "60 29th Street"
+        php wp-cli.phar option set woocommerce_store_address_2 "#343"
+        php wp-cli.phar option set woocommerce_store_city "San Francisco"
+        php wp-cli.phar option set woocommerce_default_country "US:CA"
+        php wp-cli.phar option set woocommerce_store_postcode "94110"
+        php wp-cli.phar option set woocommerce_currency "USD"
+        php wp-cli.phar config set JETPACK_DEV_DEBUG true --raw
+        php wp-cli.phar config set WOOCOMMERCE_SERVICES_LOCAL_TEST_MODE true --raw
+        php wp-cli.phar config set WOOCOMMERCE_CONNECT_FREQUENT_FETCH true --raw
+        php wp-cli.phar config set WOOCOMMERCE_CONNECT_SERVER_URL http://host.docker.internal:5000/
 
 		php wp-cli.phar option update wc_connect_options '{"tos_accepted": true }' --format=json
 

tests/e2e/config/jest-puppeteer.config.js

@@ -1,10 +1,8 @@
 const { useE2EJestPuppeteerConfig } = require( '@woocommerce/e2e-environment' );
 
-const puppeteerConfig = useE2EJestPuppeteerConfig( {
+module.exports = useE2EJestPuppeteerConfig( {
 	launch: {
 		slowMo: 100,
 		args: [ '--window-size=1920,1080', '--user-agent=chrome --runInBand --maxWorkers=4' ],
 	}
 } );
-
-module.exports = puppeteerConfig;

tests/e2e/config/travis/wc-services-testing-helper.php

@@ -8,22 +8,6 @@
 Author URI: http://
 */
 
-define( 'JETPACK_DEV_DEBUG', true );
-define( 'WOOCOMMERCE_SERVICES_LOCAL_TEST_MODE', true );
-define( 'WOOCOMMERCE_CONNECT_FREQUENT_FETCH', true );
-define( 'WOOCOMMERCE_CONNECT_SERVER_URL', 'http://host.docker.internal:5000/' );
-define( 'WOOCOMMERCE_SERVICES_CI_TEST_MODE', true );
-
-if ( get_option( 'woocommerce_default_country' ) !== 'US:NY' ) {
-	update_option( 'woocommerce_store_address', '1480 York Ave' );
-	update_option( 'woocommerce_store_city', 'New York' );
-	update_option( 'woocommerce_store_postcode', '10075' );
-	update_option( 'woocommerce_default_country', 'US:NY' );
-	update_option( 'woocommerce_currency', 'USD' );
-	update_option( 'woocommerce_weight_unit', 'oz' );
-	update_option( 'woocommerce_dimension_unit', 'in' );
-}
-
 // Mock out Jetpack Options
 $jp_options                = get_option( 'jetpack_options' );
 $jp_options['master_user'] = 1;

tests/e2e/docker/initialize.sh

@@ -1,21 +1,40 @@
- #!/bin/bash
+#!/bin/bash
 echo "Initializing WooCommerce Services E2E"
 
 WP_CORE_DIR="/var/www/html"
 WCS_DIR="$WP_CORE_DIR/wp-content/plugins/woocommerce-services"
 
 # install default theme
-wp theme install twentynineteen --activate
-# install woocommerce, jetpack
+wp theme install storefront --activate
+
 wp plugin install woocommerce --activate
+
+## adding basic settings and configuration
+wp option set woocommerce_store_address "60 29th Street"
+wp option set woocommerce_store_address_2 "#343"
+wp option set woocommerce_store_city "San Francisco"
+wp option set woocommerce_default_country "US:CA"
+wp option set woocommerce_store_postcode "94110"
+wp option set woocommerce_currency "USD"
+wp option set woocommerce_weight_unit "oz"
+wp option set woocommerce_dimension_unit "in"
+wp option set woocommerce_product_type "both"
+wp option set woocommerce_allow_tracking "no"
+wp option update woocommerce_onboarding_profile '{"skipped": true }' --format=json
+
 wp plugin install jetpack --activate
+wp config set JETPACK_DEV_DEBUG true --raw
+
 # create credentials for REST API
 wp eval-file "$WCS_DIR/tests/bin/wc_rest_api_credentials.php"
 
 # mock for Jetpack
 cp "$WCS_DIR/tests/e2e/config/travis/wc-services-testing-helper.php" "$WP_CORE_DIR/wp-content/plugins/"
 
 # finally activate WCS
+wp config set WOOCOMMERCE_SERVICES_LOCAL_TEST_MODE true --raw
+wp config set WOOCOMMERCE_CONNECT_FREQUENT_FETCH true --raw
+wp config set WOOCOMMERCE_CONNECT_SERVER_URL http://host.docker.internal:5000/
 wp plugin activate woocommerce-services
 wp plugin activate wc-services-testing-helper
 wp option update jetpack_tos_agreed 1

tests/e2e/fixtures/index.js

@@ -68,6 +68,7 @@ const createShippingLabel = async ( order ) => {
 	createShippingLabelJson.packages[0].products = [ order.line_items[0].product_id ];
 
 	const response = await apiV1.post( `connect/label/${ order.id }`, createShippingLabelJson );
+
 	return response.data;
 }
 
@@ -80,7 +81,6 @@ const destroyOrder = async ( order ) => {
 }
 
 const withOrder = async ( callback ) => {
-
 	const product = await createProduct();
 
 	const order = await createOrder( product );

tests/e2e/mocks/index.js

@@ -3,50 +3,49 @@
  */
 
 const withMockedShippingLabel = async( shippingLabel, callback ) => {
-
-	const mockedShippingLabel = {
-		"success": true,
-		"label": {
-			"label_id": shippingLabel.label_id,
-			"tracking": "9405536897846488998110",
-			"refundable_amount": 13.2,
-			"created": shippingLabel.created,
-			"carrier_id": "usps",
-			"service_name": "USPS - Priority Mail",
-			"status": "PURCHASED",
-			"package_name": "Medium Flat Rate Box 2, Side Loading",
-			"product_names": shippingLabel.product_names,
-			"receipt_item_id": 24151858,
-			"created_date": shippingLabel.created_date,
-			"main_receipt_id": 19629638,
-			"rate": 13.2,
-			"currency": "USD",
-			"expiry_date": shippingLabel.expiry_date
-		},
-
-	}
-
-	const mockedRefund = {
-		"success": true,
-		"refund": {
-			"status": "pending",
-			"request_date": Date.now()
-		}
-	}
-
 	await page.setRequestInterception(true);
 	const getShippingLabelRequestListener = (request) => {
 		if ( request.url().match( 'wp-json/wc/v1/connect/label/.*/refund' ) ) {
 			request.respond( {
 				status: 200,
 				contentType: 'application/json; charset=UTF-8',
-				body: JSON.stringify( mockedRefund )
+				body: JSON.stringify( {
+					success: true,
+					refund: {
+						status: 'pending',
+						request_date: Date.now()
+					}
+				} )
 			} );
 		} else if ( request.url().match( 'wp-json/wc/v1/connect/label/.*' ) ) {
 			request.respond( {
 				status: 200,
 				contentType: 'application/json; charset=UTF-8',
-				body: JSON.stringify( mockedShippingLabel )
+				body: JSON.stringify( {
+					success: true,
+					labels: [
+						{
+							carrier_id: 'usps',
+							commercial_invoice_url: null,
+							created: shippingLabel.created,
+							created_date: shippingLabel.created_date,
+							currency: 'USD',
+							is_letter: false,
+							label_id: shippingLabel.label_id,
+							main_receipt_id: 19629638,
+							package_name: 'Medium Flat Rate Box 2, Side Loading',
+							product_ids: [shippingLabel.product_ids],
+							product_names: [shippingLabel.product_names],
+							rate: 13.2,
+							receipt_item_id: 24151858,
+							service_name: 'USPS - Priority Mail',
+							refundable_amount: 13.2,
+							status: 'PURCHASED',
+							expiry_date: shippingLabel.expiry_date,
+							tracking: '9405536897846488998110',
+						}
+					],
+				} )
 			} );
 		} else {
 			request.continue();

tests/e2e/specs/admin/1-activate-extension.test.js

@@ -1,12 +1,11 @@
 /**
  * Internal dependencies
  */
-import { StoreOwnerFlow } from "../../utils/flows";
+import { StoreOwnerFlow } from '../../utils';
 
 describe( 'Store admin can login and make sure WooCommerce Shipping & Tax extension is activated', () => {
-
 	it( 'Can activate WooCommerce Shipping & Tax extension if it is deactivated' , async () => {
-		let slug = 'woocommerce-services';
+		const slug = 'woocommerce-services'
 		await StoreOwnerFlow.login();
 		await StoreOwnerFlow.openPluginsPage();
 		const disableLink = await page.$( `tr[data-slug="${ slug }"] .deactivate a` );
@@ -16,5 +15,4 @@ describe( 'Store admin can login and make sure WooCommerce Shipping & Tax extens
 		await page.click( `tr[data-slug="${ slug }"] .activate a` );
 		await page.waitForSelector( `tr[data-slug="${ slug }"] .deactivate a` );
 	});
-
 } );

tests/e2e/specs/admin/2-shipping-settings.test.js

@@ -8,21 +8,22 @@ import { AccountWithNoCreditCard, AccountWithOneCreditCard, AccountWithTwoCredit
 
 
 describe( 'Saving shipping label settings', () => {
-
 	it( 'Can toggle shipping labels' , async () => {
 		await StoreOwnerFlow.login();
 		await StoreOwnerFlow.openSettings('shipping', 'woocommerce-services-settings');
-        await page.waitForSelector('.form-toggle__switch');
-        await expect(page).toClick('.form-toggle__switch');
+        await page.waitForSelector('.components-form-toggle__input');
+        await expect(page).toClick('.components-form-toggle__input');
         await page.waitForSelector('.card.label-settings__labels-container', {
             visible: false
         });
-        await expect( page ).toClick( '.button.is-primary', { text: 'Save changes' } );
-        await page.waitForSelector('.card.label-settings__labels-container', {
+
+        await saveAndWait();
+
+		await page.waitForSelector('.card.label-settings__labels-container', {
             visible: false
         });
 
-        await expect(page).toClick('.form-toggle__switch');
+        await expect(page).toClick('.components-form-toggle__input');
         await saveAndWait();
     });
 
@@ -155,7 +156,7 @@ describe( 'Shipping label payment method', () => {
         await expect(secondCardExpiryDate).toEqual('Expires 2025-12-31');
 
         // Verify the default box is checked.
-        const cardDefaultCheckbox = await page.$$('.label-settings__card-checkbox.form-checkbox');
+        const cardDefaultCheckbox = await page.$$('.label-settings__card-checkbox input');
 		const firstCardDefaultCheckboxElement = await cardDefaultCheckbox[VISA_CARD_INDEX].getProperty('checked');
         const firstCardDefaultCheckbox = await firstCardDefaultCheckboxElement.jsonValue();
         await expect(firstCardDefaultCheckbox).toBeFalsy();
@@ -204,7 +205,7 @@ describe( 'Shipping label payment method', () => {
         await expect(secondCardExpiryDate).toEqual('Expires 2025-12-31');
 
         // Verify that no default box is checked.
-        const cardDefaultCheckbox = await page.$$('.label-settings__card-checkbox.form-checkbox');
+        const cardDefaultCheckbox = await page.$$('.label-settings__card-checkbox input');
 		const firstCardDefaultCheckboxElement = await cardDefaultCheckbox[VISA_CARD_INDEX].getProperty('checked');
         const firstCardDefaultCheckbox = await firstCardDefaultCheckboxElement.jsonValue();
         await expect(firstCardDefaultCheckbox).toBeFalsy();
@@ -227,7 +228,6 @@ describe( 'Shipping label payment method', () => {
 });
 
 describe( 'Packaging', () => {
-
 	afterAll( async() => {
 		await deleteAllPackages();
 		await saveAndWait();
@@ -249,15 +249,15 @@ describe( 'Packaging', () => {
         await waitForSelectorAndText( '.packages__add-edit-title.form-section-heading', 'Add a package' );
 
         // Set this once globally, all following test will use this metric
-        const metricSystem = await page.$$('.form-text-input-with-affixes .form-text-input-with-affixes__suffix');
+        const metricSystem = await page.$$('.text-control-with-affixes .text-control-with-affixes__suffix');
 		const metricSystemElement = await metricSystem[0].getProperty('innerText');
         metricSystemValue = await metricSystemElement.jsonValue();
 
         await expect( page ).toFill( '.packages__properties-group #name', packageName );
-        await expect( page ).toFill( '.form-text-input.form-dimensions-input__length', '5' );
-        await expect( page ).toFill( '.form-text-input.form-dimensions-input__width', '5' );
-        await expect( page ).toFill( '.form-text-input.form-dimensions-input__height', '5' );
-        await expect( page ).toFill( '.form-text-input-with-affixes #box_weight', '0.5' );
+        await expect( page ).toFill( '.form-dimensions-input__length input', '5' );
+        await expect( page ).toFill( '.form-dimensions-input__width input', '5' );
+        await expect( page ).toFill( '.form-dimensions-input__height input', '5' );
+        await expect( page ).toFill( '.form-dimensions-input__box_weight input', '0.5' );
         await expect( page ).toClick( '.button.form-button.is-primary', { text: 'Add package' } );
 
         // Verify package shows up in list
@@ -288,10 +288,10 @@ describe( 'Packaging', () => {
         // Edit package
         await waitForSelectorAndText( '.packages__add-edit-title.form-section-heading', 'Edit package' );
         await expect( page ).toFill( '.packages__properties-group #name', packageName );
-        await expect( page ).toFill( '.form-text-input.form-dimensions-input__length', '10' );
-        await expect( page ).toFill( '.form-text-input.form-dimensions-input__width', '10' );
-        await expect( page ).toFill( '.form-text-input.form-dimensions-input__height', '10' );
-        await expect( page ).toFill( '.form-text-input-with-affixes #box_weight', '0.8' );
+        await expect( page ).toFill( '.form-dimensions-input__length input', '10' );
+        await expect( page ).toFill( '.form-dimensions-input__width input', '10' );
+        await expect( page ).toFill( '.form-dimensions-input__height input', '10' );
+        await expect( page ).toFill( '.form-dimensions-input__box_weight input', '0.8' );
         await expect( page ).toClick( '.button.form-button.is-primary', { text: 'Done' } )
 
         // Verify package shows up in list