title: Angular Unit Test - Mocked Service is not being used
body: <p>Angular Unit Test - Mocked Service is not being used</p>
  
  <p>I'm pretty new to coding and I am trying to write my own app to learn Angular. As a good developer I am writing tests for my code but I am having a little issue.</p>
  
  <p>I have created a wrapper service that uses the Angular Material Dialog, this is the method in my component that calls the wrapper service (here's some code)</p>
  
  <p>this how I declare the service in my component</p>
  
  <pre><code>constructor(private modalDialogWrapperService: ModalDialogWrapperService) {}
  </code></pre>
  
  <p>this is method that calls the service.</p>
  
  <pre><code>public assignInstrument(instrument: any): void {
      this.modalDialogWrapperService.openAssignmentWindow({
          product: 'instrument',
          type: instrument.type,
          serial: instrument.serial,
          id: instrument.id
      });
  }
  </code></pre>
  
  <p>Now all this works fine but I want to test the component that when assignInstrument is executed the modalDialogWrapperService.openAssignmentWindow is called. Here is my test file</p>
  
  <pre><code>describe('InstrumentsPageComponent', () =&gt; {
      let component: InstrumentsPageComponent;
      let fixture: ComponentFixture&lt;InstrumentsPageComponent&gt;;
      let modalDialogWrapperServiceSpy: jasmine.SpyObj&lt;ModalDialogWrapperService&gt;;
  
      beforeEach(async(() =&gt; {
          const mockModalDialogWrapperService =
          jasmine.createSpyObj('ModalDialogWrapperService', ['openAssignmentWindow']);
          mockModalDialogWrapperService.openAssignmentWindow.and.returnValue(of({}));
  
          TestBed.configureTestingModule({
              imports: [MatTableModule, MatPaginatorModule, MatDialogModule, NoopAnimationsModule],
              declarations: [InstrumentsPageComponent, ChangeAssignmentComponent],
              providers: [{
                  provide: ModalDialogWrapperService,
                  useValue: mockModalDialogWrapperService}]
          })
          .overrideModule(BrowserDynamicTestingModule, { set: { entryComponents: [ChangeAssignmentComponent]}})
          .compileComponents();
  
      beforeEach(() =&gt; {
          fixture = TestBed.createComponent(InstrumentsPageComponent);
          modalDialogWrapperServiceSpy = TestBed.get(ModalDialogWrapperService);
          component = fixture.componentInstance;
          fixture.detectChanges();
      });
  
      describe('assignInstrument', () =&gt; {
          it('should call the Modal Dialog Service', () =&gt; {
              component.assignInstrument({});
              expect(modalDialogWrapperServiceSpy.openAssignmentWindow).toHaveBeenCalledTimes(1);
          });
      });
  </code></pre>
  
  <p>Now this brings back the error "openAssignmentWindow to have been called once. It was called 0 times.". I've noticed that if I write <code>console.log(this.modalDialogWrapperService);</code> in my component's <code>ngOnInit(</code>) it looks as if the dalDialogWrapperService does not get replaced in the Jasmine stub. What am I doing wrong?</p>