Convert Shopper Subscriptions Purchase Sign Up Fee spec to Playwright

changelog/dev-10089-convert-shopper-subscriptions-purchase-sign-up-fee-spec

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Convert shopper-subscriptions-purchase-sign-up-fee spec from Puppeteer to Playwright
+
+

tests/e2e-pw/specs/shopper/shopper-subscriptions-purchase-sign-up-fee.spec.ts

@@ -0,0 +1,77 @@
+/**
+ * External dependencies
+ */
+import { test, expect, Page } from '@playwright/test';
+
+/**
+ * Internal dependencies
+ */
+import { config } from '../../config/default';
+import {
+	describeif,
+	getAnonymousShopper,
+	getMerchant,
+} from '../../utils/helpers';
+import * as shopper from '../../utils/shopper';
+import * as navigation from '../../utils/merchant-navigation';
+import { shouldRunSubscriptionsTests, products } from '../../utils/constants';
+import RestAPI from '../../utils/rest-api';
+
+describeif( shouldRunSubscriptionsTests )(
+	'Subscriptions > Purchase subscription with signup fee',
+	() => {
+		let merchantPage: Page;
+		let shopperPage: Page;
+		let orderId: string;
+
+		const customerBillingAddress =
+			config.addresses[ 'subscriptions-customer' ].billing;
+
+		test.beforeAll( async ( { browser }, { project } ) => {
+			// Delete the user, if present
+			const restApi = new RestAPI( project.use.baseURL );
+			await restApi.deleteCustomerByEmailAddress(
+				customerBillingAddress.email
+			);
+
+			merchantPage = ( await getMerchant( browser ) ).merchantPage;
+			shopperPage = ( await getAnonymousShopper( browser ) ).shopperPage;
+		} );
+
+		test( 'should be able to purchase a subscription with signup fee', async () => {
+			orderId = await shopper.placeOrderWithOptions( shopperPage, {
+				productId: products.SUBSCRIPTION_SIGNUP_FEE,
+				billingAddress: customerBillingAddress,
+			} );
+		} );
+
+		test( 'should have a charge for subscription cost with fee & an active subscription', async () => {
+			await navigation.goToOrder( merchantPage, orderId );
+
+			const paymentIntentId = await merchantPage
+				.locator( '#order_data' )
+				.getByRole( 'link', {
+					name: /pi_/,
+				} )
+				.innerText();
+
+			// Verify we have an active subscription
+			await expect(
+				merchantPage.getByRole( 'row', {
+					name: /Subscription .+ Active/,
+				} )
+			).toBeVisible();
+
+			await navigation.goToPaymentDetails(
+				merchantPage,
+				paymentIntentId
+			);
+
+			await expect(
+				merchantPage.getByText(
+					/A payment of \$11\.98( USD)? was successfully charged./
+				)
+			).toBeVisible();
+		} );
+	}
+);

tests/e2e-pw/utils/merchant-navigation.ts

@@ -94,3 +94,8 @@ export const goToConnect = async ( page: Page ) => {
 	);
 	await dataHasLoaded( page );
 };
+
+export const goToSubscriptions = ( page: Page ) =>
+	page.goto( '/wp-admin/edit.php?post_type=shop_subscription', {
+		waitUntil: 'load',
+	} );

tests/e2e-pw/utils/shopper.ts

@@ -254,22 +254,30 @@ export async function setupProductCheckout(
 }
 
 /**
- * Places an order with a specified currency.
+ * Places an order with custom options.
  *
- * @param {Page} page The Playwright page object.
- * @param {string} currency The currency code to use for the order.
- * @return {Promise<string>} The order ID.
+ * @param  page The Playwright page object.
+ * @param  options The custom options to use for the order.
+ * @return The order ID.
  */
-export const placeOrderWithCurrency = async (
+export const placeOrderWithOptions = async (
 	page: Page,
-	currency: string
+	options?: {
+		productId?: number;
+		billingAddress?: CustomerAddress;
+	}
 ) => {
-	await navigation.goToShopWithCurrency( page, currency );
-	await setupProductCheckout( page, [ [ config.products.simple.name, 1 ] ] );
+	await addCartProduct( page, options?.productId );
+	await setupCheckout(
+		page,
+		options?.billingAddress || config.addresses.customer.billing
+	);
 	await fillCardDetails( page, config.cards.basic );
 	await focusPlaceOrderButton( page );
 	await placeOrder( page );
-	await page.waitForURL( /\/order-received\//, { waitUntil: 'load' } );
+	await page.waitForURL( /\/order-received\//, {
+		waitUntil: 'load',
+	} );
 	await expect(
 		page.getByRole( 'heading', { name: 'Order received' } )
 	).toBeVisible();
@@ -278,6 +286,21 @@ export const placeOrderWithCurrency = async (
 	return url.match( /\/order-received\/(\d+)\// )?.[ 1 ] ?? '';
 };
 
+/**
+ * Places an order with a specified currency.
+ *
+ * @param {Page} page The Playwright page object.
+ * @param {string} currency The currency code to use for the order.
+ * @return {Promise<string>} The order ID.
+ */
+export const placeOrderWithCurrency = async (
+	page: Page,
+	currency: string
+) => {
+	await navigation.goToShopWithCurrency( page, currency );
+	return placeOrderWithOptions( page );
+};
+
 export const emptyCart = async ( page: Page ) => {
 	await navigation.goToCart( page );