Update: Jun 2020: They are not totally dead, but only good for testing whether or not a component creates. Everything else is much better tested using Cypress.io

This is my umpteenth time trying to check in code, but I'm being delayed all because of nonsense like these errors below.

Even when I fix the immediate error, there are other layers of errors to come. Each one with ridiculous vague messages.

Using the native Angular Karma/Jasmine test schematics are painful and cost major amounts of time. It requires us to discover imports for every dependency in your component; even those that are 3,4,5 layers deep.

CheckboxComponent > should create
Error: Illegal state: Could not load the summary for directive CheckboxComponent.
error properties: Object({ ngSyntaxError: true })
Error: Illegal state: Could not load the summary for directive CheckboxComponent.
    at syntaxError (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm5/compiler.js:2430:1)
    at CompileMetadataResolver.getDirectiveSummary (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm5/compiler.js:18535:1)
    at JitCompiler.getComponentFactory (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm5/compiler.js:25979:1)
    at CompilerImpl.getComponentFactory (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js:162:1)
    at TestingCompilerImpl.getComponentFactory (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/platform-browser-dynamic/fesm5/testing.js:110:1)
    at TestBedViewEngine.createComponent (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/testing.js:1905:1)
    at Function.TestBedViewEngine.createComponent (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/testing.js:1601:1)
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/app/components/systemsettings/checkbox/checkbox.component.spec.ts:30:25)
    at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:391:1)
    at ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:289:1)

Now if I spend time on this and the myriad of other similar errors I'm likely to find (as I just added 9 new Angular components), I'm likely to lose a day or two.

Is the Time worth it?

The amount of effort put into Karma and Jasmine may not pay off, and here's why. Each component can only be tested half-way. This is because all outbound/inbound HTML calls will not work due to how Karma works. To acheive some level of depth in the test we need to create lots of mockobjects, spies and spend too much time debugging why things don't work.

Cypress

Cypress may not be a unit level testing tool, but with right planning it can cover a lot of ground (at least as much as Karma and Jasmine for sure). It has the ability to intercept and inject content in both outbound and inbound HTML streams. In short it is everything Selenium is and more. This means that Selenium and all derivatives such as Protractor are inferior.

Puppet

Honorable mention goes to Puppeteer

As of today, for me, I'm declaring Karma and Jasmine a toxic environment. I don't want to manually find and import dependencies. It's dead due to technical debt and newer tools.

Upate

The Angular-Testing-Library vastly improves this problem. Check out article 2 in this series.

JWP2020