Встроенные трубы вызывают сбои при модульном тестировании компонента Angular 2

У меня есть образец компонента, который я хотел бы протестировать. Когда я использую пользовательский канал (например, мой пользовательский канал 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()
  });
});

Кроме того, я попытался импортировать DecimalPipe из '@angular/common' и добавить его в массив объявлений, но это вызывает ошибку

Тип DecimalPipe является частью объявлений двух модулей: CommonModule и DynamicTestModule!

Я использую угловую версию версии 2.0.

UPD

Тест отлично работает в предоставленном plunker @yurzui, но не работает в моем проекте. Я предполагаю, что проблема может быть связана с моими файлами конфигурации кармы

karma.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);

};

person styopdev    schedule 06.02.2017    source источник


Ответы (2)


Согласно документации https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html#!#q-what-to-declare

Какие классы следует добавить в объявления?

Добавьте объявляемые классы — компоненты, директивы и каналы — в список объявлений.

Эти классы должны быть объявлены ровно в одном модуле приложения. Объявите их в этом модуле, если они принадлежат этому модулю.

Таким образом, вы должны импортировать CommonModule вместо того, чтобы помещать DecimalPipe в массив объявлений:

TestBed.configureTestingModule({
       imports: [CommonModule],
person yurzui    schedule 06.02.2017
comment
Спасибо за ответ, но импорт CommonModule не помог, тест снова не прошел - person styopdev; 07.02.2017
comment
Вы удалили DecimalPipe из массива declarations? - person yurzui; 07.02.2017
comment
Да, я сделал, TestBed .configureTestingModule({ imports: [CommonModule], declarations: [TestComp] }) - person styopdev; 07.02.2017
comment
Можешь воспроизвести в моем плункере? plnkr.co/edit/zobNKEmT6mnag7dBfewi?p=preview - person yurzui; 07.02.2017
comment
спасибо, он отлично работает в вашем плункере, даже без импорта CommonModule, но все еще не работает в моем проекте, я думаю, проблема с файлами конфигурации моей кармы - person styopdev; 07.02.2017

Я нашел решение. Тест не прошел в браузере PhantomJS, но работает в Chrome. Та же проблема воспроизводится для проектов, созданных angular-cli.

Чтобы получить встроенные тесты angular 2, работающие на PhantomJS, необходимо добавить 2 строки кода в

karma.shim.js, если вы используете generator-ng2-webpack.

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

or to

src/polyfills.ts в случае, если вы используете angular-cli.

import 'intl';
import 'intl/locale-data/jsonp/en';
person styopdev    schedule 09.02.2017