feat(tests): update Jest configuration for ESM support and add new test setups for playlist-shared-ui

apps/web/jest.config.ts

@@ -1,21 +1,41 @@
+import { nxPreset } from '@nx/jest/preset';
+import { createEsmPreset } from 'jest-preset-angular/presets';
+
+const angularEsmPreset = createEsmPreset({
+  diagnostics: false,
+  tsconfig: '<rootDir>/tsconfig.spec.json',
+});
+
 export default {
+  ...nxPreset,
+  ...angularEsmPreset,
   displayName: 'web',
-  preset: '../../jest.preset.js',
   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
   coverageDirectory: '../../coverage/apps/web',
-  transform: {
-    '^.+\\.(ts|mjs|js|html)$': [
-      'jest-preset-angular',
-      {
-        tsconfig: '<rootDir>/tsconfig.spec.json',
-        stringifyContentPathRegex: '\\.(html|svg)$',
-      },
-    ],
+  resolver: nxPreset.resolver,
+  moduleFileExtensions: Array.from(
+    new Set([
+      ...(nxPreset.moduleFileExtensions ?? []),
+      ...(angularEsmPreset.moduleFileExtensions ?? []),
+    ])
+  ),
+  testMatch: nxPreset.testMatch,
+  testEnvironmentOptions: {},
+  snapshotSerializers: angularEsmPreset.snapshotSerializers,
+  moduleNameMapper: {
+    ...(angularEsmPreset.moduleNameMapper ?? {}),
+    '^@iptvnator/portal/xtream/feature$':
+      '<rootDir>/src/test-stubs/xtream-feature.stub.ts',
+    tslib: 'tslib/tslib.es6.js',
+    '^iptv-playlist-parser$':
+      '<rootDir>/src/test-stubs/iptv-playlist-parser.mjs',
+    '^rxjs': '<rootDir>/../../node_modules/rxjs/dist/bundles/rxjs.umd.js',
+    '^uuid$': '<rootDir>/../../node_modules/uuid/wrapper.mjs',
   },
-  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
-  snapshotSerializers: [
-    'jest-preset-angular/build/serializers/no-ng-attributes',
-    'jest-preset-angular/build/serializers/ng-snapshot',
-    'jest-preset-angular/build/serializers/html-comment',
+  transform: angularEsmPreset.transform,
+  transformIgnorePatterns: [],
+  extensionsToTreatAsEsm: angularEsmPreset.extensionsToTreatAsEsm,
+  coverageReporters: [
+    ...(nxPreset.coverageReporters ?? []),
   ],
 };

apps/web/project.json

@@ -131,11 +131,19 @@
             "executor": "@nx/eslint:lint"
         },
         "test": {
-            "executor": "@nx/jest:jest",
+            "executor": "nx:run-commands",
             "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
             "options": {
-                "jestConfig": "apps/web/jest.config.ts",
-                "tsConfig": "apps/web/tsconfig.spec.json"
+                "command": [
+                    "node",
+                    "./node_modules/jest/bin/jest.js",
+                    "--config",
+                    "apps/web/jest.config.ts"
+                ],
+                "env": {
+                    "NODE_OPTIONS": "--experimental-vm-modules"
+                },
+                "forwardAllArgs": true
             }
         },
         "serve-static": {

apps/web/src/test-setup.ts

@@ -1,4 +1,24 @@
-import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';
+
+Object.defineProperty(globalThis, 'jest', {
+  configurable: true,
+  value: import.meta.jest,
+});
+
+if (typeof (globalThis as { IDBFactory?: unknown }).IDBFactory === 'undefined') {
+  Object.defineProperty(globalThis, 'IDBFactory', {
+    configurable: true,
+    value: class MockIDBFactory {},
+  });
+}
+
+if (!Element.prototype.animate) {
+  Element.prototype.animate = () =>
+    ({
+      cancel: () => undefined,
+      finished: Promise.resolve(),
+    }) as unknown as Animation;
+}
 
 setupZoneTestEnv({
   errorOnUnknownElements: true,

apps/web/tsconfig.spec.json

@@ -2,10 +2,11 @@
     "extends": "./tsconfig.json",
     "compilerOptions": {
         "outDir": "../../dist/out-tsc",
-        "module": "commonjs",
-        "target": "es2016",
+        "module": "ESNext",
+        "target": "ESNext",
+        "esModuleInterop": true,
         "types": ["jest", "node"],
-        "moduleResolution": "node10"
+        "moduleResolution": "bundler"
     },
     "files": ["src/test-setup.ts", "../../global.d.ts"],
     "include": [
@@ -13,8 +14,14 @@
         "src/**/*.test.ts",
         "src/**/*.spec.ts",
         "src/**/*.d.ts",
-        "../../libs/services/src/lib/epg.service.spec.ts",
-        "../../libs/ui/components/src/lib/confirm-dialog/dialog.service.spec.ts",
-        "../../libs/ui/pipes/src/lib/moment-date.pipe.spec.ts"
+        "../../libs/services/src/**/*.test.ts",
+        "../../libs/services/src/**/*.spec.ts",
+        "../../libs/services/src/**/*.d.ts",
+        "../../libs/ui/components/src/**/*.test.ts",
+        "../../libs/ui/components/src/**/*.spec.ts",
+        "../../libs/ui/components/src/**/*.d.ts",
+        "../../libs/ui/pipes/src/**/*.test.ts",
+        "../../libs/ui/pipes/src/**/*.spec.ts",
+        "../../libs/ui/pipes/src/**/*.d.ts"
     ]
 }

libs/playlist/shared/ui/jest.config.ts

@@ -0,0 +1,21 @@
+export default {
+    displayName: 'playlist-shared-ui',
+    preset: '../../../../jest.preset.js',
+    setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+    coverageDirectory: '../../../../coverage/libs/playlist/shared/ui',
+    transform: {
+        '^.+\\.(ts|mjs|js|html)$': [
+            'jest-preset-angular',
+            {
+                tsconfig: '<rootDir>/tsconfig.spec.json',
+                stringifyContentPathRegex: '\\.(html|svg)$',
+            },
+        ],
+    },
+    transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+    snapshotSerializers: [
+        'jest-preset-angular/build/serializers/no-ng-attributes',
+        'jest-preset-angular/build/serializers/ng-snapshot',
+        'jest-preset-angular/build/serializers/html-comment',
+    ],
+};

libs/playlist/shared/ui/project.json

@@ -6,6 +6,14 @@
     "projectType": "library",
     "tags": ["scope:playlist", "domain:m3u", "type:ui"],
     "targets": {
+        "test": {
+            "executor": "@nx/jest:jest",
+            "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+            "options": {
+                "jestConfig": "libs/playlist/shared/ui/jest.config.ts",
+                "tsConfig": "libs/playlist/shared/ui/tsconfig.spec.json"
+            }
+        },
         "lint": {
             "executor": "@nx/eslint:lint"
         }

libs/playlist/shared/ui/src/test-setup.ts

@@ -0,0 +1,6 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv({
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+});

libs/playlist/shared/ui/tsconfig.spec.json

@@ -0,0 +1,17 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../../dist/out-tsc",
+        "module": "commonjs",
+        "target": "es2016",
+        "types": ["jest", "node"],
+        "moduleResolution": "node10"
+    },
+    "files": ["src/test-setup.ts"],
+    "include": [
+        "jest.config.ts",
+        "src/**/*.test.ts",
+        "src/**/*.spec.ts",
+        "src/**/*.d.ts"
+    ]
+}

libs/portal/shared/ui/src/index.ts

@@ -12,5 +12,6 @@ export * from './lib/components/search-form/search-form.component';
 export * from './lib/components/search-layout/search-layout.component';
 export { WatchedBadgeComponent } from 'components';
 export * from './lib/components/unified-collection/unified-collection-page.component';
+export * from './lib/components/unified-collection/unified-live-tab.component';
 export * from './lib/navigation/navigation.component';
 export * from './lib/navigation/portal-rail-links.component';

libs/ui/components/project.json

@@ -7,11 +7,18 @@
     "tags": ["scope:shared", "domain:shared-ui", "type:ui"],
     "targets": {
         "test": {
-            "executor": "@nx/jest:jest",
+            "executor": "nx:run-commands",
             "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
             "options": {
-                "jestConfig": "libs/ui/components/jest.config.ts",
-                "tsConfig": "libs/ui/components/tsconfig.spec.json"
+                "command": [
+                    "node",
+                    "./tools/testing/run-web-esm-lib-tests.mjs",
+                    "libs/ui/components/src"
+                ],
+                "env": {
+                    "NODE_OPTIONS": "--experimental-vm-modules"
+                },
+                "forwardAllArgs": true
             }
         },
         "lint": {