如何用摩卡测试Angular 2?
这几天来我一直在拼命想这个问题,但我哪儿也去不了。。我正试图用Mocha测试我的Angular 2应用程序(如果有必要的话,基于SystemJS),但我不知道如何获取控制器实例 我正在尝试我能想到的最简单的案例如何用摩卡测试Angular 2?,angular,unit-testing,mocha.js,systemjs,Angular,Unit Testing,Mocha.js,Systemjs,这几天来我一直在拼命想这个问题,但我哪儿也去不了。。我正试图用Mocha测试我的Angular 2应用程序(如果有必要的话,基于SystemJS),但我不知道如何获取控制器实例 我正在尝试我能想到的最简单的案例 import {bootstrap} from 'angular2/platform/browser'; import {App} from '../app/app'; import {Type} from 'angular2/core'; describe('Login', () =
import {bootstrap} from 'angular2/platform/browser';
import {App} from '../app/app';
import {Type} from 'angular2/core';
describe('Login', () => {
let app:App;
beforeEach((done) => {
console.log(bootstrap);
bootstrap(<Type>App)
.then(result => result.instance)
.then(instance => {
app = instance;
done();
});
});
it('Test for App to Exist', (done) => {
console.log(app);
done();
});
});
如我所料,记录一个未定义的
。有没有人能让这样的东西发挥作用?这里的目标是对控制器进行单元测试,所以我非常努力地避免使用phantomJS/webdriver/等等。我认为mocha不能直接使用,因为它只在节点上运行(在服务器端渲染HTML字符串时,可能使用Angular2 universal)。也就是说,你可以在背景中使用摩卡咖啡和browserify。我正在为该设置编写一个
然后,测试可以如下所示:
// import everything needed for to run Angular (we're running in PhantomJS by defualt but other browsers are possible too)
import "es6-shim";
import "es6-promise";
import "zone.js";
import "rxjs";
import "reflect-metadata";
import "../../typings/browser.d.ts";
import {Injector, enableProdMode} from "angular2/core";
import {HTTP_PROVIDERS} from "angular2/http";
// import stuff we need to instantiate component
import GithubComponent from "./gihub-component";
import GithubService from "./github-service";
import Config from "../config";
import * as sinon from "sinon";
enableProdMode();
describe("github-component", () => {
let injector: Injector;
let component: any;
let service: any;
beforeEach(() => {
// instantiate Angular 2 DI context
injector = Injector.resolveAndCreate([
HTTP_PROVIDERS,
GithubComponent,
GithubService,
Config
]);
component = injector.get(GithubComponent);
service = injector.get(GithubService);
sinon.spy(service, "getRepos");
});
afterEach(() => {
service.getRepos.restore();
});
it("searches for repository", () => {
component.query.updateValue("test");
return setTimeout(() => {
sinon.assert.calledOnce(service.getRepos);
sinon.assert.calledWith(service.getRepos, "test");
}, 300);
});
});
// import everything needed for to run Angular (we're running in PhantomJS by defualt but other browsers are possible too)
import "es6-shim";
import "es6-promise";
import "zone.js";
import "rxjs";
import "reflect-metadata";
import "../../typings/browser.d.ts";
import {Injector, enableProdMode} from "angular2/core";
import {HTTP_PROVIDERS} from "angular2/http";
// import stuff we need to instantiate component
import GithubComponent from "./gihub-component";
import GithubService from "./github-service";
import Config from "../config";
import * as sinon from "sinon";
enableProdMode();
describe("github-component", () => {
let injector: Injector;
let component: any;
let service: any;
beforeEach(() => {
// instantiate Angular 2 DI context
injector = Injector.resolveAndCreate([
HTTP_PROVIDERS,
GithubComponent,
GithubService,
Config
]);
component = injector.get(GithubComponent);
service = injector.get(GithubService);
sinon.spy(service, "getRepos");
});
afterEach(() => {
service.getRepos.restore();
});
it("searches for repository", () => {
component.query.updateValue("test");
return setTimeout(() => {
sinon.assert.calledOnce(service.getRepos);
sinon.assert.calledWith(service.getRepos, "test");
}, 300);
});
});