title: How to inject another service to specific test case in angular testing
body: <p>As in the above title question - is it possible to inject another instance of a service into specific test function? I mean situation, where in test suit I inject some service in beforeEach method.</p>
  
  <p>Creating a stub:</p>
  
  <pre><code>let userServiceStub = {
    hasReadPermissions() { return true; },
    isUserInformationAvailable() { return true; },
    isUserRequestForbidden() { return true; }
  };
  </code></pre>
  
  <p>In beforeEach method configuring test module:</p>
  
  <pre><code>TestBed.configureTestingModule({
    declarations: [
      SomeComponent
    ],
    providers: [{ provide: UserService, useValue: userServiceStub },
                { provide: AnotherService, useValue: anotherServiceStub }],
    schemas: [ NO_ERRORS_SCHEMA ]
  }).compileComponents();
  </code></pre>
  
  <p>Then I have to test cases:</p>
  
  <p>First where I would like to use service stub injected in TestBed</p>
  
  <pre><code>it('should render topbar when user has read permissions', () =&gt; {
    let topbar = debugElement.query(By.css('topbar'));
    expect(topbar).toBeTruthy();
  });
  </code></pre>
  
  <p>Second where I want to use another stub of the same service:</p>
  
  <pre><code>let anotherUserServiceStub = {
    hasReadPermissions() { return false; },
    isUserInformationAvailable() { return false; },
    isUserRequestForbidden() { return true; }
  };
  
  it('should render appropriate message when user has not read permissions', 
     inject([UserService], (userService: UserService) =&gt; { &lt;--- how to inject another user service stub here?
         let message = debugElement.query(By.css('h2'));
         expect(message).toBe('you have no permissions');
     }));
  </code></pre>
  
  <p>Or perhaps I'm trying to do it inappropriate way at all? Please point me a right way.</p>
  
  <p>[[EDIT]]</p>
  
  <p>Part of component logic:</p>
  
  <pre><code>dataUnavailable: boolean = false;
  noPermissions: boolean = false;
  
  constructor(private toastr: ToastsManager, 
            vRef: ViewContainerRef,
            private userService: UserService,
            private router: Router) {
    this.toastr.setRootViewContainerRef(vRef);
  }
  
  ngOnInit(): void {
    if (!this.isUserInformationAvailable()) {
      if (this.isUserRequestForbidden()) {
        this.noPermissions = true;
      } else {
        this.dataUnavailable = true;
        this.toastr.error("An error occured while getting data from server.");
      }
    }
  }
  
  hasUserReadPermissions(): boolean {
    return this.userService.hasReadPermissions();
  }
  </code></pre>
  
  <p>Template:</p>
  
  <pre><code>&lt;ng-container *ngIf="hasUserReadPermissions()"&gt;
    &lt;topbar&gt;&lt;/topbar&gt;
    &lt;main-menu&gt;&lt;/main-menu&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/ng-container&gt;
  &lt;div class="row" *ngIf="dataUnavailable"&gt;
    &lt;div class="col-sm-12"&gt;
      &lt;h2 class="text-center rcm-bold-message"&gt;Server data is not available.&lt;/h2&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row" *ngIf="noPermissions"&gt;
    &lt;div class="col-sm-12"&gt;
      &lt;h2 class="text-center rcm-bold-message"&gt;You do not have sufficient permissions.&lt;/h2&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>