From eacd4c90e17a39cd349a3fc8039880d2c53eb6a8 Mon Sep 17 00:00:00 2001 From: satanTime Date: Sun, 19 Nov 2023 00:21:39 +0100 Subject: [PATCH] fix(codesandbox): running tests in browser --- .circleci/config.yml | 4 ++-- .codesandbox/tasks.json | 18 ++++++++++++++++++ .nvmrc | 2 +- angular.json | 20 ++++++++++++++++++-- docker-compose.sh | 2 +- karma.conf.js | 20 +++++++++++++------- package-lock.json | 19 +++++++++++++++++++ package.json | 4 +++- sandbox.config.json | 3 +++ src/main.ts | 7 ------- src/polyfills.ts | 14 +++++++++----- src/test.ts | 10 +++++++--- tsconfig.json | 39 +++++++++++++++++++++------------------ tsconfig.spec.json | 3 ++- 14 files changed, 117 insertions(+), 48 deletions(-) create mode 100644 .codesandbox/tasks.json create mode 100644 sandbox.config.json diff --git a/.circleci/config.yml b/.circleci/config.yml index f5b64c44..501c26ac 100644 --- a/.circleci/config.yml +++ b/.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: diff --git a/.codesandbox/tasks.json b/.codesandbox/tasks.json new file mode 100644 index 00000000..ba61999e --- /dev/null +++ b/.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 + } + } + } +} diff --git a/.nvmrc b/.nvmrc index d939939b..f3f52b42 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -18.13.0 +20.9.0 diff --git a/angular.json b/angular.json index b3b56367..12d76e03 100644 --- a/angular.json +++ b/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" } diff --git a/docker-compose.sh b/docker-compose.sh index 60c7db54..c204e6e9 100644 --- a/docker-compose.sh +++ b/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 diff --git a/karma.conf.js b/karma.conf.js index db097e1d..b35e3810 100644 --- a/karma.conf.js +++ b/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, }); }; diff --git a/package-lock.json b/package-lock.json index 3f6e048d..121f9e2c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38,6 +38,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", @@ -8158,6 +8159,17 @@ "karma": "^6.0.0" } }, + "node_modules/karma-jasmine-html-reporter": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/karma-jasmine-html-reporter/-/karma-jasmine-html-reporter-2.1.0.tgz", + "integrity": "sha512-sPQE1+nlsn6Hwb5t+HHwyy0A1FNCVKuL1192b+XNauMYWThz2kweiBVW1DqloRpVvZIJkIoHVB7XRpK78n1xbQ==", + "dev": true, + "peerDependencies": { + "jasmine-core": "^4.0.0 || ^5.0.0", + "karma": "^6.0.0", + "karma-jasmine": "^5.0.0" + } + }, "node_modules/karma-jasmine/node_modules/jasmine-core": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-4.6.0.tgz", @@ -22819,6 +22831,13 @@ } } }, + "karma-jasmine-html-reporter": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/karma-jasmine-html-reporter/-/karma-jasmine-html-reporter-2.1.0.tgz", + "integrity": "sha512-sPQE1+nlsn6Hwb5t+HHwyy0A1FNCVKuL1192b+XNauMYWThz2kweiBVW1DqloRpVvZIJkIoHVB7XRpK78n1xbQ==", + "dev": true, + "requires": {} + }, "karma-junit-reporter": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/karma-junit-reporter/-/karma-junit-reporter-2.0.1.tgz", diff --git a/package.json b/package.json index 6237a1d7..e0c770bf 100644 --- a/package.json +++ b/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", diff --git a/sandbox.config.json b/sandbox.config.json new file mode 100644 index 00000000..a4df8557 --- /dev/null +++ b/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "node" +} diff --git a/src/main.ts b/src/main.ts index 494e35b7..437542e7 100644 --- a/src/main.ts +++ b/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'; diff --git a/src/polyfills.ts b/src/polyfills.ts index 6d66f361..e84b4be1 100644 --- a/src/polyfills.ts +++ b/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 - */ diff --git a/src/test.ts b/src/test.ts index 41df064c..ffe74e99 100644 --- a/src/test.ts +++ b/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, +}); diff --git a/tsconfig.json b/tsconfig.json index 3c9448a9..020262af 100644 --- a/tsconfig.json +++ b/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"] } diff --git a/tsconfig.spec.json b/tsconfig.spec.json index 421f34d3..882906e4 100644 --- a/tsconfig.spec.json +++ b/tsconfig.spec.json @@ -3,5 +3,6 @@ "extends": "./tsconfig.json", "compilerOptions": { "types": ["jasmine"] - } + }, + "files": ["src/polyfills.ts", "src/test.ts", "src/e2e.ts"] }