Warum funktioniert mein "npm-Test" nicht mit meinem Angular2-Projekt?

Question

Zusammenfassung

ich nicht Karma meine Dateien für meine Jasmin-Tests auf einem Angular2 Projekt auszuführen, während Sie Änderungen bekommen. Ich habe einen Hack gefunden, der zu funktionieren scheint, möchte aber die "offizielle" Methode richtig funktionieren lassen.

Das Problem

Ich arbeite durch die Angular2 (Version 2.0.0) Dokumentation Beispiele und ist zur Zeit durch den Abschnitt über die Prüfung gehen. Ich möchte einen eigenen Arbeitscode haben, um lokal zu spielen, anstatt nur an dem Plunker zu arbeiten, den sie bereitstellen. Daher habe ich den Plunker-Code, der von der Angular2-Website bereitgestellt wurde (die z. B. package.json nicht enthält und daher zusammengeführt werden muss), mit den Standarddateien im Angular2-Quickstart-github-Code heruntergeladen und zusammengeführt. Ich kann die App unter Verwendung npm start arbeiten (so weiß ich, dass mein Code nicht, sagen wir, grundsätzlich schlecht formatiert oder fehlende Teile). Allerdings kann ich die Tests nicht zum Laufen bringen.

Das Problem scheint damit zu kommen, dass die beobachtete Typoskript-Kompilierung richtig mit Karma koordiniert wird. Das Testen arbeitet mit einem einzelnen Durchlauf, d. H. npm run test-once, der gemäß package.json tsc && karma start karma.conf.js --single-run aufruft. Das Verwenden von Karma mit überwachten Dateien funktioniert jedoch nicht, d. H. npm run test oder nur npm test, das tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\" aufruft.

einige relevante Kodex (glaube ich) und Ausgang/Fehler

Ich werde versuchen, hier einen Teil des Codes zu schaffen, die relevant erscheint, aber nur zu verstehen, dass, soweit ich sagen kann, ich bin Verwenden Sie einfach den offiziellen offiziellen Angular2-Dokumentationscode.

package.json:

{ 
    ... 
    "scripts": { 
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ", 
    ... 
    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"", 
    "test-once": "tsc && karma start karma.conf.js --single-run", 
    ... 
    }, 
    ... 
    "dependencies": { 
    "@angular/common": "2.0.0", 
    "@angular/compiler": "2.0.0", 
    "@angular/core": "2.0.0", 
    "@angular/forms": "2.0.0", 
    "@angular/http": "2.0.0", 
    "@angular/platform-browser": "2.0.0", 
    "@angular/platform-browser-dynamic": "2.0.0", 
    "@angular/router": "3.0.0", 
    "@angular/upgrade": "2.0.0", 
    "systemjs": "0.19.27", 
    "core-js": "^2.4.1", 
    "reflect-metadata": "^0.1.3", 
    "rxjs": "5.0.0-beta.12", 
    "zone.js": "^0.6.23", 
    "angular2-in-memory-web-api": "0.0.20", 
    "bootstrap": "^3.3.6" 
    }, 
    "devDependencies": { 
    "concurrently": "^2.2.0", 
    "lite-server": "^2.2.0", 
    "typescript": "^2.0.2", 
    "typings": "^1.0.4", 
    "canonical-path": "0.0.2", 
    "http-server": "^0.9.0", 
    "tslint": "^3.7.4", 
    "lodash": "^4.11.1", 
    "jasmine-core": "~2.4.1", 
    "karma": "^1.2.0", 
    "karma-chrome-launcher": "^0.2.3", 
    "karma-cli": "^0.1.2", 
    "karma-htmlfile-reporter": "^0.2.2", 
    "karma-jasmine": "^0.3.8", 
    "protractor": "^3.3.0", 
    "rimraf": "^2.5.2" 
    }, 
    ... 
} 

tsconfig.json:

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": true, 
    "suppressImplicitAnyIndexErrors": true 
    } 
} 

Ausgang, mit Fehlern, wenn ich npm run test (oder, äquivalent, npm test):

| ==> npm test 

> angular2-quickstart@1.0.0 test /path/to/proj 
> tsc && concurrently "tsc -w" "karma start karma.conf.js" 

[1] 22 09 2016 11:19:09.622:WARN [watcher]: Pattern "/path/to/proj/testing/**/*.js" does not match any file. 
[1] 22 09 2016 11:19:09.655:WARN [watcher]: Pattern "/path/to/proj/testing/**/*.ts" does not match any file. 
[1] 22 09 2016 11:19:09.656:WARN [watcher]: Pattern "/path/to/proj/testing/**/*.js.map" does not match any file. 
[1] 22 09 2016 11:19:10.040:WARN [karma]: No captured browser, open http://localhost:9876/ 
[1] 22 09 2016 11:19:10.063:WARN [karma]: Port 9876 in use 
[1] 22 09 2016 11:19:10.063:WARN [karma]: Port 9877 in use 
[1] 22 09 2016 11:19:10.063:WARN [karma]: Port 9878 in use 
[1] 22 09 2016 11:19:10.063:WARN [karma]: Port 9879 in use 
[1] 22 09 2016 11:19:10.064:INFO [karma]: Karma v1.3.0 server started at http://localhost:9880/ 
[1] 22 09 2016 11:19:10.064:INFO [launcher]: Launching browser Chrome with unlimited concurrency 
[1] 22 09 2016 11:19:10.100:INFO [launcher]: Starting browser Chrome 
[1] 22 09 2016 11:19:11.030:INFO [Chrome 53.0.2785 (Mac OS X 10.11.6)]: Connected on socket /#Qadj2c9N0RBUEQHYAAAA with id 20369349 
    Chrome 53.0.2785 (Mac OS X 10.11.6): Executed 6 of 6 SUCCESS (0.272 secs/0.257 secs) 
[1] 22 09 2016 11:19:12.187:INFO [watcher]: Changed file "/path/to/proj/app/model/hero.service.js". 
[1] 22 09 2016 11:19:12.205:INFO [watcher]: Changed file "/path/to/proj/app/model/hero.js". 
[1] 22 09 2016 11:19:12.231:INFO [watcher]: Changed file "/path/to/proj/app/model/http-hero.service.js". 
[1] 22 09 2016 11:19:12.251:INFO [watcher]: Changed file "/path/to/proj/app/model/test-heroes.js". 
[1] 22 09 2016 11:19:12.269:INFO [watcher]: Changed file "/path/to/proj/app/shared/twain.service.js". 
[0] 11:19:12 AM - Compilation complete. Watching for file changes. 
[1] 22 09 2016 11:19:12.337:INFO [watcher]: Changed file "/path/to/proj/app/1st.spec.js". 
[1] 22 09 2016 11:19:12.351:INFO [watcher]: Changed file "/path/to/proj/app/about.component.js". 
...many more similar lines for seemingly all project files... 
[1] 22 09 2016 11:19:12.670:INFO [watcher]: Changed file "/path/to/proj/app/shared/highlight.directive.js". 
[1] 22 09 2016 11:19:12.683:INFO [watcher]: Changed file "/path/to/proj/app/shared/title-case.pipe.js". 
[1] 22 09 2016 11:19:12.744:INFO [karma]: Delaying execution, these browsers are not ready: Chrome 53.0.2785 (Mac OS X 10.11.6) 
    Chrome 53.0.2785 (Mac OS X 10.11.6): Executed 6 of 6 SUCCESS (0.211 secs/0.2 secs) 
