Karma testing output not the same in angular/cli versions after 1.0.6

[whyboris]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

Summary:

@angular/cli: 1.1.0 (replicated on 1.2.0-beta.0)
node: v6.9.1 (replicated on 8.0.0)
npm: 4.6.1 (replicated on 5.0.0)
OS: macOS Sierra 10.12.4 (replicated on Windows 7 too)

Full:

@angular/cli: 1.1.0
node: 6.9.1
os: darwin x64
@angular/animations: 4.1.3
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/compiler-cli: 4.1.3
@angular/core: 4.1.3
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/platform-server: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.1.0

Repro steps.

Create a project, write some unit tests, make at least one test fail (e.g. expect true to be false), run ng test

karma.conf.js has these features:

    frameworks: ['jasmine', '@angular/cli'],
    preprocessors: {
      './src/test.ts': ['@angular/cli']
    },
    reporters: ['progress'],

package.json has these features (probably irrelevant since older versions of these packages were working fine too before the cli upgrade):

    "jasmine-core": "~2.6.2",
    "karma": "~1.7.0",
    "karma-jasmine": "~1.1.0",
    "karma-cli": "~1.0.1",

The log given by the failure.

When using later versions of @angular/cli the ng test output looks something like this:

        _getByKey@http://localhost:9876/_karma_webpack_/vendor.bundle.js:34382:41
        get@http://localhost:9876/_karma_webpack_/vendor.bundle.js:34251:30
        get@http://localhost:9876/_karma_webpack_/vendor.bundle.js:35219:55
        resolveDep@http://localhost:9876/_karma_webpack_/vendor.bundle.js:42680:48
        createClass@http://localhost:9876/_karma_webpack_/vendor.bundle.js:42536:45
        createDirectiveInstance@http://localhost:9876/_karma_webpack_/vendor.bundle.js:42364:48
        createViewNodes@http://localhost:9876/_karma_webpack_/vendor.bundle.js:43727:72
        createRootView@http://localhost:9876/_karma_webpack_/vendor.bundle.js:43632:20
        callWithDebugContext@http://localhost:9876/_karma_webpack_/vendor.bundle.js:44847:47
        debugCreateRootView@http://localhost:9876/_karma_webpack_/vendor.bundle.js:44307:32
        create@http://localhost:9876/_karma_webpack_/vendor.bundle.js:41553:60
        initComponent@http://localhost:9876/_karma_webpack_/vendor.bundle.js:46642:55
        invoke@http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2732:31
        onInvoke@http://localhost:9876/_karma_webpack_/vendor.bundle.js:106204:45
        invoke@http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2731:40
        onInvoke@http://localhost:9876/_karma_webpack_/vendor.bundle.js:35790:43
        invoke@http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2731:40
        run@http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2482:49
        run@http://localhost:9876/_karma_webpack_/vendor.bundle.js:35658:65
        createComponent@http://localhost:9876/_karma_webpack_/vendor.bundle.js:46645:61
        createComponent@http://localhost:9876/_karma_webpack_/vendor.bundle.js:46449:44

Desired functionality.

