單元測試時內置管道導致失敗Angular 2組件

我有我想測試的示例組件。當我使用自定義管道（例如我的自定義管道concat）其工作正常。單元測試時內置管道導致失敗Angular 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是2個模塊聲明的一部分： CommonModule和DynamicTestModule！

我正在使用angular 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());

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

};

來源

2017-02-06 styopdev

我找到了解決方案。測試在PhantomJS瀏覽器上失敗，但適用於Chrome。同樣的問題可以用於生成角度生成的項目。

爲了得到角2個內置管道測試上PhantomJS然後2行的代碼應被添加到

karma.shim.js工作，如果使用的是發電機NG2-的WebPack。

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

，或者在使用的是角-CLI的情況下

的src/polyfills.ts。

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

來源

2017-02-09 14:14:31 styopdev

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

什麼課我應該添加到聲明嗎？

添加申報類 - 組件，指令和管道 - 到申報清單。

這些類必須在應用程序的只有一個模塊聲明。如果它們屬於這個模塊，則在此模塊中聲明它們。

所以，你應該導入CommonModule，而不是推到DecimalPipe聲明數組：

TestBed.configureTestingModule({ 
     imports: [CommonModule],

來源

2017-02-06 18:02:57 yurzui

謝謝你的回答，但進口CommonModule沒有幫助，再次測試 – styopdev

失敗你從'declarations'數組中刪除'DecimalPipe'？ – yurzui

是的，我做到了，''測試牀 .configureTestingModule（{ 進口：[CommonModule]，聲明：testcomp隔離] }）'' – styopdev

單元測試時內置管道導致失敗Angular 2組件

回答

相關問題