Javascript AsyncTestCompleter Browserify Angular2 HTTP模拟测试

我即将开始Angular 2测试，我对Angular 2非常陌生，并且一直在测试

我遵循测试指南：

以下是测试：

import {BaseRequestOptions, Http, Response, BaseResponseOptions, Headers} from '@angular/http';
import {ReflectiveInjector} from '@angular/core';
import {MockBackend} from '@angular/http/testing';
import {inject} from '@angular/core/testing';
import {AsyncTestCompleter} from '@angular/core/testing/async_test_completer';

it('should get some data', inject([AsyncTestCompleter], (async) => {
  var connection;
  var injector = ReflectiveInjector.resolveAndCreate([
    MockBackend,
    {provide: Http, useFactory: (backend, options) => {
      return new Http(backend, options);
    }, deps: [MockBackend, BaseRequestOptions]}]);
  var http = injector.get(Http);
  var backend = injector.get(MockBackend);
  //Assign any newly-created connection to local variable
  backend.connections.subscribe(c => connection = c);
  http.request('data.json').subscribe((res) => {
    expect(res.text()).toBe('awesome');
    async.done();
  });
  var options = new BaseResponseOptions();
  var res = new Response(options.merge({
      body: 'awesome',
         headers: new Headers({framework: 'angular'})
  }));
  connection.mockRespond(res);
}));

问题似乎是：

