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"]
+}

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"]
+}

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"]
+}

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"]
+}

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"]
+}

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"]
+}

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"]
+}

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"]
+}