Ionic中报警控制器的单元测试 [英] Unit tests for alert controller in ionic

问题描述

我正在学习用Ionic编写单元测试，但无法为AlertController编写测试。下面附上的是代码

Terms.page.ts文件

 export class TermsPage {
      constructor(private router: Router, private alertController: AlertController) {}
    
      onAgreeClick() {
        this.router.navigate(['/register']);
      }
    
      onDeclineClick() {
        this.presentAlertConfirm();
      }
    
      async presentAlertConfirm() {
        const alert = await this.alertController.create({
          message: 'Please agree to our terms and conditions to be able to use this application!',
          buttons: [
            {
              text: 'Agree',
              cssClass: 'primary',
              handler: () => {
                this.onAgreeClick();
              },
            },
            {
              text: 'Maybe later',
              role: 'cancel',
              cssClass: 'secondry',
            },
          ],
        });
        await alert.present();
      }
    }

Terms.spec.ts

import { DebugElement } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { Router, RouterModule } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { EmptyTestComponent } from '@test-utils';

import { TermsPage } from './terms.page';

fdescribe('TermsConditionsComponent', () => {
  let component: TermsPage;
  let fixture: ComponentFixture<TermsPage>;
  let de: DebugElement;
  let router: Router;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [TermsPage],
      imports: [
        RouterModule.forRoot([]),
        RouterTestingModule.withRoutes([{ path: '**', component: EmptyTestComponent }]),
      ],
    }).compileComponents();

    fixture = TestBed.createComponent(TermsPage);
    component = fixture.componentInstance;
    de = fixture.debugElement;

    router = TestBed.inject(Router);
    fixture.detectChanges();
  }));

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

  it('should be able to agree and go to registration on click', async () => {
    const agreeButton = de.query(By.css('#button-agree')).nativeElement as HTMLIonButtonElement;
    agreeButton.click();
    await fixture.whenStable();
    expect(router.url).toBe('/register');
  });

  it('should be able to trigger popup on click of disagree click', async () => {
    const disagreeButton = de.query(By.css('#button-disagree')).nativeElement as HTMLIonButtonElement;
    disagreeButton.click();
    await fixture.whenStable();
    expect(component.presentAlertConfirm).toBeTruthy();
  });
});

我需要达到100%的覆盖率

如果有人能帮我编写测试用例来覆盖警报按钮操作和演示，我会非常感激的。提前感谢

推荐答案

看起来您需要将测试一分为二：

• 已使用正确的参数调用了警报器控制器的测试#1。Create Usage-To
• 和按钮处理程序的测试#2

第一个可以很容易地用.toHaveBeenCalledWith(...)：

这样的标准茉莉花调用来模拟

const alertControllerStub = jasmine.createSpyObj('AlertController', ['create']);
...
expect(alertControllerStub.create).toHaveBeenCalledWith(options);

和第二个，您需要手动触发"；OK"；/"；Cancel"；并捕获在这两种情况下执行的方法

const ({buttons}) = alertControllerStub.create.calls.first().args[0];
buttons[0].handler();
expect(smth_should_called_in_handler).toHaveBeenCalled();

这篇关于Ionic中报警控制器的单元测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！