[1] 10 10 2016 09:11:31.762:ERROR [framework.browserify]: bundle error
[1] 10 10 2016 09:11:31.762:ERROR [framework.browserify]: 
[1] C:\Users\Toby\WebstormProjects\timesheetCrusher\node_modules\@angular\core\testing\async_test_completer.js:11
[1] export var AsyncTestCompleter = (function () {
[1] ^
[1] ParseError: 'import' and 'export' may appear only with 'sourceType: module

"

这是我的package.json：

{
  "name": "TimesheetCrusher",
  "version": "0.0.5",
  "description": "TimesheetCrusher",
  "scripts": {
    "typings-install": "typings install",
    "postinstall": "npm run typings-install",
    "build": "webpack --inline --colors --progress --display-error-details --display-cached",
    "watch": "npm run build -- --watch",
    "server:dev": "webpack-dev-server --progress --profile --colors --display-error-details --display-cached  --content-base src/",
    "server": "webpack-dev-server --inline --colors --progress --display-error-details --display-cached --port 3000  --content-base src",
    "start": "npm run server",
    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "report": "lite-server -c bs-config.report.json",
    "clean": "rimraf public/* ",
    "cleanNodeModules" : "rimraf node_modules/*"
  },
  "contributors": [
    "Rob Wormald <robwormald@gmail.com>",
    "PatrickJS <github@gdi2290.com>"
  ],
  "license": "MIT",
  "devDependencies": {
    "compression-webpack-plugin": "0.3.0",
    "copy-webpack-plugin": "1.1.1",
    "browserify" : "13.1.0",
    "html-webpack-plugin": "2.8.1",
    "awesome-typescript-loader": "1.1.1",
    "webpack-merge": "^0.14.0",
    "css-loader": "0.23.1",
    "es6-promise-loader": "1.0.1",
    "exports-loader": "0.6.2",
    "expose-loader": "0.7.1",
    "file-loader": "0.8.5",
    "http-server": "0.8.5",
    "imports-loader": "0.6.5",
    "json-loader": "0.5.4",
    "postcss-loader" : "0.10.1",
    "karma-browserify" : "5.1.0",
    "ncp": "2.0.0",
    "node-sass": "3.7.0",
    "phantomjs-polyfill": "0.0.1",
    "phantomjs-prebuilt": "2.1.4",
    "raw-loader": "0.5.1",
    "reflect-metadata": "0.1.2",
    "resolve-url-loader": "1.4.3",
    "rimraf": "2.5.1",
    "sass-loader": "3.1.2",
    "source-map-loader": "0.1.5",
    "style-loader": "0.13.0",
    "ts-helper": "0.0.1",
    "ts-loader": "0.8.0",
    "ts-node": "0.5.5",
    "tsconfig-lint": "0.5.0",
    "typedoc": "0.3.12",
    "typings": "1.0.4",
    "url-loader": "0.5.7",
    "webpack": "1.12.13",
    "webpack-dev-server": "1.14.1",
    "webpack-md5-hash": "0.0.4",
    "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",
    "concurrently": "^2.2.0",
    "systemjs": "0.19.27"
  },
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/compiler-cli": "0.5.0",
    "@angular/platform-server": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "typescript": "^1.9.0-dev",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "bootstrap": "4.0.0-alpha.2",
    "bootstrap-loader": "1.0.9",
    "autoprefixer": "6.3.1",
    "ng2-bootstrap": "1.0.16",
    "ng2-page-scroll": "3.1.0",
    "font-awesome": "4.5.0",
    "angular2-template-loader": "^0.4.0",
    "simple-line-icons": "2.3.2",
    "glyphicons-halflings": "1.9.0",
    "core-js": "^2.4.1",
    "ie-shim": "^0.1.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.23",

    "jquery": "2.2.0",
    "tether": "1.1.1"

  },
  "keywords": [
    "Angular2",
    "angular2-seed",
    "official angular 2 seed",
    "official angular2 seed"
  ]
}

因此，browserify似乎在异步测试包方面遇到了问题

Angular 2周围的工具非常庞大，很难在一开始就正确使用。谁能给我指出正确的方向吗

---

非常感谢。

我从未使用过

AsyncTestCompleter

，我也从未见过它在任何地方使用过，除了在角度源测试中。我不知道它是否只是用于内部，但是当我测试时，我得到了一个不同的错误，说没有

AsyncTestCompleter

的提供程序

但是，对于您的测试，您不需要使用它。还有其他处理异步测试的方法。一种选择是只使用

async

import { async } from '@angular/core/testing'

it('...', async(inject([Http], (http) => {
   http.request('data.json').subscribe((res) => {
    expect(res.text()).toBe('awesome');
  });
})));

在这里，我们不需要在任何地方调用

done

。测试被包装在区域中，区域知道所有异步任务，并在结束测试之前等待它们完成

另一个选项是

fakeAsync

，我们可以通过调用

勾选

import { fakeAsync, tick } from '@angular/core';

it('...', fakeAsync(inject([Http], (http) => {
  let data;
  http.request('data.json').subscribe((res) => {
    data = res.text();
  });
  tick();
  expect(res.text()).toBe('awesome');
})));

另一种选择是只使用原生茉莉花

done

。我不知道如何让它与

inject

一起工作，因此您可以像当前在测试台上所做的那样获取

Http

it('...', fakeAsync((done) => {
  http.request('data.json').subscribe((res) => {
    expect(res.text()).toBe('awesome');
    done();
  });
}));

---

这些都在您链接到的文档中进行了解释，在

一节中，我从未使用过

AsyncTestCompleter

，除了在角度源测试中，我从未在任何地方使用过它。我不知道它是否只是用于内部，但是当我测试时，我得到了一个不同的错误，说没有

AsyncTestCompleter

的提供程序

但是，对于您的测试，您不需要使用它。还有其他处理异步测试的方法。一种选择是只使用

async

import { async } from '@angular/core/testing'

it('...', async(inject([Http], (http) => {
   http.request('data.json').subscribe((res) => {
    expect(res.text()).toBe('awesome');
  });
})));

在这里，我们不需要在任何地方调用

done

。测试被包装在区域中，区域知道所有异步任务，并在结束测试之前等待它们完成

另一个选项是

fakeAsync

，我们可以通过调用

勾选

import { fakeAsync, tick } from '@angular/core';

it('...', fakeAsync(inject([Http], (http) => {
  let data;
  http.request('data.json').subscribe((res) => {
    data = res.text();
  });
  tick();
  expect(res.text()).toBe('awesome');
})));

另一种选择是只使用原生茉莉花

done

。我不知道如何让它与

inject

一起工作，因此您可以像当前在测试台上所做的那样获取

Http

it('...', fakeAsync((done) => {
  http.request('data.json').subscribe((res) => {
    expect(res.text()).toBe('awesome');
    done();
  });
}));

---

这些都在您链接的文档中进行了解释，在

一节中，非常感谢您，您的回答让我更接近解决方案。一个问题是我没有调用：TestBed.initTestEnvironment（BrowserDynamicTestingModule，platformBrowserDynamicTesting（））。在我的测试中配置TestingModule。非常感谢，您的回答让我更接近解决方案。一个问题是我没有调用：TestBed.initTestEnvironment（BrowserDynamicTestingModule，platformBrowserDynamicTesting（））.configureTestingModule.it（“…”，async（inject（[Http]，（Http）=>{Http.request（'data.json'）。subscribe（（res）=>{expect（res.text（））.toBe（'awesome'）；}））；与TestBed.initTestEnvironment（BrowserDynamicTestingModule，platformBrowserDynamicTesting（））结合使用效果非常好。配置TestingModule。虽然它只能被调用一次（所以不可能有超过一个测试）。karma-test-shim.js也在调用这些函数。但没有效果。我还没有弄清楚原因。它（“…”，异步（注入（[Http]，（Http）=>{Http.request（'data.json'）。订阅（（res）=>{expect（res.text（））.toBe（'awesome'）；}；}））；与TestBed.initTestEnvironment（BrowserDynamicTestingModule，platformBrowserDynamicTesting（））结合使用效果非常好。配置TestingModule。虽然它只能被调用一次（所以不可能有超过一个测试）。karma-test-shim.js也在调用这些函数。但没有效果。我还不知道为什么。