代码之家 › 专栏 › 技术社区 › physicsboy

如何测试我已经加载了JSON-Angular2+

testing typescript angular javascript

physicsboy · 技术社区 · 7 年前

我有一个角度方法,它只加载本地存储的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);
  });
}

支原体

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

1 回复 | 直到 7 年前

Aniket Kadam 7 年前

测试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);
  }));

});