为什么我的单元测试通过了Chrome而失败了PhantomJS？

Question

我正在使用Angular2 final（2.0.2）和angular cli。我正在尝试将其设置为使用PhantomJS运行单元测试。使用Chrome和karma Chrome launcher运行规范-所有测试都通过。在Phantomjs预构建2.1中运行相同的功能。13和karma phantomjs launcher 1.0。2次测试失败。

我添加了phantomjs启动器到插件数组中karma.conf，以及浏览器数组中的PahntomJS。

我得到的错误是：

幻影JS2.1。1（Mac OS X 0.0.0）DataTableFormat应以毫秒为单位转换日期失败引用错误：在src/main/js/test中找不到变量：Intl。ts（第53565行）intlDateFormat@webpack：///Users/sninio/dev/csp ui/~/@angular/common/src/facade/intl.js:117:0

也许我在测试中遗漏了一些配置。由angular cli创建的ts文件？

更新：似乎只有导入DatePipe和JsonPipe失败的测试
我还尝试在测试中导入@angular/common/testing。ts但这没有帮助-它们不会导出到相关索引中。js
还尝试导入整个@angular/common/pipes，但也不起作用。

这里是管道：

import { Pipe, PipeTransform } from "@angular/core";
import { DatePipe, JsonPipe } from "@angular/common";

@Pipe({name: 'dataTableFormat'})
export class DataTablePipe implements PipeTransform {

    // values with type 'json' are parsed to json. As a result, string values may be displayed with quotes ("<string>").
    // To avoid that, we remove these quotes with this regex
    private quotesExp: RegExp = /^\"|\"$/gi;

    constructor(private datePipe: DatePipe, private jsonPipe: JsonPipe) {

    }

    transform(value: any, type: string): string {
        switch (type) {
            case "date":
                return this.datePipe.transform(value, 'short');
            case "json":
                return this.jsonPipe.transform(value).replace(this.quotesExp, "");
            default:
                return value;
        }
    }
}

和规格：

import { inject, TestBed } from "@angular/core/testing";
import { DataTablePipe } from "./data-table.pipe";
import { DatePipe, JsonPipe } from "@angular/common";

describe('DataTableFormat', () => {

    beforeEach(() => {
        TestBed.configureTestingModule({
            providers: [
                DatePipe, JsonPipe
            ]
        });

    });

    it('should transform date in milliseconds', inject([DatePipe, JsonPipe], (datePipe, jsonPipe) => {
        let pipe = new DataTablePipe(datePipe, jsonPipe);
        let testDate: Date = new Date();

        expect(pipe.transform(testDate.getTime(), 'date')).toBe(datePipe.transform(testDate, 'short'));
    }));

    it('should transform date string', inject([DatePipe, JsonPipe], (datePipe, jsonPipe) => {
        let pipe = new DataTablePipe(datePipe, jsonPipe);
        let testDate: Date = new Date();

        expect(pipe.transform(testDate.toISOString(), 'date')).toBe(datePipe.transform(testDate, 'short'));
    }));

    it('should transform json', inject([DatePipe, JsonPipe], (datePipe, jsonPipe) => {
        let pipe = new DataTablePipe(datePipe, jsonPipe);
        let testJson = {
            prop1: "val1",
            prop2: "val2"
        };

        expect(pipe.transform(testJson, 'json')).toBe(jsonPipe.transform(testJson));
    }));

});

这是我的测试。ts文件-与由angular cli生成的文件相比没有太大变化。。。

import "./polyfills.ts";
import "zone.js/dist/long-stack-trace-zone";
import "zone.js/dist/proxy.js";
import "zone.js/dist/sync-test";
import "zone.js/dist/jasmine-patch";
import "zone.js/dist/async-test";
import "zone.js/dist/fake-async-test";


// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
declare var __karma__: any;
declare var require: any;

// Prevent Karma from running prematurely.
__karma__.loaded = function () {
};

//noinspection TypeScriptUnresolvedVariable
Promise.all([
    System.import('@angular/core/testing'),
    System.import('@angular/platform-browser-dynamic/testing'),
    System.import('../../../node_modules/nvd3/build/nv.d3.min.js'),
])
// First, initialize the Angular testing environment.
    .then(([testing, testingBrowser]) => {
        testing.getTestBed().initTestEnvironment(
            testingBrowser.BrowserDynamicTestingModule,
            testingBrowser.platformBrowserDynamicTesting()
        );
    })
    // Then we find all the tests.
    .then(() => require.context('./', true, /\.spec\.ts/))
    // And load the modules.
    .then(context => context.keys().map(context))
    // Finally, start Karma to run the tests.
    .then(__karma__.start, __karma__.error);

你知道为什么这适用于Chrome而不是PhantomJS吗？




Answer 1

Intl实现在Angular中可用，但在PhantomJS中不可用。要使其可用于多边形填充，请执行以下步骤：

>

Install Intl:npm Install Intl--保存

将以下导入添加到多边形填充。ts文件：

导入intl；导入intl/locale-data/jsonp/en.js；

Answer 2

现在您在所有浏览器中都支持Intl。polyfill.io是一个漂亮的服务，只有当请求的浏览器实际需要时，才会加载多边形填充。这是一个非常好的解决方案，但是如果您希望您的多边形填充与您的脚本捆绑在一起呢？你有可能获得更好的性能，而且你的应用程序不依赖于第三方CDN，如果它崩溃了，你的应用程序也会随之崩溃。那么下一个选择是什么？

用Angular CLI其实很简单。首先，我们将使用npm来直接将Intl的多功能填料安装到我们的Angular应用程序中。要执行此操作，请运行npm安装intl--保存。在Angular CLI项目中安装后，转到 /src/polyfills.ts文件。在这里您可以添加以下行。

import 'intl';
import 'intl/locale-data/jsonp/en.js';

就这样！现在，当您的项目构建时，它将添加Intl polyfill和英语语言服务。您可以通过导入更多语言文件来添加更多语言支持。现在这样做的缺点是，即使浏览器支持Intl，它仍然需要下载代码。您可以使用功能检测和动态加载来缓解这一问题。polyfilling最重要的一点是，随着浏览器对Intl的支持越来越好，我们将能够一起消除依赖关系！

Answer 3

由于PhantomJS没有实现Intl实现角度2所依赖的，因此解决方案是安装npm包Intl polyfill并编辑polyfill。ts包括

import 'intl';
import 'intl/locale-data/jsonp/en.js';

请看这里：https://github.com/angular/angular/issues/3333
在这里：https://github.com/angular/angular/issues/10809
在这里：https://coryrylan.com/blog/adding-the-internationalization-polyfill-to-a-angular-cli-project