1

我正在尝试编写一个单元测试，以确定在返回承诺的服务调用之后填充我的 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 的方法替换服务方法。

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

因此，我想用模拟替换我的服务：

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 的测试的在线资源。有没有人能在这里发现任何看起来不正常的东西？

4

1 回答 1

1

如果你在嘲笑服务，你不应该使用Http. 只需返回您自己的承诺，无需与Http.

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

使用该Http服务，您将拨打 XHR 电话，而您不想在测试期间这样做。对于模拟，我们想让它尽可能简单，因为我们希望它尽可能少地影响测试中的组件。

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

我们介绍了模拟服务以测试组件，但如果您还想测试您的服务，您需要Http使用一些 Angular 测试助手类自己创建提供程序MockBackend。

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

使用MockBackend，我们可以订阅连接和模拟响应。有关完整示例，请参阅此帖子

也可以看看：

于 2016-09-15T14:42:25.857 回答