谁能帮助我使用此代码获得100%的代码覆盖率?只需检查该函数是否已被调用也可以

问题描述

我不知道如何访问其余的代码行。我只需要获得完整的代码覆盖率即可。检查是否已调用函数(toHaveBeenCalled())也可以。

粘贴TypeScript文件和我的Spec文件。我当前的代码覆盖率如下:

总计:2次失败,3次成功

==================覆盖摘要=================

声明:30.34%(27/89)

分支机构:0%(0/22)

功能:26.92%(7/26)

行:29.07%(25/86)

=========================================== ======

update-notification.component.ts

import { Component,OnInit } from '@angular/core';
import { FormGroup,FormControl,Validators } from '@angular/forms';
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { NotificationService } from '../notification.service';
import { ActivatedRoute,Router } from '@angular/router';
import { ToastrService } from 'ngx-toastr';

@Component({
  selector: 'app-update-notification',templateUrl: './update-notification.component.html',styleUrls: ['./update-notification.component.scss']
})
export class UpdateNotificationComponent implements OnInit {
  notificationId: any;
  notificationDetails: any;
  parentNotifications: any[];
  editorInstance = ClassicEditor;
  ckEditorConfig = {
    placeholder: 'Add notification description'
  }
  editNotificationGroup = new FormGroup({
    title: new FormControl('',Validators.required),parentNotification: new FormControl(),description: new FormControl()
  })
  constructor(
    private activeRoute: ActivatedRoute,public notificationService: NotificationService,private router: Router,private toastr: ToastrService
  ) { }

  ngOnInit() {
    this.getParentNotificationsForDropdown();
    this.notificationId = this.activeRoute.snapshot.params.id;
    this.notificationService.getNotificationDetailsById(this.notificationId).
      subscribe((res: any) => {
        this.notificationDetails = res[0];
        this.editNotificationGroup.get('title').setValue(this.notificationDetails.notification_title);
        this.editNotificationGroup.get('description').setValue(this.notificationDetails.notification_message);
        this.editNotificationGroup.get('parentNotification').setValue(this.notificationDetails.linked_notification_id);
      },error => {
        console.log(error);
        this.editNotificationGroup.get('title').setValue('title');
        this.editNotificationGroup.get('description').setValue('<strong>desc</strong> of test');
        this.editNotificationGroup.get('parentNotification').setValue('null');
      })
  }
  getParentNotificationsForDropdown() {
    this.notificationService.getTradeNotifications().
      subscribe((res: any) => {
        this.parentNotifications = res;
      },error => {
        console.log('get parent notifications Failed',error);
      })
  }

  submitEditNotification() {
    this.notificationService.updatednotification(this.editNotificationGroup.value,this.notificationId).
      subscribe((res: any) => {
        console.log(res);
        this.toastr.success('Notification updated successfully','Notification Blast');
        this.router.navigate(['notifications/list']);
      },error => {
        console.log(error);
      })
  }

  // if 400 then show error on popup,or else something went wrong or redirect on page

}

我的测试用例..

update-notificatoin.component.spec.ts

import { ComponentFixture,Testbed } from '@angular/core/testing';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { NotificationService } from '../notification.service';
import { ActivatedRoute } from '@angular/router';
import { Router } from '@angular/router';
import { ToastrService } from 'ngx-toastr';
import { ClassicEditor } from '@ckeditor/ckeditor5-build-classic';
import { UpdateNotificationComponent } from './update-notification.component';

describe('UpdateNotificationComponent',() => {
  let component: UpdateNotificationComponent;
  let fixture: ComponentFixture<UpdateNotificationComponent>;

  beforeEach(() => {
    const notificationServiceStub = () => ({
      getNotificationDetailsById: notificationId => ({ subscribe: f => f({}) }),getTradeNotifications: () => ({ subscribe: f => f({}) }),updatednotification: (value,notificationId) => ({
        subscribe: f => f({})
      })
    });
    const activatedRouteStub = () => ({ snapshot: { params: { id: {} } } });
    const routerStub = () => ({ navigate: array => ({}) });
    const toastrServiceStub = () => ({ success: (string,string1) => ({}) });
    Testbed.configureTestingModule({
      schemas: [NO_ERRORS_SCHEMA],declarations: [UpdateNotificationComponent],providers: [
        { provide: NotificationService,useFactory: notificationServiceStub },{ provide: ActivatedRoute,useFactory: activatedRouteStub },{ provide: Router,useFactory: routerStub },{ provide: ToastrService,useFactory: toastrServiceStub }
      ]
    });
    fixture = Testbed.createComponent(UpdateNotificationComponent);
    component = fixture.componentInstance;
  });

  it('can load instance',() => {
    expect(component).toBeTruthy();
  });

  it(`editorInstance has default value`,() => {
    expect(component.editorInstance).toEqual(ClassicEditor);
  });

  describe('ngOnInit',() => {
    it('makes expected calls',() => {
      const notificationServiceStub: NotificationService = fixture.debugElement.injector.get(
        NotificationService
      );
      spyOn(component,'getParentNotificationsForDropdown').and.callThrough();
      spyOn(
        notificationServiceStub,'getNotificationDetailsById'
      ).and.callThrough();
      component.ngOnInit();
      expect(component.getParentNotificationsForDropdown).toHaveBeenCalled();
      expect(
        notificationServiceStub.getNotificationDetailsById
      ).toHaveBeenCalled();
    });
  });

  describe('getParentNotificationsForDropdown',() => {
      const notificationServiceStub: NotificationService = fixture.debugElement.injector.get(
        NotificationService
      );
      spyOn(notificationServiceStub,'getTradeNotifications').and.callThrough();
      component.getParentNotificationsForDropdown();
      expect(notificationServiceStub.getTradeNotifications).toHaveBeenCalled();
    });
  });

  describe('submitEditNotification',() => {
      const notificationServiceStub: NotificationService = fixture.debugElement.injector.get(
        NotificationService
      );
      const routerStub: Router = fixture.debugElement.injector.get(Router);
      const toastrServiceStub: ToastrService = fixture.debugElement.injector.get(
        ToastrService
      );
      spyOn(notificationServiceStub,'updatednotification').and.callThrough();
      spyOn(routerStub,'navigate').and.callThrough();
      spyOn(toastrServiceStub,'success').and.callThrough();
      component.submitEditNotification();
      expect(notificationServiceStub.updatednotification).toHaveBeenCalled();
      expect(routerStub.navigate).toHaveBeenCalled();
      expect(toastrServiceStub.success).toHaveBeenCalled();
    });
  });
});

enter image description here

解决方法

对于错误情况,您需要强制返回失败的可观察对象。 在测试中,您总是在监视自己的方法(这很好),但要进行调用。

import {
  throwError
} from 'rxjs';

// In your test

it('should test the error',() => {

  spyOn(
    notificationServiceStub,'getNotificationDetailsById'
  ).and.returnValue(throwError('YOUR ERROR DATA HERE'));

});