title: angular2 how to unit test pipe needing mock service
body: <p>I'm trying to write a unit test for a Pipe that takes in an object as a parameter. This object is created from a mock service. </p>
  
  <p>Is it possible to use a mock service when unit testing a pipe? Do I have to include the component that uses the pipe in the test?</p>
  
  <p><strong>PIPE</strong> - this pipe basically takes in an object and a set of arguments. Based on the arguments it manipulates the object parameter and returns it.</p>
  
  <pre><code>@Pipe({
    name: 'myPipe'
  })
  export class MyPipe implements PipeTransform {
  
    transform(myData: models.MyInfo, args: string[]): string { //stuff here }
  }
  </code></pre>
  
  <p><strong>MOCK SERVICE</strong> - the mock service queries object array which is used in the parameter of the pipe.</p>
  
  <pre><code>@Injectable()
  export class MockMyService {
  getMyInfo(){
  //logic
  }
  </code></pre>
  
  <p><strong>EXAMPLE OF PIPE USE IN COMPONENT</strong> - below is an example of how it's used</p>
  
  <pre><code>this.xObj = this.realService.GetInfo();     
  this.myList = this.myPipe.transform(this.xObj[0], ['a', 'b', 'c',]).split(',');
  </code></pre>
  
  <p><strong>UNIT TEST THAT I TRIED</strong> - I've tried a couple of things. the code below shows how I've tried to couple the Component and Pipe, and also trying to test the pipe without the component.</p>
  
  <pre><code>//core dependencies
  import { ComponentFixture, TestBed }  from "@angular/core/testing";
  import { NO_ERRORS_SCHEMA }           from '@angular/core';
  import { By }                         from '@angular/platform-browser';
  import { DebugElement }               from '@angular/core';
  import { RouterTestingModule }        from '@angular/router/testing';
  import { HttpModule }                 from '@angular/http';
  import { DatePipe }                   from '@angular/common';
  
  //pipe, component being tested
  import { MyPipe } from './path to pipe';
  import { ComponentThatUsesPipe } from '../path to the component';
  
  //models / other
  import { MOCKEDOBJECT } from '..path'
  
  //services
  import { MockMyService } from '..path to service';
  import { RealService } from '..path to real service';
  
  describe('myPipe', () =&gt; {
    let pipe = new MyPipe();
    let component: ComponentThatUsesPipe ;
  
    var myDetailsArray: models.ObjDetails[] = MOCKEDOBJECT ;
    var myDetails: models.ObjDetails;
    var myList: string[] = [];
  
  
    beforeEach(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [ComponentThatUsesPipe, MyPipe],
        providers: [{provide: RealService, useClass: MockMyService}]
      });
      component = TestBed.createComponent(ComponentThatUsesPipe ).componentInstance;
    });
  
    this.myList = pipe.transform(this.myDetails.m[0], ['a','b',1,2,3]);
  
    it('test1', () =&gt; {
       expect(this.myList.findIndex(s =&gt; s.trim() === 'Med') &gt; -1).toBe(true);
    });
  });
  </code></pre>
  
  <p>My test return an error of 'cannot read property of m '. </p>
  
  <p><strong>Edit - was able to resolve based on advice from 'estus' comments below</strong></p>
  
  <pre><code>describe('myPipe', () =&gt; {
    let pipe = new myPipe();
    let myDetailsArray: models.ObjDetails[] = MOCKEDOBJECT;
    let myDetails: models.ObjDetails = myDetailsArray[0];
    let hasA: boolean = false;
    let hasB: boolean = false;
    let hasC: boolean = false;
    let myList: string[] = [];
  
    this.myList = pipe.transform(myDetails.member[0],[stuff here]).split(',');
    this.hasA = (this.myList.findIndex(s =&gt; s.trim() === 'M') &gt; -1);
    this.hasB = (this.myList.findIndex(s =&gt; s.trim() === 'P') &gt; -1);
    this.hasC = (this.myList.findIndex(s =&gt; s.trim() === 'D') &gt; -1);
  
    it('test myPipe hasA', () =&gt; {
       expect(this.hasA).toBe(true);
    });
  
    it('test myPipe hasB', () =&gt; {
       expect(this.hasB).toBe(true);
    });
  
    it('test myPipe hasC', () =&gt; {
       expect(this.hasC).toBe(false);
    });
  
  });
  </code></pre>