fix(codesandbox): running tests in browser

.circleci/config.yml

@@ -17,8 +17,8 @@ jobs:
           name: Install
           command: |
             if [ ! -d "./node_modules/" ]; then
-              npm ci --no-optional --ignore-scripts && \
-              node ./node_modules/puppeteer/install.js && \
+              npm install --no-audit && \
+              node ./node_modules/puppeteer/install.mjs && \
               ./node_modules/.bin/ngcc
             fi
       - save_cache:

.codesandbox/tasks.json

@@ -0,0 +1,18 @@
+{
+  "setupTasks": [
+    {
+      "name": "Install Dependencies",
+      "command": "npm install"
+    }
+  ],
+  "tasks": {
+    "start": {
+      "name": "start",
+      "command": "npm run start",
+      "runAtStart": true,
+      "preview": {
+        "port": 9876
+      }
+    }
+  }
+}

.nvmrc

@@ -1 +1 @@
-18.13.0
+20.9.0

angular.json

@@ -16,7 +16,15 @@
             "outputPath": "dist/ng-mocks-sandbox",
             "index": "index.html",
             "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "src/polyfills.ts",
+              "zone.js",
+              "zone.js/testing",
+              "jasmine-core/lib/jasmine-core/jasmine.js",
+              "jasmine-core/lib/jasmine-core/jasmine-html.js",
+              "jasmine-core/lib/jasmine-core/boot0.js",
+              "jasmine-core/lib/jasmine-core/boot1.js"
+            ],
             "tsConfig": "tsconfig.json",
             "styles": ["./node_modules/jasmine-core/lib/jasmine-core/jasmine.css"]
           }
@@ -31,7 +39,15 @@
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "src/polyfills.ts",
+              "zone.js",
+              "zone.js/testing",
+              "jasmine-core/lib/jasmine-core/jasmine.js",
+              "jasmine-core/lib/jasmine-core/jasmine-html.js",
+              "jasmine-core/lib/jasmine-core/boot0.js",
+              "jasmine-core/lib/jasmine-core/boot1.js"
+            ],
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js"
           }

docker-compose.sh

@@ -8,6 +8,6 @@ export NVM_DIR="$HOME/.nvm" && \. "$NVM_DIR/nvm.sh"
 docker-compose up -- core && \
   nvm install && \
   nvm use && \
-  node ./node_modules/puppeteer/install.js
+  node ./node_modules/puppeteer/install.mjs
 
 docker-compose down --remove-orphans

karma.conf.js

@@ -1,18 +1,21 @@
 // Karma configuration file, see link for more information
 // https://karma-runner.github.io/1.0/config/configuration-file.html
 
