1

我有我想测试的示例组件。当我使用自定义管道（例如我的自定义管道concat）时，它工作正常。

import { ConcatPipe } from 'path-to-concat-pipe';

@Component({
  selector: 'test',
  template: '{{ testProp | concat }}'
})
class TestComp {
  public testProp: Array = [2017, 2018];
}

但是当我尝试使用内置管道（例如number）时，我的测试失败了，没有任何信息性错误消息。

@Component({
  selector: 'test',
  template: '{{ testProp | number }}'
})
class TestComp {
  public testProp: number = 2017;
}

示例规格代码

describe('TestComp', () => {
    let comp: TestComp;
  let fixture: ComponentFixture<TestComp>;

  beforeEach(async(() => {
    TestBed
    .configureTestingModule({
      declarations: [TestComp, ConcatPipe],

    })
    .compileComponents()
    .then(() => {
          fixture = TestBed.createComponent(TestComp);        
          fixture.detectChanges();
    })
    }));

  it('TestComp successfully initialized', () => {
    expect(fixture.componentInstance).toBeDefined()
  });
});

另外，我尝试从“@angular/common”导入 DecimalPipe 并将其添加到声明数组中，但会导致错误

DecimalPipe 类型是 2 个模块声明的一部分：CommonModule 和 DynamicTestModule！

我正在使用 Angular 2.0 发行版。

UPD

在提供的plunker @yurzui中测试工作正常，但在我的项目中失败。我想问题可能与我的业力配置文件有关

业力.shim.js

'use strict';

Error.stackTraceLimit = Infinity;
require('es6-shim');
require('reflect-metadata');
require('zone.js/dist/zone');;
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');
require('zone.js/dist/sync-test');
require('zone.js/dist/proxy');
require('zone.js/dist/jasmine-patch');
require('@angular/core/testing');

var appContext = require.context('./src', true, /root.spec.ts/);

var testing = require('@angular/core/testing');
var browser = require('@angular/platform-browser-dynamic/testing');



testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());

业力.conf.js

'use strict';

var webpackConfig = require('./webpack.config');

module.exports = function (config) {
    var _config = {
        basePath: '',

        frameworks: ['jasmine'],

        files: [
            {pattern: './karma-shim.js', watched: false},
            {pattern: './src/app/**/*spec.ts', watched: true, included: false}
        ],

        exclude: [],

        preprocessors: {
            './karma-shim.js': ['webpack', 'sourcemap']
        },

        webpack: webpackConfig,

        webpackMiddleware: {
            stats: 'errors-only'
        },

        coverageReporter: {
            dir: 'coverage/',
            reporters: [
                {type: 'text-summary'},
                {type: 'html'}
            ]
        },

        browserNoActivityTimeout : 100000,

        webpackServer: {
            noInfo: true
        },

        reporters: ['story', 'coverage', 'progress'],

        port: 9876,

        colors: true,

        logLevel: config.LOG_DEBUG,

        autoWatch: false,

        browsers: ['PhantomJS'], 

        singleRun: true,
    };

    config.set(_config);

};
4

2 回答 2

3

根据文档https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html#!#q-what-to-declare

我应该在声明中添加哪些类？

将可声明的类（组件、指令和管道）添加到声明列表中。

这些类必须在应用程序的一个模块中声明。如果它们属于此模块，则在此模块中声明它们。

所以你应该导入CommonModule而不是推DecimalPipe送到声明数组：

TestBed.configureTestingModule({
       imports: [CommonModule],
于 2017-02-06T18:02:57.607 回答
0

我找到了解决方案。在 PhantomJS 浏览器上测试失败，但在 Chrome 上有效。对于 angular-cli 生成的项目，同样的问题是可重现的。

为了获得在 PhantomJS 上工作的 Angular 2 内置管道测试，应将 2 行代码添加到

karma.shim.js如果您使用的是generator-ng2-webpack。

require('intl');
require('intl/locale-data/jsonp/en');

或者

src/polyfills.ts在您使用angular-cli的情况下。

import 'intl';
import 'intl/locale-data/jsonp/en';
于 2017-02-09T14:14:31.297 回答