Implement e2e test to Make a 🍊 payment with "Review test approve" names

tests-e2e/fixtures/base/BackOffice.js

@@ -11,8 +11,8 @@ export default class BackOffice extends BaseBackOffice {
             usernameInput: () => this.page.locator('#username'),
             passwordInput: () => this.page.locator('#login'),
             loginButton: () => this.page.locator('.action-login'),
-            // menuBarItemSales: () => this.page.locator('#menu-magento-sales-sales'),
             menuBarItemSeQuraLink: () => this.page.locator('[data-ui-id="menu-sequra-core-menu"] > a'),
+            menuBarItemOrdersLink: () => this.page.locator('[data-ui-id="menu-magento-sales-sales-order"] > a'),
         };
     }
 
@@ -53,6 +53,11 @@ export default class BackOffice extends BaseBackOffice {
         throw new Error('Not implemented');
     }
 
+    async #gotoLinkTarget(link, append = '') {
+        const url = (await link.getAttribute('href')) + append;
+        await this.page.goto(url, { waitUntil: 'domcontentloaded' });
+    }
+
     /**
      * Navigate to SeQura settings page
      * 
@@ -61,9 +66,16 @@ export default class BackOffice extends BaseBackOffice {
      */
     async gotoSeQuraSettings(options = { page: '' }) {
         await this.login();
-        // await this.locators.menuBarItemSales().click();
-        const link = this.locators.menuBarItemSeQuraLink();
-        const url = (await link.getAttribute('href')) + `#${options.page}`;
-        await this.page.goto(url, { waitUntil: 'domcontentloaded' });
+        await this.#gotoLinkTarget(this.locators.menuBarItemSeQuraLink(), `#${options.page}`);
+    }
+
+    /**
+     * Navigate to Order listing page
+     * 
+     * @param {Object} options
+     */
+    async gotoOrderListing(options) {
+        await this.login();
+        await this.#gotoLinkTarget(this.locators.menuBarItemOrdersLink());
     }
 }

tests-e2e/fixtures/pages/CheckoutPage.js

@@ -1,4 +1,4 @@
-import { CheckoutPage as BaseCheckoutPage } from "playwright-fixture-for-plugins";
+import { BackOffice, CheckoutPage as BaseCheckoutPage } from "playwright-fixture-for-plugins";
 
 /**
  * Checkout page
@@ -26,6 +26,8 @@ export default class CheckoutPage extends BaseCheckoutPage {
             flatRateShipping: () => this.page.locator('[value="flatrate_flatrate"]'),
             continueButton: () => this.page.locator('.action.continue'),
             submitCheckout: () => this.page.locator('.payment-method._active .action.checkout'),
+            orderRowStatus: orderNumber => this.page.locator(`.data-row:has(td:has-text("${orderNumber}")) td:nth-child(9)`),
+            orderNumber: () => this.page.locator('.checkout-success p>span'),
         };
     }
 
@@ -169,4 +171,52 @@ export default class CheckoutPage extends BaseCheckoutPage {
     async waitForOrderSuccess(options) {
         await this.page.waitForURL(/checkout\/onepage\/success\//, { timeout: 30000, waitUntil: 'commit' });
     }
+
+    /**
+     * Read the order number from the success page
+     * 
+     * @returns {Promise<string>}
+     */
+    async getOrderNumber() {
+        return await this.locators.orderNumber().textContent();
+    }
+
+    /**
+    * Expects the order to have the expected status
+    * @param {Object} options 
+    * @param {string} options.orderNumber The order number
+    * @param {string} options.status The expected status
+    * @returns {Promise<void>}
+    */
+    async expectOrderHasStatus(options) {
+        const { orderNumber, status } = options;
+        await this.expect(this.locators.orderRowStatus(orderNumber)).toHaveText(status);
+    }
+
+    /**
+    * The timeout to wait before retrying to check the order status
+    * @param {Object} options 
+    * @returns {int}
+    */
+    getOrderStatusTimeoutInMs(options) {
+        return 0;
+    }
+
+    /**
+    * Check if the order changes to the expected state
+    * @param {BackOffice} backOffice
+    * @param {Object} options
+    * @param {string} options.toStatus The expected status
+    * @param {string} options.fromStatus The initial status. Optional
+    * @param {int} options.waitFor The maximum amount of seconds to wait for the order status to change
+    */
+    async expectOrderChangeTo(backOffice, options) {
+        const { toStatus, fromStatus = null, waitFor = 60 } = options;
+        const orderNumber = await this.getOrderNumber();
+        await backOffice.gotoOrderListing();
+        if (fromStatus) {
+            await this.waitForOrderStatus({ orderNumber, status: fromStatus, waitFor: 10 });
+        }
+        await this.waitForOrderStatus({ orderNumber, status: toStatus, waitFor });
+    }
 }

tests-e2e/specs/001-checkout-product.spec.js

@@ -32,17 +32,20 @@ test.describe('Product checkout', () => {
     await checkoutPage.waitForOrderSuccess();
   });
 
-  // test('Make a 🍊 payment with "Review test approve" names', async ({ productPage, checkoutPage }) => {
-  //   await checkoutPage.setupForPhysicalProducts();
-  //   await productPage.addToCart({ slug: 'sunglasses', quantity: 1 });
+  test.only('Make a 🍊 payment with "Review test approve" names', async ({ helper, dataProvider, backOffice, productPage, checkoutPage }) => {
+    // Setup
+    const { dummy_config } = helper.webhooks;
+    await helper.executeWebhook({ webhook: dummy_config }); // Setup for physical products.
+    const shopper = dataProvider.shopper('approve');
 
-  //   await checkoutPage.goto();
-  //   await checkoutPage.fillWithReviewTest({});
-  //   await checkoutPage.expectPaymentMethodsBeingReloaded();
-  //   await checkoutPage.placeOrderUsingI1({});
-  //   await checkoutPage.waitForOrderOnHold();
-  //   await checkoutPage.expectOrderChangeTo({ toStatus: 'wc-processing' });
-  // });
+    // Execution
+    await productPage.addToCart({ slug: 'push-it-messenger-bag', quantity: 1 });
+    await checkoutPage.goto();
+    await checkoutPage.fillForm(shopper);
+    await checkoutPage.placeOrder({ ...shopper, product: 'i1' });
+    await checkoutPage.waitForOrderSuccess();
+    await checkoutPage.expectOrderChangeTo(backOffice, { toStatus: 'Processing' });
+  });
 
   // test('Make a 🍊 payment with "Review test cancel" names', async ({ productPage, checkoutPage }) => {
   //   await checkoutPage.setupForPhysicalProducts();