Angular-cli: Karma testing output not the same in angular/cli versions after 1.0.6
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
All 40 comments
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
whyboris
on 5 Jun 2017
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.
filipesilva
on 6 Jun 2017
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
on 6 Jun 2017
Issue reproduced with a clean-install using command ng new cli106:
https://github.com/whyboris/cli106
Generated using globally-installed @angular/[email protected] 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
whyboris
on 7 Jun 2017
Got it, seems like a sourcemap problem. Will investigate.
filipesilva
on 12 Jun 2017
@whyboris I tried your repro but I can't see the original file either:
kamik@T460p MINGW64 /d/sandbox
$ git clone https://github.com/whyboris/cli106.git
Cloning into 'cli106'...
remote: Counting objects: 64, done.
remote: Total 64 (delta 0), reused 0 (delta 0), pack-reused 64
Unpacking objects: 100% (64/64), done.
kamik@T460p MINGW64 /d/sandbox
$ cd cli106/
kamik@T460p MINGW64 /d/sandbox/cli106 (master)
$ yarn
yarn install v0.24.6
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
warning [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 55.47s.
kamik@T460p MINGW64 /d/sandbox/cli106 (master)
$ ng test
10% building modules 1/1 modules 0 active03 07 2017 21:00:34.588:WARN [karma]: No captured browser, open http://localhost:9876/
03 07 2017 21:00:34.600:INFO [karma]: Karma v1.4.1 server started at http://0.0.0.0:9876/
03 07 2017 21:00:34.601:INFO [launcher]: Launching browser Chrome with unlimited concurrency
03 07 2017 21:00:34.608:INFO [launcher]: Starting browser Chrome
03 07 2017 21:00:43.461:WARN [karma]: No captured browser, open http://localhost:9876/
03 07 2017 21:00:43.938:INFO [Chrome 59.0.3071 (Windows 10 0.0.0)]: Connected on socket DPGAAF7m1c0C6XjfAAAA with id 24901784
Chrome 59.0.3071 (Windows 10 0.0.0) AppComponent hello function should set title to hello FAILED
Expected 'hello there' to be 'hello!'.
at Object.<anonymous> (http://localhost:9876/_karma_webpack_/main.bundle.js:106:37)
at ZoneDelegate.webpackJsonp.../../../../../../../sandbox/cli106/node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2704:26)
at ProxyZoneSpec.webpackJsonp.../../../../../../../sandbox/cli106/node_modules/zone.js/dist/proxy.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/vendor.bundle.js:56763:39)
at ZoneDelegate.webpackJsonp.../../../../../../../sandbox/cli106/node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2703:32)
Chrome 59.0.3071 (Windows 10 0.0.0): Executed 4 of 4 (1 FAILED) (0 secs / 0.149 secs)
Chrome 59.0.3071 (Windows 10 0.0.0) AppComponent hello function should set title to hello FAILED
Expected 'hello there' to be 'hello!'.
at Object.<anonymous> (http://localhost:9876/_karma_webpack_/main.bundle.js:106:37)
at ZoneDelegate.webpackJsonp.../../../../../../../sandbox/cli106/node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2704:26)
at ProxyZoneSpec.webpackJsonp.../../../../../../../sandbox/cli106/node_modules/zone.js/dist/proxy.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/vendor.bundle.js:56763:39)
Chrome 59.0.3071 (Windows 10 0.0.0): Executed 4 of 4 (1 FAILED) (0.114 secs / 0.149 secs)
Does this repro still work for you?
If you still have an old version that works, maybe there's something different in the dependencies. Could you put the result of npm ls somewhere I could see?
Also, what version of chrome are you using?
filipesilva
on 3 Jul 2017
Ran yarn
My current ng -v
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
@angular/cli: 1.0.6
node: 6.9.1
os: darwin x64
@angular/common: 4.2.5
@angular/compiler: 4.2.5
@angular/core: 4.2.5
@angular/forms: 4.2.5
@angular/http: 4.2.5
@angular/platform-browser: 4.2.5
@angular/platform-browser-dynamic: 4.2.5
@angular/router: 4.2.5
@angular/cli: 1.0.6
@angular/compiler-cli: 4.2.5
Note @angular/cli: 1.0.6
Ran npm test:
> [email protected] test /Users/byakubchik/Desktop/angularclibroken/cli106
> ng test
05 07 2017 11:00:33.948:WARN [karma]: No captured browser, open http://localhost:9876/
05 07 2017 11:00:33.963:INFO [karma]: Karma v1.4.1 server started at http://0.0.0.0:9876/
05 07 2017 11:00:33.964:INFO [launcher]: Launching browser Chrome with unlimited concurrency
05 07 2017 11:00:34.014:INFO [launcher]: Starting browser Chrome
05 07 2017 11:00:34.751:INFO [Chrome 59.0.3071 (Mac OS X 10.12.4)]: Connected on socket oItKCpHByqdcfQpyAAAA with id 54558429
Chrome 59.0.3071 (Mac OS X 10.12.4) AppComponent hello function should set title to hello FAILED
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)
at ZoneDelegate.invoke (webpack:///~/zone.js/dist/zone.js:390:0 <- src/polyfills.ts:1545:32)
Chrome 59.0.3071 (Mac OS X 10.12.4): Executed 4 of 4 (1 FAILED) (0 secs / 0.151 secs)
Chrome 59.0.3071 (Mac OS X 10.12.4) AppComponent hello function should set title to hello FAILED
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)
Chrome 59.0.3071 (Mac OS X 10.12.4): Executed 4 of 4 (1 FAILED) (0.273 secs / 0.151 secs)
Notice app.component.spec.ts shows up
whyboris
on 5 Jul 2017
Updated package.json to "@angular/cli": "1.1.0",
Ran yarn. Now ng -v is:
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
@angular/cli: 1.1.0
node: 6.9.1
os: darwin x64
@angular/common: 4.2.5
@angular/compiler: 4.2.5
@angular/core: 4.2.5
@angular/forms: 4.2.5
@angular/http: 4.2.5
@angular/platform-browser: 4.2.5
@angular/platform-browser-dynamic: 4.2.5
@angular/router: 4.2.5
@angular/cli: 1.1.0
@angular/compiler-cli: 4.2.5
Note @angular/cli: 1.1.0
Current output of npm test is:
05 07 2017 11:06:30.226:INFO [karma]: Karma v1.4.1 server started at http://0.0.0.0:9876/
05 07 2017 11:06:30.227:INFO [launcher]: Launching browser Chrome with unlimited concurrency
05 07 2017 11:06:30.232:INFO [launcher]: Starting browser Chrome
05 07 2017 11:06:35.519:WARN [karma]: No captured browser, open http://localhost:9876/
05 07 2017 11:06:35.643:INFO [Chrome 59.0.3071 (Mac OS X 10.12.4)]: Connected on socket J62zAKH9GB4fg0UTAAAA with id 92735878
Chrome 59.0.3071 (Mac OS X 10.12.4) AppComponent hello function should set title to hello FAILED
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:56791:39)
at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2731:32)
Chrome 59.0.3071 (Mac OS X 10.12.4): Executed 4 of 4 (1 FAILED) (0 secs / 0.16 secs)
Chrome 59.0.3071 (Mac OS X 10.12.4) AppComponent hello function should set title to hello FAILED
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:56791:39)
Chrome 59.0.3071 (Mac OS X 10.12.4): Executed 4 of 4 (1 FAILED) (0.188 secs / 0.16 secs)
Notice app.component.spec.ts is absent from stack trace.
whyboris
on 5 Jul 2017
To summarize: the repo https://github.com/whyboris/cli106 (_master_ branch) still works -- installs with cli 1.0.6 and shows expected behavior. After manually updating to cli 1.1.0 (or later version) and running npm install or yarn the stack trace is no longer as informative as before.
Please let me know if you have any (more) questions.
whyboris
on 6 Jul 2017
I have experienced the same issue and have stayed with 1.0.6 for the time being. Related to this issue, I have never seen useful file and line number information displayed inside the browser when running tests. I have always relied on the information displayed in the console. When using 1.0.6, the stack traces in the chrome look like this:
Error: Expected true to be false.
at stack (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?da99c5b057693d025fad3d7685e1590600ca376d:2176:17)
at buildExpectationResult (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?da99c5b057693d025fad3d7685e1590600ca376d:2146:14)
at Spec.expectationResultFactory (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?da99c5b057693d025fad3d7685e1590600ca376d:766:18)
at Spec.addExpectationResult (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?da99c5b057693d025fad3d7685e1590600ca376d:444:34)
at Expectation.addExpectationResult (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?da99c5b057693d025fad3d7685e1590600ca376d:710:21)
at Expectation.toBe (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?da99c5b057693d025fad3d7685e1590600ca376d:2099:12)
at Object.<anonymous> (http://localhost:9876/base/src/test.ts?4d87511513f4dc37c560862c452aa35472ab2964:24611:62)
at ZoneDelegate.invoke (http://localhost:9876/base/src/polyfills.ts?b839d5bbaeb4514c1aea80141a9b6907e94b1f97:3039:26)
at ProxyZoneSpec.Array.concat.ProxyZoneSpec.onInvoke (http://localhost:9876/base/src/test.ts?4d87511513f4dc37c560862c452aa35472ab2964:88782:39)
at ZoneDelegate.invoke (http://localhost:9876/base/src/polyfills.ts?b839d5bbaeb4514c1aea80141a9b6907e94b1f97:3038:32)
and like this in the console:
Chrome 59.0.3071 (Windows 7 0.0.0) DateOfBirthInputComponent when initial value is undefined and field is not required validate should return true if dob is null FAILED
Expected true to be false.
at Object.<anonymous> (webpack:///src/app/activate/account-info/date-of-birth-input.component.spec.ts:110:61 <- src/test.ts:24611:62)
at ZoneDelegate.invoke (webpack:///~/zone.js/dist/zone.js:391:0 <- src/polyfills.ts:3039:26)
at ProxyZoneSpec.Array.concat.ProxyZoneSpec.onInvoke (webpack:///~/zone.js/dist/proxy.js:79:0 <- src/test.ts:88782:39)
at ZoneDelegate.invoke (webpack:///~/zone.js/dist/zone.js:390:0 <- src/polyfills.ts:3038:32)
Chrome 59.0.3071 (Windows 7 0.0.0): Executed 177 of 433 (1 FAILED) (0 secs / 0.268 secs)
Chrome 59.0.3071 (Windows 7 0.0.0) DateOfBirthInputComponent when initial value is undefined and field is not required validate should return true if dob is null FAILED
Expected true to be false.
at Object.<anonymous> (webpack:///src/app/activate/account-info/date-of-birth-input.component.spec.ts:110:61 <- src/test.ts:24611:62)
at ZoneDelegate.invoke (webpack:///~/zone.js/dist/zone.js:391:0 <- src/polyfills.ts:3039:26)
at ProxyZoneSpec.Array.concat.ProxyZoneSpec.onInvoke (webpack:///~/zone.js/dist/proxy.js:79:0 <- src/test.ts:88782:39)
Chrome 59.0.3071 (Windows 7 0.0.0): Executed 432 of 433 (1 FAILED) (skipped 1) (2.427 secs / 0.591 secs)
mike-bresnahan
on 6 Jul 2017
Got it, was able to reproduce now. Dug into it a bit and think I know the cause. It's a complicated problem to solve, might take a bit.
filipesilva
on 7 Jul 2017
I have a solution for now:
npm i -D karma-source-map-support- in
karma.conf.jsadd'source-map-support'to theframeworksarray - in
karma.conf.jsaddrequire('karma-source-map-support'),to thepluginsarray
It will show you the original file, but in an weird URL (http://localhost:9876/_karma_webpack_/webpack:/src/app/app.component.spec.ts:46:31):
Chrome 59.0.3071 (Windows 10 0.0.0) AppComponent hello function should set title to hello FAILED
Expected 'hello there' to be 'hello!'.
at Object.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/app/app.component.spec.ts:46:31)
at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/~/zone.js/dist/zone.js:391:1)
at ProxyZoneSpec.webpackJsonp../node_modules/zone.js/dist/proxy.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/~/zone.js/dist/proxy.js:79:1)
at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/~/zone.js/dist/zone.js:390:1)
Chrome 59.0.3071 (Windows 10 0.0.0): Executed 4 of 4 (1 FAILED) (0 secs / 0.416 secs)
Chrome 59.0.3071 (Windows 10 0.0.0) AppComponent hello function should set title to hello FAILED
Expected 'hello there' to be 'hello!'.
at Object.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/app/app.component.spec.ts:46:31)
at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/~/zone.js/dist/zone.js:391:1)
at ProxyZoneSpec.webpackJsonp../node_modules/zone.js/dist/proxy.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/~/zone.js/dist/proxy.js:79:1)
Chrome 59.0.3071 (Windows 10 0.0.0): Executed 4 of 4 (1 FAILED) (0.441 secs / 0.416 secs)
The solution does not work for me when I apply it to a newly created project using 1.2.0.
mike-bresnahan
on 7 Jul 2017
I think the issue as more impact than discussed so far.
The consequence is not only that karma tests can't be debugged in the original TS sources after cli version 1.0.6.
Also the whole app can't be debugged in Firefox after 1.0.6 (setting breakpoints in TS sources has no effects). At least that's the observation on my setup ...
When I use Angular CLI 1.0.6 I can debug the app in Firefox by setting breakpoints in the TS sources.
jbandi
on 9 Jul 2017
I have the same issue with "@angular/cli": "^1.2.0",
npm: 5.0.0
node: v8.0.0
elvirdolic
on 10 Jul 2017
@filipesilva It would be wonderful with a bugfix for this soon. It is the single most wanted bugfix for angular-cli (and more important than any new features) in my opinion .
xnnkmd
on 12 Jul 2017
https://github.com/angular/angular-cli/pull/6968 should fix the karma sourcemap reporting.
@jbandi https://github.com/angular/angular-cli/pull/6862 is in the latest release (1.2.1) and should fix the problem with breakpoints in Firefox.
filipesilva
on 13 Jul 2017
Still experiencing issue:
angular cli: 1.2.1
npm: 5.0.3
node: 7.9.0
Looking forward to the fix!
markwhitfeld
on 17 Jul 2017
@filipesilva Just tested 1.2.1 and the problem is still there. The most problematic thing is that I can not debug my tests anymore in the browser. No source files show up (apparently because of this error)?
xnnkmd
on 17 Jul 2017
@xnnkmd the fix for this issue is not merged yet.
@jbandi https://github.com/angular/angular-cli/pull/6862 ended up not in 1.2.1 but only in 1.3.0-beta.1.
filipesilva
on 17 Jul 2017
@filipesilva Could this possibly be released more quickly as 1.2.2 instead of being part of future 1.3.0 because of the severity of the issue (the inability to debug and to view source of errors is quite a problem).
xnnkmd
on 17 Jul 2017
https://github.com/angular/angular-cli/pull/6968 is marked as a fix so ti should be in the next patch release, after being merged. Releases happen on wednesday-thursday usually.
filipesilva
on 17 Jul 2017
Awesome! Thanks! Please let us know when this is released.
markwhitfeld
on 20 Jul 2017
Closed by release 1.2.2 https://github.com/angular/angular-cli/releases/tag/v1.2.2 👍
whyboris
on 20 Jul 2017
On a brand new project created with 1.2.2, I still can't see any original source file in the stack trace, and when debugging in Chrome, the original source files are not listed either in the sources panel:
Chrome 59.0.3071 (Mac OS X 10.12.5) AppComponent should have as title 'app' FAILED
Expected 'app' to equal 'app2'.
at Object.<anonymous> (http://localhost:9877/_karma_webpack_/main.bundle.js:90:27)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9877/_karma_webpack_/polyfills.bundle.js:2801:26)
at AsyncTestZoneSpec.webpackJsonp.../../../../zone.js/dist/async-test.js.AsyncTestZoneSpec.onInvoke (http://localhost:9877/_karma_webpack_/vendor.bundle.js:2643:39)
at ProxyZoneSpec.webpackJsonp.../../../../zone.js/dist/proxy.js.ProxyZoneSpec.onInvoke (http://localhost:9877/_karma_webpack_/vendor.bundle.js:3416:39)
Chrome 59.0.3071 (Mac OS X 10.12.5): Executed 2 of 3 (1 FAILED) (0 secs / 0.193 secs)
Chrome 59.0.3071 (Mac OS X 10.12.5) AppComponent should have as title 'app' FAILED
Expected 'app' to equal 'app2'.
at Object.<anonymous> (http://localhost:9877/_karma_webpack_/main.bundle.js:90:27)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9877/_karma_webpack_/polyfills.bundle.js:2801:26)
at AsyncTestZoneSpec.webpackJsonp.../../../../zone.js/dist/async-test.js.AsyncTestZoneSpec.onInvoke (http://localhost:9877/_karma_webpack_/vendor.bundle.js:2643:39)
Chrome 59.0.3071 (Mac OS X 10.12.5): Executed 3 of 3 (1 FAILED) (0.263 secs / 0.234 secs)
jnizet
on 21 Jul 2017
@filipesilva can confirm the problem persists
Even after adding what you recommended above:
in karma.conf.js add 'source-map-support' to the frameworks array
in karma.conf.js add require('karma-source-map-support'), to the plugins array
(even tried placing source-map-support in different locations of the array in case that mattered). Even added "karma-source-map-support": "1.2.0", to devDependencies just in case.
Currently we have:
@angular/cli: 1.2.2
@angular/*: 4.3.1
Output still contains no note of original file where the error is:
PhantomJS 2.1.1 (Mac OS X 0.0.0) HashtagsComponent onSelect(hashtag) should update hashtag based on input FAILED
Expected false to be true.
http://localhost:9876/_karma_webpack_/main.bundle.js:5192:44
invoke@http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2769:31
onInvoke@http://localhost:9876/_karma_webpack_/vendor.bundle.js:72353:45
invoke@http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2768:40
...
I think I know what happened. #6862 ended up not being in 1.2.2 either, and #6968 built on it. I'll try to get this sorted. Thanks for keeping on top of this 👍
filipesilva
on 21 Jul 2017
Thank you @filipesilva for your work. Let me know if there's anything you'd like me to test out.
whyboris
on 21 Jul 2017
1.2.3 is out which should sort everything out. Let me know if problems still persist.
filipesilva
on 21 Jul 2017
After updating to 1.2.3 and installing karma-source-map-support I get sourcemaps when testing in Chrome. (Interestingly I didn't have to update karma.conf.js). However I still get no meaningful stack-traces when running tests in PhantomJS.
diminutivesloop
on 24 Jul 2017
@diminutivesloop -- precisely what I noticed. For example:
Output in console when browsers: ['Chrome'], in karma.conf.js:
Chrome 59.0.3071 (Mac OS X 10.12.4) HashtagsComponent onSelect(hashtag) should update hashtag based on input FAILED
Expected false to be true.
at Object.<anonymous> Users/byakubchik/Desktop/forbespress2/publish/src/app/compose/hashtags/hashtags.component.spec.ts:116:34)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke Users/byakubchik/Desktop/forbespress2/publish/node_modules/zone.js/dist/zone.js:391:1)
at ProxyZoneSpec.webpackJsonp.../../../../zone.js/dist/proxy.js.ProxyZoneSpec.onInvoke Users/byakubchik/Desktop/forbespress2/publish/node_modules/zone.js/dist/proxy.js:79:1)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke Users/byakubchik/Desktop/forbespress2/publish/node_modules/zone.js/dist/zone.js:390:1)
(note hashtags.component.spec.ts is present in output, where the failed test occurs)
Output when browsers: ['PhantomJS'], in karma.conf.js:
PhantomJS 2.1.1 (Mac OS X 0.0.0) HashtagsComponent onSelect(hashtag) should update hashtag based on input FAILED
Expected false to be true.
http://localhost:9876/_karma_webpack_/main.bundle.js:5192:44
invoke@http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2769:31
onInvoke@http://localhost:9876/_karma_webpack_/vendor.bundle.js:72353:45
invoke@http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2768:40
run@http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2519:49
http://localhost:9876/_karma_webpack_/vendor.bundle.js:72232:37
http://localhost:9876/_karma_webpack_/vendor.bundle.js:126773:31
invoke@http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2769:31
onInvoke@http://localhost:9876/_karma_webpack_/vendor.bundle.js:71769:45
onInvoke@http://localhost:9876/_karma_webpack_/vendor.bundle.js:72350:47
invoke@http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2768:40
run@http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2519:49
http://localhost:9876/_karma_webpack_/vendor.bundle.js:126768:28
http://localhost:9876/_karma_webpack_/vendor.bundle.js:71758:46
invokeTask@http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2802:36
runTask@http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2569:57
invoke@http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2864:45
timer@http://localhost:9876/_karma_webpack_/polyfills.bundle.js:3918:34
for the same failed test!
whyboris
on 24 Jul 2017
Yes, there should be no need to modify karma.conf.js with 1.2.3.
I don't think I can fix sourcemap reporting on PhantomJS unfortunately. That would require a new karma feature to be implemented (https://github.com/karma-runner/karma/issues/2774).
What I can say is that Chrome Headless (available now in Linux and OSX and on the next version of Windows) should overall be a better option to PhantomJS.
filipesilva
on 24 Jul 2017
Also AFAIK there is no sourcemap trouble with Firefox and 1.2.3.
filipesilva
on 24 Jul 2017
I just successfully solved the problem by going to Chrome Headless.
Easy to do -- just a small change to karma.conf.js
Instructions: http://cvuorinen.net/2017/05/running-angular-tests-in-headless-chrome/
ps - PhantomJS hasn't had a new release since January 2016
whyboris
on 24 Jul 2017
That is very similar to the changes I did in https://github.com/angular/angular-cli/pull/7084 to use headless in our travis setups.
filipesilva
on 24 Jul 2017
Hi - I'm trying to come up to speed on Karma/Jasmine, and based on the responses in this thread, I think I'm pretty current with my angular.
@angular/cli: 1.3.0
node: 7.10.1
os: linux x64
@angular/common: 4.3.4
@angular/compiler: 4.3.4
@angular/core: 4.3.4
@angular/forms: 4.3.4
@angular/http: 4.3.4
@angular/platform-browser: 4.3.4
@angular/platform-browser-dynamic: 4.3.4
@angular/router: 4.3.4
@angular/cli: 1.3.0
@angular/compiler-cli: 4.3.4
I'm running Ubuntu 16.04 in a VirtualBox VM on my Windows 7 host (wouldn't think that would be relevant).
When rewriting my first Jasmine test to fail, in Chrome Developer Tools (rt-click --> Inspect), I do see the failure reported with a weird path, as you mention above.
My results:
Uncaught Expected 0 to be 1.
at Object.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/demo/src/app/compute.spec.ts:7:24) at...
From @filipesilva above:
It will show you the original file, but in an weird URL (http://localhost:9876/_karma_webpack_/webpack:/src/app/app.component.spec.ts:46:31):
When i click on this link, I am supposed to be mapped back to the line of code that generates the error, but instead the browser page loads with 'Not found'.
I installed the karma-source-map-support module as you suggested, although I infer from your later post that it should not be necessary to install, nor to modify karma.conf.js at all starting with @angular/cli version 1.2.3. Shouldn't I be able to successfully link to the code that is in error by following that link with the "weird path"? Did I understand you correctly @filipesilva ? Thank you for any clarification or guidance.
jgreene-cwt
on 16 Aug 2017
I'm unsure whether what you've discovered is a separate issue or not.
The original issue was opened because the output would not include the name of the component file.
Since you are seeing compute.spec.ts:7:24 you are not experiencing the issue I was originally complaining about.
whyboris
on 17 Aug 2017
In a new project generated with Angular CLI 1.4.2 I can't debug the TypeScript files in Firefox.
Firefox does not let me set breakpoints in the ts-files...
I tested in Firefox Developer Edition 56.0b8 and in Firefox 55.0.3.
jbandi
on 22 Sep 2017
Maybe the issue is not with the Angular CLI but rather with Firefox.
With Angular CLI 1.4.4 I can successfully set breakpoints and debug TypeScript sources in Chrome, Safari and Edge. Only Firefox does not allow me to set breakpoints.
Still, with Angular CLI 1.0.6 it is working in all browsers including Firefox.
jbandi
on 2 Oct 2017
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
_This action has been performed automatically by a bot._
![angular-automatic-lock-bot[bot] picture](https://avatars0.githubusercontent.com/in/40213?v=4&s=40)
angular-automatic-lock-bot[bot]
on 7 Sep 2019
Related issues
ericel
·
3Comments
purushottamjha
·
3Comments
naveedahmed1
·
3Comments
brtnshrdr
·
3Comments
5amfung
·
3Comments
Most helpful comment
Issue reproduced with a clean-install using command
ng new cli106:https://github.com/whyboris/cli106
Generated using globally-installed
@angular/[email protected]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:
notice the
app.component.spec.tswhile the45:30is not the correct location of the error, at least the file where the error occurred is easily seen.Now change the
package.jsondevDependency from"@angular/cli": "1.0.6",to"@angular/cli": "1.1.0",and runnpm installand runng test1.1.0 error log:
Notice that the stack trace no longer includes
app.component.spec.ts