We have an application that has been in production for years using Angular. When we first started using Angular about 6 or so years ago we did not use any of the karma/jasmine testing tools. In fact we removed some of those references including the .spec files as we went.
Fast forward to today and we want to start taking advantage of these testing tools.
I have gone back through adding in all of the stuff we need (I think) and now I think we are close.
I run ng test and I get several errors against the node modules folder. Here are a few to be exact.
Error: node_modules/rxjs/dist/types/internal/operators/merge.d.ts:5:153 - error TS2536: Type 'number' cannot be used to index type 'A'.
5 export declare function merge<T, A extends readonly unknown[]>(...sourcesAndConcurrency: [...ObservableInputTuple<A>, number]): OperatorFunction<T, T | A[number]>;
~~~~~~~~~
Error: node_modules/rxjs/dist/types/internal/operators/merge.d.ts:7:158 - error TS2536: Type 'number' cannot be used to index type 'A'.
7 export declare function merge<T, A extends readonly unknown[]>(...sourcesAndScheduler: [...ObservableInputTuple<A>, SchedulerLike]): OperatorFunction<T, T | A[number]>;
~~~~~~~~~
Error: node_modules/rxjs/dist/types/internal/operators/merge.d.ts:9:180 - error TS2536: Type 'number' cannot be used to index type 'A'.
9 export declare function merge<T, A extends readonly unknown[]>(...sourcesAndConcurrencyAndScheduler: [...ObservableInputTuple<A>, number, SchedulerLike]): OperatorFunction<T, T | A[number]>;
However, the testing does appear to complete with the following information,
21 09 2023 09:11:06.114:WARN [karma]: No captured browser, open http://localhost:9876/
21 09 2023 09:11:06.138:INFO [karma-server]: Karma v6.4.2 server started at http://localhost:9876/
21 09 2023 09:11:06.139:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
21 09 2023 09:11:06.230:INFO [launcher]: Starting browser Chrome
21 09 2023 09:11:07.166:INFO [Chrome 117.0.0.0 (Windows 10)]: Connected on socket WerFrrMlM_LkjOqcAAAB with id 94583344
21 09 2023 09:11:07.214:WARN [web-server]: 404: /_karma_webpack_/main.js
Chrome 117.0.0.0 (Windows 10): Executed 0 of 0 SUCCESS (0.013 secs / 0 secs)
TOTAL: 0 SUCCESS
Are these tests intended to be checking the node_modules folder for errors?
I'm guessing I have a configuration option that I am missing that resolves this? Below you can find some of those config files. If there are additional files you need to see I can add them.
Thanks for all your help!
karma.conf.js
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
jasmine: {
// you can add configuration options for Jasmine here
// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
// for example, you can disable the random execution with `random: false`
// or set a specific seed with `seed: 4321`
},
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
jasmineHtmlReporter: {
suppressAll: true // removes the duplicated traces
},
coverageReporter: {
dir: require('path').join(__dirname, './coverage/testing'),
subdir: '.',
reporters: [
{ type: 'html' },
{ type: 'text-summary' }
]
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: true
});
};
test.js
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
declare const require: {
context(path: string, deep?: boolean, filter?: RegExp): {
<T>(id: string): T;
keys(): string[];
};
};
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting(),
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().forEach(context);
tsconfig.spec.ts
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": [
"jasmine"
]
},
"files": [
"src/test.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
}