无法读取处未定义的属性“getAboutInfo”

Question

这是我的代码，功能工作正常，但测试用例失败了。请告诉我我在代码中做错了什么？我得到的错误

headless chrome 83 . 0 . 4103(Windows 10 . 0 . 0)about component应创建失败的类型错误:无法读取about component . ngon init(http://localhost:9876/karma _ web pack/src/app/about/about . component . ts:44:28)处的**处的undefined的属性“get about info ”( http://localhost:9876/karma _ web pack/node _ modules/@ angular/core/ivy _ ngcc/fesm 2015/_ tick(http://localhost:9876/karma _ web pack/node _ modules/@ angular/core/ivy _ ngcc/fesm 2015/testing . js:323:1)

import { async, ComponentFixture, TestBed} from '@angular/core/testing';
import { AboutComponent } from './about.component';
import { AboutService } from './about.service';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { Observable, of } from 'rxjs';
import { I18nService } from 'src/utils/i18n.service';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { AppModule } from './../app.module';

describe('AboutComponent', () => {
  let component: AboutComponent;
  let fixture: ComponentFixture<AboutComponent>;
  let dialogSpy: jasmine.Spy;
  let app: any;
  const mockDialogRef = {
    close: jasmine.createSpy('close')
  };
  let service: any;
  const data = '20/04/2019';
  let getAboutInfoSpy: any;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [AboutComponent],
      imports: [HttpClientTestingModule , AppModule],
      providers: [{ provide: AboutService, useValue: service },
        I18nService,
            { provide: MAT_DIALOG_DATA, useValue: {} },
            { provide: MatDialogRef, useValue: mockDialogRef}]
    }).compileComponents();
  }));

  beforeEach(async () => {
    fixture = TestBed.createComponent(AboutComponent);
    component = fixture.componentInstance;
    await fixture.whenStable();
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('infoList should be empty array', () => {
    expect(app['dataList'].length).toBe(0);
  });

  it('when OnInit invoked through service data will return to infoList ', async(() => {
    service = fixture.debugElement.injector.get(AboutService);
    spyOn(service, 'getAboutInfo').and.returnValue(of(data));
    app.ngOnInit();
    expect(app['dataList'].length).toBe(3);
  }));

  it('onCancel should close the dialog', async( () => {
    component.closePopup();
    expect(mockDialogRef.close).toHaveBeenCalled();
  }));

});

import { Component, OnInit, Inject } from '@angular/core';
import { AboutService } from './about.service';
import { Subscription } from 'rxjs';
import { MatDialogRef} from '@angular/material/dialog';
import { I18nService } from 'src/utils/i18n.service';

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.scss']
})
export class AboutComponent implements OnInit {

  private aboutServiceSubscription: Subscription;
  dataList: any;
  locales: any = {};
  translator: any;
  
  constructor(
    private dialogRef: MatDialogRef<AboutComponent>,
    public aboutService: AboutService,
    private i18Service: I18nService) {}


  ngOnInit() {
    this.translator = this.i18Service.getTranslator();
    this.translator.translateObject.subscribe((item: any) => {
      this.locales = item;
    });
    this.aboutServiceSubscription =  this.aboutService.getAboutInfo().subscribe((data: any) => {
      if (data) {
        data = data.split('/');
        this.dataList = data;
      }
    });
  }


   /**
    * Closes the poup
    * @memberof AboutComponent
    */
  closePopup() {
    this.dialogRef.close();
  }
}

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AboutService {

  constructor(private http: HttpClient) {

   }

   getAboutInfo() {
    return this.http.get('/assets/aboutInfo.txt', {responseType: 'text'})
  }
}

Answer 1

错误消息表明您没有正确模拟AboutService，您将未定义传递给 ，因此通过Injector获得的 为 。您不能将 spyOn用于 未定义的值。

下面是一个工作示例，删除了不相关的代码:

关于.component.ts：

import { Component, OnInit } from '@angular/core';
import { AboutService } from './about.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-about',
})
export class AboutComponent implements OnInit {
  private aboutServiceSubscription: Subscription;
  dataList: any;
  locales: any = {};
  translator: any;

  constructor(public aboutService: AboutService) {}

  ngOnInit() {
    this.aboutServiceSubscription = this.aboutService
      .getAboutInfo()
      .subscribe((data: any) => {
        if (data) {
          data = data.split('/');
          this.dataList = data;
        }
      });
  }
}

about.service.ts：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class AboutService {
  constructor(private http: HttpClient) {}

  getAboutInfo() {
    return this.http.get('/assets/aboutInfo.txt', { responseType: 'text' });
  }
}

about.component.spec.ts：

import { HttpClientTestingModule } from '@angular/common/http/testing';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { of } from 'rxjs';
import { AboutComponent } from './about.component';
import { AboutService } from './about.service';

fdescribe('62700708', () => {
  let component: AboutComponent;
  let fixture: ComponentFixture<AboutComponent>;
  let aboutServiceSpy: jasmine.SpyObj<AboutService>;
  const data = '20/04/2019';

  beforeEach(() => {
    aboutServiceSpy = jasmine.createSpyObj('AboutService', ['getAboutInfo']);
    aboutServiceSpy.getAboutInfo.and.returnValue(of(data));

    TestBed.configureTestingModule({
      declarations: [AboutComponent],
      imports: [HttpClientTestingModule],
      providers: [{ provide: AboutService, useValue: aboutServiceSpy }],
    }).compileComponents();
  });

  beforeEach(async () => {
    fixture = TestBed.createComponent(AboutComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('when OnInit invoked through service data will return to infoList ', () => {
    expect(aboutServiceSpy.getAboutInfo).toHaveBeenCalledTimes(1);
    expect(component.dataList).toEqual(['20', '04', '2019']);
  });
});

单元测试结果：