Angular, Karma and Jasmine report colors

Question

I am setting up a new solution with Angular 6, Karma and Jasmine. However to my surprise the specs list is getting the following class as undefined:

<li class="undefined" id="spec-spec1" spec-suite-id="suite3">
<a href="?spec=Router%3A%20App%20looks%20async%20but%20is%20synchronous">
   looks async but is synchronous
</a>
</li>

Using Angular 5 the result looks as follows: Specs that are running are clearly shown in green and skipped spec are shown in grey

How to debug this in Angular 6 generated test using CLI ?

Answer 1

As you see you are using old version of Karma (1.7.1). Update it in package.json (with other dependencies like jasmine-core). Currently last version is 4.1.0 - you can check it at https://www.npmjs.com/package/karma

Answer 2

you can write console.log to write logs into the console or directly write "debugger" in your test and open the developer console of the browser you run the test in.

Always run only the test where the problem is. To do this you can focus on a test with "f" bevore describe() and it() so only this test is executed.

fdescribe("when ...", function () { // to [f]ocus on a single group of tests
    fit("should ...", function () {...}); // to [f]ocus on a single test case
});

... and:

xdescribe("when ...", function () { // to e[x]clude a group of tests
    xit("should ...", function () {...}); // to e[x]clude a test case
});