OBPIH-7589: Fix E2E tests after inbound refactor

src/components/FormField.ts

@@ -12,9 +12,22 @@ class FormField extends BasePageModel {
     this.root = root ?? this.page.locator('body');
   }
 
+  async hasError() {
+    return (
+      (await this.field.getAttribute('class'))?.includes('has-error') ||
+      (await this.field.getAttribute('data-testid'))?.includes('has-errors')
+    );
+  }
+
+  get fieldWithError() {
+    return this.root.locator(
+      `div[data-testid="form-field has-errors"][aria-label="${this.fieldName}"]`
+    );
+  }
+
   get field() {
     return this.root.locator(
-      `div[data-testid="form-field"][aria-label="${this.fieldName}"]`
+      `div[data-testid^="form-field"][aria-label="${this.fieldName}"]`
     );
   }
 
@@ -23,15 +36,19 @@ class FormField extends BasePageModel {
   }
 
   get tooltip() {
-    return this.page.getByRole('tooltip');
+    return this.page.locator('.tippy-tooltip-content');
   }
 
   async assertHasError() {
-    await expect(this.field).toHaveClass(/has-error/);
+    expect(await this.hasError()).toBeTruthy();
+  }
+
+  async assertFieldWithErrorIsVisible(error: string) {
+    await expect(this.fieldWithError).toContainText(error);
   }
 
   async assertHasNoError() {
-    await expect(this.field).not.toHaveClass(/has-error/);
+    expect(await this.hasError()).toBeFalsy();
   }
 }
 

src/pages/inbound/create/components/AddItemsTable.ts

@@ -117,7 +117,7 @@ class Row extends BasePageModel {
     if (!_.isNil(rowValues.expirationDate)) {
       await test.step('Assert value in expiry date field', async () => {
         await expect(this.expirationDate.textbox).toHaveValue(
-          formatDate(rowValues.expirationDate as Date)
+          formatDate(rowValues.expirationDate as Date, 'DD/MMM/YYYY')
         );
       });
     }

src/pages/inbound/create/steps/AddItemsStep.ts

@@ -96,6 +96,11 @@ class AddItemsStep extends BasePageModel {
       });
     }
   }
+
+  async waitForNetworkIdle() {
+    // eslint-disable-next-line playwright/no-networkidle
+    await this.page.waitForLoadState('networkidle');
+  }
 }
 
 export default AddItemsStep;

src/pages/inbound/create/steps/SendStep.ts

