DO NOT MERGE - POC/playwright

apps/showcase-playwright/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

apps/showcase-playwright/playwright.config.ts

@@ -0,0 +1,17 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+  // globalSetup: require.resolve('./playwright.global-setup'),
+  outputDir: '../../dist/apps/showcase-playwright',
+
+  use: {
+    headless: true,
+    viewport: { width: 1280, height: 720 },
+    ignoreHTTPSErrors: true,
+    video: 'on-first-retry',
+    screenshot: 'only-on-failure',
+    baseURL: 'http://localhost:4200/',
+  },
+};
+
+export default config;

apps/showcase-playwright/project.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "apps/showcase-playwright/src",
+  "targets": {
+    "e2e": {
+      "executor": "@nx-extend/e2e-runner:run",
+      "options": {
+        "runner": "playwright",
+        "targets": [
+          {
+            "target": "showcase:serve",
+            "checkUrl": "http://localhost:4200/",
+            "checkMaxTries": 50
+          }
+        ]
+      }
+    },
+    "codegen": {
+      "executor": "@nx-extend/playwright:codegen",
+      "options": {}
+    }
+  },
+  "tags": []
+}

apps/showcase-playwright/src/idbhelper.ts

@@ -0,0 +1,208 @@
+import { Page } from 'playwright';
+
+export function isIDBObjectStore(subject: unknown): subject is IDBObjectStore {
+  return typeof subject === 'object' && subject?.constructor?.name === 'IDBObjectStore';
+}
+
+export function isIDBDatabase(subject: unknown): subject is IDBDatabase {
+  return typeof subject === 'object' && subject?.constructor?.name === 'IDBDatabase';
+}
+
+type SetItemOperation = 'create' | 'update' | 'add';
+type ReadDeleteOperation = 'read' | 'delete';
+type StoreOperation = keyof Pick<IDBObjectStore, 'get' | 'put' | 'delete' | 'add'>;
+type ConsolePropObject = {
+  key: IDBValidKey;
+  value?: unknown;
+  error?: Error;
+};
+
+export class Idbhelper {
+  private databaseName?: string;
+  private databaseVersion?: number;
+  private stores: Set<string> = new Set();
+  constructor(private readonly page: Page) {}
+
+  async init(database: string, versionConfiguredByUser?: number): Promise<void> {
+    if (this.databaseName && this.databaseVersion) {
+      throw new Error(
+        `IDB "${this.databaseName}" with ${this.databaseVersion} has already been initialised.`
+      );
+    }
+
+    const { databaseName, databaseVersion } = await this.page.evaluate(
+      async ({ db, version }) => {
+        if (!window.indexedDB) {
+          throw new Error(
+            `You must open the page first by using 'page.goto()' to be able to interact with indexedDb`
+          );
+        }
+        const request: IDBOpenDBRequest =
+          version != null ? window.indexedDB.open(db, version) : window.indexedDB.open(db);
+        const newDbInstance = await new Promise<IDBDatabase>((resolve, reject) => {
+          request.onerror = (e: Event) => {
+            reject(e);
+          };
+          request.onsuccess = (e: Event) => {
+            request.onerror = () => void 0;
+            const newDatabase = (e.target as any).result as IDBDatabase;
+            newDatabase.onversionchange = () => void 0;
+            resolve(newDatabase);
+          };
+        });
+
+        newDbInstance.close();
+
+        return {
+          databaseName: newDbInstance.name,
+          databaseVersion: newDbInstance.version,
+        };
+      },
+      {
+        db: database,
+        version: versionConfiguredByUser,
+      }
+    );
+
+    this.databaseName = databaseName;
+    this.databaseVersion = databaseVersion;
+  }
+
+  async createObjectStore(storeName: string, options?: IDBObjectStoreParameters): Promise<void> {
+    if (!this.databaseName) {
+      throw new Error(`Please call the ".init()" method before creating an object store`);
+    }
+
+    if (this.stores.has(storeName)) {
+      return;
+    }
+
+    await this.page.evaluate(
+      async ({ dbName, store, storeOptions }) => {
+        const request = window.indexedDB.open(dbName);
+
+        const openDbConnection: IDBDatabase = await new Promise<IDBDatabase>((resolve, reject) => {
+          request.onerror = (e: Event) => {
+            reject(e);
+          };
+          request.onsuccess = (e: Event) => {
+            request.onerror = () => void 0;
+            const newDatabase = (e.target as any).result as IDBDatabase;
+            newDatabase.onversionchange = () => void 0;
+
+            resolve(newDatabase);
+          };
+        });
+
+        const isExisting = openDbConnection.objectStoreNames.contains(store);
+        if (isExisting) {
+          return;
+        }
+
+        openDbConnection.close();
+        console.warn('dbversion', openDbConnection.version);
+        const storeDbConnection = await new Promise<IDBDatabase>((resolve, reject) => {
+          const request: IDBOpenDBRequest = window.indexedDB.open(
+            openDbConnection.name,
+            openDbConnection.version + 1
+          );
+          console.warn('newdbversion', openDbConnection.version + 1);
+          request.onerror = (e: Event) => {
+            reject(e);
+          };
+          request.onupgradeneeded = (e: Event) => {
+            console.warn('onupgradeneeded');
+            request.onerror = () => void 0;
+            const db = (e.target as any).result as IDBDatabase;
+            db.onversionchange = () => void 0;
+            resolve(db);
+          };
+        });
+
+        const newStore: IDBObjectStore = storeOptions
+          ? storeDbConnection.createObjectStore(store, storeOptions)
+          : storeDbConnection.createObjectStore(store);
+
+        return newStore;
+      },
+      {
+        dbName: this.databaseName!,
+        store: storeName,
+        storeOptions: options,
+      }
+    );
+
+    this.stores.add(storeName);
+  }
+
+  createItem(store: string, key: IDBValidKey, value: unknown): Promise<void> {
+    return this.setItem('add', store, key, value);
+  }
+
+  addItem(store: string, value: unknown): Promise<void> {
+    return this.setItem('add', store, null, value);
+  }
+
+  updateItem(store: string, key: IDBValidKey, value: unknown): Promise<void> {
+    return this.setItem('update', store, key, value);
+  }
+
+  store(storeName: string) {
+    if (!this.stores.has(storeName)) {
+      throw new Error(
+        `IDBObjectStore with the name of ${storeName} has not been created. Please call createObjectStore first`
+      );
+    }
+    return {
+      createItem: (key: IDBValidKey, value: unknown) => this.createItem(storeName, key, value),
+    };
+  }
+
+  private async setItem(
+    operation: SetItemOperation,
+    storeName: string,
+    key: IDBValidKey | null,
+    value: unknown
+  ): Promise<void> {
+    await this.page.evaluate(
+      async ({ dbName, store, storeKey, storeValue }) => {
+        const request = window.indexedDB.open(dbName);
+
+        const openDbConnection: IDBDatabase = await new Promise<IDBDatabase>((resolve, reject) => {
+          request.onerror = (e: Event) => {
+            reject(e);
+          };
+          request.onsuccess = (e: Event) => {
+            request.onerror = () => void 0;
+            const newDatabase = (e.target as any).result as IDBDatabase;
+            newDatabase.onversionchange = () => void 0;
+
+            resolve(newDatabase);
+          };
+        });
+
+        await new Promise((resolve, reject) => {
+          const request = openDbConnection
+            .transaction(store, 'readwrite')
+            .objectStore(store)
+            .add(storeValue, storeKey!);
+          request.onerror = (e: any) => {
+            openDbConnection.close();
+            reject(e);
+          };
+          request.onsuccess = () => {
+            request.onerror = () => void 0;
+            openDbConnection.close();
+            resolve(void 0);
+          };
+        });
+      },
+      {
+        dbName: this.databaseName!,
+        store: storeName,
+        storeKey: key,
+        storeValue: value,
+      }
+    );
+  }
+}

