模拟服务调用本地json-server而不是远程端点-测试语法?(角2)

Question

我正试图写一个单元测试，以确定在我的angular 2组件上的一个属性是在一个返回承诺的服务调用之后填充的。

我的组件包含一个方法:

getListItems() {
  this.employeeService.loadEmployees().then(res => {
    this._employees = res['Employees'];
    this.ref.markForCheck();
   });
};

调用服务上的方法:

@Injectable()
export class EmployeeService {
  constructor(
    public http: Http
  ) { }
		
  public loadEmployees(): Promise<any> {
    return this.http.get('employees.json')
      .map((res: Response) => res.json())
      .toPromise();
  }
}

从本地json文件获取内容(而不是创建远程端点)。这工作得很好，但是我想在测试时用一个调用本地json-server的方法来替换service方法。

据我所知，我已经让json-server在Karma测试运行时正确地上下旋转-我可以使用Postman在测试运行时成功地对其执行GET请求。

因此，我想用mock替换我的服务:

class MockEmployeeService {
  headers: Headers;
  constructor(private http: Http) {
    this.headers = new Headers({ 'Content-Type': 'application/json' });
  }
  public loadEmployees() {
    return this.http.get('http://localhost:3004/getEmployees',
      {headers: this.headers, body: '' })
	    .map((res: Response) => res.json());
	}
}

，我已经设置了单元测试如下:

describe('ListComponent', () => {
  let fixture;
  let component;
  let employeeService;
  beforeEach( async(() => {
	TestBed.configureTestingModule({
	  imports: [
		HttpModule
	  ],
	  declarations: [
		ListComponent
	  ],
	  providers: [
	    {provide: EmployeeService, useClass: MockEmployeeService}
	  ]
    })
    .compileComponents();
  }));
  beforeEach(() => {
	fixture = TestBed.createComponent(ListComponent);
	component = fixture.componentInstance;
	employeeService = fixture.debugElement.injector
      .get(EmployeeService);
	});
  it('should retrieve test values from json-server (async)',
    async(() => {
	  fixture.detectChanges();
	  component.getListItems();
	  fixture.whenStable.then(() => {
		expect(component._employees).toBeDefined();
	  });
  }));
})

所以(我认为)我正在调用应该调用服务的组件上的方法，该服务应该被MockEmployeeService取代。我得到以下Karma错误:

× should retrieve test values from json-server (async)
  PhantomJS 2.1.1 (Windows 7 0.0.0)
Failed: Can't resolve all parameters for MockEmployeeService: (?).

在这一点上，我几乎处于我的知识的边界，我在寻找更新的、使用testbed的测试的在线资源方面遇到了麻烦。有人能发现这里有什么不对劲的东西吗?

Answer 1

如果您正在模拟服务，则不应该使用Http。只返回你自己的承诺，不与Http交互

class MockEmployeeService {
  public loadEmployees() {
    return Promise.resolve({some:'object'});
  }
}

对于Http服务，您将进行XHR调用，而您不希望在测试期间这样做。对于mock，我们希望它尽可能简单，因为我们希望它尽可能少地影响测试中的组件。

Http在测试期间的另一个问题是它依赖于平台浏览器，这在测试环境中是不可用的。那并不意味着我们不能用它。我们只需要使用Angular为测试提供的一个helper类。

我们讨论了模拟服务来测试组件，但如果你也想测试你的服务，你需要自己创建Http提供商，使用一些Angular的测试助手类MockBackend。

TestBed.configureTestingModule({
  providers: [
    {
      provide: Http, useFactory: (backend, options) => {
        return new Http(backend, options);
      },
      deps: [MockBackend, BaseRequestOptions]
    },
    MockBackend,
    BaseRequestOptions
  ]
});

使用MockBackend，我们可以订阅连接和模拟响应。有关完整的示例，请参阅这篇文章

参见:

• Promise的文档，如果你不熟悉创建自己的承诺。