title: How can I test the rendering of an element using the date pipe in Angular 2?
body: <p>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 <strong>ORIGINAL EXCEPTION: ReferenceError: Can't find variable: Intl</strong></p>
  <p>Here's my entire spec file:</p>
  <pre class="lang-js prettyprint-override"><code>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', () =&gt; {
    beforeEach(() =&gt; {
      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 =&gt; {
          let component = &lt;PostComponent&gt;fixture.componentInstance;
          let element = fixture.nativeElement;
  
          component.post = &lt;Post&gt;{ title: 'Hello', publishedOn: new Date('8/5/2016') };
          fixture.detectChanges();
          expect(element.querySelector('.blog-post-header h1').innerText).toBe('Hello');
      })
    );
  });
  </code></pre>
  <p>And this is the component template:</p>
  <pre class="lang-html prettyprint-override"><code> &lt;div class=&quot;col-lg-8 col-md-7 col-sm-6&quot;&gt;
     &lt;h1&gt;{{post.title}}&lt;/h1&gt;
     &lt;p class=&quot;lead&quot;&gt;{{post.publishedOn | date:'fullDate'}}&lt;/p&gt;
   &lt;/div&gt;
  </code></pre>