refactor: integrate playwright and web workers support

.eslintignore

@@ -0,0 +1 @@
+**/*.worker.ts

.gitignore

@@ -2,10 +2,14 @@
 
 # compiled output
 /dist
+/build
 /tmp
 /out-tsc
 /app-builds
 /release
+/e2e/tracing
+/e2e/screenshots
+/test-results
 api.js
 epg-worker.js
 main.js

angular.json

@@ -19,7 +19,7 @@
         "build": {
           "builder": "@angular-builders/custom-webpack:browser",
           "options": {
-            "outputPath": "dist",
+            "outputPath": "build",
             "index": "src/index.html",
             "main": "src/main.ts",
             "tsConfig": "src/tsconfig.app.json",
@@ -38,7 +38,8 @@
               "replaceDuplicatePlugins": true
             },
             "serviceWorker": true,
-            "ngswConfigPath": "ngsw-config.json"
+            "ngswConfigPath": "ngsw-config.json",
+            "webWorkerTsConfig": "tsconfig.worker.json"
           },
           "configurations": {
             "dev": {
@@ -131,7 +132,8 @@
             "customWebpackConfig": {
               "path": "./angular.webpack.js",
               "replaceDuplicatePlugins": true
-            }
+            },
+            "webWorkerTsConfig": "tsconfig.worker.json"
           }
         },
         "lint": {

e2e/basic.test.ts

@@ -0,0 +1,58 @@
+import { expect, test } from '@playwright/test';
+import {
+    BrowserContext,
+    ElectronApplication,
+    Page,
+    _electron as electron,
+} from 'playwright';
+const PATH = require('path');
+
+test.describe('Check Home Page', async () => {
+    let app: ElectronApplication;
+    let firstWindow: Page;
+    let context: BrowserContext;
+
+    test.beforeAll(async () => {
+        app = await electron.launch({
+            args: [
+                PATH.join(__dirname, '../electron/main.js'),
+                PATH.join(__dirname, '../electron/package.json'),
+            ],
+        });
+        context = app.context();
+        //await context.tracing.start({ screenshots: true, snapshots: true });
+
+        firstWindow = await app.windows()[0];
+        const isMainWindow = (await firstWindow.title()) === 'IPTVnator';
+        if (!isMainWindow) {
+            firstWindow = await app.windows()[1];
+        }
+        await firstWindow.waitForLoadState('domcontentloaded');
+    });
+
+    test('Launch electron app', async () => {
+        const windowState = await app.evaluate(async (process) => {
+            let mainWindow = process.BrowserWindow.getAllWindows()[0];
+            const isMainWindow = mainWindow.title === 'IPTVnator';
+            if (!isMainWindow) {
+                mainWindow = process.BrowserWindow.getAllWindows()[1];
+            }
+            return {
+                isVisible: mainWindow.isVisible(),
+                isDevToolsOpened: mainWindow.webContents.isDevToolsOpened(),
+                isCrashed: mainWindow.webContents.isCrashed(),
+            };
+        });
+
+        expect(windowState.isVisible).toBeTruthy();
+        expect(windowState.isDevToolsOpened).toBeFalsy();
+        expect(windowState.isCrashed).toBeFalsy();
+        expect(app.windows()).toHaveLength(2);
+    });
+
+    test('Check title', async ({ page }) => {
+        const title = await firstWindow.title();
+        await firstWindow.screenshot({ path: 'e2e/screenshots/intro.png' });
+        expect(title).toBe('IPTVnator');
+    });
+});

e2e/playwright.config.ts

@@ -0,0 +1,8 @@
+import { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+    testDir: '.',
+    maxFailures: 2,
+};
+
+export default config;

jest.config.js

@@ -2,7 +2,7 @@ module.exports = {
     preset: 'jest-preset-angular',
     resetMocks: true,
     setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts'],
-    testMatch: ['**/+(*.)+(spec|test).+(ts)?(x)'],
+    testMatch: ['**/+(*.)+(spec).+(ts)?(x)'],
     coverageReporters: ['html', 'lcov'],
     transformIgnorePatterns: ['node_modules/(?!.*.mjs$|@datorama/akita)'],
 };

