test for em test, better date handling, import fixes

macemy · macemy · commit 770fbe0bdddb · 2025-01-03T17:43:06.000+05:30
diff --git a/features/rope-record/rope-details/update/em-test.feature b/features/rope-record/rope-details/update/em-test.feature
@@ -0,0 +1,13 @@
+@Hoist @Rope-Record
+Feature: Rope Records
+
+  Background: Login
+    Given I navigate to the Rope record page
+    And I navigate to the Rope Detail Page for an In Service rope
+
+  Scenario: User adds a new EM test record
+    When I provide the following information in the Add EM test record form
+      | EM test date | June 28, 2024 |
+      | Percent loss | 23            |
+    Then I should be able to see the record in the Records table
+
diff --git a/src/fixtures/sample.pdf b/src/fixtures/sample.pdf
diff --git a/src/pages/CreateRopeRecord.ts b/src/pages/CreateRopeRecord.ts
@@ -1,6 +1,6 @@
 import { expect, Page } from '@playwright/test';
 
-import { FormFieldMetadata, FormHelper } from '../support/FormHelper';
+import { FormFieldMetadata, FormHelper } from '@/support/FormHelper';
 
 export class CreateRopeRecord {
   private readonly page: Page;
@@ -37,6 +37,8 @@ export class CreateRopeRecord {
     { name: 'The trade name of the', type: 'input' },
     { name: 'Request by days', type: 'input' },
     { name: 'Request by date', type: 'date' },
+    { name: 'EM test date', type: 'date' },
+    { name: 'Percent loss', type: 'input' },
   ];
 
   // Dynamic field value setter
diff --git a/src/pages/EmailVerification.ts b/src/pages/EmailVerification.ts
@@ -1,12 +1,6 @@
-import { Download, expect, Page } from '@playwright/test';
+import { Download, expect } from '@playwright/test';
 
 export class EmailVerification {
-  private readonly page: Page;
-
-  constructor(page: Page) {
-    this.page = page;
-  }
-
   verifyEmail(download: Download, expectedFilePattern: RegExp): boolean {
     const filename = download.suggestedFilename();
     expect(filename).toMatch(expectedFilePattern);
diff --git a/src/steps/action-items/update-action-item.steps.ts b/src/steps/action-items/update-action-item.steps.ts
@@ -1,8 +1,8 @@
 import { DataTable, Given, Then } from '@cucumber/cucumber';
 import { expect } from 'playwright/test';
 
-import { ActionItems } from '../../pages/ActionItems';
-import { IHoistWorld } from '../../support/hoist-world';
+import { ActionItems } from '@/pages/ActionItems';
+import { IHoistWorld } from '@/support/hoist-world';
 
 Then('I can see Hoist and shaft action items text', async function (this: IHoistWorld) {
   const page = this.page!;
diff --git a/src/steps/login.steps.ts b/src/steps/login.steps.ts
@@ -1,8 +1,8 @@
 import { Given, Then, When } from '@cucumber/cucumber';
 import { Browser, chromium, Page } from '@playwright/test';
 
-import { LoginPage } from '../pages/LoginPage';
-import { IHoistWorld } from '../support/hoist-world';
+import { LoginPage } from '@/pages/LoginPage';
+import { IHoistWorld } from '@/support/hoist-world';
 
 let browser: Browser;
 let page: Page;
diff --git a/src/steps/nagivation.steps.ts b/src/steps/nagivation.steps.ts
@@ -2,8 +2,9 @@ import { Given } from '@cucumber/cucumber';
 import { Page } from '@playwright/test';
 import { expect } from 'playwright/test';
 
+import { HoistWorld, IHoistWorld } from '@/support/hoist-world';
+
 import { SCREENSHOT_DIR } from '../../constants';
-import { HoistWorld, IHoistWorld } from '../support/hoist-world';
 
 async function filterRopesByStatus(page: Page, status?: string) {
   const statusHeader = page.locator('.ag-cell-label-container').filter({ hasText: 'Status' });
diff --git a/src/steps/rope-record/add-new-rope/add-new-rope.steps.ts b/src/steps/rope-record/add-new-rope/add-new-rope.steps.ts
@@ -1,9 +1,10 @@
 import { DataTable, Given, When } from '@cucumber/cucumber';
 
+import { CreateRopeRecord } from '@/pages/CreateRopeRecord';
+import { HoistWorld, IHoistWorld } from '@/support/hoist-world';
+import { UniqueIdentifierGenerator } from '@/support/UniqueIdentifierGenerator';
+
 import { SCREENSHOT_DIR } from '../../../../constants';
-import { CreateRopeRecord } from '../../../pages/CreateRopeRecord';
-import { HoistWorld, IHoistWorld } from '../../../support/hoist-world';
-import { UniqueIdentifierGenerator } from '../../../support/UniqueIdentifierGenerator';
 
 Given('I add a new rope', async function (this: IHoistWorld) {
   const createRopeRecord = new CreateRopeRecord(this.page!);
diff --git a/src/steps/rope-record/rope-details/request-extension.steps.ts b/src/steps/rope-record/rope-details/request-extension.steps.ts
@@ -1,9 +1,9 @@
 import { Then, When } from '@cucumber/cucumber';
 import { expect } from '@playwright/test';
 
-import { CreateRopeRecord } from '../../../pages/CreateRopeRecord';
-import { EmailVerification } from '../../../pages/EmailVerification';
-import { IHoistWorld } from '../../../support/hoist-world';
+import { CreateRopeRecord } from '@/pages/CreateRopeRecord';
+import { EmailVerification } from '@/pages/EmailVerification';
+import { IHoistWorld } from '@/support/hoist-world';
 
 Then(
   'I should be able to see the request in Extension history section',
@@ -22,7 +22,7 @@ Then(
     await page.getByRole('button', { name: 'Confirm' }).click();
     const emailDownload = await downloadPromise;
 
-    const emailPage = new EmailVerification(this.page!);
+    const emailPage = new EmailVerification();
     emailPage.verifyEmail(emailDownload, /^Request extension -.+\.eml$/);
 
     // navigate to Rope information tab to verify the extension request
diff --git a/src/steps/rope-record/rope-details/update/em-test.steps.ts b/src/steps/rope-record/rope-details/update/em-test.steps.ts
@@ -0,0 +1,40 @@
+import { DataTable, Then, When } from '@cucumber/cucumber';
+import { expect } from '@playwright/test';
+
+import { CreateRopeRecord } from '@/pages/CreateRopeRecord';
+import { IHoistWorld } from '@/support/hoist-world';
+
+When(
+  'I provide the following information in the Add EM test record form',
+  async function (this: IHoistWorld, emTestRecordInfo: DataTable) {
+    await this.page?.getByTestId('Add record').click();
+    const ropeRecord = new CreateRopeRecord(this.page!);
+    const emTestRecord = emTestRecordInfo.rowsHash();
+    for (const [fieldName, value] of Object.entries(emTestRecord)) {
+      await ropeRecord.setFieldValue(fieldName, value, ropeRecord.ropeMetadata);
+    }
+
+    // attach sample.pdf as the file
+    await this.page
+      ?.locator('input[data-testid="openAttachmentUpload"]')
+      .setInputFiles('src/fixtures/sample.pdf');
+  },
+);
+
+Then('I should be able to see the record in the Records table', async function (this: IHoistWorld) {
+  const page = this.page!;
+
+  // save the EM test date input
+  const savedPercentLoss = await page
+    .getByRole('textbox', { name: 'Percent loss', exact: true })
+    .inputValue();
+
+  // save the form
+  await page.getByRole('button', { name: 'Save', exact: true }).click();
+
+  // wait for success notification
+  await expect(page.getByText('EM test record added')).toBeVisible();
+
+  // verify saved percent loss
+  await expect(page.getByRole('main')).toContainText(`${savedPercentLoss}%`);
+});
diff --git a/src/steps/rope-record/rope-details/update/update-breaking-load-info.steps.ts b/src/steps/rope-record/rope-details/update/update-breaking-load-info.steps.ts
@@ -1,7 +1,7 @@
 import { DataTable, Then, When } from '@cucumber/cucumber';
 
-import { CreateRopeRecord } from '../../../../pages/CreateRopeRecord';
-import { IHoistWorld } from '../../../../support/hoist-world';
+import { CreateRopeRecord } from '@/pages/CreateRopeRecord';
+import { IHoistWorld } from '@/support/hoist-world';
 
 When(
   'I provide the following information in the Breaking load form',
diff --git a/src/steps/rope-record/rope-details/view/view-installed-rope-detail.steps.ts b/src/steps/rope-record/rope-details/view/view-installed-rope-detail.steps.ts
@@ -1,7 +1,7 @@
 import { DataTable, Given, Then } from '@cucumber/cucumber';
 import { expect } from 'playwright/test';
 
-import { IHoistWorld } from '../../../../support/hoist-world';
+import { IHoistWorld } from '@/support/hoist-world';
 
 Then(
   'the following sections should be visible:',
diff --git a/src/support/FormHelper.ts b/src/support/FormHelper.ts
@@ -88,67 +88,42 @@ export class FormHelper {
     await page.getByRole('button', { name: /^\d{4}$/ }).click();
 
     // then select the target year
-    await page
-      .locator('div')
-      .filter({ hasText: new RegExp(`^${targetYear}$`) })
-      .click();
-
-    // get current month and year
-    const getCurrentHeader = async () => {
-      const headerLocator = page.locator('div').filter({
-        hasText: new RegExp(`^${targetMonth} ${targetYear}SuMoTuWeThFrSa$`),
-      });
-      const exists = (await headerLocator.count()) > 0;
-      if (!exists) return null;
-      const header = await headerLocator.textContent();
-      return header?.split(' ')[0] ?? null;
-    };
+    await page.getByRole('button', { name: targetYear }).click();
 
-    let currentMonth = await getCurrentHeader();
-
-    // navigate until we reach target month
+    // we'll be on January. navigate forward until we reach target month
+    let currentMonth = await page
+      .locator('div')
+      .filter({ hasText: /^[A-Za-z]+ \d{4}SuMoTuWeThFrSa$/ })
+      .textContent()
+      .then(text => text?.split(' ')[0] ?? null);
     while (currentMonth !== targetMonth) {
-      if (!currentMonth) {
-        // move forward until header (selected month) matches target month
-        await page
-          .locator('div')
-          .filter({
-            hasText: /^[A-Za-z]+ \d{4}SuMoTuWeThFrSa$/,
-          })
-          .getByRole('button')
-          .nth(1)
-          .click();
-      } else {
-        const currentDate = new Date(`${currentMonth} 1 ${targetYear}`);
-        const targetDate = new Date(`${targetMonth} 1 ${targetYear}`);
-
-        if (currentDate < targetDate) {
-          await page
-            .locator('div')
-            .filter({
-              hasText: new RegExp(`^${currentMonth} ${targetYear}SuMoTuWeThFrSa$`),
-            })
-            .getByRole('button')
-            .nth(1)
-            .click();
-        } else {
-          await page
-            .locator('div')
-            .filter({
-              hasText: new RegExp(`^${currentMonth} ${targetYear}SuMoTuWeThFrSa$`),
-            })
-            .getByRole('button')
-            .first()
-            .click();
-        }
-      }
+      await page
+        .locator('div')
+        .filter({ hasText: new RegExp(`^${currentMonth} ${targetYear}SuMoTuWeThFrSa$`) })
+        .getByRole('button')
+        .nth(1)
+        .click();
 
       await page.waitForTimeout(100);
-      currentMonth = await getCurrentHeader();
+      currentMonth = await page
+        .locator('div')
+        .filter({ hasText: /^[A-Za-z]+ \d{4}SuMoTuWeThFrSa$/ })
+        .textContent()
+        .then(text => text?.split(' ')[0] ?? null);
     }
 
-    // select the date
-    await page.getByRole('button', { name: targetDay, exact: true }).click();
+    // select the visible date
+    const visibleDateButtons = page.locator('button', { hasText: targetDay });
+    const currentMonthDateIndex = await visibleDateButtons.evaluateAll(
+      (elements, target) => {
+        return elements.findIndex(
+          button => button.textContent === target.day && button.tabIndex === 0,
+        );
+      },
+      { day: targetDay },
+    );
+
+    await visibleDateButtons.nth(currentMonthDateIndex).click();
   }
 
   public getFieldMetadata(
diff --git a/src/support/hoist-world.ts b/src/support/hoist-world.ts
@@ -9,8 +9,8 @@ import {
   PlaywrightTestOptions,
 } from '@playwright/test';
 
-import { EnvironmentConfig, environments } from '../config/hoist-environments';
-import { CreateRopeRecord } from '../pages/CreateRopeRecord';
+import { EnvironmentConfig, environments } from '@/config/hoist-environments';
+import { CreateRopeRecord } from '@/pages/CreateRopeRecord';
 
 export interface IHoistWorld extends World {
   debug: boolean;
diff --git a/tsconfig.json b/tsconfig.json
@@ -38,7 +38,9 @@
     /* Module Resolution Options */
     "moduleResolution": "bundler" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
     // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
-    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    "paths": {
+      "@/*": ["./src/*"]
+    },                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
     // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
     // "typeRoots": [],                       /* List of folders to include type definitions from. */
     // "types": [],                           /* Type declaration files to be included in compilation. */
