如何使用 Mocha 测试 Angular 2？答案

【问题标题】：How does one test Angular 2 with Mocha?如何使用 Mocha 测试 Angular 2？
【发布时间】：2016-04-22 02:36:44
【问题描述】：

几天来我一直在努力解决这个问题，但就是无处可去。我正在尝试使用 Mocha 来测试我的 Angular 2 应用程序（如果重要，则基于 SystemJS），我只是不知道如何获取控制器实例。

我正在尝试我能想到的最简单的情况；

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();
    });
});

据我所知，console.log(bootstrap) 以某种方式失败了，因为我的 gulp-mocha 任务（默默地）死了。注释掉引导引用以进行虚拟测试；

import {bootstrap} from 'angular2/platform/browser';
import {App} from '../app/app';
import {Type} from 'angular2/core';

describe('Login', () => {
    let app:App;

    beforeEach((done) => {
        done();
    });

    it('Test for App to Exist', (done) => {
        console.log(app);
        done();
    });
});

按照我的预期记录undefined。有没有人设法让这样的事情起作用？这里的目标是对控制器进行单元测试，所以我非常努力地避免 phantomJS/webdriver/etc。

【问题讨论】：

标签： angular unit-testing mocha.js systemjs

【解决方案1】：

我认为 mocha 不能直接使用，因为它仅在节点上运行（当您仅在服务器端呈现 HTML 字符串时，也许使用 Angular2 通用）。话虽如此，您可以使用mochify，它是 mocha 和 browserify 在后台使用。我正在为该设置使用example project。

然后测试可能看起来像这样：

// 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);
    });

});

【讨论】：