如何使用Angular 2中的日期管道测试元素的渲染？

Question

我似乎无法测试在Angular 2中使用Date管道的组件(通过PhantomJS使用Karma).当我尝试时,我得到ORIGINAL EXCEPTION:ReferenceError:找不到变量:Intl

这是我的整个spec文件:

import { provide, PLATFORM_PIPES } from '@angular/core';
import { DatePipe } from '@angular/common';
import { addProviders, async, inject } from '@angular/core/testing';

import { Post, PostComponent, PostHtmlComponent } from './';
import { usingComponentFixture } from '../../test-helpers';

describe('Component: Post', () => {
  beforeEach(() => {
    provide(PLATFORM_PIPES, {useValue: DatePipe, multi: true });
    addProviders([PostComponent, PostHtmlComponent, ]);
  });

  it('should render an h1 tag with text matching the post title', 
    usingComponentFixture(PostComponent, fixture => {
        let component = <PostComponent>fixture.componentInstance;
        let element = fixture.nativeElement;

        component.post = <Post>{ title: 'Hello', publishedOn: new Date('8/5/2016') };
        fixture.detectChanges();
        expect(element.querySelector('.blog-post-header h1').innerText).toBe('Hello');
    })
  );
});

这是组件模板:

 <div class="col-lg-8 col-md-7 col-sm-6">
   <h1>{{post.title}}</h1>
   <p class="lead">{{post.publishedOn | date:'fullDate'}}</p>
 </div>

Answer 1

我能够解决这个问题.这就是我必须做的事情:

1. npm install karma-intl-shim --save-dev
2. 将'intl-shim'添加到karma.conf.js中的frameworks集合中

3. 将以下内容添加到karma-test-shim.js(这在karma.conf.js的文件集合中引用)

   require('karma-intl-shim');
   require('./en-us.js'); // copied from https://github.com/andyearnshaw/Intl.js/blob/master/locale-data/json/en-US.json
   Intl.__addLocaleData(enUsLocaleData);
   

Answer 2

您可以在 typescript 中使用 DatePipe 的方法，而不是模拟transformDatePipe，该方法相当于 | HTML 文件中的运算符

import {DatePipe} from '@angular/common';

let pipe = new DatePipe('en');

expect(page.myDate.nativeElement.innerHTML).toBe(pipe.transform(model.date, 'dd/MM/yyyy');

Answer 3

对于测试，我模拟日期管道：

@Pipe({
    name: 'date',
    pure: false // required to update the value when the promise is resolved
})

export class MockedDatePipe implements PipeTransform {
    name: string = 'date';

    transform(query: string, ...args: any[]): any {
        return query;
    }
}

然后当我配置测试模块时，我将它注入到声明中：

TestBed.configureTestingModule( {
    providers: [
        SelectionDispatcher,
        { provide: MyService, useClass: MockedMyServiceService }
    ],
    declarations: [ MyComponent, MockedTranslatePipe, MockedDatePipe ]
});

Answer 4

这对我有用：

import {DatePipe} from "@angular/common";
...
TestBed.configureTestingModule({
  ...
  providers: [DatePipe]
  ...
});