Greg tweaks

Author: Greg Solomon

client-app/.yarn/releases/yarn-1.22.19.cjs

@@ -8,9 +8,9 @@ export class TodoPage extends HoistPage {
         await doAuthZeroLogin(this.page, 'todo');
     }
 
-    override async init() {
-        await super.init();
-        await this.click('reset-button');
+    override async initAsync() {
+        await super.initAsync();
+        await this.clickAsync('reset-button');
     }
 
     get grid(): GridHelper {
@@ -21,7 +21,7 @@ export class TodoPage extends HoistPage {
 export const test = baseTest.extend<{todo: TodoPage}>({
     todo: async ({page, baseURL}, use) => {
         const todoPage = new TodoPage({page, baseURL});
-        await todoPage.init();
+        await todoPage.initAsync();
         await use(todoPage);
     }
 });

playwright/fixtures/todo.ts

@@ -28,7 +28,7 @@ export class TBoxPage extends HoistPage {
     }
 
     async getTabHierarchy(): Promise<PlainObject[]> {
-        const routes = await this.getRoutes();
+        const routes = await this.getRoutesAsync();
         return routes[0].children.map(route => {
             return {
                 id: route.name,
@@ -52,7 +52,7 @@ export class TBoxPage extends HoistPage {
 export const test = baseTest.extend<{tb: TBoxPage}>({
     tb: async ({page, baseURL}, use) => {
         const tbPage = new TBoxPage({page, baseURL});
-        await tbPage.init();
+        await tbPage.initAsync();
         await use(tbPage);
     }
 });

playwright/fixtures/toolbox.ts

@@ -3,13 +3,10 @@ import {HoistPage} from './HoistPage';
 import {PlainObject} from '@xh/hoist/core';
 
 export class GridHelper {
-    private readonly hoistPage: HoistPage;
-    private readonly testId: string;
-
-    constructor(hoistPage: HoistPage, testId: string) {
-        this.hoistPage = hoistPage;
-        this.testId = testId;
-    }
+    constructor(
+        private readonly hoistPage: HoistPage,
+        private readonly testId: string
+    ) {}
 
     get page(): Page {
         return this.hoistPage.page;

playwright/hoist/GridHelper.ts

@@ -1,87 +1,113 @@
-import {ConsoleMessage, expect, Page} from '@playwright/test';
+import {ConsoleMessage, expect, Locator, Page, Route} from '@playwright/test';
 import {XHApi} from '@xh/hoist/core/XH';
 import {GridHelper} from './GridHelper';
 import {FilterSelectQuery} from './Types';
+import {isString} from 'lodash';
 
-declare global {
-    interface Window {
-        XH: XHApi;
-    }
+interface HoistPageCfg {
+    baseUrl: string;
+    page: Page;
 }
+type Predicate = TestId | {text: string};
+type TestId = string;
 
 /**
  * Base fixture for testing Hoist applications.
  */
+
 export class HoistPage {
     readonly page: Page;
-    readonly baseURL: string;
+    private readonly baseUrl: string;
 
-    get maskLocator() {
-        return this.page.locator('.xh-mask');
-    }
-
-    constructor({page, baseURL}: {page: Page; baseURL: string}) {
+    constructor({baseUrl, page}: HoistPageCfg) {
+        this.baseUrl = baseUrl;
         this.page = page;
-        this.baseURL = baseURL;
     }
 
-    async init() {
+    // -------------------------------
+    // Lifecycle
+    // -------------------------------
+
+    async initAsync(): Promise<void> {
+        await this.authAsync();
+
         this.page.on('console', msg => {
             if (msg.type() === 'error') this.onConsoleError(msg);
         });
 
-        await this.authAsync();
         await this.waitForAppToBeRunning();
     }
 
-    createGridHelper(testId: string): GridHelper {
-        return new GridHelper(this, testId);
+    onConsoleError(msg: ConsoleMessage): void {
+        throw new Error(msg.text());
+    }
+
+    // -------------------------------
+    // Lookups
+    // -------------------------------
+
+    get(q: Predicate): Locator {
+        return isString(q) ? this.page.getByTestId(q) : this.page.getByText(q.text);
     }
 
-    get(testId: string) {
-        return this.page.getByTestId(testId);
+    async getInputAsync(q: Predicate): Promise<Locator> {
+        const elem = this.get(q),
+            possibleInputs = [
+                elem.locator('input'),
+                elem.getByRole('textbox'),
+                elem.locator('textarea'),
+                this.page.locator('label', {has: elem})
+            ];
+
+        for (let input of possibleInputs) {
+            if (await input.isVisible()) return input;
+        }
+        return elem;
     }
 
-    getByText(text: string) {
-        return this.page.getByText(text);
+    getMask(): Locator {
+        return this.page.locator('.xh-mask');
     }
 
-    async click(testId: string) {
-        await this.get(testId).click();
+    // todo - understand this
+    async getRoutesAsync(): Promise<Route[]> {
+        return this.page.evaluate(() => {
+            window.XH.appModel.getRoutes();
+        });
     }
 
-    async fill(testId: string, value: string) {
-        const elem = this.get(testId);
-        if (await elem.locator('input').isVisible()) return elem.locator('input').fill(value);
-        if (await elem.getByRole('textbox').isVisible())
-            return elem.getByRole('textbox').fill(value);
-        if (await elem.locator('textarea').isVisible()) return elem.locator('textarea').fill(value);
+    // -------------------------------
+    // Actions
+    // -------------------------------
+
+    async clickAsync(q: Predicate): Promise<void> {
+        return this.get(q).click();
+    }
 
-        return elem.fill(value);
+    async fillAsync(q: Predicate, value: string): Promise<void> {
+        const input = await this.getInputAsync(q);
+        return input.fill(value);
     }
 
-    async clear(testId: string) {
-        const elem = this.get(testId);
-        if (await elem.locator('input').isVisible()) return elem.locator('input').clear();
-        if (await elem.locator('textarea').isVisible())
-            return await elem.locator('textarea').clear();
-        if (await elem.locator(testId).getByRole('textbox').isVisible())
-            return elem.getByRole('textbox').clear();
-        await elem.clear();
+    async clearAsync(q: Predicate): Promise<void> {
+        const input = await this.getInputAsync(q);
+        return input.clear();
     }
 
-    async select(testId: string, selectionText: string) {
+    // todo - cleanup
+    async selectAsync(testId: string, selectionText: string): Promise<void> {
         await this.page.getByTestId(testId).locator('svg').click();
         await this.get(`${testId}-menu`).getByText(selectionText).click();
     }
 
-    async filterThenClickSelectOption({
+    // todo - cleanup
+    async filterThenClickSelectOptionAsync({
         testId,
         filterText,
         selectionText,
         asyncOptionUrl
     }: FilterSelectQuery) {
-        await this.fill(testId, filterText);
+        await this.fillAsync(testId, filterText);
         const menu = this.get(`${testId}-menu`);
         if (asyncOptionUrl) this.page.waitForResponse(resp => resp.url().includes(asyncOptionUrl));
         selectionText
@@ -91,48 +117,41 @@ export class HoistPage {
 
     // Checkboxes switches and radio inputs
     // Looks for and toggles the label that has the input that matches the given testId
-    async toggle(testId: string) {
-        await this.page.locator('label', {has: this.page.getByTestId(testId)}).click();
+    async toggleAsync(q: Predicate): Promise<void> {
+        return (await this.getInputAsync(q)).click();
     }
 
-    async check(testId: string) {
-        await this.page.locator('label', {has: this.page.getByTestId(testId)}).check();
+    async checkAsync(q: Predicate): Promise<void> {
+        return (await this.getInputAsync(q)).check();
     }
 
-    async uncheck(testId: string) {
-        await this.page.locator('label', {has: this.page.getByTestId(testId)}).uncheck();
+    async uncheckAsync(q: Predicate): Promise<void> {
+        return (await this.getInputAsync(q)).uncheck();
     }
 
-    onConsoleError(msg: ConsoleMessage) {
-        throw new Error(msg.text());
-    }
-
-    async getRoutes() {
-        return this.page.evaluate(() => {
-            window.XH.appModel.getRoutes();
-        });
-    }
-
-    async toggleTheme() {
+    async toggleThemeAsync(): Promise<void> {
         return this.page.evaluate(() => {
             window.XH.toggleTheme();
         });
     }
 
-    async waitForMaskToClear() {
-        await expect(this.maskLocator).toHaveCount(0, {timeout: 10000});
-    }
+    // -------------------------------
+    // Assertions
+    // -------------------------------
 
-    //Expect
-    async expectText(testId: string, text: string) {
-        await expect(this.get(testId)).toHaveText(text);
+    async expectTextAsync(q: Predicate, text: string): Promise<void> {
+        await expect(this.get(q)).toHaveText(text);
     }
 
-    async expectTextVisible(text: string) {
-        await expect(this.getByText(text)).toBeVisible({timeout: 10000});
+    async expectVisibleAsync(q: Predicate): Promise<void> {
+        await expect(this.get(q)).toBeVisible({timeout: 10000});
     }
 
-    async waitForAppToBeRunning() {
+    // -------------------------------
+    // Utils
+    // -------------------------------
+
+    async waitForAppToBeRunning(): Promise<void> {
         const runHandle = async () => {
             return this.page.evaluate(() => {
                 return window.XH.appIsRunning;
@@ -142,9 +161,32 @@ export class HoistPage {
         await expect.poll(runHandle).toBeTruthy();
     }
 
-    //------------------------
+    async waitForMaskToClear(): Promise<void> {
+        await expect(this.getMask()).toHaveCount(0, {timeout: 10000});
+    }
+
+    // -------------------------------
+    // Helper Factories
+    // -------------------------------
+
+    // todo
+    // createFormHelper(testId: string): FormHelper {
+    //     return new FormHelper(this, testId);
+    // }
+
+    createGridHelper(testId: string): GridHelper {
+        return new GridHelper(this, testId);
+    }
+
+    // -------------------------------
     // Implementation
-    //------------------------
+    // -------------------------------
 
     protected async authAsync() {}
 }
+
+declare global {
+    interface Window {
+        XH: XHApi;
+    }
+}

playwright/hoist/HoistPage.ts

@@ -9,6 +9,10 @@
     "@playwright/test": "^1.36.2",
     "@xh/hoist": "^59.0.1",
     "dotenv": "16.x",
+    "lodash": "4.x",
     "prettier": "3.x"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.199"
   }
 }