Angular 8 业力忽略服务请求

Posted

技术标签:

【中文标题】Angular 8 业力忽略服务请求【英文标题】:Angular 8 karma is ignoring service request 【发布时间】:2020-05-26 08:35:16 【问题描述】:

我一直坚持这个简单的单元测试。

我有一个带有单个 http get 请求的服务,我有一个带有对象列表的组件。我一直在尝试测试这个请求的结果。

当测试运行时,我总是得到一个空数组,因为不知何故服务没有运行,你可以看到只有组件 con log 结果。

我正在为 REST API 使用 json-server。

谢谢。

这是我的控制台结果:

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);
    ));
  );

【问题讨论】:

您的测试按预期运行,您已模拟 getAllMovies 并返回一个空数组。在 getMovies 调用 [] 被分配给电影之后。 但是,其余的 api 返回 7 行,它应该按照我预期的 7 行运行。 @elchente23 :看看medium.com/@shashankvivek.7/…。 感谢@ShashankVivek 的链接。显然我不知道单元测试是如何工作的。它现在可以工作了。 【参考方案1】:

这里不工作原因

spyOn(servicesTestService, 'getAllMovies').and.returnValue(of(response))

这会模拟您的 api 调用并返回 []。 无论如何,不​​建议在单元测试中调用实际的 api。您可以使用 httpclienttestingmodule 对 http 调用进行单元测试。

要对 getMovies 进行单元测试,您可以将响应从 [] 更改为您期望在 component.movi​​es 中分配的任何响应。

仅供参考-unit testing http calls

【讨论】:

以上是关于Angular 8 业力忽略服务请求的主要内容,如果未能解决你的问题,请参考以下文章

Angular 2 业力设置问题——业力启动但不运行测试

Angular 6 和业力'无法加载“@angular-devkit/build-angular”,它未注册'

测试可观察对象 Angular 2 业力

在 Angular 1.5 中将模块注入业力测试

针对订户错误的 Angular 2 业力单元测试

如何使用 gitlab CI 解决 Angular 业力测试的 chrome 错误?