4

我正在使用 Angular2 final (2.0.2) 和 angular-cli。我正在尝试将其设置为使用 PhantomJS 运行单元测试。使用 Chrome 和 karma-chrome-launcher 运行规范 - 所有测试都通过。使用 Phantomjs-prebuilt 2.1.13 和 karma-phantomjs-launcher 1.0.2 运行相同的测试失败。

我将 phantomjs 启动器添加到 karma.conf 中的 plugins 数组,以及 browsers 数组中的 PahntomJS。

我得到的错误是:

PhantomJS 2.1.1 (Mac OS X 0.0.0) DataTableFormat 应该以毫秒为单位转换日期 FAILED ReferenceError: Can't find variable: Intl in src/main/js/test.ts (line 53565) intlDateFormat@webpack:///Users /sninio/dev/csp-ui/~/@angular/common/src/facade/intl.js:117:0 <- src/main/js/test.ts:53565:20 webpack:///Users/sninio /dev/csp-ui/~/@angular/common/src/facade/intl.js:148:36 <- src/main/js/test.ts:53596:59 dateFormatter@webpack:///Users/sninio /dev/csp-ui/~/@angular/common/src/facade/intl.js:157:0 <- src/main/js/test.ts:53605:39 format@webpack:///Users/sninio /dev/csp-ui/~/@angular/common/src/facade/intl.js:192:0 <- src/main/js/test.ts:53640:29 transform@webpack:///Users/sninio /dev/csp-ui/~/@angular/common/src/pipes/date_pipe.js:92:0 <- src/main/js/test.ts:70473:90 transform@webpack:///Users/sninio/dev/csp-ui/src/main/js/app/pages/+platform/events/data-table/data-table.pipe.ts:9:4418 <- src/main/js/test.ts:52698:5787 webpack:///Users/sninio/dev/csp-ui/src/main/js/app/pages/+platform/events/data-table/data-table .pipe.spec.ts:20:30 <- src/main/js/test.ts:60923:30 execute@webpack:///Users/sninio/dev/csp-ui/~/@angular/core/bundles /core-testing.umd.j <- src/main/js/test.ts:2997:28 webpack:///Users/sninio/dev/csp-ui/~/@angular/core/bundles/core-testing .umd.js:951:32 <- src/main/js/test.ts:3084:56 invoke@webpack:///Users/sninio/dev/csp-ui/~/zone.js/dist/zone。 js:203:0 <- src/main/js/test.ts:98886:33 onInvoke@webpack:///Users/sninio/dev/csp-ui/~/zone.js/dist/proxy.js:72 :0 <- src/main/js/test.ts:68790:45 调用@webpack:///Users/sninio/dev/csp-ui/~/zone.js/dist/zone.js:202:0 <- src/main/js/test.ts:98885:42 运行@ webpack:///Users/sninio/dev/csp-ui/~/zone.js/dist/zone.js:96:0 <- src/main/js/test.ts:98779:49 webpack:///用户/sninio/dev/csp-ui/~/zone.js/dist/jasmine-patch.js:91:27 <- src/main/js/test.ts:68526:53 execute@webpack:///Users /sninio/dev/csp-ui/~/zone.js/dist/jasmine-patch.js:119:0 <- src/main/js/test.ts:68554:46 execute@webpack:///Users/ sninio/dev/csp-ui/~/zone.js/dist/jasmine-patch.js:119:0 <- src/main/js/test.ts:68554:46 invokeTask@webpack:///Users/sninio /dev/csp-ui/~/zone.js/dist/zone.js:236:0 <- src/main/js/test.ts:98919:42 runTask@webpack:///Users/sninio/dev/ csp-ui/~/zone.js/dist/zone.js:136:0 <- src/main/js/test.ts:98819:57 drainMicroTaskQueue@webpack:///Users/sninio/dev/csp-ui/~/zone.js/dist/zone.js:368:0 <- src/main/js/test.ts:99051:42 PhantomJS 2.1 .1 (Mac OS X 0.0.0) DataTableFormat 应该转换日期字符串 FAILED

也许我在 angular-cli 创建的 test.ts 文件中缺少一些配置?

更新: 似乎只有导入失败的测试DatePipeJsonPipe.
我也尝试导入@angular/common/testingtest.ts但这无济于事 - 它们没有在相关的 index.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));
    }));

});

这是我的文件-与...test.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 吗?

4

3 回答 3

12

由于 PhantomJS 没有Intl实现 Angular2 依赖的实现,解决方案是安装 npm 包 intl polyfill 并编辑polyfills.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-国际化-polyfill-to-a-angular-cli-project

于 2016-10-10T10:57:14.730 回答
2

现在您的所有浏览器都支持 Intl。polyfill.io 是一个漂亮的服务,它只会在请求的浏览器确实需要它时才加载 polyfill。这是一个很好的解决方案,但是如果你希望你的 polyfill 与你的脚本捆绑在一起呢?您可能会获得更好的性能,并且您的应用程序不依赖第三方 CDN,如果它发生故障,您的应用程序也会随之关闭。那么下一个选择是什么?

使用 Angular CLI 实际上很容易。首先,我们将使用 npm 将 Intl polyfill 直接安装到我们的 Angular 应用程序中。为此,请运行 npm install intl --save。一旦安装在您的 Angular CLI 项目中,请转到 /src/polyfills.ts 文件。在这里,您可以添加以下行。

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

而已!现在,当您的项目构建时,它将添加 Intl polyfill 和英语语言服务。您可以通过导入更多语言文件来添加更多语言支持。现在这样做的缺点是即使浏览器支持 Intl 它仍然必须下载代码。您可以使用特征检测和动态加载来缓解这种情况。polyfill 最重要的部分是随着浏览器对 Intl 的支持变得更好,我们将能够一起放弃依赖!

于 2017-01-30T12:20:07.957 回答
0

Intl 实现在 Angular 中可用,在 PhantomJS 中不可用。要使其与 polyfill 一起使用,请执行以下步骤:

  1. 安装国际:npm install intl --save
  2. 将以下导入添加到 polyfills.ts 文件中:

    进口'国际'; 导入'intl/locale-data/jsonp/en.js';

于 2019-09-10T11:33:01.817 回答