Create order with activated transaction flow in channel test (#4558)

* Create order with activated transaction flow in channel test

* new assertions

.changeset/famous-otters-rest.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+Create order with activated transaction flow in channel test

playwright.config.ts

@@ -12,7 +12,7 @@ export default defineConfig({
   retries: process.env.CI ? 2 : 0,
   workers: process.env.CI ? 2 : undefined,
   reporter: process.env.CI ? "blob" : "html",
-  timeout: process.env.CI ? 60000 : 20000,
+  timeout: process.env.CI ? 60000 : 30000,
   // webServer: {
   //   command: "npm run dev",
   //   url: "http://localhost:9000/",

playwright/data/e2eTestData.ts

@@ -49,6 +49,12 @@ export const PRODUCTS = {
     id: "UHJvZHVjdDo3NTc%3D",
     info: "Product that contains single variant - to be deleted from details view",
   },
+  productAvailableWithTransactionFlow: {
+    name: "Coconut Juice transaction flow",
+    id: "UHJvZHVjdDo3Ng%3D%3D",
+    variant1sku: "84725784",
+    info: "Product which is available within channel with activated transaction flow",
+  },
   productsToBeBulkDeleted: {
     names: [
       "a product to be deleted via bulk 1/3",

playwright/pages/dialogs/addProductsDialog.ts

@@ -26,9 +26,9 @@ export class AddProductsDialog {
     await this.confirmButton.click();
   }
 
-  async selectVariantOnListAndConfirm(variantSku = "SKU 61630747") {
+  async selectVariantWithSkuOnListAndConfirm(variantSku = "61630747") {
     await this.variantRow
-      .filter({ has: this.page.locator(`text=${variantSku}`) })
+      .filter({ has: this.page.locator(`text=SKU ${variantSku}`) })
       .locator(this.productRowCheckbox)
       .click();
     await this.clickConfirmButton();

playwright/pages/dialogs/orderCreateDialog.ts

@@ -25,4 +25,11 @@ export class OrderCreateDialog {
     await this.channelOption.first().click();
     await this.clickConfirmButton();
   }
+  async completeOrderCreateDialogWithTransactionChannel() {
+    await this.expandChannelsSearchList();
+    await this.channelOption
+      .filter({ hasText: "transaction flow channel" })
+      .click();
+    await this.clickConfirmButton();
+  }
 }

playwright/pages/ordersPage.ts

@@ -1,52 +1,45 @@
+import { URL_LIST } from "@data/url";
 import { AddProductsDialog } from "@pages/dialogs/addProductsDialog";
 import { AddressDialog } from "@pages/dialogs/addressDialog";
 import { OrderCreateDialog } from "@pages/dialogs/orderCreateDialog";
 import { ShippingAddressDialog } from "@pages/dialogs/shippingMethodDialog";
-import { Locator, Page } from "@playwright/test";
+import { Page } from "@playwright/test";
 
 import { BasePage } from "./basePage";
 
-export class OrdersPage {
-  readonly page: Page;
-  readonly createOrderButton: Locator;
-
-  readonly addProducts: Locator;
-  readonly salesChannel: Locator;
-  readonly editCustomerButton: Locator;
-  readonly searchCustomerInput: Locator;
-  readonly addShippingCarrierLink: Locator;
-  readonly finalizeButton: Locator;
-  readonly selectCustomerOption: Locator;
-
-  readonly editShippingAddress: Locator;
-  readonly editBillingAddress: Locator;
-  readonly customerEmail: Locator;
+export class OrdersPage extends BasePage {
   orderCreateDialog: OrderCreateDialog;
   addProductsDialog: AddProductsDialog;
   addressDialog: AddressDialog;
   shippingAddressDialog: ShippingAddressDialog;
   basePage: BasePage;
 
-  constructor(page: Page) {
-    this.page = page;
+  constructor(
+    page: Page,
+    readonly createOrderButton = page.getByTestId("create-order-button"),
+    readonly markAsPaidButton = page.getByTestId("markAsPaidButton"),
+    readonly orderSummarySection = page.getByTestId("OrderSummaryCard"),
+    readonly paymentSummarySection = page.getByTestId("payment-section"),
+    readonly fulfillButton = page.getByTestId("fulfill-button"),
+    readonly addProducts = page.getByTestId("add-products-button"),
+    readonly salesChannel = page.getByTestId("salesChannel"),
+    readonly editCustomerButton = page.getByTestId("edit-customer"),
+    readonly searchCustomerInput = page.getByTestId("select-customer"),
+    readonly addShippingCarrierLink = page.getByTestId("add-shipping-carrier"),
+    readonly finalizeButton = page.getByTestId("button-bar-confirm"),
+    readonly editShippingAddress = page.getByTestId("edit-shipping-address"),
+    readonly editBillingAddress = page.getByTestId("edit-billing-address"),
+    readonly customerEmail = page.getByTestId("customer-email"),
+    readonly selectCustomerOption = page.getByTestId(
+      "single-autocomplete-select-option",
+    ),
+  ) {
+    super(page);
     this.orderCreateDialog = new OrderCreateDialog(page);
     this.basePage = new BasePage(page);
     this.addProductsDialog = new AddProductsDialog(page);
     this.addressDialog = new AddressDialog(page);
     this.shippingAddressDialog = new ShippingAddressDialog(page);
-    this.createOrderButton = page.getByTestId("create-order-button");
-    this.addProducts = page.getByTestId("add-products-button");
-    this.salesChannel = page.getByTestId("salesChannel");
-    this.editCustomerButton = page.getByTestId("edit-customer");
-    this.searchCustomerInput = page.getByTestId("select-customer");
-    this.addShippingCarrierLink = page.getByTestId("add-shipping-carrier");
-    this.finalizeButton = page.getByTestId("button-bar-confirm");
-    this.editShippingAddress = page.getByTestId("edit-shipping-address");
-    this.editBillingAddress = page.getByTestId("edit-billing-address");
-    this.customerEmail = page.getByTestId("customer-email");
-    this.selectCustomerOption = page.getByTestId(
-      "single-autocomplete-select-option",
-    );
   }
 
   async selectCustomer(customer = "allison.freeman@example.com") {
@@ -73,4 +66,8 @@ export class OrdersPage {
   async expectSuccessBanner() {
     await this.basePage.expectSuccessBanner();
   }
+
+  async goToOrdersListView() {
+    await this.page.goto(URL_LIST.orders);
+  }
 }

playwright/pages/productPage.ts

@@ -15,9 +15,7 @@ import { FiltersPage } from "./pageElements/filtersPage";
 const productName = `e2e-productName-${faker.datatype.number()}`;
 const productDescription = `e2e-productDescription-${faker.datatype.number()}`;
 
-export class ProductPage {
-  readonly page: Page;
-
+export class ProductPage extends BasePage {
   readonly metadataSeoPage: MetadataSeoPage;
   readonly exportProductsDialog: ExportProductsDialog;
   readonly rightSideDetailsPage: RightSideDetailsPage;
@@ -81,7 +79,7 @@ export class ProductPage {
     readonly sellingPriceInput = page.locator("[name*='channel-price']"),
     readonly firstRowDataGrid = page.locator("[data-testid='glide-cell-1-0']"),
   ) {
-    this.page = page;
+    super(page);
     this.basePage = new BasePage(page);
     this.exportProductsDialog = new ExportProductsDialog(page);
     this.deleteProductDialog = new DeleteProductDialog(page);

playwright/tests/orders.spec.ts

@@ -1,17 +1,42 @@
-import { URL_LIST } from "@data/url";
+import { PRODUCTS } from "@data/e2eTestData";
 import { OrdersPage } from "@pages/ordersPage";
 import { expect, test } from "@playwright/test";
 
 test.use({ storageState: "playwright/.auth/admin.json" });
+let ordersPage: OrdersPage;
 
-test("TC: SALEOR_28 Create basic order @e2e @order", async ({ page }) => {
-  const ordersPage = new OrdersPage(page);
+test.beforeEach(({ page }) => {
+  ordersPage = new OrdersPage(page);
+});
 
-  await page.goto(URL_LIST.orders);
+test("TC: SALEOR_28 Create basic order @e2e @order", async () => {
+  await ordersPage.goToOrdersListView();
   await ordersPage.clickCreateOrderButton();
   await ordersPage.orderCreateDialog.completeOrderCreateDialogWithFirstChannel();
   await ordersPage.clickAddProductsButton();
-  await ordersPage.addProductsDialog.selectVariantOnListAndConfirm();
+  await ordersPage.addProductsDialog.selectVariantWithSkuOnListAndConfirm();
+  await ordersPage.clickEditCustomerButton();
+  await ordersPage.clickSearchCustomerInput();
+  await ordersPage.selectCustomer();
+  await expect(
+    ordersPage.addressDialog.existingAddressRadioButton,
+  ).toBeVisible();
+  await ordersPage.addressDialog.clickConfirmButton();
+  await ordersPage.clickAddShippingCarrierButton();
+  await ordersPage.shippingAddressDialog.pickAndConfirmFirstShippingMethod();
+  await ordersPage.clickFinalizeButton();
+  await ordersPage.successBanner
+    .filter({ hasText: "finalized" })
+    .waitFor({ state: "visible" });
+});
+test("TC: SALEOR_76 Create order with transaction flow activated @e2e @order", async () => {
+  await ordersPage.goToOrdersListView();
+  await ordersPage.clickCreateOrderButton();
+  await ordersPage.orderCreateDialog.completeOrderCreateDialogWithTransactionChannel();
+  await ordersPage.clickAddProductsButton();
+  await ordersPage.addProductsDialog.selectVariantWithSkuOnListAndConfirm(
+    PRODUCTS.productAvailableWithTransactionFlow.variant1sku,
+  );
   await ordersPage.clickEditCustomerButton();
   await ordersPage.clickSearchCustomerInput();
   await ordersPage.selectCustomer();
@@ -22,5 +47,11 @@ test("TC: SALEOR_28 Create basic order @e2e @order", async ({ page }) => {
   await ordersPage.clickAddShippingCarrierButton();
   await ordersPage.shippingAddressDialog.pickAndConfirmFirstShippingMethod();
   await ordersPage.clickFinalizeButton();
-  await ordersPage.basePage.expectSuccessBannerMessage("finalize");
+  await ordersPage.successBanner
+    .filter({ hasText: "finalized" })
+    .waitFor({ state: "visible" });
+  await expect(ordersPage.markAsPaidButton).toBeVisible();
+  await expect(ordersPage.paymentSummarySection).toBeVisible();
+  await expect(ordersPage.orderSummarySection).toBeVisible();
+  await expect(ordersPage.fulfillButton).toBeDisabled();
 });