javascript - 如何测试我是否已加载我的 JSON - Angular2+

Question

我有一个 Angular 方法，可以简单地加载本地存储的 JSON 文件的内容，其中包含一个数组，但是我似乎无法测试它。

test.ts（为了简洁而缩短）

describe('MyComponent', () => {

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [MyComponent],
      imports: [HttpClientTestingModule],
    });

    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;

    component.ngOnInit();

  it('should load status data from local json', () => {
    const data = require('../../../assets/myData.json');
    component.getThings();
    expect(component.data).toEqual(data);
  });
}

我的组件.ts

data: string[];

constructor(private httpClient: HttpClient) {}

ngOnInit() {
   this.getThings().subscribe(data =
       this.data = data;
   }
}

getData(): Observable<any> {
    const data = '../../../assets/data.json';
    return this.httpClient.get(data);
  }

标签： javascriptangulartypescripttesting

Answer 1

在测试 http 请求时，您需要模拟请求。
在下面查看有关 HttpClientTestingModule 的更多信息：
https ://angular.io/api/common/http/testing/HttpClientTestingModule
https://medium.com/spektrakel-blog/angular-testing-snippets-httpclient-d1dc2f035eb8

下面的代码正在工作，也更新了组件代码：
组件：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-load-local-file',
  templateUrl: './load-local-file.component.html',
  styleUrls: ['./load-local-file.component.css']
})
export class LoadLocalFileComponent implements OnInit {

  data: string[];

  constructor(private httpClient: HttpClient) { }

  ngOnInit() {
    this.getData().subscribe(data => {
      this.data = data;
    });

  }

  getData(): Observable<any> {
    const data = './data.json';
    return this.httpClient.get(data);
  }

}

规格：

  import { TestBed, async, fakeAsync, tick } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'
import { LoadLocalFileComponent } from 'src/app/load-local-file/load-local-file.component';

describe('MyComponent', () => {
  let fixture, component, httpMock: HttpTestingController;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [LoadLocalFileComponent],
      imports: [HttpClientTestingModule]
    });

    fixture = TestBed.createComponent(LoadLocalFileComponent);
    component = fixture.componentInstance;
    httpMock = TestBed.get(HttpTestingController);

  }));

  it('should load status data from local json', fakeAsync(() => {
    const data = require('./data.json');

    component.ngOnInit();
    tick();
    const request = httpMock.expectOne('./data.json');
    request.flush(data);
    expect(component.data).toEqual(data);
  }));

});