From 9243cbd561aeb8c1d4a316cb85103d19827ff6df Mon Sep 17 00:00:00 2001
From: Saad Tarhi <saad.trh@gmail.com>
Date: Mon, 14 Aug 2023 06:46:15 +0100
Subject: [PATCH] Convert checkout place order E2E tests to Playwright

---
 .../shopper/cart-checkout/checkout.test.js    | 25 ----------
 ...ace-order.block_theme.side_effects.spec.ts | 47 +++++++++++++++++++
 tests/e2e/tests/checkout/constants.ts         |  1 +
 3 files changed, 48 insertions(+), 25 deletions(-)
 create mode 100644 tests/e2e/tests/checkout/checkout-block-place-order.block_theme.side_effects.spec.ts
 create mode 100644 tests/e2e/tests/checkout/constants.ts

diff --git a/tests/e2e-jest/specs/shopper/cart-checkout/checkout.test.js b/tests/e2e-jest/specs/shopper/cart-checkout/checkout.test.js
index b0e59f2ac91..5226c85b4b9 100644
--- a/tests/e2e-jest/specs/shopper/cart-checkout/checkout.test.js
+++ b/tests/e2e-jest/specs/shopper/cart-checkout/checkout.test.js
@@ -333,31 +333,6 @@ describe( 'Shopper → Checkout', () => {
 		} );
 	} );
 
-	describe( 'Place Order', () => {
-		it( 'Guest user can place order', async () => {
-			if ( await shopper.isLoggedIn() ) {
-				await shopper.logout();
-			}
-			await shopper.block.goToShop();
-			await shopper.addToCartFromShopPage( SIMPLE_VIRTUAL_PRODUCT_NAME );
-			await shopper.block.goToCheckout();
-			await shopper.block.fillBillingDetails( BILLING_DETAILS );
-			await shopper.block.placeOrder();
-			await expect( page ).toMatch( 'Your order has been received.' );
-		} );
-
-		it( 'Logged in user can place an order', async () => {
-			await shopper.login();
-			await shopper.block.goToShop();
-			await shopper.addToCartFromShopPage( SIMPLE_VIRTUAL_PRODUCT_NAME );
-			await shopper.block.goToCheckout();
-			await shopper.block.fillBillingDetails( BILLING_DETAILS );
-			await shopper.block.placeOrder();
-			await expect( page ).toMatch( 'Your order has been received.' );
-			await shopper.logout();
-		} );
-	} );
-
 	describe( `Shipping`, () => {
 		afterEach( async () => {
 			await merchant.login();
diff --git a/tests/e2e/tests/checkout/checkout-block-place-order.block_theme.side_effects.spec.ts b/tests/e2e/tests/checkout/checkout-block-place-order.block_theme.side_effects.spec.ts
new file mode 100644
index 00000000000..486f2256635
--- /dev/null
+++ b/tests/e2e/tests/checkout/checkout-block-place-order.block_theme.side_effects.spec.ts
@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import { test as base, expect } from '@woocommerce/e2e-playwright-utils';
+
+/**
+ * Internal dependencies
+ */
+import { CheckoutPage } from './checkout.page';
+import { SIMPLE_VIRTUAL_PRODUCT_NAME } from './constants';
+
+const test = base.extend< { pageObject: CheckoutPage } >( {
+	pageObject: async ( { page }, use ) => {
+		const pageObject = new CheckoutPage( {
+			page,
+		} );
+		await use( pageObject );
+	},
+} );
+
+test.describe( 'Shopper → Checkout block → Place Order', () => {
+	test.beforeEach( async ( { frontendUtils } ) => {
+		await frontendUtils.emptyCart();
+		await frontendUtils.goToShop();
+		await frontendUtils.addToCart( SIMPLE_VIRTUAL_PRODUCT_NAME );
+		await frontendUtils.goToCheckout();
+	} );
+
+	test( 'Guest user can place order', async ( { pageObject, page } ) => {
+		await pageObject.fillInCheckoutWithTestData();
+		await pageObject.placeOrder();
+		await expect(
+			page.getByText( 'Your order has been received.' )
+		).toBeVisible();
+	} );
+
+	test( 'Logged in user can place an order', async ( {
+		pageObject,
+		page,
+	} ) => {
+		await pageObject.fillInCheckoutWithTestData();
+		await pageObject.placeOrder();
+		await expect(
+			page.getByText( 'Your order has been received.' )
+		).toBeVisible();
+	} );
+} );
diff --git a/tests/e2e/tests/checkout/constants.ts b/tests/e2e/tests/checkout/constants.ts
new file mode 100644
index 00000000000..659bf94bbb0
--- /dev/null
+++ b/tests/e2e/tests/checkout/constants.ts
@@ -0,0 +1 @@
+export const SIMPLE_VIRTUAL_PRODUCT_NAME = 'Album';