title: How to spy on methods of service when the service is provided in the root of Component
body: <p>I am writing unit test for a angular component using karma-jasmine. I have used providers in my ProfileComponent and injected ProfileService.</p>
  <p><strong>profile.component.ts</strong></p>
  <pre class="lang-js prettyprint-override"><code>@Component({
      selector: 'app-profile',
      templateUrl: './profile.component.html',
      styleUrls: ['./profile.component.scss'],
      providers: [ProfileService]
  })
  export class ProfileComponent implements OnInit {
  
      public data;
  
      constructor(private profileService: ProfileService) {}
  
      ngOnInit() {
          await this.profileService.login();
          this.profileService.getData('A').subscribe((result) =&gt; {
              this.data = result;
          });
      }
  
  }
  </code></pre>
  <p><strong>profile.service.ts</strong></p>
  <pre class="lang-js prettyprint-override"><code>@Injectable()
  export class ProfileService {
  
      private baseUrl: string;
  
      constructor(private http: HttpClient) {
          this.baseUrl = 'https://localhost:4002';
      }
  
      public async login() {
          const loginUrl = `${this.baseUrl}/api/Login`;
          return this.http.post(loginUrl, {}, { headers }).toPromise();
      }
  
      getData(id: string) {
          const url = `${this.baseUrl}/api/GetData/${id}`;
          return this.http.get(url, { headers });
      }
  }
  </code></pre>
  <p><strong>profile.component.spec.ts</strong></p>
  <pre class="lang-js prettyprint-override"><code>const data = ['A', 'B', 'C'];
  
  describe('Client.App.ProfileComponent', () =&gt; {
      let component: ProfileComponent;
      let fixture: ComponentFixture &lt; ProfileComponent &gt; ;
      let profileService: ProfileService;
      let profileData;
  
      beforeEach(async (() =&gt; {
          TestBed.configureTestingModule({
              imports: [HttpClientTestingModule, ReactiveFormsModule, RouterTestingModule],
              declarations: [ProfileComponent],
              providers: [ProfileService],
              schemas: [NO_ERRORS_SCHEMA]
          }).compileComponents();
      }));
  
      beforeEach(fakeAsync(() =&gt; {
          profileData = new Subject();
          profileService = TestBed.inject &lt; ProfileService &gt; (ProfileService);
          spyOn(profileService, 'login').and.returnValue({});
          spyOn(profileService, 'getData').and.returnValue(profileData);
          fixture = TestBed.createComponent(ProfileComponent);
          component = fixture.componentInstance;
          fixture.detectChanges();
      }));
  
      it('shall create the component', () =&gt; {
          profileData.next(data);
          fixture.detectChanges();
          expect(component).toBeDefined();
      });
  });
  </code></pre>
  <p>I added a debugger and checked that its failing in login. So, I have two questions:</p>
  <ol>
  <li>As I have used providers in the <code>Profile Component</code>, can I inject the <code>ProfileService</code> in the <code>profile.component.spec.ts</code> file as it will create two instance of the same service?</li>
  <li>How to spy on login() and getData() of ProfileService as below statement is not working...?</li>
  </ol>
  <pre class="lang-js prettyprint-override"><code>spyOn(profileService, 'login').and.returnValue({});
  </code></pre>
  <p>Please help me on this.</p>