Migrated warehouse creat test to playwright (#4359)

.changeset/short-deers-learn.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+Migrated warehouse creat test to playwright

cypress/e2e/configuration/warehouses/warehouse.js

@@ -4,21 +4,15 @@
 import faker from "faker";
 
 import { BUTTON_SELECTORS } from "../../../elements/shared/button-selectors";
-import {
-  SHIPPING_ZONE_DETAILS,
-} from "../../../elements/shipping/shipping-zone-details";
-import {
-  WAREHOUSES_DETAILS,
-} from "../../../elements/warehouses/warehouse-details";
+import { SHIPPING_ZONE_DETAILS } from "../../../elements/shipping/shipping-zone-details";
+import { WAREHOUSES_DETAILS } from "../../../elements/warehouses/warehouse-details";
 import { WAREHOUSES_LIST } from "../../../elements/warehouses/warehouses-list";
 import {
   shippingZoneDetailsUrl,
   urlList,
   warehouseDetailsUrl,
 } from "../../../fixtures/urlList";
-import {
-  updateChannelWarehouses,
-} from "../../../support/api/requests/Channels";
+import { updateChannelWarehouses } from "../../../support/api/requests/Channels";
 import {
   createShippingZone,
   createShippingZoneWithoutWarehouse,
@@ -48,7 +42,7 @@ describe("As an admin I want to manage warehouses", () => {
   });
 
   it(
-    "should be able to create warehouse. TC: SALEOR_1101",
+    "should be able to create warehouse. TC: SALEOR_1101 - migration in progress - to delete when done",
     { tags: ["@warehouse", "@allEnv", "@stable", "@oldRelease", "@critical"] },
     () => {
       const name = `${startsWith}${faker.datatype.number()}`;

playwright/data/commonLocators.ts

@@ -1,4 +1,5 @@
 export const LOCATORS = {
   successBanner: '[data-test-type="success"]',
+  errorBanner: '[data-test-type="error"]',
   dataGridTable: "[data-testid='data-grid-canvas']",
 };

playwright/pages/basePage.ts

@@ -8,12 +8,14 @@ export class BasePage {
   readonly pageHeader: Locator;
   readonly gridCanvas: Locator;
   readonly successBanner: Locator;
+  readonly errorBanner: Locator;
 
   constructor(page: Page) {
     this.page = page;
     this.pageHeader = page.getByTestId("page-header");
     this.gridCanvas = page.locator('[data-testid="data-grid-canvas"]');
     this.successBanner = page.locator(LOCATORS.successBanner);
+    this.errorBanner = page.locator(LOCATORS.errorBanner);
   }
   async gotoCreateProductPage(productTypeId: string) {
     await this.page.goto(
@@ -34,10 +36,12 @@ export class BasePage {
     await this.successBanner
       .locator(`text=${msg}`)
       .waitFor({ state: "visible", timeout: 10000 });
+    await expect(this.errorBanner).not.toBeVisible();
   }
   async expectSuccessBanner() {
     await this.successBanner
       .first()
       .waitFor({ state: "visible", timeout: 15000 });
+    await expect(this.errorBanner).not.toBeVisible();
   }
 }

playwright/pages/warehousePage.ts

@@ -0,0 +1,84 @@
+import type { Locator, Page } from "@playwright/test";
+
+import { BasePage } from "./basePage";
+
+export class WarehousePage {
+  readonly page: Page;
+  readonly createNewWarehouseButton: Locator;
+  readonly saveButton: Locator;
+  readonly warehouseNameInput: Locator;
+  readonly companyNameInput: Locator;
+  readonly companyCityInput: Locator;
+  readonly companyAddressLine1Input: Locator;
+  readonly companyAddressLine2Input: Locator;
+  readonly companyZipInput: Locator;
+  readonly companyPhoneInput: Locator;
+  readonly companyCountrySelect: Locator;
+  readonly companyCountryOptions: Locator;
+  readonly basePage: BasePage;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.basePage = new BasePage(page);
+    this.createNewWarehouseButton = page.getByTestId("create-warehouse");
+    this.saveButton = page.getByTestId("button-bar-confirm");
+    this.warehouseNameInput = page
+      .getByTestId("warehouse-name-input")
+      .locator("input");
+    this.companyNameInput = page
+      .getByTestId("company-name-input")
+      .locator("input");
+    this.companyAddressLine1Input = page
+      .getByTestId("company-address-line-1-input")
+      .locator("input");
+    this.companyAddressLine2Input = page
+      .getByTestId("company-address-line-2-input")
+      .locator("input");
+    this.companyCityInput = page
+      .getByTestId("company-city-input")
+      .locator("input");
+    this.companyZipInput = page
+      .getByTestId("company-zip-input")
+      .locator("input");
+    this.companyPhoneInput = page
+      .getByTestId("company-phone-input")
+      .locator("input");
+    this.companyCountrySelect = page.getByTestId(
+      "address-edit-country-select-field",
+    );
+    this.companyCountryOptions = page.getByTestId(
+      "single-autocomplete-select-option",
+    );
+  }
+
+  async clickCreateNewWarehouseButton() {
+    await this.createNewWarehouseButton.click();
+  }
+  async clickSaveButton() {
+    await this.saveButton.click();
+  }
+
+  async completeWarehouseForm(
+    warehouseName = "e2e test - warehouse XXL",
+    companyName = "e2e test - Looney Acme",
+    lineAddress1 = "e2e test - wild road",
+    lineAddress2 = "e2e test - 999/0",
+    cityName = "e2e test - Looney vile",
+    zip = "C1417",
+    phone = "++541159133745",
+    country = "Argentina",
+  ) {
+    await this.warehouseNameInput.fill(warehouseName);
+    await this.companyNameInput.fill(companyName);
+    await this.companyAddressLine1Input.fill(lineAddress1);
+    await this.companyAddressLine2Input.fill(lineAddress2);
+    await this.companyCityInput.fill(cityName);
+    await this.companyZipInput.fill(zip);
+    await this.companyPhoneInput.fill(phone);
+    await this.companyCountrySelect.click();
+    await this.page
+      .getByTestId("autocomplete-dropdown")
+      .getByRole("option", { name: country })
+      .click();
+  }
+}

playwright/tests/warehouse.spec.ts

@@ -0,0 +1,17 @@
+import { URL_LIST } from "@data/url";
+import { WarehousePage } from "@pages/warehousePage";
+import { test } from "@playwright/test";
+
+test.use({ storageState: "playwright/.auth/admin.json" });
+
+test("TC: SALEOR_30 Create basic warehouse @basic-regression @warehouse", async ({
+  page,
+}) => {
+  const warehousePage = new WarehousePage(page);
+
+  await page.goto(URL_LIST.warehouses);
+  await warehousePage.clickCreateNewWarehouseButton();
+  await warehousePage.completeWarehouseForm();
+  await warehousePage.clickSaveButton();
+  await warehousePage.basePage.expectSuccessBanner();
+});

src/components/CompanyAddressInput/CompanyAddressForm.tsx

@@ -88,6 +88,7 @@ const CompanyAddressForm: React.FC<CompanyAddressFormProps> = props => {
     <div className={classes.root} data-test-id="company-info">
       <TextField
         disabled={disabled}
+        data-test-id="company-name-input"
         error={!!formErrors.companyName}
         helperText={getErrorMessage(formErrors.companyName, intl)}
         label={intl.formatMessage({
@@ -107,6 +108,7 @@ const CompanyAddressForm: React.FC<CompanyAddressFormProps> = props => {
       <TextField
         disabled={disabled}
         error={!!formErrors.streetAddress1}
+        data-test-id="company-address-line-1-input"
         helperText={getErrorMessage(formErrors.streetAddress1, intl)}
         label={intl.formatMessage({
           id: "B52Em/",
@@ -125,6 +127,7 @@ const CompanyAddressForm: React.FC<CompanyAddressFormProps> = props => {
       <TextField
         disabled={disabled}
         error={!!formErrors.streetAddress2}
+        data-test-id="company-address-line-2-input"
         helperText={getErrorMessage(formErrors.streetAddress2, intl)}
         label={intl.formatMessage({
           id: "oQY0a2",
@@ -144,6 +147,7 @@ const CompanyAddressForm: React.FC<CompanyAddressFormProps> = props => {
         <TextField
           disabled={disabled}
           error={!!formErrors.city}
+          data-test-id="company-city-input"
           helperText={getErrorMessage(formErrors.city, intl)}
           label={intl.formatMessage({
             id: "TE4fIS",
@@ -161,6 +165,7 @@ const CompanyAddressForm: React.FC<CompanyAddressFormProps> = props => {
         <TextField
           disabled={disabled}
           error={!!formErrors.postalCode}
+          data-test-id="company-zip-input"
           helperText={getErrorMessage(formErrors.postalCode, intl)}
           label={intl.formatMessage({
             id: "oYGfnY",
@@ -224,6 +229,7 @@ const CompanyAddressForm: React.FC<CompanyAddressFormProps> = props => {
       <TextField
         disabled={disabled}
         error={!!formErrors.phone}
+        data-test-id="company-phone-input"
         fullWidth
         helperText={getErrorMessage(formErrors.phone, intl)}
         label={intl.formatMessage({

src/warehouses/components/WarehouseInfo/WarehouseInfo.tsx

@@ -32,6 +32,7 @@ const WarehouseInfo: React.FC<WarehouseInfoProps> = ({
       </DashboardCard.Title>
       <DashboardCard.Content>
         <TextField
+          data-test-id="warehouse-name-input"
           disabled={disabled}
           error={!!formErrors.name}
           fullWidth