apps/showcase-playwright/src/route-config.spec.ts

@@ -0,0 +1,112 @@
+import { expect, test } from '@playwright/test';
+import { selectors } from 'playwright';
+
+import type { Page } from 'playwright';
+import { Idbhelper } from './idbhelper';
+
+test.describe('@this-dot/route-config', () => {
+  let page: Page;
+  let playwrightIdb: Idbhelper;
+
+  test.beforeAll(async ({ browser }) => {
+    selectors.setTestIdAttribute('data-test-id');
+    page = await browser.newPage();
+  });
+
+  test.beforeEach(async () => {
+    playwrightIdb = new Idbhelper(page);
+
+    await page.goto('/');
+
+    await playwrightIdb.init('PLAYWRIGHT_DATABASE');
+    await playwrightIdb.createObjectStore('PLAYWRIGHT_STORE');
+  });
+
+  test.describe('documentation section', () => {
+    test.only('the documentation of the library is always visible', async () => {
+      await page.goto('/');
+
+      await playwrightIdb
+        .store('PLAYWRIGHT_STORE')
+        .createItem(`${Math.floor(Math.random() * 1000)}`, 'test');
+
+      await expect(page).toHaveURL('/route-tags/first');
+      const isFirstPageDocumentationSectionVisible = await page
+        .getByTestId('documentation section')
+        .isVisible();
+
+      expect(isFirstPageDocumentationSectionVisible).toBe(true);
+
+      await page.goto('/route-tags/second');
+      await expect(page).toHaveURL('/route-tags/second');
+      const isSecondPageDocumentationSectionVisible = await page
+        .getByTestId('documentation section')
+        .isVisible();
+      expect(isSecondPageDocumentationSectionVisible).toBe(true);
+    });
+  });
+
+  test.describe.serial('title section', () => {
+    test('Displays the default title, when the title parameter is not set in the route config object', async ({
+      page,
+    }) => {
+      await page.goto('/route-tags');
+
+      await expect(page).toHaveURL('/route-tags/first');
+      const heading = await page.locator('h1');
+      const isHeadingVisible = await heading.isVisible();
+      const headingInnerText = await heading.innerText();
+      await expect(isHeadingVisible).toBe(true);
+      await expect(headingInnerText).toMatch('Default Title');
+    });
+
+    test('Displays the custom title, when the title parameter is set in the route config object', async ({
+      page,
+    }) => {
+      await page.goto('/route-tags/second');
+
+      await expect(page).toHaveURL('/route-tags/second');
+      const heading = await page.locator('h1');
+      const isHeadingVisible = await heading.isVisible();
+      const headingInnerText = await heading.innerText();
+      await expect(isHeadingVisible).toBe(true);
+      await expect(headingInnerText).toMatch('Second Route Title');
+    });
+  });
+
+  test.describe.serial('tdRouteTag section', () => {
+    test('Displays elements, when the appropriate route-tag (show) is set in the route config', async ({
+      page,
+    }) => {
+      await page.goto('/route-tags');
+
+      await expect(page).toHaveURL('/route-tags/first');
+
+      const routeTagElseSection = page.getByTestId('route tag else section');
+      await expect(await routeTagElseSection.isVisible()).toBe(false);
+
+      const routeTagSection = page.getByTestId('route tag section');
+      await expect(await routeTagSection.isVisible()).toBe(true);
+      await expect(await routeTagSection.innerText()).toMatch(
+        `This text is only visible, if there is a 'routeTag.SHOW' in the route data`
+      );
+    });
+
+    test(`Does not render elements, when the appropriate route-tag (show) is NOT set in the route config`, async ({
+      page,
+    }) => {
+      await page.goto('/route-tags/second');
+
+      await expect(page).toHaveURL('/route-tags/second');
+
+      const routeTagElseSection = page.getByTestId('route tag else section');
+      await expect(await routeTagElseSection.isVisible()).toBe(true);
+      await expect(await routeTagElseSection.innerText()).toMatch(
+        `There is no show tag in this route's config`
+      );
+
+      const routeTagSection = page.getByTestId('route tag section');
+      await expect(await routeTagSection.isVisible()).toBe(false);
+    });
+  });
+});

apps/showcase-playwright/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "allowJs": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.js"]
+}