[TEST] [E2E] Delete shipping method from the shipping zone details pa…

…ge (#4611) * test_e2e_delete_shipping_method_from_shipping_zone_details_page * test_e2e_delete_shipping_method_from_shipping_zone_details_page * Maintenance e2e tests (#4606) * Migrated warehouses tests: Edit warehouse; Delete warehouse * Migrated categories tests: Create basic category; Edit category;Bulk delete categories * Migrated warehouses tests: Edit warehouse; Delete warehouse (#4593) * Migrated warehouses tests: Edit warehouse; Delete warehouse * Update nervous-flowers-hear.md * Update nervous-flowers-hear.md * Use composites in pr automation workflow (#4597) * Use composites * Use composites * Use composites * Use composites * Use composites * changed shipping metod id in shippings tests * maintenance * add console log to goto details page actions * Trigger Build * Create ten-feet-roll.md --------- Co-authored-by: Patryk Andrzejewski <vox3r69@gmail.com> * --amend --------- Co-authored-by: wojteknowacki <124166231+wojteknowacki@users.noreply.github.com> Co-authored-by: Patryk Andrzejewski <vox3r69@gmail.com>
saleor · Jan 12, 2024 · 621c368 · 621c368
1 parent d712e65
commit 621c368
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 14 deletions.
diff --git a/.changeset/sour-bikes-sort.md b/.changeset/sour-bikes-sort.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+Test for deleting a shipping method from a shipping zone details page
diff --git a/playwright/data/commonLocators.ts b/playwright/data/commonLocators.ts
@@ -1,6 +1,6 @@
 export const LOCATORS = {
-  successBanner: '[data-test-type="success"]',
-  errorBanner: '[data-test-type="error"]',
-  infoBanner: '[data-test-type="info"]',
-  dataGridTable: "[data-testid='data-grid-canvas']",
+  successBanner: "[data-test-type=\"success\"]",
+  errorBanner: "[data-test-type=\"error\"]",
+  infoBanner: "[data-test-type=\"info\"]",
+  dataGridTable: "[data-testid=\"data-grid-canvas\"]",
 };
diff --git a/playwright/data/e2eTestData.ts b/playwright/data/e2eTestData.ts
@@ -196,6 +196,23 @@ export const SHIPPING_METHODS = {
     id: "U2hpcHBpbmdab25lOjIzOTA%3D",
     info: "Shipping method that is used to add rates",
   },
+  shippingMethodWithRatesToBeDeleted: {
+    id: "U2hpcHBpbmdab25lOjIzODk%3D",
+    info: "Shipping zone with methods to be deleted",
+    name: "e2e-test-shippingZone-to-be-deleted",
+    rates: {
+      priceBasedRateToBeDeleted: {
+        id: "U2hpcHBpbmdNZXRob2RUeXBlOjIyMjA=",
+        info: "Price based shipping rate",
+        name: "shippingMEthod_to-be-deleted",
+      },
+      weightBasedRateToBeDeleted: {
+        id: "U2hpcHBpbmdNZXRob2RUeXBlOjIyMjA=",
+        info: "Weight based shipping rate",
+        name: "shippingMethod_to_be_deleted",
+      },
+    },
+  },
 };
 export const USERS = {
   userToBeDeactivated: {

diff --git a/playwright/pages/dialogs/deleteShippingMethodDialog.ts b/playwright/pages/dialogs/deleteShippingMethodDialog.ts
@@ -0,0 +1,17 @@
+import type { Locator, Page } from "@playwright/test";
+
+export class DeleteShippingMethodDialog {
+  readonly page: Page;
+
+  readonly deleteButton: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+
+    this.deleteButton = page.getByTestId("submit");
+  }
+
+  async clickDeleteButton() {
+    await this.deleteButton.click();
+  }
+}
diff --git a/playwright/pages/shippingMethodsPage.ts b/playwright/pages/shippingMethodsPage.ts
@@ -1,4 +1,5 @@
 import { URL_LIST } from "@data/url";
+import { DeleteShippingMethodDialog } from "@dialogs/deleteShippingMethodDialog";
 import { BasePage } from "@pages/basePage";
 import { AssignCountriesDialog } from "@pages/dialogs/assignCountriesDialog";
 import { RightSideDetailsPage } from "@pages/pageElements/rightSideDetailsSection";
@@ -9,6 +10,7 @@ export class ShippingMethodsPage {
   readonly basePage: BasePage;
   readonly rightSideDetailsPage: RightSideDetailsPage;
   readonly assignCountriesDialog: AssignCountriesDialog;
+  readonly deleteShippingMethodDialog: DeleteShippingMethodDialog;
 
   constructor(
     page: Page,
@@ -21,16 +23,22 @@ export class ShippingMethodsPage {
       .getByTestId("shipping-zone-description")
       .locator("textarea"),
     readonly saveButton = page.getByTestId("button-bar-confirm"),
+    readonly shippingZoneName = page.getByTestId("page-header"),
+    readonly deleteShippingMethodButton = page.getByTestId("shipping-method-row").getByRole("button").getByTestId("delete-button"),
+    readonly priceBasedRatesSection = page.getByTestId("price-based-rates"),
+    readonly weightBasedRatesSection = page.getByTestId("weight-based-rates"),
   ) {
     this.page = page;
     this.basePage = new BasePage(page);
     this.rightSideDetailsPage = new RightSideDetailsPage(page);
     this.assignCountriesDialog = new AssignCountriesDialog(page);
+    this.deleteShippingMethodDialog = new DeleteShippingMethodDialog(page);
   }
 
   async clickAddWeightRateButton() {
     await this.addWeightRateButton.click();
   }
+
   async clickAddPriceRateButton() {
     await this.addPriceRateButton.click();
   }
@@ -44,6 +52,7 @@ export class ShippingMethodsPage {
       `${shippingZoneName} - ${new Date().toISOString()}`,
     );
   }
+
   async typeShippingZoneDescription(
     shippingDescription = "Biggest zone in e2e world",
   ) {
@@ -61,6 +70,7 @@ export class ShippingMethodsPage {
       timeout: 10000,
     });
   }
+
   async gotoExistingShippingMethod(shippingMethodId: string) {
     const existingShippingMethodUrl = `${URL_LIST.shippingMethods}${shippingMethodId}`;
     await console.log(
@@ -76,4 +86,10 @@ export class ShippingMethodsPage {
   async clickCreateShippingZoneButton() {
     await this.createShippingZoneButton.click();
   }
+
+  async clickDeleteShippingMethod() {
+    await this.priceBasedRatesSection.locator(this.deleteShippingMethodButton).click();
+
+  }
+
 }
diff --git a/playwright/tests/shippingMethods.spec.ts b/playwright/tests/shippingMethods.spec.ts
@@ -6,8 +6,8 @@ import { expect, test } from "@playwright/test";
 test.use({ storageState: "playwright/.auth/admin.json" });
 
 test("TC: SALEOR_31 Create basic shipping method @shipping-method @e2e", async ({
-  page,
-}) => {
+                                                                                  page,
+                                                                                }) => {
   const shippingMethodsPage = new ShippingMethodsPage(page);
 
   await shippingMethodsPage.gotoListView();
@@ -26,9 +26,9 @@ test("TC: SALEOR_31 Create basic shipping method @shipping-method @e2e", async (
   await shippingMethodsPage.saveShippingZone();
   await shippingMethodsPage.basePage.expectSuccessBanner();
 });
-test("TC: SALEOR_32 Add price rate to shipping method - with excluded zip codes adn excluded product @shipping-method @e2e", async ({
-  page,
-}) => {
+test("TC: SALEOR_32 Add price rate to shipping method - with excluded zip codes and excluded product @shipping-method @e2e", async ({
+                                                                                                                                      page,
+                                                                                                                                    }) => {
   const shippingMethodsPage = new ShippingMethodsPage(page);
   const shippingRatesPage = new ShippingRatesPage(page);
 
@@ -55,9 +55,9 @@ test("TC: SALEOR_32 Add price rate to shipping method - with excluded zip codes
     1,
   );
 });
-test("TC: SALEOR_33 Add weight rate to shipping method - with included zip codes adn excluded product @shipping-method @e2e", async ({
-  page,
-}) => {
+test("TC: SALEOR_33 Add weight rate to shipping method - with included zip codes and excluded product @shipping-method @e2e", async ({
+                                                                                                                                       page,
+                                                                                                                                     }) => {
   const shippingMethodsPage = new ShippingMethodsPage(page);
   const shippingRatesPage = new ShippingRatesPage(page);
 
@@ -85,3 +85,21 @@ test("TC: SALEOR_33 Add weight rate to shipping method - with included zip codes
     1,
   );
 });
+
+test("TC: SALEOR_34 Delete a single shipping method from the shipping zone details page @shipping-method @e2e", async ({
+                                                                                                                         page,
+                                                                                                                       }) => {
+  const shippingMethodsPage = new ShippingMethodsPage(page);
+  await shippingMethodsPage.gotoExistingShippingMethod(
+    SHIPPING_METHODS.shippingMethodWithRatesToBeDeleted.id,
+  );
+  await expect(shippingMethodsPage.basePage.pageHeader).toBeVisible();
+  const priceBasedRate = SHIPPING_METHODS.shippingMethodWithRatesToBeDeleted.rates.priceBasedRateToBeDeleted.name;
+  await expect(shippingMethodsPage.priceBasedRatesSection).toContainText(priceBasedRate);
+  await shippingMethodsPage.clickDeleteShippingMethod();
+  await shippingMethodsPage.deleteShippingMethodDialog.clickDeleteButton();
+  await shippingMethodsPage.basePage.expectSuccessBanner();
+  await expect(shippingMethodsPage.priceBasedRatesSection).toContainText("No shipping rates found");
+  await expect(shippingMethodsPage.priceBasedRatesSection).not.toContainText(priceBasedRate);
+});
+
diff --git a/src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx b/src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx
@@ -70,7 +70,11 @@ const ShippingZoneRates: React.FC<ShippingZoneRatesProps> = props => {
   const intl = useIntl();
 
   return (
-    <Card>
+    <Card
+      data-test-id={
+        variant === "price" ? "price-based-rates" : "weight-based-rates"
+      }
+    >
       <CardTitle
         title={
           variant === "price"
@@ -141,6 +145,7 @@ const ShippingZoneRates: React.FC<ShippingZoneRatesProps> = props => {
                   hover={!!rate}
                   key={rate ? rate.id : "skeleton"}
                   href={rate && getRateEditHref(rate.id)}
+                  data-test-id="shipping-method-row"
                 >
                   <TableCell className={classes.nameColumn}>
                     {maybe<React.ReactNode>(() => rate.name, <Skeleton />)}
@@ -190,7 +195,7 @@ const ShippingZoneRates: React.FC<ShippingZoneRatesProps> = props => {
                       onClick={() => onRateRemove(rate.id)}
                       className={classes.buttonColumn}
                     >
-                      <DeleteIcon />
+                      <DeleteIcon data-test-id="delete-button" />
                     </IconButtonTableCell>
                   </TableButtonWrapper>
                 </TableRowLink>