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

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

npm install karma-intl-shim --save-dev
将'intl-shim'添加到karma.conf.js

将以下内容添加到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

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

@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 3

让pipe = new DatePipe（＆＃39; en＆＃39;）;

expect（page.myDate.nativeElement.innerHTML）.toBe（pipe.transform（model.date，＆＃39; dd / MM / yyyy＆＃39;）;

Answer 4

这对我有用：


import { DatePipe, registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';

registerLocaleData(localeDe);

//..
describe('My Test', () => {

let pipe = new DatePipe('de-DE');
    it('My Test-Case', () => {
        expect(page.myDate.nativeElement.innerHTML).toBe(pipe.transform(model.date);
    });
});

您必须设置正确的语言环境。

这是来自 Cypress-Test 的片段。

Answer 5

这对我有用：

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

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

5 个答案: