angular - Angular 8 业力忽略服务请求
问题描述
我一直坚持这个简单的单元测试。
我有一个带有单个 http get 请求的服务,并且我有一个带有对象列表的组件。我一直在尝试测试此请求的结果。
测试运行时,我总是得到一个空数组,因为不知何故服务没有运行,你可以看到只有组件 con 日志结果。
我将 json-server 用于 REST API。
谢谢。
这是我的控制台结果:
10 02 2020 16:47:39.159:INFO [karma-server]: Karma v4.1.0 server started at http://0.0.0.0:9876/
10 02 2020 16:47:39.160:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
30% building 17/17 modules 0 active10 02 2020 16:47:39.314:INFO [launcher]: Starting browser Chrome
10 02 2020 16:47:44.928:WARN [karma]: No captured browser, open http://localhost:9876/
10 02 2020 16:47:45.016:INFO [Chrome 80.0.3987 (Windows 10.0.0)]: Connected on socket **** with id **
LOG: 'component'
Chrome 80.0.3987 (Windows 10.0.0): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
LOG: 'component'
Chrome 80.0.3987 (Windows 10.0.0): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
Chrome 80.0.3987 (Windows 10.0.0): Executed 1 of 1 SUCCESS (0.102 secs / 0.077 secs)
TOTAL: 1 SUCCESS
这是我的服务:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class ServicesTestService {
constructor(private http: HttpClient) { }
getAllMovies() {
console.log('services');
return this.http.get("http://localhost:3000/movies");
}
}
这是我的组件:
import { Component, OnInit } from '@angular/core';
import { ServicesTestService } from '../../services/services-test.service';
@Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
constructor(private service: ServicesTestService){}
movies: any = [];
ngOnInit() {
this.getMovies();
}
getMovies() {
this.service.getAllMovies().subscribe(res => {
console.log('component');
this.movies = res;
});
}
}
还有我的规格文件:
import { TestBed, ComponentFixture, inject, async, fakeAsync } from '@angular/core/testing';
import { ListComponent } from './list.component';
import { of } from 'rxjs';
import { ServicesTestService } from 'src/app/services/services-test.service';
import { HttpClientModule } from '@angular/common/http';
let component: ListComponent;
let fixture: ComponentFixture<ListComponent>;
let servicesTestService: ServicesTestService;
describe("ListComponent", () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
ListComponent
],
providers: [
ServicesTestService
],
imports: [HttpClientModule]
}).compileComponents();
}));
beforeEach(inject([ServicesTestService], s => {
servicesTestService = s;
fixture = TestBed.createComponent(ListComponent);
component = fixture.componentInstance;
}));
it("should call getMovies and return list of movies", fakeAsync(() => {
let response = [];
spyOn(servicesTestService, 'getAllMovies').and.returnValue(of(response))
component.getMovies();
fixture.detectChanges();
expect(component.movies).toEqual(response);
}));
});
解决方案
在这里它不起作用
spyOn(servicesTestService, 'getAllMovies').and.returnValue(of(response))
这会模拟您的 api 调用并返回 []。无论如何,不建议在单元测试中调用实际的 api。您可以使用 httpclienttestingmodule 对 http 调用进行单元测试。
要对 getMovies 进行单元测试,您可以将响应从 [] 更改为您期望在 component.movies 中分配的任何响应。
仅供参考 -单元测试 http 调用
推荐阅读
- python - 在 Python 中通过参数传递函数时定义类型
- c# - 在排除已存在的项目时传输 ListBox 项目时遇到问题
- python - 在 Windows 8 上设置 django Web 服务器期间出现 wsgi 错误
- python-3.x - 如何使用 Boto3 查询给定类别的亚马逊畅销书。产品广告 API 似乎有点矫枉过正
- python - 如何从pytorch更改默认优化,例如torch.optim.SGD?
- macos - 通过 ngnx 提供静态 d3.js 和 Html 文件
- android-glide - 库模块升级到 Glide 4,AppGlideModule 应该放在哪里
- django - 时态数据库的 Django 自定义创建管理器逻辑
- python - 使用 Python + pydub 在边缘检测语音与非语音
- sql-server - AWS DataPipeline 使用 SQLActivity 插入状态