-process.env.CHROME_BIN = require('puppeteer').executablePath();
+if (process.env.CSB === undefined) {
+  process.env.CHROME_BIN = require('puppeteer').executablePath();
+}
 
 module.exports = function (config) {
   config.set({
     basePath: '',
     frameworks: ['jasmine', '@angular-devkit/build-angular'],
     plugins: [
-      require('@angular-devkit/build-angular/plugins/karma'),
+      require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-ie-launcher'),
-      require('karma-jasmine'),
       require('karma-junit-reporter'),
+      require('karma-jasmine-html-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma'),
     ],
     client: {
       clearContext: false, // leave Jasmine Spec Runner output visible in browser
@@ -35,12 +38,15 @@ module.exports = function (config) {
       outputFile: 'specs-junit.xml',
       useBrowserName: false,
     },
-    reporters: process.env.WITH_COVERAGE === undefined ? ['dots'] : ['junit'],
+    reporters:
+      process.env.CSB === undefined && process.env.WITH_COVERAGE !== undefined ? ['junit'] : ['kjhtml', 'dots'],
+    hostname: undefined,
+    listenAddress: process.env.CSB === undefined ? 'localhost' : '0.0.0.0',
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
-    autoWatch: false,
-    browsers: ['ChromeCi'],
-    singleRun: true,
+    autoWatch: process.env.CSB !== undefined,
+    browsers: process.env.CSB === undefined ? ['ChromeCi'] : [],
+    singleRun: process.env.CSB === undefined,
   });
 };

package.json

@@ -17,7 +17,8 @@
   "scripts": {
     "npm": "npm",
     "ng": "ng",
-    "start": "ng serve --disable-host-check",
+    "start": "ng test",
+    "serve": "ng serve --disable-host-check",
     "test": "ng test",
     "prettier:repo": "prettier --loglevel warn -u -w .",
     "prettier:check": "prettier -u -c .",
@@ -53,6 +54,7 @@
     "karma-chrome-launcher": "3.2.0",
     "karma-ie-launcher": "1.0.0",
     "karma-jasmine": "5.1.0",
+    "karma-jasmine-html-reporter": "2.1.0",
     "karma-junit-reporter": "2.0.1",
     "npm": "10.2.4",
     "prettier": "3.1.0",

sandbox.config.json

@@ -0,0 +1,3 @@
+{
+  "template": "node"
+}

src/main.ts

@@ -1,12 +1,5 @@
 import './polyfills';
 
-import 'jasmine-core/lib/jasmine-core/jasmine.js';
-import 'jasmine-core/lib/jasmine-core/jasmine-html.js';
-import 'jasmine-core/lib/jasmine-core/boot0.js';
-import 'jasmine-core/lib/jasmine-core/boot1.js';
-
-import 'zone.js/dist/zone-testing';
-
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 import { NgModuleRef } from '@angular/core';
 import { getTestBed } from '@angular/core/testing';

src/polyfills.ts

@@ -33,6 +33,15 @@
 // import 'core-js/es6/map';
 // import 'core-js/es6/weak-map';
 // import 'core-js/es6/set';
+import 'core-js/es/global-this';
+
+declare const window: any;
+
+if (window) {
+  window.global = window;
+  window.globalThis = window;
+  window.ngDevMode = true;
+}
 
 /** IE10 and IE11 requires the following for NgClass support on SVG elements */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
@@ -53,8 +62,3 @@ import 'core-js/proposals/reflect-metadata';
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone'; // Included with Angular CLI.
-
-/***************************************************************************************************
- * APPLICATION IMPORTS
- */

src/test.ts

@@ -1,6 +1,5 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-import 'zone.js/dist/zone-testing';
 import { getTestBed } from '@angular/core/testing';
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 
@@ -36,5 +35,10 @@ jasmine.getEnv().addReporter({
   suiteStarted: MockInstance.remember,
 });
 
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+import './e2e.ts';
+
+// Initialize the Angular testing environment.
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
+  errorOnUnknownElements: true,
+  errorOnUnknownProperties: true,
+});

tsconfig.json

@@ -3,29 +3,32 @@
   "compilerOptions": {
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": false,
+    "noPropertyAccessFromIndexSignature": false,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "esModuleInterop": true,
+    "sourceMap": true,
     "declaration": false,
     "downlevelIteration": true,
-    "esModuleInterop": true,
     "experimentalDecorators": true,
-    "forceConsistentCasingInFileNames": true,
-    "importHelpers": true,
     "moduleResolution": "node",
-    "noFallthroughCasesInSwitch": true,
-    "noImplicitOverride": false,
-    "noImplicitReturns": true,
-    "noPropertyAccessFromIndexSignature": false,
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "lib": ["es2020", "dom"],
+    "types": ["jasmine"],
     "skipLibCheck": true,
-    "sourceMap": true,
-    "strict": true,
-    "useDefineForClassFields": false,
-    "target": "ES2015",
-    "module": "ESNext",
-    "lib": ["ES2018", "dom"],
-    "typeRoots": ["node_modules/@types"]
+    "useDefineForClassFields": false
   },
   "angularCompilerOptions": {
-    "enableIvy": true,
-    "fullTemplateTypeCheck": true,
-    "strictInjectionParameters": true
-  }
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "files": ["src/polyfills.ts", "src/main.ts", "src/e2e.ts"],
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
 }

tsconfig.spec.json

@@ -3,5 +3,6 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "types": ["jasmine"]
-  }
+  },
+  "files": ["src/polyfills.ts", "src/test.ts", "src/e2e.ts"]
 }