2017-02-06 7 views
0

У меня есть образец компонента, который я бы хотел проверить. Когда я использую пользовательскую трубку (например, мой пользовательский канал concat), он работает отлично.Встроенные трубы вызывают сбои при модульном тестировании Угловой 2 компонент

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

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

Но когда я пытаюсь использовать inbuilt pipe (например 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 из '@ угловой/общий' и добавить его в описании массива, но это может вызвать ошибки

Тип DecimalPipe является частью деклараций из двух модулей: CommonModule и DynamicTestModule!

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

UPD

Test отлично работает в 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()); 

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

}; 

ответ

0

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

Для получения испытаний угловых 2 BUILTIN ТРУБ, работающих на PhantomJS затем 2 строки кода должны быть добавлены к

karma.shim.js если вы используете генератор-NG2-Webpack.

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

или

SRC/polyfills.ts в случае, если вы используете угловой кли.

import 'intl'; 
import 'intl/locale-data/jsonp/en'; 
1

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

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

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

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

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

TestBed.configureTestingModule({ 
     imports: [CommonModule], 
+0

Спасибо за ответ, но импорт CommonModule не помогло, тест снова – styopdev

+0

удалось ли вы удалить '' DecimalPipe' из declarations' массива? – yurzui

+0

Да я, '' TestBed .configureTestingModule ({ импорта: [CommonModule], декларации: [TestComp] }) '' – styopdev