diff --git a/changelog/dev-10085-convert-shopper-subscriptions-manage-payments-spec b/changelog/dev-10085-convert-shopper-subscriptions-manage-payments-spec new file mode 100644 index 00000000000..b8b037f5844 --- /dev/null +++ b/changelog/dev-10085-convert-shopper-subscriptions-manage-payments-spec @@ -0,0 +1,4 @@ +Significance: patch +Type: dev + +Migrate the Shopper Subscriptions Manage Payments spec to Playwright and remove the corresponding Puppeteer test. diff --git a/tests/e2e-pw/specs/shopper/shopper-subscriptions-manage-payments.spec.ts b/tests/e2e-pw/specs/shopper/shopper-subscriptions-manage-payments.spec.ts new file mode 100644 index 00000000000..cc0789513f4 --- /dev/null +++ b/tests/e2e-pw/specs/shopper/shopper-subscriptions-manage-payments.spec.ts @@ -0,0 +1,97 @@ +/** + * External dependencies + */ +import test, { expect, Page } from '@playwright/test'; + +/** + * Internal dependencies + */ +import RestAPI from '../../utils/rest-api'; +import { config } from '../../config/default'; +import { products, shouldRunSubscriptionsTests } from '../../utils/constants'; +import { describeif, getAnonymousShopper } from '../../utils/helpers'; +import * as shopper from '../../utils/shopper'; +import * as navigation from '../../utils/shopper-navigation'; + +const navigateToSubscriptionDetails = async ( + page: Page, + subscriptionId: string +) => { + await navigation.goToSubscriptions( page ); + await page + .getByLabel( `View subscription number ${ subscriptionId }` ) + .click(); + + await page.getByRole( 'link', { name: 'Change payment' } ).click(); + + await expect( + page.getByRole( 'heading', { + name: 'Change payment method', + } ) + ).toBeVisible(); + + await page.getByText( 'Choose a new payment method' ).isVisible(); +}; + +describeif( shouldRunSubscriptionsTests )( + 'Shopper > Subscriptions > Manage Payment Methods', + () => { + let page: Page; + let subscriptionId: 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 + ); + + page = ( await getAnonymousShopper( browser ) ).shopperPage; + + // Purchase a subscription. + await shopper.placeOrderWithOptions( page, { + productId: products.SUBSCRIPTION_NO_SIGNUP_FEE, + billingAddress: customerBillingAddress, + } ); + + subscriptionId = ( + await page.getByLabel( 'View subscription number' ).innerText() + ).substring( 1 ); + } ); + + test.beforeEach( async () => { + await navigateToSubscriptionDetails( page, subscriptionId ); + } ); + + test( 'should change a default payment method to a new one', async () => { + await page.getByLabel( 'Use a new payment method' ).check(); + await shopper.fillCardDetails( page, config.cards.basic2 ); + await shopper.focusPlaceOrderButton( page ); + await shopper.placeOrder( page ); + + await expect( + page.getByText( 'Payment method updated.' ) + ).toBeVisible(); + + await expect( + page.getByText( 'Visa ending in 1111 (expires 11/45)' ) + ).toBeVisible(); + } ); + + test( 'should set a payment method to an already saved card', async () => { + await shopper.focusPlaceOrderButton( page ); + await page.locator( '#place_order' ).click(); + + await expect( + page.getByText( 'Payment method updated.' ) + ).toBeVisible(); + + await expect( + page.getByText( 'Visa ending in 4242 (expires 02/45)' ) + ).toBeVisible(); + } ); + } +); diff --git a/tests/e2e-pw/utils/constants.ts b/tests/e2e-pw/utils/constants.ts index 4ff5a2d40f1..529352b1cdb 100644 --- a/tests/e2e-pw/utils/constants.ts +++ b/tests/e2e-pw/utils/constants.ts @@ -6,4 +6,5 @@ export const shouldRunActionSchedulerTests = export const products = { SUBSCRIPTION_SIGNUP_FEE: 70, + SUBSCRIPTION_NO_SIGNUP_FEE: 88, }; diff --git a/tests/e2e/specs/subscriptions/shopper/shopper-subscriptions-manage-payments.spec.js b/tests/e2e/specs/subscriptions/shopper/shopper-subscriptions-manage-payments.spec.js deleted file mode 100644 index b8723382262..00000000000 --- a/tests/e2e/specs/subscriptions/shopper/shopper-subscriptions-manage-payments.spec.js +++ /dev/null @@ -1,153 +0,0 @@ -/** - * External dependencies - */ -import config from 'config'; -const { - shopper, - withRestApi, - setCheckbox, -} = require( '@woocommerce/e2e-utils' ); -import { - RUN_SUBSCRIPTIONS_TESTS, - describeif, - shopperWCP, -} from '../../../utils'; -import { fillCardDetails, setupCheckout } from '../../../utils/payments'; - -const customerBilling = config.get( - 'addresses.subscriptions-customer.billing' -); -const productSlug = 'subscription-no-signup-fee-product'; -let subscriptionId; - -const testSelectors = { - subscriptionIdField: '.woocommerce-orders-table__cell-subscription-id > a', - subscriptionChangePaymentButton: - '.subscription_details a.button.change_payment_method', - wcNotice: 'div.wc-block-components-notice-banner', - wcOldNotice: '.woocommerce .woocommerce-message', - pageTitle: 'h1.entry-title', - newPaymentMethodCheckbox: 'input#wc-woocommerce_payments-payment-token-new', - subscriptionPaymentMethod: '.subscription-payment-method', - savedTokensCheckboxes: - '.payment_method_woocommerce_payments .woocommerce-SavedPaymentMethods-tokenInput', -}; - -describeif( RUN_SUBSCRIPTIONS_TESTS )( - 'Shopper > Subscriptions > Manage Payment Methods', - () => { - beforeAll( async () => { - // Delete the user, if present - await withRestApi.deleteCustomerByEmail( customerBilling.email ); - } ); - afterAll( async () => { - await shopper.logout(); - } ); - - it( 'should be able to purchase a subscription', async () => { - // Open the subscription product & add to cart - await shopperWCP.addToCartBySlug( productSlug ); - - // Checkout - await setupCheckout( customerBilling ); - const card = config.get( 'cards.basic' ); - await fillCardDetails( page, card ); - await shopper.placeOrder(); - await expect( page ).toMatchTextContent( 'Order received' ); - - // Get the subscription ID - const subscriptionIdField = await page.$( - testSelectors.subscriptionIdField - ); - subscriptionId = await subscriptionIdField.evaluate( - ( el ) => el.innerText - ); - } ); - - it( 'should change a default payment method to a new one', async () => { - await shopperWCP.goToSubscriptions(); - await expect( page ).toClick( testSelectors.subscriptionIdField, { - text: subscriptionId, - } ); - await page.waitForSelector( - testSelectors.subscriptionChangePaymentButton - ); - await expect( page ).toClick( - testSelectors.subscriptionChangePaymentButton - ); - await page.waitForNavigation( { waitUntil: 'networkidle0' } ); - - // Make sure we're on the proper page - await page.waitForSelector( - testSelectors.pageTitle, - 'Change payment method' - ); - - await page.waitForTimeout( 1000 ); - await expect( page ).toMatchElement( - testSelectors.newPaymentMethodCheckbox - ); - await setCheckbox( testSelectors.newPaymentMethodCheckbox ); - - // Fill a new payment details - const newCard = config.get( 'cards.basic2' ); - await fillCardDetails( page, newCard ); - - await shopper.placeOrder(); - await shopperWCP.waitForSubscriptionsErrorBanner( - 'Payment method updated.', - testSelectors.wcNotice, - testSelectors.wcOldNotice - ); - // Verify the new payment method has been set - await page.waitForSelector( - testSelectors.subscriptionPaymentMethod, - { - text: 'Visa ending in 1111 (expires 11/25)', - } - ); - } ); - - it( 'should set a payment method to an already saved card', async () => { - await shopperWCP.goToSubscriptions(); - await expect( page ).toClick( testSelectors.subscriptionIdField, { - text: subscriptionId, - } ); - await page.waitForSelector( - testSelectors.subscriptionChangePaymentButton - ); - await expect( page ).toClick( - testSelectors.subscriptionChangePaymentButton - ); - await page.waitForNavigation( { waitUntil: 'networkidle0' } ); - - // Make sure we're on the proper page - await page.waitForSelector( - testSelectors.pageTitle, - 'Change payment method' - ); - - await page.waitForTimeout( 1000 ); - - // Select a different payment method and save it - const checkboxes = await page.$$( - testSelectors.savedTokensCheckboxes - ); - await checkboxes[ 0 ].click(); - await shopper.placeOrder(); - await shopperWCP.waitForSubscriptionsErrorBanner( - 'Payment method updated.', - testSelectors.wcNotice, - testSelectors.wcOldNotice - ); - - // Verify the new payment method has been set - await page.waitForSelector( - testSelectors.subscriptionPaymentMethod, - { - text: 'Visa ending in 4242 (expires 02/24)', - } - ); - } ); - } -);