@@ -15,7 +15,7 @@ class SendStep extends BasePageModel {
   shipmentTypeSelect: Select;
   shipDateDatePicker: DatePicker;
   expectedDeliveryDatePicker: DatePicker;
-  originField: TextField;
+  originField: Select;
   trackingNumberField: TextField;
   driverNameField: TextField;
   commentField: TextField;
@@ -34,7 +34,7 @@ class SendStep extends BasePageModel {
       page,
       'Expected Delivery Date'
     );
-    this.originField = new TextField(page, 'Origin');
+    this.originField = new Select(page, 'Origin');
     this.trackingNumberField = new TextField(page, 'Tracking Number');
     this.driverNameField = new TextField(page, 'Driver Name');
     this.commentField = new TextField(page, 'Comments');
@@ -65,12 +65,12 @@ class SendStep extends BasePageModel {
 
   getDocuments(documentName: string) {
     return this.page
-      .locator('.dropdown-content')
+      .locator('.dropdown-item')
       .getByText(documentName, { exact: true });
   }
 
   async isLoaded() {
-    await expect(this.originField.textbox).toBeVisible();
+    await expect(this.originField.selectField).toBeVisible();
     await expect(this.destinationSelect.selectField).toBeVisible();
     await expect(this.shipmentTypeSelect.selectField).toBeVisible();
     await expect(this.shipDateDatePicker.textbox).toBeVisible();

src/pages/putaway/steps/StartStep.ts

@@ -47,7 +47,7 @@ class StartStep extends BasePageModel {
   }
 
   async closeDisplayedError() {
-    return this.page.locator('.alert-close-icon').click();
+    return this.page.locator('.alert-close-icon').first().click();
   }
 }
 

src/tests/inbound/createInbound/createInbound.test.ts

@@ -126,6 +126,9 @@ test.describe('Create inbound stock movement', () => {
 
     await test.step('Remove second item', async () => {
       await createInboundPage.addItemsStep.table.row(1).deleteButton.click();
+      await createInboundPage.addItemsStep.table
+        .row(1)
+        .deleteButton.waitFor({ state: 'detached' });
       expect(await createInboundPage.addItemsStep.table.rows.count()).toBe(1);
     });
 
@@ -281,7 +284,7 @@ test.describe('Values persistance between steps', () => {
       ).toContainText(USER.name);
       await expect(
         createInboundPage.createStep.dateRequestedDatePicker.textbox
-      ).toHaveValue(formatDate(TODAY));
+      ).toHaveValue(formatDate(TODAY, 'DD/MMM/YYYY'));
     });
 
     await test.step('Go next step (Add items)', async () => {
@@ -353,9 +356,9 @@ test.describe('Values persistance between steps', () => {
     });
 
     await test.step('Assert data on send step', async () => {
-      await expect(createInboundPage.sendStep.originField.textbox).toHaveValue(
-        ORIGIN.name
-      );
+      await expect(
+        createInboundPage.sendStep.originField.selectField
+      ).toContainText(ORIGIN.name);
       await expect(
         createInboundPage.sendStep.destinationSelect.selectField
       ).toContainText(CURRENT_LOCATION.name);
@@ -373,7 +376,7 @@ test.describe('Values persistance between steps', () => {
       );
       await expect(
         createInboundPage.sendStep.expectedDeliveryDatePicker.textbox
-      ).toHaveValue(formatDate(EXPECTED_DELIVERY_DATE));
+      ).toHaveValue(formatDate(EXPECTED_DELIVERY_DATE, 'DD/MMM/YYYY'));
 
       for (let i = 0; i < ROWS.length; i++) {
         const data = ROWS[i];

src/tests/inbound/createInbound/downloadDocsFromSendPage.test.ts

@@ -57,16 +57,16 @@ test.describe('Download documents from inbound send page', () => {
     });
 
     await test.step('Fill create stock movement page', async () => {
+      await createInboundPage.createStep.descriptionField.textbox.fill(
+        DESCRIPTION
+      );
       await createInboundPage.createStep.originSelect.findAndSelectOption(
         ORIGIN.name
       );
       await createInboundPage.createStep.requestedBySelect.findAndSelectOption(
         USER.name
       );
       await createInboundPage.createStep.dateRequestedDatePicker.fill(TODAY);
-      await createInboundPage.createStep.descriptionField.textbox.fill(
-        DESCRIPTION
-      );
     });
 
     await test.step('Go to add items page)', async () => {
@@ -97,6 +97,14 @@ test.describe('Download documents from inbound send page', () => {
     });
 
     await test.step('Expand download dropdown and assert documents in pending shipment', async () => {
+      await expect(createInboundPage.sendStep.downloadButton).toBeDisabled();
+      await createInboundPage.sendStep.shipmentTypeSelect.findAndSelectOption(
+        SHIPMENT_TYPE
+      );
+      await createInboundPage.sendStep.expectedDeliveryDatePicker.fill(
+        EXPECTED_DELIVERY_DATE
+      );
+      await expect(createInboundPage.sendStep.downloadButton).toBeEnabled();
       await createInboundPage.sendStep.downloadButton.click();
       await expect(
         createInboundPage.sendStep.getDocuments('Export Packing List (.xls)')
@@ -122,6 +130,7 @@ test.describe('Download documents from inbound send page', () => {
     });
 
     await test.step('Download Export Packing List (.xls) file', async () => {
+      await createInboundPage.sendStep.downloadButton.click();
       const popupPromise = page.waitForEvent('popup');
       await createInboundPage.sendStep
         .getDocuments('Export Packing List (.xls)')
@@ -131,19 +140,14 @@ test.describe('Download documents from inbound send page', () => {
     });
 
     await test.step('Download Packing List file', async () => {
+      await createInboundPage.sendStep.downloadButton.click();
       const popupPromise = page.waitForEvent('popup');
       await createInboundPage.sendStep.getDocuments('Packing List').click();
       const popup = await popupPromise;
       await popup.close();
     });
 
-    await test.step('Fill send page and send shipment', async () => {
-      await createInboundPage.sendStep.shipmentTypeSelect.findAndSelectOption(
-        SHIPMENT_TYPE
-      );
-      await createInboundPage.sendStep.expectedDeliveryDatePicker.fill(
-        EXPECTED_DELIVERY_DATE
-      );
+    await test.step('Send shipment', async () => {
       await createInboundPage.sendStep.sendShipmentButton.click();
       await stockMovementShowPage.isLoaded();
     });
@@ -179,45 +183,50 @@ test.describe('Download documents from inbound send page', () => {
       ' - Packing List.xls';
 
     await test.step('Download Certificate of Donation file', async () => {
-      const popupPromise = page.waitForEvent('popup');
-      await createInboundPage.sendStep
-        .getDocuments('Certificate of Donation')
-        .click();
-      const popup = await popupPromise;
-      const downloadPromise = popup.waitForEvent('download');
-      const download = await downloadPromise;
+      await createInboundPage.sendStep.isLoaded();
+
+      const [popup, download] = await Promise.all([
+        page.waitForEvent('popup'),
+        page.waitForEvent('download'),
+        createInboundPage.sendStep
+          .getDocuments('Certificate of Donation')
+          .click(),
+      ]);
+
+      expect(download.suggestedFilename()).toBe(certificateOfDonationFileName);
       await popup.close();
-      await expect(download.suggestedFilename()).toBe(
-        certificateOfDonationFileName
-      );
     });
 
     await test.step('Download Export Packing List (.xls) file', async () => {
       await createInboundPage.sendStep.isLoaded();
-      const popupPromise = page.waitForEvent('popup');
-      await createInboundPage.sendStep
-        .getDocuments('Export Packing List (.xls)')
-        .click();
-      const popup = await popupPromise;
-      const downloadPromise = popup.waitForEvent('download');
-      const download = await downloadPromise;
+      await createInboundPage.sendStep.downloadButton.click();
+
+      const [popup, download] = await Promise.all([
+        page.waitForEvent('popup'),
+        page.waitForEvent('download'),
+        createInboundPage.sendStep
+          .getDocuments('Export Packing List (.xls)')
+          .click(),
+      ]);
+
+      expect(download.suggestedFilename()).toBe(exportPackingListFileName);
       await popup.close();
-      await expect(download.suggestedFilename()).toBe(
-        exportPackingListFileName
-      );
     });
 
     await test.step('Download Packing list file', async () => {
       await createInboundPage.sendStep.isLoaded();
-      const popupPromise = page.waitForEvent('popup');
-      await createInboundPage.sendStep.getDocuments('Packing List').click();
-      const popup = await popupPromise;
-      const downloadPromise = popup.waitForEvent('download');
-      const download = await downloadPromise;
-      await popup.close();
-      await expect(download.suggestedFilename()).toMatch(
+      await createInboundPage.sendStep.downloadButton.click();
+
+      const [popup, download] = await Promise.all([
+        page.waitForEvent('popup'),
+        page.waitForEvent('download'),
+        createInboundPage.sendStep.getDocuments('Packing List').click(),
+      ]);
+
+      expect(download.suggestedFilename()).toMatch(
         /^Packing List - .*\.xls(x)?$/
       );
+      await popup.close();
     });
   });
 });