Orders tests (#4566)

* add tracking number, mark as paid and fulfill tests

* changed order number to perform SALEOR_79

.changeset/brave-dragons-warn.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+add tracking number, mark as paid and fulfill tests

playwright/data/e2eTestData.ts

@@ -75,6 +75,12 @@ export const ORDERS = {
       info: "Order used to capture manual transactions and fulfill",
     },
   },
+  orderToAddTrackingNumberTo: {
+    id: "T3JkZXI6M2NkYWE4NGItNzgxNi00ZWI2LWE1MGMtODE0NzY5YWM0MTEw",
+  },
+  orderToMarkAsPaidAndFulfill: {
+    id: "T3JkZXI6Yzg2ZDMzYmEtMTA5Yi00MzUyLTkzYWItOTljMGE3Zjk4ZGE5",
+  },
 };
 
 export const SHIPPING_METHODS = {

playwright/pages/basePage.ts

@@ -103,9 +103,10 @@ export class BasePage {
     return Math.floor(Math.random() * (max + 1));
   }
 
-  async waitForGrid() {
+  async waitForGrid(gridIndex = 0) {
     await this.gridCanvas
       .locator("table")
+      .nth(gridIndex)
       .waitFor({ state: "attached", timeout: 10000 });
   }
 

playwright/pages/dialogs/addTrackingDialog.ts

@@ -0,0 +1,22 @@
+import type { Page } from "@playwright/test";
+
+export class AddTrackingDialog {
+  constructor(
+    page: Page,
+    readonly trackingNumberInput = page
+      .getByTestId("tracking-number-input")
+      .locator("input"),
+    readonly confirmTrackingNumberButton = page.getByTestId(
+      "confirm-tracking-number-button",
+    ),
+  ) {}
+
+  async typeTrackingNumber(trackingNumber = "123456789") {
+    await this.trackingNumberInput.fill(trackingNumber);
+  }
+  async typeTrackingNumberAndSave(trackingNumber: string) {
+    await this.typeTrackingNumber(trackingNumber);
+    await this.confirmTrackingNumberButton.click();
+    await this.confirmTrackingNumberButton.waitFor({ state: "hidden" });
+  }
+}

playwright/pages/ordersPage.ts

@@ -1,4 +1,5 @@
 import { URL_LIST } from "@data/url";
+import { AddTrackingDialog } from "@dialogs/addTrackingDialog";
 import { ManualTransactionDialog } from "@dialogs/manualTransactionDialog";
 import { MarkOrderAsPaidDialog } from "@dialogs/markOrderAsPaidDialog";
 import { BasePage } from "@pages/basePage";
@@ -16,17 +17,22 @@ export class OrdersPage extends BasePage {
   shippingAddressDialog: ShippingAddressDialog;
   basePage: BasePage;
   manualTransactionDialog: ManualTransactionDialog;
+  addTrackingDialog: AddTrackingDialog;
 
   constructor(
     page: Page,
     readonly createOrderButton = page.getByTestId("create-order-button"),
     readonly markAsPaidButton = page.getByTestId("markAsPaidButton"),
+    readonly addTrackingButton = page.getByTestId("add-tracking-button"),
+    readonly editTrackingButton = page.getByTestId("edit-tracking-button"),
+    readonly setTrackingNumber = page.getByTestId("tracking-number-set"),
     readonly manualTransactionButton = page.getByTestId(
       "captureManualTransactionButton",
     ),
     readonly orderSummarySection = page.getByTestId("OrderSummaryCard"),
     readonly paymentSummarySection = page.getByTestId("payment-section"),
     readonly paymentStatusInfo = page.getByTestId("payment-status"),
+    readonly balanceStatusInfo = page.getByTestId("order-balance-status"),
     readonly fulfillButton = page.getByTestId("fulfill-button"),
     readonly addProducts = page.getByTestId("add-products-button"),
     readonly orderTransactionsList = page
@@ -52,6 +58,7 @@ export class OrdersPage extends BasePage {
     this.addressDialog = new AddressDialog(page);
     this.shippingAddressDialog = new ShippingAddressDialog(page);
     this.manualTransactionDialog = new ManualTransactionDialog(page);
+    this.addTrackingDialog = new AddTrackingDialog(page);
   }
 
   async selectCustomer(customer = "allison.freeman@example.com") {
@@ -60,6 +67,9 @@ export class OrdersPage extends BasePage {
   async clickCreateOrderButton() {
     await this.createOrderButton.click();
   }
+  async clickAddTrackingButton() {
+    await this.addTrackingButton.click();
+  }
   async clickManualTransactionButton() {
     await this.manualTransactionButton.click();
   }

playwright/tests/orders.spec.ts

@@ -133,7 +133,7 @@ test("TC: SALEOR_78 Capture partial amounts by manual transactions and fulfill o
   ).toContainText("Unfulfilled");
   expect(
     await ordersPage.paymentStatusInfo,
-    "Order should fully paid",
+    "Order should be fully paid",
   ).toContainText("Fully paid");
 
   await ordersPage.clickFulfillButton();
@@ -145,3 +145,34 @@ test("TC: SALEOR_78 Capture partial amounts by manual transactions and fulfill o
     "Order should be yet fulfilled",
   ).toContainText("Fulfilled");
 });
+
+test("TC: SALEOR_79 Mark order as paid and fulfill it with regular flow @e2e @order", async () => {
+  await ordersPage.goToExistingOrderPage(ORDERS.orderToMarkAsPaidAndFulfill.id);
+  await ordersPage.waitForGrid();
+  await ordersPage.clickMarkAsPaidButton();
+  await ordersPage.markOrderAsPaidDialog.typeAndSaveOrderReference();
+  await ordersPage.expectSuccessBannerMessage("paid");
+  const transactionsMadeRows = await ordersPage.orderTransactionsList.locator(
+    "tr",
+  );
+  await expect(ordersPage.balanceStatusInfo).toHaveText("Settled");
+  expect(
+    await ordersPage.paymentStatusInfo,
+    "Order should be fully paid",
+  ).toContainText("Fully paid");
+
+  await ordersPage.clickFulfillButton();
+  await fulfillmentPage.clickFulfillButton();
+  await ordersPage.expectSuccessBannerMessage("fulfilled");
+  expect(await ordersPage.pageHeaderStatusInfo).toContainText("Fulfilled");
+});
+
+test("TC: SALEOR_80 Add tracking to order @e2e @order", async () => {
+  const trackingNumber = "123456789";
+  await ordersPage.goToExistingOrderPage(ORDERS.orderToAddTrackingNumberTo.id);
+  await ordersPage.waitForGrid();
+  await ordersPage.clickAddTrackingButton();
+  await ordersPage.addTrackingDialog.typeTrackingNumberAndSave(trackingNumber);
+  await ordersPage.expectSuccessBannerMessage("updated");
+  await expect(ordersPage.setTrackingNumber).toContainText(trackingNumber);
+});

src/orders/components/OrderFulfilledProductsCard/ActionButtons.tsx

@@ -74,13 +74,21 @@ const ActionButtons: React.FC<AcionButtonsProps> = ({
 
   return hasTrackingNumber ? (
     <CardActions className={classes.actions}>
-      <Button variant="primary" onClick={onTrackingCodeAdd}>
+      <Button
+        data-test-id="edit-tracking-button"
+        variant="primary"
+        onClick={onTrackingCodeAdd}
+      >
         <FormattedMessage {...actionButtonsMessages.editTracking} />
       </Button>
     </CardActions>
   ) : (
     <CardActions className={classes.actions}>
-      <Button variant="primary" onClick={onTrackingCodeAdd}>
+      <Button
+        variant="primary"
+        onClick={onTrackingCodeAdd}
+        data-test-id="add-tracking-button"
+      >
         <FormattedMessage {...actionButtonsMessages.addTracking} />
       </Button>
     </CardActions>

src/orders/components/OrderFulfilledProductsCard/ExtraInfoLines.tsx

@@ -57,6 +57,7 @@ const ExtraInfoLines: React.FC<ExtraInfoLinesProps> = ({ fulfillment }) => {
             values={{
               trackingNumber: (
                 <Typography
+                  data-test-id="tracking-number-set"
                   className={classes.infoLabel}
                   color="textPrimary"
                   variant="body2"

src/orders/components/OrderFulfillmentTrackingDialog/OrderFulfillmentTrackingDialog.tsx

@@ -82,6 +82,7 @@ const OrderFulfillmentTrackingDialog: React.FC<
                 onChange={change}
                 value={data.trackingNumber}
                 fullWidth
+                data-test-id="tracking-number-input"
               />
               {errors.length > 0 && (
                 <>
@@ -99,6 +100,7 @@ const OrderFulfillmentTrackingDialog: React.FC<
             <DialogActions>
               <BackButton onClick={onClose} />
               <ConfirmButton
+                data-test-id="confirm-tracking-number-button"
                 transitionState={confirmButtonState}
                 onClick={submit}
               >

src/orders/components/OrderPayment/OrderPayment.tsx

@@ -88,6 +88,7 @@ const OrderPayment: React.FC<OrderPaymentProps> = props => {
                 className={classes.rightmostLeftAlignedElement}
                 label={payment.localized}
                 color={payment.status}
+                data-test-id="payment-status"
               />
               {order?.status !== OrderStatus.CANCELED &&
                 (canCapture || canRefund || canVoid || canMarkAsPaid) && (
@@ -264,7 +265,10 @@ const OrderPayment: React.FC<OrderPaymentProps> = props => {
             )}
           >
             <FormattedMessage {...orderPaymentMessages.outstanding} />
-            <div className={classes.leftmostRightAlignedElement}>
+            <div
+              className={classes.leftmostRightAlignedElement}
+              data-test-id="order-balance-status"
+            >
               {order?.totalBalance.amount === 0 ? (
                 <FormattedMessage {...orderPaymentMessages.settled} />
               ) : (