samedi 6 août 2016

How can I test the rendering of an element using the date pipe in Angular 2?

I can't seem to test a component that uses a Date pipe in Angular 2 (using Karma through PhantomJS). When I try, I get ORIGINAL EXCEPTION: ReferenceError: Can't find variable: Intl

Here's my entire spec file:

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

And this is the component template:

 <div class="col-lg-8 col-md-7 col-sm-6">
   <h1></h1>
   <p class="lead"></p>
 </div>

Aucun commentaire:

Enregistrer un commentaire