Merge pull request #18148 from woocommerce/update/e2e

Update e2e testing

package.json

@@ -47,7 +47,7 @@
     "istanbul": "^1.0.0-alpha",
     "mocha": "^3.0.2",
     "stylelint": "~8.2.0",
-    "wc-e2e-page-objects": "0.5.0"
+    "wc-e2e-page-objects": "0.6.0"
   },
   "engines": {
     "node": ">=8.9.3",

tests/e2e-tests/config/local-sample.json

@@ -4,6 +4,10 @@
     "admin": {
       "username": "admin",
       "password": "password"
+    },
+    "customer": {
+      "username": "Customer",
+      "password": "password"
     }
   }
 }

tests/e2e-tests/my-account-page.js

@@ -0,0 +1,122 @@
+/**
+ * External dependencies
+ */
+import config from 'config';
+import chai from 'chai';
+import chaiAsPromised from 'chai-as-promised';
+import test from 'selenium-webdriver/testing';
+import { WebDriverManager, WebDriverHelper as helper } from 'wp-e2e-webdriver';
+import { CustomerFlow, MyAccountPage, PageMap } from 'wc-e2e-page-objects';
+
+chai.use( chaiAsPromised );
+const assert = chai.assert;
+
+let manager;
+let driver;
+
+test.describe( 'My account page', function() {
+	const loginAsCustomer = () => {
+		return new CustomerFlow( driver, {
+			baseUrl: config.get( 'url' ),
+			username: config.get( 'users.customer.username' ),
+			password: config.get( 'users.customer.password' )
+		} );
+	};
+	const getMyAccountSubPageUrl = path => {
+		return PageMap.getPageUrl( config.get( 'url' ), {
+			path: '/my-account/%s'
+		}, path );
+	};
+	const untrailingslashit = url => {
+		return url.endsWith( '/' ) ? url.substring( 0, url.length - 1 ) : url;
+	};
+
+	// open browser
+	test.before( function() {
+		this.timeout( config.get( 'startBrowserTimeoutMs' ) );
+
+		manager = new WebDriverManager( 'chrome', { baseUrl: config.get( 'url' ) } );
+		driver = manager.getDriver();
+
+		helper.clearCookiesAndDeleteLocalStorage( driver );
+	} );
+
+	this.timeout( config.get( 'mochaTimeoutMs' ) );
+
+	test.it( 'allows customer to login', () => {
+		loginAsCustomer();
+		const myAccount = new MyAccountPage( driver, {
+			baseUrl: config.get( 'url' ),
+			visit: false
+		} );
+
+		assert.eventually.ok( myAccount.hasText( 'Hello Customer' ), 'see "Hello Customer" text' );
+		assert.eventually.ok( myAccount.hasMenu( 'Dashboard' ), 'see Dashboard menu.' );
+		assert.eventually.ok( myAccount.hasMenu( 'Orders' ), 'see Orders menu' );
+	} );
+
+	test.it( 'allows customer to see orders', () => {
+		loginAsCustomer();
+		const myAccount = new MyAccountPage( driver, {
+			baseUrl: config.get( 'url' ),
+			visit: false
+		} );
+		myAccount.clickMenu( 'Orders' );
+
+		assert.eventually.equal(
+			driver.getCurrentUrl().then( untrailingslashit ),
+			untrailingslashit( getMyAccountSubPageUrl( 'orders' ) )
+		);
+		assert.eventually.ok( myAccount.hasText( 'Orders' ), 'see "Orders" text' );
+	} );
+
+	test.it( 'allows customer to see downloads', () => {
+		loginAsCustomer();
+		const myAccount = new MyAccountPage( driver, {
+			baseUrl: config.get( 'url' ),
+			visit: false
+		} );
+		myAccount.clickMenu( 'Downloads' );
+
+		assert.eventually.equal(
+			driver.getCurrentUrl().then( untrailingslashit ),
+			untrailingslashit( getMyAccountSubPageUrl( 'downloads' ) )
+		);
+		assert.eventually.ok( myAccount.hasText( 'Downloads' ), 'see "Downloads" text' );
+	} );
+
+	test.it( 'allows customer to edit addresses', () => {
+		loginAsCustomer();
+		const myAccount = new MyAccountPage( driver, {
+			baseUrl: config.get( 'url' ),
+			visit: false
+		} );
+		myAccount.clickMenu( 'Addresses' );
+
+		assert.eventually.equal(
+			driver.getCurrentUrl().then( untrailingslashit ),
+			untrailingslashit( getMyAccountSubPageUrl( 'edit-address' ) )
+		);
+		assert.eventually.ok( myAccount.hasText( 'Addresses' ), 'see "Addresses" text' );
+	} );
+
+	test.it( 'allows customer to edit account details', () => {
+		loginAsCustomer();
+		const myAccount = new MyAccountPage( driver, {
+			baseUrl: config.get( 'url' ),
+			visit: false
+		} );
+		myAccount.clickMenu( 'Account details' );
+
+		assert.eventually.equal(
+			driver.getCurrentUrl().then( untrailingslashit ),
+			untrailingslashit( getMyAccountSubPageUrl( 'edit-account' ) )
+		);
+		assert.eventually.ok( myAccount.hasText( 'Account details' ), 'see "Account details" text' );
+	} );
+
+	// quit browser
+	test.after( () => {
+		manager.quitBrowser();
+	} );
+} );

tests/e2e-tests/single-product.js

@@ -16,6 +16,13 @@ let manager;
 let driver;
 
 test.describe( 'Single Product Page', function() {
+	const visitProductByPath = path => {
+		return new SingleProductPage( driver, { url: manager.getPageUrl( path ) } );
+	};
+	const visitCart = () => {
+		return new CartPage( driver, { url: manager.getPageUrl( '/cart' ) } );
+	};
+
 	// open browser
 	test.before( function() {
 		this.timeout( config.get( 'startBrowserTimeoutMs' ) );
@@ -29,28 +36,29 @@ test.describe( 'Single Product Page', function() {
 	this.timeout( config.get( 'mochaTimeoutMs' ) );
 
 	test.it( 'should be able to add simple products to the cart', () => {
-		const productPage = new SingleProductPage( driver, { url: manager.getPageUrl( '/product/t-shirt' ) } );
+		const productPage = visitProductByPath( '/product/t-shirt' );
 		productPage.setQuantity( 5 );
 		productPage.addToCart();
 
-		const cartPage = new CartPage( driver, { url: manager.getPageUrl( '/cart' ) } );
-		assert.eventually.equal( cartPage.hasItem( 'T-Shirt', { qty: 5 } ), true );
+		assert.eventually.equal( visitCart().hasItem( 'T-Shirt', { qty: 5 } ), true );
 	} );
 
 	test.it( 'should be able to add variation products to the cart', () => {
-		const variableProductPage = new SingleProductPage( driver, { url: manager.getPageUrl( '/product/hoodie' ) } );
+		let variableProductPage;
+
+		variableProductPage = visitProductByPath( '/product/hoodie' );
 		variableProductPage.selectVariation( 'Color', 'Blue' );
-		variableProductPage.addToCart();
-
-		// Pause for a half-second. Driver goes too fast and makes wrong selections otherwise.
+		variableProductPage.selectVariation( 'Logo', 'Yes' );
 		driver.sleep( 500 );
-
-		variableProductPage.selectVariation( 'Color', 'Green' );
 		variableProductPage.addToCart();
+		assert.eventually.ok( visitCart().hasItem( 'Hoodie - Blue, Yes' ), '"Hoodie - Blue, Yes" in the cart' );
 
-		const cartPage = new CartPage( driver, { url: manager.getPageUrl( '/cart' ) } );
-		assert.eventually.equal( cartPage.hasItem( 'Hoodie - Blue' ), true );
-		assert.eventually.equal( cartPage.hasItem( 'Hoodie - Green' ), true );
+		variableProductPage = visitProductByPath( '/product/hoodie' );
+		variableProductPage.selectVariation( 'Color', 'Green' );
+		variableProductPage.selectVariation( 'Logo', 'No' );
+		driver.sleep( 500 );
+		variableProductPage.addToCart();
+		assert.eventually.ok( visitCart().hasItem( 'Hoodie - Green, No' ), '"Hoodie - Green, No" in the cart' );
 	} );
 
 	// quit browser