package.json

@@ -18,13 +18,14 @@
         "video",
         "tv"
     ],
-    "main": "main.js",
+    "main": "electron/main.js",
     "private": true,
     "scripts": {
         "postinstall": "electron-builder install-app-deps && husky install",
         "ng": "ng",
         "start": "npm-run-all -p electron:serve ng:serve",
         "build": "npm run electron:serve-tsc && ng build --base-href ./",
+        "build:electron": "npm run electron:serve-tsc",
         "build:dev": "npm run build -- -c dev",
         "build:prod": "npm run build -- -c production",
         "ng:build": "ng build -c production",
@@ -39,8 +40,8 @@
         "electron:build:windows": "npm run build:prod && electron-builder build -w",
         "test": "jest",
         "test:watch": "jest --watch",
-        "e2e": "npm run build:prod && cross-env TS_NODE_PROJECT='e2e/tsconfig.e2e.json' mocha e2e/**/*.ts --config ./.mocharc.json --exit",
-        "e2e:watch": "npm run e2e -- --watch",
+        "e2e": "npm run build:electron && npx playwright test -c e2e/playwright.config.ts e2e/",
+        "e2e:debug": "npm run build:electron && PWDEBUG=1 npx playwright test -c e2e/playwright.config.ts e2e/",
         "version": "conventional-changelog -i CHANGELOG.md -p angular -s -r 0 && git add CHANGELOG.md",
         "lint": "ng lint",
         "build-pwa": "ng build -c production --base-href /iptvnator --deploy-url /iptvnator/"
@@ -102,6 +103,7 @@
         "@commitlint/config-conventional": "16.0.0",
         "@ngx-translate/core": "13.0.0",
         "@ngx-translate/http-loader": "6.0.0",
+        "@playwright/test": "1.21.1",
         "@semantic-release/changelog": "6.0.1",
         "@semantic-release/git": "10.0.1",
         "@semantic-release/npm": "9.0.0",
@@ -128,6 +130,8 @@
         "ng-mocks": "12.5.1",
         "node-polyfill-webpack-plugin": "1.1.4",
         "npm-run-all": "4.1.5",
+        "playwright": "1.21.1",
+        "playwright-core": "1.21.1",
         "prettier": "2.5.1",
         "semantic-release": "19.0.2",
         "stylelint": "14.2.0",
@@ -136,7 +140,8 @@
         "ts-node": "8.10.2",
         "tslib": "2.3.0",
         "typescript": "4.4.4",
-        "wait-on": "6.0.0"
+        "wait-on": "6.0.0",
+        "xvfb-maybe": "0.2.1"
     },
     "engines": {
         "node": ">=14.0.0"

src/tsconfig.app.json

@@ -4,10 +4,10 @@
         "outDir": "../out-tsc/app",
         "module": "es2020",
         "baseUrl": "",
-        "types": []
+        "types": ["node"]
     },
     "include": ["**/*.ts"],
-    "exclude": ["**/*.spec.ts", "**/*.stub.ts"],
+    "exclude": ["**/*.spec.ts", "**/*.stub.ts", "**/*.worker.ts"],
     "angularCompilerOptions": {
         "fullTemplateTypeCheck": true,
         "strictInjectionParameters": true,

tsconfig.json

@@ -12,7 +12,8 @@
         "typeRoots": ["node_modules/@types"],
         "lib": ["es2017", "es2016", "es2015", "dom"],
         "resolveJsonModule": true,
-        "strict": false
+        "strict": false,
+        "skipLibCheck": true
     },
     "files": ["src/main.ts", "src/polyfills.ts"],
     "include": ["src/**/*.d.ts"],

tsconfig.worker.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "./out-tsc/worker",
+        "lib": ["es2018", "webworker", "dom"],
+        "types": []
+    },
+    "include": ["src/**/*.worker.ts"]
+}