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

发布时间：2020-12-17 08:20:39 所属栏目：安全来源：网络整理

导读：我似乎无法测试在Angular 2中使用Date管道的组件(通过PhantomJS使用Karma).当我尝试时,我得到ORIGINAL EXCEPTION：ReferenceError：找不到变量：Intl 这是我的整个spec文件： import { provide,PLATFORM_PIPES } from '@angular/core';import { DatePipe } f

我似乎无法测试在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>

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

> npm install karma-intl-shim –save-dev
>将’intl-shim’添加到karma.conf.js中的frameworks集合中
>将以下内容添加到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);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!