When using @angular/cli 1.0.6 (and 1.0.1 and earlier) the output of ng test would look something like this:

        _throwOrNull@webpack:///~/@angular/core/@angular/core.es5.js:2770:0 <- src/test.ts:4787:45
        _getByKeyDefault@webpack:///~/@angular/core/@angular/core.es5.js:2809:0 <- src/test.ts:4826:37
        _getByKey@webpack:///~/@angular/core/@angular/core.es5.js:2741:0 <- src/test.ts:4758:41
        get@webpack:///~/@angular/core/@angular/core.es5.js:2610:0 <- src/test.ts:4627:30
        get@webpack:///~/@angular/core/@angular/core.es5.js:3578:0 <- src/test.ts:5595:55
        resolveDep@webpack:///~/@angular/core/@angular/core.es5.js:11039:0 <- src/test.ts:13056:48
        createClass@webpack:///~/@angular/core/@angular/core.es5.js:10895:0 <- src/test.ts:12912:45
        createDirectiveInstance@webpack:///~/@angular/core/@angular/core.es5.js:10723:21 <- src/test.ts:12740:48
        createViewNodes@webpack:///~/@angular/core/@angular/core.es5.js:12086:33 <- src/test.ts:14103:72
        createRootView@webpack:///~/@angular/core/@angular/core.es5.js:11991:0 <- src/test.ts:14008:20
        callWithDebugContext@webpack:///~/@angular/core/@angular/core.es5.js:13206:25 <- src/test.ts:15223:47
        debugCreateRootView@webpack:///~/@angular/core/@angular/core.es5.js:12666:0 <- src/test.ts:14683:32
        create@webpack:///~/@angular/core/@angular/core.es5.js:9912:25 <- src/test.ts:11929:60
        initComponent@webpack:///~/@angular/core/@angular/core/testing.es5.js:803:0 <- src/test.ts:17338:55
        invoke@webpack:///~/zone.js/dist/zone.js:391:0 <- src/polyfills.ts:1546:31
        onInvoke@webpack:///~/zone.js/dist/proxy.js:79:0 <- src/test.ts:96647:45
        invoke@webpack:///~/zone.js/dist/zone.js:390:0 <- src/polyfills.ts:1545:40
        onInvoke@webpack:///~/@angular/core/@angular/core.es5.js:4149:0 <- src/test.ts:6166:43
        invoke@webpack:///~/zone.js/dist/zone.js:390:0 <- src/polyfills.ts:1545:40

Mention any other details that might be useful.

Please let me know if I should clarify anything. I confirmed the error is caused by angular-cli: when I rolled back to version 1.0.6 the ng test unit test errors were logged as they were logged previously (as desired).

[whyboris]

To explain the relevancy of this problem:
Previously, at least one line of the output would show the location of the error in a file I created, e.g:
webpack:///src/app/dashboard/stats/stats.component.spec.ts:26:32 <- src/test.ts:43754:37
(component.spec.ts is I file I created).
With the updated cli there is no record of where the error occurred, every file is a .bundle.js file

[filipesilva]

I'm sorry, I don't understand what you're trying to show here. I don't see any error message on the logs your provided... there seems to be a stack trace perhaps? But I don't know what for.

Can you set up a github simple repo showing this issue please? E.g. a project created from ng new with the minimum set of changes needed to see the problem, and instructions that I can follow to see it.

[whyboris]

Thank you for the feedback. I will try to create a project to reproduce the steps today or tomorrow. Sorry my original description was not clear enough.

The key problem is that the stack trace previously (in 1.0.6 and before) would include the reference to a file that I created that had the failing test, and the location of where the error occurred (e.g. stats.component.spec.ts:26:32) while with CLI version 1.1.0 and above, the stack trace contains no reference to any file I created.

This is a problem for when I write unit tests.

[whyboris]

Issue reproduced with a clean-install using command ng new cli106:
https://github.com/whyboris/cli106
Generated using globally-installed @angular/cli@1.0.6 with no changes except the addition of a failing test:
https://github.com/whyboris/cli106/commit/ffb9133cb2fd099e26e38cf759d1e9a2b1471448
This repository will generate errors that are expected:
1.0.6 error log:

Expected 'hello there' to be 'hello!'.
at Object.<anonymous> (webpack:///src/app/app.component.spec.ts:45:30 <- src/test.ts:51489:37)
at ZoneDelegate.invoke (webpack:///~/zone.js/dist/zone.js:391:0 <- src/polyfills.ts:1546:26)
at ProxyZoneSpec.Array.concat.ProxyZoneSpec.onInvoke (webpack:///~/zone.js/dist/proxy.js:79:0 <- src/test.ts:52534:39)

notice the app.component.spec.ts while the 45:30 is not the correct location of the error, at least the file where the error occurred is easily seen.

Now change the package.json devDependency from "@angular/cli": "1.0.6", to "@angular/cli": "1.1.0", and run npm install and run ng test

1.1.0 error log:

Expected 'hello there' to be 'hello!'.
at Object.<anonymous> (http://localhost:9876/_karma_webpack_/main.bundle.js:106:37)
at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2732:26)
at ProxyZoneSpec.webpackJsonp../node_modules/zone.js/dist/proxy.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/vendor.bundle.js:54685:39)
at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2731:32)

Notice that the stack trace no longer includes app.component.spec.ts

[filipesilva]

Got it, seems like a sourcemap problem. Will investigate.