为什么我的" npm测试"使用我的Angular2项目?

时间:2016-09-22 15:55:14

标签: javascript angular npm jasmine karma-runner

摘要

在观察我的文件进行更改时,我无法在Angular2项目上运行我的茉莉花测试。我发现了一个似乎有用的黑客但希望得到官方的#34;方法正常工作。

问题

我正在处理Angular2(版本2.0.0)文档示例,目前正在进行有关测试的部分。我想拥有自己的工作代码来与本地玩,而不是仅仅使用他们提供的Plunker。因此,我已经下载并合并了Angular2网站提供的Plunker代码(其中没有,例如package.json,因此需要一些合并)与"标准" Angular2 Quickstart github代码中的文件。我可以使用npm start让应用程序正常工作(所以我知道我的代码不是,比如说,基本上格式错误或缺少部分)。但是,我无法让测试工作。

问题似乎在于让观看的打字稿编辑与业力正确协调。测试使用单个运行,即npm run test-once,根据package.json,调用tsc && karma start karma.conf.js --single-run。但是,将karma与监视文件一起使用不起作用,即npm run test或仅npm test调用tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"

某些相关代码(我认为)和输出/错误

我试着在这里提供一些似乎相关的代码,但只要明白,据我所知,我只是使用直接官方的Angular2文档代码。

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
  }
}

输出,当我使用npm run test(或等效地,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

输出,没有错误,使用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)

进一步说明

  • 它必须搜索几个端口以找到一个未使用的端口这一事实似乎并不相关,因为我可以在tsconfig.json内更改所需的端口,结果是相同的。
  • 请注意,输出中途有错误,我得到两行: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)。我不知道这个的重要性,但看起来很奇怪。
  • 我已经针对包括Delaying execution, these browsers are not readyTypeError: Cannot read property ... of null在内的部分错误消息进行了Google搜索(包括通过StackOverflow / StackExchange)。我遇到过一些讨论(包括一些很长的讨论),但没有明显的解决方案。
  • 大多数个别工具似乎都能正常工作。即tsctsc -w./node_modules/concurrently/src/main.js "echo hello" "echo world"karma start(如前所述)

一个看起来适合我的黑客

我找到了一个适合我的解决方案。我会在这里展示它,以便如果其他人遇到同样的问题,至少有一种方法可以(有点)解决它。但是,如果有人可以为我提供真正的解决方案,那就更好了。

我的解决方案是让计算机观看文件,但是在应用程序运行时这样做,而不是专用于测试的方式。因此,在一个终端窗口(我在Mac上工作),我将运行npm start运行应用程序并继续观看文件。然后,在另一个终端窗口中,我将运行karma start(或karma start karma.conf.js)。每次我更改文件时,应用程序都会重新启动,这反过来会让业力重新运行我的测试。

但是,这个黑客并不能解释为什么npm run test无法正常工作。此外,上述黑客确实似乎失败了,比如,每十个文件更改一次。也许这对TDD来说是正常的,我不确定,但不必重新启动所有内容会很好。

那么,我怎样才能让npm test工作?

1 个答案:

答案 0 :(得分:2)

我遇到了这个问题,我认为它来自karma-htmlfile-reporter,我到处搜索,找出原因,但我无法理解为什么。

'html'删除reporters并从htmlReporter文件中删除karma.conf.js条目,停用html报告。

然后一切都应该正常。

但是如果您需要html文件报告,我不知道如何在启用此模块的情况下解决此问题。您仍然可以在| test-result.log的{​​{1}}条目末尾添加test来获取报告。