Question

我设法通过以下设置达到了概念验证工作应用程序

ASP.NET Core + Angular 2 rc4

应用程序运行正常，所有Angular 2位都正常工作。

我已经添加了Karma + Jasmine，以便在编写任何严肃的商业代码之前开始使用Angular 2的TDD，即

http://blog.rangle.io/testing-angular-2-applications/

我的问题是Karma + Jasmine（+ PhantomJS）。

当我在不使用Angular 2东西的情况下在TypeScript中编写测试时，Karma + Jasmine工作正常，在控制台上我得到了通过或失败测试的列表。

但是，我最近为使用服务的Angular 2组件编写了单元测试。在单元测试中，我模拟了服务。

Karma + Jasmine + PhantomJS输出到控制台现在是

INFO [karma]：Karma v1.1.2服务器始于......

INFO [launcher]：启动具有无限并发性的浏览器PhantomJS

INFO [launcher]：启动浏览器PhantomJS

INFO [PhantomJS 2.1.1（Windows 7 0.0.0）]：连接套接字

PhantomJS 2.1.1（Windows 7 0.0.0）错误 ReferenceError：无法找到变量：require 在wwwroot / js / tests / quote / quote.component.spec.js：2

当我查看转换后的代码以获得一个非常小的单元测试版本时，我只是尝试让Angular 2注册提供程序以创建模拟而不是其他

"use strict";
var testing_1 = require("@angular/core/testing");
var quote_service_ts_1 = require("../../app/quote/quote.service.ts");
var MockQuoteService = (function () {
    function MockQuoteService() {
        this.quote = "Quote from the mocked test QuoteService";
    }
    MockQuoteService.prototype.getQuote = function () {
        return this.quote;
    };
    return MockQuoteService;
}());
describe("Test Quote Component", function () {
    var builder;
    beforeEach(function () {
        testing_1.addProviders([
            { QuoteService: quote_service_ts_1.QuoteService, useClass: MockQuoteService },
        ]);
    });

    it("should pass", function () { return expect(false).toEqual(false); });
    it("should fail", function () { return expect(false).toEqual(true); });
});

我看到PhantomJS卡在哪里

var testing_1 = require("@angular/core/testing");

我的tsconfig。

{
"compileOnSave": false,
"compilerOptions": {
    "noImplicitAny": true,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "outDir": "./wwwroot/js"       
},
"exclude": [
    "node_modules",
    "wwwroot",
    "typings",
    "typings/globals",
    "typings/modules",
    "typings/index.d.ts"
]

}

我指示TypeScript转换为ES5，我认为这就是为什么上面的单元测试在Angular 2进入图片时使用 require 对象的原因。单元测试的打字稿如下。

 import {
    inject,
    // async,
    addProviders,
    // fakeAsync,
    // tick,
    ComponentFixture,
    TestComponentBuilder,
} from "@angular/core/testing";
import {QuoteComponent} from "../../app/quote/quote.component.ts";
import {QuoteService} from "../../app/quote/quote.service.ts";

class MockQuoteService {

    public quote: string = "Quote from the mocked test QuoteService";

    public getQuote() {
        return this.quote;
    }
}

describe("Test Quote Component", function () {

    let builder: TestComponentBuilder;

    beforeEach(() => {
        addProviders([
            { QuoteService, useClass: MockQuoteService },
        ]);
    });
it("should pass",
        () => expect(false).toEqual(false)
    );

    it("should fail",
        () => expect(false).toEqual(true)
    );

});

这是我的karma.conf.js

// Karma configuration
// Generated on Thu Aug 04 2016 15:44:51 GMT+0100 (GMT Daylight Time)

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],


    // list of files / patterns to load in the browser
    files: [
     "wwwroot/js/tests/**/*.js"
    ],


    // list of files to exclude
    exclude: [
      '**/*.swp'
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    //browsers: ['Chrome'],
    browsers: ['PhantomJS'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

PhantomJS找不到要求 - 好吧我明白了。

如何通过Karma告诉PhantomJS在哪里找到＆＃34;要求＆＃34;？

我应该安装类似

的东西

果报requirejs

然后按照

之类的内容

https://karma-runner.github.io/0.13/plus/requirejs.html？

我说得对吗？

我是否在正确的道路上让Angular 2 RC4与Karma + Jasmine + PhantomJS（或其他浏览器）和TDD一起使用？

上面的单元测试是否转换为引用所需的JavaScript？

坦率地说，我对整个事情应该如何正确设置和协同工作感到有点困惑，因为我没有一个明确的配方可供我复制。我一步一步地试错，并试着找出一些事情，因为我一步一步地使用尽可能少的工作来完成工作。

最后一件事。假设告诉PhantomJS在哪里找到requirejs是可以的，我怀疑karma.config.js应该变成类似于以下

// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine', 'requirejs'],


// list of files / patterns to load in the browser
files: [
 ....some angular 2 references from the node_modules\@angular ????
 "wwwroot/js/tests/**/*.js"
],

这是正确的吗？

我需要什么对node_modules \ @angular的引用（Angualr 2 rc4）？

非常感谢

ReferenceError：无法找到变量：require - Angular 2 RC4 + Karma + Jasmine + PhantomJS，

0 个答案: