在Angular测试中，对使用使用HttpModule的服务的组件的概念感到困惑

Question

I am pretty new to Angular.

I am looking at the test after understanding how the framework operates.

I found that a component that uses a service and if that service uses HttpModule, the component test spec file also need to have the HttpModule imported. I don't really understand the concept behind.

I think a component that uses the module should not need to know how the service works, as it is kind of an encapsulated process that the service performs. And changing a service that doesn't change the api should not break the component as well.

If my understanding is correct, then if there is a component that don't use HttpModule at the very beginning of the development, then someone write a component base on that service, and both of the developer write tests. One day, the service developer decided to use the HttpModule but the component developer might not know, the test for the component will fail in this case.

Why do we need to get the HttpModule into the component spec file?

Edit: example as follow

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { UserComponent } from './user.component';
import { DataService } from '../../services/data.service';

describe('UserComponent', () => {
  let component: UserComponent;
  let fixture: ComponentFixture<UserComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ UserComponent ],
      imports: [
        FormsModule,
        HttpModule,  // this line is need to pass the test
      ],
      providers: [
        DataService,  // because this service is using HttpModule
      ],
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(UserComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should be created', () => {
    expect(component).toBeTruthy();
  });
});

Answer 1

You can provide different DataService in your test, something like this:

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ UserComponent ],
      imports: [
        FormsModule,
      ],
      providers: [
        { provide: DataService,  useValue: jasmine.createSpyObj('data', ['someMethod']) }
      ],
    })
    .compileComponents();
  }));

and then you can test weather the component is correctly interacting with the service.

component.onClick();
expect(component.dataService.someMethod).toHaveBeenCalled();

See more examples here , and in official docs .