title: spyOn function not being called Jasmine Angular 2
body: <p>In the setup in my Angular component I have a function:</p>
  
  <pre><code>populateForm(id:String, index:number){
      let blogs = this.blogsService.returnBlogs()
      blogs.map((blog:Blog)=&gt;{
      blog._id === id ? this.blogsService.populateForm.next({blog:blog, index:index}) : blog._id = blog._id;
  
     })
    }
  </code></pre>
  
  <p>I've set up a test in terms of a button click, that calls the populateForm function which calls a returnBlogs function, from a service that, gives me an array to manipulate.</p>
  
  <p>But I'm having trouble spying on the returnBlogs function:</p>
  
  <pre><code>it('Should be able to click element and call PopulateForm function with correct parameters', () =&gt; {
      let blogs = [{_id1: 'xyz', title: 'title1', vidUrl: 'XpiipWULkXk'}, {_id1: 'abc', title: 'title2', vidUrl: 'XpiipWULkXk'}]
          blogsService = TestBed.get(BlogsService)
          component.blogs = blogsTest
          fixture.detectChanges();
      let spy =  spyOn(blogsService, 'returnBlogs').and.returnValue(blogs);
  
      let domEl = fixture.nativeElement.querySelector('.blog-thumb');
          domEl.click();
          expect(component.populateForm).toHaveBeenCalledWith('xyz', 1);
          expect(spy).toHaveBeenCalled();
    });
  </code></pre>
  
  <p>I'm getting an error:</p>
  
  <blockquote>
    <p>Expected spy returnBlogs to have been called.</p>
  </blockquote>
  
  <p>Any pointers would be appreciated, I'm trying to get to grips with what should and shouldn't be tested also</p>