[1] Chrome 53.0.2785 (Mac OS X 10.11.6): Executed 0 of 6 SUCCESS (0 secs/0 secs) 
[1] Missing error handler on `socket`. 
[1] TypeError: Cannot set property '20369349' of null 
[1]  at createHtmlResults (/path/to/proj/node_modules/karma-htmlfile-reporter/index.js:57:32) 
[1]  at initializeHtmlForBrowser (/path/to/proj/node_modules/karma-htmlfile-reporter/index.js:78:5) 
[1]  at onBrowserStart (/path/to/proj/node_modules/karma-htmlfile-reporter/index.js:91:5) 
[1]  at null.<anonymous> (/path/to/proj/node_modules/karma/lib/events.js:13:22) 
[1]  at emitTwo (events.js:105:20) 
[1]  at emit (events.js:185:7) 
[1]  at onStart (/path/to/proj/node_modules/karma/lib/browser.js:126:13) 
[1]  at Socket.<anonymous> (/path/to/proj/node_modules/karma/lib/events.js:13:22) 
[1]  at emitOne (events.js:95:20) 
[1]  at Socket.emit (events.js:182:7) 
[1]  at Socket.onevent (/path/to/proj/node_modules/socket.io/lib/socket.js:335:8) 
[1]  at Socket.onpacket (/path/to/proj/node_modules/socket.io/lib/socket.js:295:12) 
[1]  at Client.ondecoded (/path/to/proj/node_modules/socket.io/lib/client.js:193:14) 
[1]  at Decoder.Emitter.emit (/path/to/proj/node_modules/component-emitter/index.js:134:20) 
[1]  at Decoder.add (/path/to/proj/node_modules/socket.io-parser/index.js:247:12) 
[1]  at Client.ondata (/path/to/proj/node_modules/socket.io/lib/client.js:175:18) 
    Chrome 53.0.2785 (Mac OS X 10.11.6) ERROR 
[1] Disconnectedundefined 
    Chrome 53.0.2785 (Mac OS X 10.11.6): Executed 0 of 6 DISCONNECTED (2.008 secs/0 secs) 
[1] 22 09 2016 11:19:15.628:ERROR [karma]: [TypeError: Cannot read property '20369349' of null] 
[1] TypeError: Cannot read property '20369349' of null 
[1]  at onBrowserComplete (/path/to/proj/node_modules/karma-htmlfile-reporter/index.js:95:23) 
[1]  at null.<anonymous> (/path/to/proj/node_modules/karma/lib/events.js:13:22) 
[1]  at emitOne (events.js:95:20) 
[1]  at emit (events.js:182:7) 
[1]  at null._onTimeout (/path/to/proj/node_modules/karma/lib/browser.js:166:17) 
[1]  at Timer.listOnTimeout (timers.js:92:15) 
[1] karma start karma.conf.js exited with code 1 

Ausgang, wobei keine Fehler, mit npm run test-once:

| ==> npm run test-once 

> angular2-quickstart@1.0.0 test-once /Users/AndrewWillems/Documents/Computer/Programming/js/la-learning-angular/ang-web-site/sec04-advd-docmntn/v03/sec14g-testing-starting-w-quickstart 
> tsc && karma start karma.conf.js --single-run 

22 09 2016 11:24:36.021:WARN [watcher]: Pattern "/Users/AndrewWillems/Documents/Computer/Programming/js/la-learning-angular/ang-web-site/sec04-advd-docmntn/v03/sec14g-testing-starting-w-quickstart/testing/**/*.js" does not match any file. 
22 09 2016 11:24:36.052:WARN [watcher]: Pattern "/Users/AndrewWillems/Documents/Computer/Programming/js/la-learning-angular/ang-web-site/sec04-advd-docmntn/v03/sec14g-testing-starting-w-quickstart/testing/**/*.ts" does not match any file. 
22 09 2016 11:24:36.053:WARN [watcher]: Pattern "/Users/AndrewWillems/Documents/Computer/Programming/js/la-learning-angular/ang-web-site/sec04-advd-docmntn/v03/sec14g-testing-starting-w-quickstart/testing/**/*.js.map" does not match any file. 
22 09 2016 11:24:36.422:WARN [karma]: Port 9876 in use 
22 09 2016 11:24:36.423:WARN [karma]: Port 9877 in use 
22 09 2016 11:24:36.423:WARN [karma]: Port 9878 in use 
22 09 2016 11:24:36.423:WARN [karma]: Port 9879 in use 
22 09 2016 11:24:36.424:INFO [karma]: Karma v1.3.0 server started at http://localhost:9880/ 
22 09 2016 11:24:36.424:INFO [launcher]: Launching browser Chrome with unlimited concurrency 
22 09 2016 11:24:36.430:INFO [launcher]: Starting browser Chrome 
22 09 2016 11:24:37.272:INFO [Chrome 53.0.2785 (Mac OS X 10.11.6)]: Connected on socket /#7TxMaq43YrbuDQr-AAAA with id 4862877 
Chrome 53.0.2785 (Mac OS X 10.11.6): Executed 6 of 6 SUCCESS (0.248 secs/0.231 secs) 

