OBPIH-8025 Fix receiving workflow tests (#105)

* OBPIH-8025 unskip assert bin location field test

* OBPIH-8025 Unskip assert creation of goods receipt note

* OBPIH-8025 Unskip assert creation of receiving bin

* OBPIH-8025 Unskip assert quantity inputs

* OBPIH-8025 Unskip cancel remaining quantity

* OBPIH-8025 Unskip edit bin location when receive

* OBPIH-8025 Unskip edit original line quantity to 0

* OBPIH-8025 Unskip edit in receiving

* OBPIH-8025 Unskip lot and expiry system update on receiving

* OBPIH-8025 Unskip receive to hold bin

* OBPIH-8025 Unskip sort by alphabetical order and remain inputs

* OBPIH-8025 Unskip validations on edit and receive

* OBPIH-8025 Fix failing tests

* OBPIH-8025 Fix failing tests

* OBPIH-8025 Fix for tooltip wrapper

* OBPIH-8025 Usage new data-testid and remove force clicks

* OBPIH-8025 Unskip assert recipient field

* OBPIH-8025 Unskip validations on deliver on date

* OBPIH-8025 Fix pdf warnings

Author: alannadolny

src/components/DatePicker.ts

@@ -1,6 +1,15 @@
+import { expect } from '@playwright/test';
+
 import FormField from '@/components/FormField';
 import { formatDate } from '@/utils/DateUtils';
 
+const ordinal = (day: number) => {
+  if (day % 100 >= 11 && day % 100 <= 13) {
+    return `${day}th`;
+  }
+  return `${day}${{ 1: 'st', 2: 'nd', 3: 'rd' }[day % 10] ?? 'th'}`;
+};
+
 class DatePicker extends FormField {
   get datePickerPopup() {
     return this.page.locator('.react-datepicker');
@@ -15,6 +24,37 @@ class DatePicker extends FormField {
     await this.page.keyboard.press('Enter');
   }
 
+  /**
+    For date fields that open a calendar instead of taking typed input (the
+    field itself is a button). Picks the day in the calendar, which keeps the
+    time that was selected before.
+  */
+  async selectDate(date: Date) {
+    await this.field.getByRole('button').first().click();
+    await expect(this.page.getByRole('option').first()).toBeVisible();
+    // e.g. "Choose Saturday, October 10th, 2026"
+    const day = this.page.getByRole('option', {
+      name: `Choose ${formatDate(date, 'dddd, MMMM')} ${ordinal(
+        date.getDate()
+      )}, ${date.getFullYear()}`,
+    });
+    // the calendar opens on the selected month, so move to the month of the
+    // date when it isn't shown (days of the neighbouring months are listed too)
+    if (!(await day.isVisible())) {
+      const monthButton = date > new Date() ? 'Next Month' : 'Previous Month';
+      await this.page.getByRole('button', { name: monthButton }).click();
+    }
+    await day.click();
+  }
+
+  // fields that don't show the error under them show it in a tooltip on hover
+  async assertErrorTooltip(message: string) {
+    await this.field.hover();
+    await expect(
+      this.page.getByRole('tooltip').getByText(message)
+    ).toBeVisible();
+  }
+
   async fillWithFormat(date: Date, format: string) {
     // TODO: This is temporary solution until we figure out the sluggishness of the date picker
     await this.page.waitForTimeout(1000);

src/components/FormField.ts

@@ -40,7 +40,8 @@ class FormField extends BasePageModel {
   }
 
   async assertHasError() {
-    expect(await this.hasError()).toBeTruthy();
+    // the error can show up a moment after the value is entered, so retry
+    await expect.poll(() => this.hasError()).toBeTruthy();
   }
 
   async assertFieldWithErrorIsVisible(error: string) {

src/components/NewAlertPopup.ts

@@ -3,20 +3,25 @@ import { Page } from '@playwright/test';
 import BasePageModel from '@/pages/BasePageModel';
 
 class NewAlertPopup extends BasePageModel {
-  constructor(page: Page) {
+  private confirmLabel: string;
+  private cancelLabel: string;
+
+  constructor(page: Page, confirmLabel = 'Yes', cancelLabel = 'No') {
     super(page);
+    this.confirmLabel = confirmLabel;
+    this.cancelLabel = cancelLabel;
   }
 
   get tableDialog() {
     return this.page.getByTestId('modal-with-table');
   }
 
-  get yesButton() {
-    return this.tableDialog.getByRole('button', { name: 'Yes' });
+  get confirmButton() {
+    return this.tableDialog.getByRole('button', { name: this.confirmLabel });
   }
 
-  get noButton() {
-    return this.tableDialog.getByRole('button', { name: 'No' });
+  get cancelButton() {
+    return this.tableDialog.getByRole('button', { name: this.cancelLabel });
   }
 }
 

src/pages/receiving/components/CheckTable.ts

@@ -35,9 +35,22 @@ class CheckTable extends BasePageModel {
     return new Row(this.page, this.itemRows.nth(index));
   }
 
+  // the order of the items isn't guaranteed to match the receiving step, so
+  // find the row by its product code instead of its position
+  rowByProductCode(productCode: string) {
+    return new Row(
+      this.page,
+      this.rows.filter({
+        has: this.page
+          .locator('[aria-label="Code"]')
+          .getByText(productCode, { exact: true }),
+      })
+    );
+  }
+
   getColumnHeader(columnName: string) {
     return this.table
-      .locator('.rt-thead')
+      .getByTestId('table-header')
       .getByText(columnName, { exact: true });
   }
 
@@ -62,6 +75,14 @@ class Row extends BasePageModel {
     return this.row.locator('[aria-label="Code"]');
   }
 
+  get status() {
+    return this.row.locator('[aria-label="Status"]');
+  }
+
+  get recipient() {
+    return this.row.locator('[aria-label="Recipient"]');
+  }
+
   get cancelRemainingCheckbox() {
     return this.row
       .locator('[data-column-id="cancelRemaining"]')

src/pages/receiving/components/EditModal.ts

@@ -12,31 +12,23 @@ class EditModal extends BasePageModel {
   }
 
   get modal() {
-    return this.page.locator('.ReactModal__Content');
+    return this.page.getByTestId('receiving-edit-line-item-modal');
   }
 
   async isLoaded() {
     await expect(this.modal).toBeVisible();
   }
 
   get saveButton() {
-    return this.modal.getByRole('button', { name: 'Save' });
+    return this.modal.getByRole('button', { name: 'Save', exact: true });
   }
 
   get cancelButton() {
     return this.modal.getByRole('button', { name: 'Cancel' });
   }
 
   get addLineButton() {
-    return this.modal.getByRole('button', { name: 'Add line' });
-  }
-
-  get informationAboutEditedQtyNotMatchingShippedQty() {
-    return this.modal
-      .locator('.font-weight-bold font-red-ob')
-      .getByText(
-        'The total edited quantity does not match the original quantity shipped.'
-      );
+    return this.modal.getByTestId('add-new-record');
   }
 }
 

src/pages/receiving/components/EditModalTable.ts

@@ -10,45 +10,60 @@ class EditModalTable extends BasePageModel {
   }
 
   get table() {
-    return this.page.locator('#modalForm');
+    return this.page.getByTestId('edit-modal-receiving-table');
   }
 
   get rows() {
     return this.table.getByRole('row');
   }
 
+  // rows are 1-indexed by convention (row 1 is the first item), matching the
+  // rest of the receiving page objects. The header row doesn't carry
+  // role="row", so it doesn't occupy index 0 on its own.
   row(index: number) {
-    return new Row(this.page, this.rows.nth(index));
+    return new Row(this.page, this.rows.nth(index - 1));
   }
 }
 
 class Row extends BasePageModel {
   row: Locator;
   lotNumberField: TextField;
   expiryDatePickerField: DatePicker;
-  quantityShippedField: TextField;
+  receivingNowField: TextField;
 
   constructor(page: Page, row: Locator) {
     super(page);
     this.row = row;
-    this.lotNumberField = new TextField(page, 'Lot', row);
-    this.expiryDatePickerField = new DatePicker(page, 'Expiry', row);
-    this.quantityShippedField = new TextField(page, 'Quantity shipped', row);
+    this.lotNumberField = new TextField(page, 'Lot/SN', row);
+    this.expiryDatePickerField = new DatePicker(page, 'Exp Date', row);
+    this.receivingNowField = new TextField(page, 'Receiving now', row);
+  }
+
+  get binLocationSelect() {
+    return this.row.locator('[aria-label="Location"]');
+  }
+
+  get clearBinLocationButton() {
+    return this.binLocationSelect.getByTestId('custom-select-clear');
+  }
+
+  get productSelect() {
+    return this.row.locator('[aria-label="Product"]');
   }
 
   get clearProductSelect() {
-    return this.row.locator('.react-select__clear-indicator');
+    return this.productSelect.getByTestId('custom-select-clear');
   }
 
   async getProductSelect(name: string) {
-    await this.row
+    await this.productSelect
       .getByTestId('custom-select-element')
       .getByRole('textbox')
       .fill(name);
     await this.page
       .getByTestId('custom-select-dropdown-menu')
-      .locator('.react-select__option')
-      .nth(0)
+      .getByText(name)
+      .first()
       .click();
   }
 }

src/pages/receiving/components/ReceivingTable.ts

@@ -23,15 +23,53 @@ class ReceivingTable extends BasePageModel {
     return new Row(this.page, this.rows.nth(index - 1));
   }
 
+  // the order of the items depends on the sorting, so find the row by its
+  // product code instead of its position
+  rowByProductCode(productCode: string) {
+    return new Row(
+      this.page,
+      this.rows.filter({
+        has: this.page
+          .locator('[aria-label="Code"]')
+          .getByText(productCode, { exact: true }),
+      })
+    );
+  }
+
   getColumnHeader(columnName: string) {
     return this.table
-      .locator('.rt-thead')
+      .getByTestId('table-header')
       .getByText(columnName, { exact: true });
   }
 
   getCellValue(row: number, column: string) {
     return this.rows.nth(row - 1).locator(`[aria-label="${column}"]`);
   }
+
+  // "Autofill" select in the Location column header (visible only when the
+  // "Show Putaway" switch is on)
+  get locationAutofillSelect() {
+    return this.table.getByTestId('location-autofill');
+  }
+
+  // shown when the autofill would overwrite a location the user has changed
+  get autofillLocationConfirmDialog() {
+    return this.page.getByTestId('confirm-modal');
+  }
+
+  get acceptAutofillLocationConfirmDialog() {
+    return this.autofillLocationConfirmDialog.getByRole('button', {
+      name: 'Yes',
+    });
+  }
+
+  async autofillLocation(option: string) {
+    await this.locationAutofillSelect.click();
+    await this.page
+      .getByTestId('custom-select-dropdown-menu')
+      .getByText(option, { exact: true })
+      .click();
+  }
 }
 
 class Row extends BasePageModel {
@@ -52,9 +90,42 @@ class Row extends BasePageModel {
     return this.row.getByRole('button', { name: 'Comment' });
   }
 
+  // visible only when the "Show Putaway" switch is on
+  get binLocationSelect() {
+    return this.row.locator('[aria-label="Location"]');
+  }
+
+  // the selected value only, without the screen reader text react-select
+  // renders next to it while focused
+  get selectedBinLocation() {
+    return this.binLocationSelect.getByTestId('custom-select-value');
+  }
+
+  get clearBinLocationButton() {
+    return this.binLocationSelect.getByTestId('custom-select-clear');
+  }
+
+  getBinLocation(binLocation: string) {
+    return this.page
+      .getByTestId('custom-select-dropdown-menu')
+      .getByText(binLocation, { exact: true });
+  }
+
+  async selectBinLocation(binLocation: string) {
+    await this.binLocationSelect.click();
+    await this.page.keyboard.type(binLocation);
+    await this.getBinLocation(binLocation).click();
+  }
+
   getItem(name: string) {
     return this.row.locator('[aria-label="Product"]').getByText(name);
   }
+
+  // shown only when at least one item has a recipient, and read-only (it can
+  // only be changed in the edit modal)
+  get recipient() {
+    return this.row.locator('[aria-label="Recipient"]');
+  }
 }
 
 export default ReceivingTable;

src/pages/receiving/steps/CheckStep.ts

@@ -21,49 +21,38 @@ class CheckStep extends BasePageModel {
     });
   }
 
+  // the buttons are shown both above the table and at the bottom of the page,
+  // so use the ones at the bottom
+  get wizardButtons() {
+    return this.page.getByTestId('wizard-page-buttons');
+  }
+
   get receiveShipmentButton() {
-    return this.page
-      .locator('.submit-buttons')
-      .getByRole('button', { name: 'Complete Receipt' });
+    return this.wizardButtons.getByRole('button', { name: 'Complete Receipt' });
   }
 
   get shimpentInformation() {
     return this.page.getByTestId('confirm-receipt-details');
   }
 
   get originField() {
-    return this.shimpentInformation
-      .locator('.item-details__field')
-      .filter({ hasText: 'Origin:' })
-      .locator('.item-details__value');
+    return this.shimpentInformation.getByTestId('confirm-receipt-origin');
   }
 
   get destinationField() {
-    return this.shimpentInformation
-      .locator('.item-details__field')
-      .filter({ hasText: 'Destination:' })
-      .locator('.item-details__value');
+    return this.shimpentInformation.getByTestId('confirm-receipt-destination');
   }
 
   get shippedOnField() {
-    return this.shimpentInformation
-      .locator('.item-details__field')
-      .filter({ hasText: 'Shipped on:' })
-      .locator('.item-details__value');
+    return this.shimpentInformation.getByTestId('confirm-receipt-shipped-on');
   }
 
   get cancelAllRemainingButton() {
     return this.page.getByRole('button', { name: 'Cancel All Remaining' });
   }
 
-  get validationOnDeliveredOnPastDatePopup() {
-    return this.page
-      .locator('.s-alert-box-inner')
-      .getByText('Must occur on or after Actual Shipping Date');
-  }
-
   get backToEditButton() {
-    return this.page.getByRole('button', { name: 'Back to edit' });
+    return this.wizardButtons.getByRole('button', { name: 'Back to Receive' });
   }
 }