首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >有业力的角8测试组件失败

有业力的角8测试组件失败
EN

Stack Overflow用户
提问于 2020-05-27 10:52:36
回答 1查看 364关注 0票数 1

我正试着开始测试我的组件。我想要测试的第一件事是ngOnInit是否调用了正确的服务。

agreement.component.ts

代码语言:javascript
复制
  constructor(private agreementService: AgreementService,
              private operatorService: OperatorService,
              private accountService: AccountService,
              private route: ActivatedRoute,
              private router: Router,
              private sessionService: SessionService,
              private settingsService: SettingsService) {
    this.agreementId = Number(this.route.snapshot.paramMap.get('agreementId'));
  }

  async ngOnInit() {
    this.session = await this.sessionService.getSession();
    this.settings = await this.settingsService.getSettings();

    this.operatorService.getOperators(this.session.bic).subscribe(data => {
      this.operators = data;
    });
  ...
  }

agreement.component.spec.ts

代码语言:javascript
复制
import {AgreementComponent} from './agreement.component';
import {async, TestBed} from '@angular/core/testing';
import {ActivatedRoute, convertToParamMap, Router} from '@angular/router';
import {RouterTestingModule} from '@angular/router/testing';
import {AgreementService} from '../../../services/agreement.service';
import {AccountService} from '../../../services/account.service';
import {SessionService} from '../../../services/session.service';
import {SettingsService} from '../../../services/settings.service';

describe('agreementComponent', () => {
  let mockAgreementService: AgreementService;
  let mockOperatorService;
  let mockAccountService: AccountService;
  let mockRoute: ActivatedRoute;
  let mockRouter: Router;
  let mockSessionService: SessionService;
  let mockSettingsService: SettingsService;
  let component: AgreementComponent;

  beforeEach(async(() => {
    mockAgreementService = jasmine.createSpyObj(['getAgreement']);
    mockOperatorService = jasmine.createSpyObj(['getOperators']);
    mockAccountService = jasmine.createSpyObj(['getFeeAccounts']);
    mockRoute = jasmine.createSpyObj(['route']);
    mockRouter = jasmine.createSpyObj(['router']);
    mockSessionService = jasmine.createSpyObj(['getSession']);
    mockSettingsService = jasmine.createSpyObj(['getSettings']);

    TestBed.configureTestingModule({
      declarations: [AgreementComponent],
      imports: [
        RouterTestingModule
      ],
      providers: [
        {
          provide: ActivatedRoute, useValue:
            {
              snapshot: {
                paramMap: convertToParamMap({agreementId: '0'})
              }
            }
        },
      ]
    });

    component = new AgreementComponent(mockAgreementService, mockOperatorService, mockAccountService,
      mockRoute, mockRouter, mockSessionService, mockSettingsService);
  }));


  it('should call operators service', () => {
    component.ngOnInit();

    expect(mockOperatorService).toHaveBeenCalled();

  });
});

目前我得到的是:

失败:无法读取未定义的属性“paramMap” TypeError:无法读取未定义的属性“ngOnInit”

我确信这段代码缺少很多东西才能很好地工作,我只是不知道到底遗漏了什么,应该用什么不同的方法去做,因为谷歌搜索我的错误让我被无数不同的解决方案搞混了。我很新的角度测试,所以想有一些建议,如何以正确的方式编写测试。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-05-27 13:49:59

通过创建Stub采取一种不同的方法,如我的一篇文章中所解释的。

  1. 创建可重用存根如下:
代码语言:javascript
复制
export class MockOperatorService{
  getOperators(){
     return of({data: "someVal"})
  }
}

其他服务也是如此。

  1. 在需要时在RouterTestingModule中使用imports
  2. 模拟ActivatedRoute和其他服务如下:
代码语言:javascript
复制
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [AgreementComponent],
      imports: [
        RouterTestingModule
      ],
      providers: [
        {
          provide: ActivatedRoute, useValue:
            {
              snapshot: {
                paramMap: convertToParamMap({agreementId: '0'})
              }
            }
        },
        {provide: OperatorService , useClass: MockOperatorService},
        {....similarly for AgreementService etc etc}
      ]
    });
  }));

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

我意识到没有合适的文章来学习角度测试,所以我写了您可以在本页底部找到的文章集合。我希望它能帮上忙

更新:

要想像评论中所问的那样进行间谍活动,可以:

代码语言:javascript
复制
  it('should call getOperators service in ngOnInit', () => {
    spyOn(component.operatorService,"getOperators").and.callThrough();
    component.ngOnInit();
    expect(component.operatorService.getOperators).toHaveBeenCalled();
    // you can also be more specific by using ".toHaveBeenCalledWith()"
  });
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/62041388

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档