Einige Weitere Hinweise

• Die Tatsache, dass es durch mehrere Ports zu suchen hat, einen zu finden, die nicht in Gebrauch ist nicht relevant zu sein scheinen, wie ich den gewünschten Port ändern kann innerhalb tsconfig.json und die Ergebnisse sind die gleichen.
• Beachten Sie, dass die Hälfte der Ausgabe mit Fehlern bekomme ich zwei Zeilen: Chrome 53.0.2785 (Mac OS X 10.11.6): Executed 6 of 6 SUCCESS (0.211 secs/0.2 secs), unmittelbar gefolgt von [1] Chrome 53.0.2785 (Mac OS X 10.11.6): Executed 0 of 6 SUCCESS (0 secs/0 secs). Ich weiß nicht die Bedeutung davon, aber es scheint seltsam.
• Ich habe Google-Suchen (einschließlich StackOverflow/StackExchange) für einige der Fehlermeldungen einschließlich Delaying execution, these browsers are not ready, TypeError: Cannot read property ... of null getan. Ich habe einige Diskussionen (einschließlich einiger langer) gefunden, aber keine offensichtlichen Lösungen.
• Die meisten einzelnen Tools scheinen für sich allein gut zu funktionieren. das heißt tsc, tsc -w, ./node_modules/concurrently/src/main.js "echo hello" "echo world", karma start (wie bereits erwähnt)

Ein Hack, die für mich zu funktionieren scheint

ich einen Hack einer Lösung gefunden zu haben, die für mich funktioniert. Ich werde es hier zeigen, damit, wenn andere auf dasselbe Problem stoßen, es zumindest einen Weg gibt, es (irgendwie) zu umgehen. Allerdings, wenn jemand mir eine echte Lösung zur Verfügung stellen könnte, wäre das so viel besser.

Meine Lösung besteht darin, den Computer die Dateien anzeigen zu lassen, dies jedoch während der Ausführung der App zu tun, nicht so, wie es beim Testen der Fall ist. Also, in einem Terminal-Fenster (ich arbeite an einem Mac), werde ich npm start ausführen, die die App läuft und weiter die Dateien beobachtet. Dann werde ich in einem anderen Terminalfenster einfach karma start (oder karma start karma.conf.js) ausführen. Die App wird jedes Mal neu gestartet, wenn ich eine Datei ändere, und das wiederum erhält Karma, um meine Tests erneut auszuführen.

Dieser Hack erklärt jedoch nicht, warum npm run test nicht funktioniert. Darüber hinaus scheint der obige Hack zu versagen, sagen wir mal, einmal alle zehn Dateiänderungen. Vielleicht ist das normal für TDD, ich bin mir nicht sicher, aber es wäre schön, wenn ich nicht alles neu starten müsste. Wie kann ich npm test zum arbeiten bekommen?

Answer 1

Ich hatte dieses Problem und ich dachte, dass es von karma-htmlfile-reporter kam, ich suchte überall, um zu finden, warum ich diesen Fehler bekam, aber ich konnte nicht warum herausfinden.

die HTML-Reporter Deaktivieren von 'html' von Ihrem reporters und entfernen Sie den htmlReporter Eintrag aus karma.conf.js Datei zu entfernen.

Dann sollte alles gut funktionieren.

Aber wenn Sie eine HTML-Datei Bericht benötigen, weiß ich nicht, wie dieses Problem mit diesem Modul zu beheben. Sie können immer noch einen Bericht erhalten, indem Sie | test-result.log am Ende Ihres test Eintrags in package.json hinzufügen.