Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/29.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 带karma的Angular 8测试组件失败_Javascript_Angular_Typescript_Unit Testing_Karma Jasmine - Fatal编程技术网

Javascript 带karma的Angular 8测试组件失败

Javascript 带karma的Angular 8测试组件失败,javascript,angular,typescript,unit-testing,karma-jasmine,Javascript,Angular,Typescript,Unit Testing,Karma Jasmine,我正在尝试开始测试我的组件。我想测试的第一件事是ngOnInit是否调用了正确的服务 协议.组件.ts: constructor(private agreementService: AgreementService, private operatorService: OperatorService, private accountService: AccountService, private route:

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

协议.组件.ts

  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;
    });
  ...
  }
协议组件规范ts

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”


我确信这段代码缺少很多东西才能正常工作,我就是不知道到底缺少了什么以及应该做些什么,因为谷歌搜索我的错误让我对大量不同的解决方案感到困惑。我对角度测试非常陌生,因此我想就如何以正确的方式编写测试提出一些建议。

采用不同的方法,创建存根,如中所述

  • 已将可重用存根创建为:
  • 等其他服务

  • 根据需要在导入中使用路由测试模块

  • 模拟
    ActivatedRoute
    和中的其他服务,如下所示:

  • 我意识到没有一套合适的文章来学习角度测试,所以我写了这篇文章。我希望这会有帮助

    更新: 要按照评论中的要求进行侦查,您可以执行以下操作:

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

    很好,谢谢,先生,真的很有帮助。我相信beforeach设置现在工作正常,现在我想测试
    getOperators
    from
    operatorservice
    是否正在
    ngonit
    上调用。我在想我该怎么做间谍。它应该在组件上还是在服务上?我尝试过这样创建:
    spyOn(MockOperatorService.prototype,'getOperators')。和.callThrough()
    component.ngOnInit()
    expect(MockOperatorService.prototype.getOperators).toHaveBeenCalled()但我得到了一个错误:
    预期spy getOperators会被调用。
    @developer1:m很高兴它有所帮助。我已经更新了答案。本文还介绍了如何使用
    spy
    。看看那些文章。也请将此标记为帮助其他人寻找类似问题的答案:)好的,谢谢!但它仍然没有像预期的那样工作。但是你确定我应该监视组件.操作器服务吗?我不应该监视我的模拟服务,然后期望调用模拟服务方法吗?嗯,这很奇怪。因为当我测试是否调用了
    sessionService.getSession()
    时,我的测试通过了。但是如果我尝试测试是否调用了
    settingsService.getSettings()
    ,这就像在
    ngOnInit
    中调用相同一样,它会失败。有什么区别或问题吗?如果我正在测试是否调用了异步方法,我的
    it
    函数调用是否也应该是异步的?
    
      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();
      });
    
    
    
      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()"
      });