#225: Add nav item page object, update isOk() in pagePOs to also chec…

…k active nav item matches

.github/workflows/playwright.yml

@@ -20,7 +20,7 @@ jobs:
         run: npm run build -- --env=test
       - name: Prepare tmp test files
         run: npx gulp tmpTestFiles
-      - name: Run Playwright test
+      - name: Run Playwright tests
         uses: GabrielBB/xvfb-action@v1
         with:
           run: npx playwright test

playwright.config.ts

@@ -27,7 +27,7 @@ const config: PlaywrightTestConfig = {
   /* Retry on CI only */
   retries: process.env.CI ? 2 : 0,
   /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 1 : undefined,
+  workers: process.env.CI ? 1 : 5,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: "html",
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */

playwright/mocks/expected-details-by-page.ts

@@ -0,0 +1,45 @@
+export interface PageDetails {
+  route: string;
+  title: string;
+  iconAlt: string;
+  iconImgName: string;
+}
+
+export const EXPECTED_DETAILS_BY_PAGE: Record<string, PageDetails> = {
+  ANALYSIS: {
+    route: '/analysis',
+    title: '',
+    iconAlt: 'Analysis',
+    iconImgName: 'measure_icon.png'
+  },
+  DESIGN_ALTERNATIVES: {
+    route: '/design_alternatives',
+    title: 'Design Alternatives',
+    iconAlt: 'Design Alternatives',
+    iconImgName: 'design_alts_icon.png'
+  },
+  OUTPUTS: {
+    route: '/outputs',
+    title: 'Outputs',
+    iconAlt: 'Outputs',
+    iconImgName: 'outputs_icon.png'
+  },
+  RUN: {
+    route: '/run',
+    title: 'Run',
+    iconAlt: 'Run',
+    iconImgName: 'run_icon.png'
+  },
+  REPORTS: {
+    route: '/reports',
+    title: 'Reports',
+    iconImgName: 'Reports',
+    iconAlt: 'reports_icon.png'
+  },
+  SERVER: {
+    route: '/server',
+    title: 'Server',
+    iconAlt: 'Server',
+    iconImgName: 'server_icon.png'
+  }
+};

playwright/mocks/index.ts

@@ -1,2 +1,3 @@
+export * from './expected-details-by-page';
 export * from './ipc-main-handle.mocks';
 export * from './projects.mocks';

playwright/page-objects/index.ts

@@ -2,3 +2,4 @@ export * from './base.po';
 export * from './modals';
 export * from './pages';
 export * from './toasts';
+export * from './nav.po';

playwright/page-objects/modals/new-project-modal.po.ts

@@ -15,6 +15,6 @@ export class NewProjectModalPageObject extends ModalPageObject {
   async isOk() {
     await this.isTitleOk();
     await this.areButtonsOk();
-    expect(this.nameInput).toBeVisible();
+    await expect(this.nameInput).toBeVisible();
   }
 }

playwright/page-objects/nav.po.ts

@@ -0,0 +1,44 @@
+import { expect, Locator } from '@playwright/test';
+import { PageDetails } from '../mocks';
+import { BasePageObject } from './base.po';
+
+export class NavPageObject extends BasePageObject {
+  get list(): Locator {
+    return this.page.locator('ul.nav');
+  }
+
+  get items(): Locator {
+    return this.list.locator('li');
+  }
+
+  get activeItem(): Locator {
+    return this.list.locator('li.active');
+  }
+
+  async getRouteFor(item: Locator) {
+    const href = (await item.locator('a').getAttribute('href')) ?? '';
+    return href.startsWith('#') ? href.slice(1) : href;
+  }
+
+  async getIconAltFor(item: Locator) {
+    const img = item.locator('a img');
+    return (await img.getAttribute('alt')) ?? '';
+  }
+
+  async getIconImgNameFor(item: Locator) {
+    const img = item.locator('a img');
+    const iconImgSrc = (await img.getAttribute('src')) ?? '';
+    return iconImgSrc.slice(iconImgSrc.lastIndexOf('/') + 1);
+  }
+
+  async isItemOk(
+    item: Locator,
+    expectedPageDetails: Omit<PageDetails, 'title'>
+  ) {
+    expect(await this.getRouteFor(item)).toBe(expectedPageDetails.route);
+    expect(await this.getIconAltFor(item)).toBe(expectedPageDetails.iconAlt);
+    expect(await this.getIconImgNameFor(item)).toBe(
+      expectedPageDetails.iconImgName
+    );
+  }
+}

playwright/page-objects/pages/analysis.po.ts

@@ -1,11 +1,14 @@
+import { EXPECTED_DETAILS_BY_PAGE } from '../../mocks';
 import { PagePageObject } from './page.po';
 
 export class AnalysisPageObject extends PagePageObject {
-  EXPECTED_ROUTE = '/analysis';
-  EXPECTED_TITLE = '';
+  EXPECTED_PAGE_DETAILS = EXPECTED_DETAILS_BY_PAGE.ANALYSIS;
 
   constructor(expectedTitle: string) {
     super();
-    this.EXPECTED_TITLE = expectedTitle;
+    this.EXPECTED_PAGE_DETAILS = {
+      ...EXPECTED_DETAILS_BY_PAGE.ANALYSIS,
+      title: expectedTitle
+    };
   }
 }

playwright/page-objects/pages/page.po.ts

@@ -1,9 +1,10 @@
 import { expect, Locator } from '@playwright/test';
+import { PageDetails } from '../../mocks';
 import { BasePageObject } from '../base.po';
+import { NavPageObject } from '../nav.po';
 
 export class PagePageObject extends BasePageObject {
-  readonly EXPECTED_ROUTE: string;
-  readonly EXPECTED_TITLE: string;
+  readonly EXPECTED_PAGE_DETAILS: PageDetails;
 
   get route(): string {
     const PRE_ROUTE_STR = 'index.html#';
@@ -18,15 +19,21 @@ export class PagePageObject extends BasePageObject {
   }
 
   isRouteOk() {
-    expect(this.route).toBe(this.EXPECTED_ROUTE);
+    expect(this.route).toBe(this.EXPECTED_PAGE_DETAILS.route);
   }
 
   async isTitleOk() {
-    await expect(this.title).toHaveText(this.EXPECTED_TITLE);
+    await expect(this.title).toHaveText(this.EXPECTED_PAGE_DETAILS.title);
+  }
+
+  async isNavOk() {
+    const navPO = new NavPageObject();
+    await navPO.isItemOk(navPO.activeItem, this.EXPECTED_PAGE_DETAILS);
   }
 
   async isOk() {
     this.isRouteOk();
     await this.isTitleOk();
+    await this.isNavOk();
   }
 }