Angular Jasmine testing Eventemitter subscription



我正在尝试在Angular中测试以下组件,特别是驻留在userService上的eventEmitter。

import { Component, OnInit, OnDestroy } from '@angular/core';
import { RegisterUser } from 'src/app/classes/register-user';
import { ToastController } from '@ionic/angular';
import { UserService } from 'src/app/services/user.service';
import { Result } from 'src/app/classes/result';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { User } from 'src/app/classes/user';
/**
* Register-user page, used for creating new users for the system
*/
@Component({
selector: 'app-register-user',
templateUrl: './register-user.page.html',
styleUrls: ['./register-user.page.scss'],
})
export class RegisterUserPage implements OnDestroy {
constructor(private toastController: ToastController, private userService: 
UserService) { }
/**
* Unsubscribes from Observables when component gets destroyed
*/
ngOnDestroy(): void {
this.userService.resultEvent.unsubscribe();
console.log('unsub');
}
/**
* Function creates a new user and subscribes to resultEvent
* @param user The new user
*/
public registerUser(user: RegisterUser) {
this.userService.registerUser(user);
this.userService.resultEvent.subscribe((result: Result) => this.showToast(result));
console.log('subscribed', this.userService.resultEvent);
}
/**
* Result handler, which will show result toast
* @param result Result from the service
*/
private async showToast(result: Result) {
console.log('called')
if (result.success) {
this.toastController.create({
message: 'Benutzer angelegt',
duration: 2000,
}).then((toast) => {
toast.present();
});
} else {
this.toastController.create({
message: 'Ein Fehler ist aufgetreten Code:(' + result.httpCode + ')',
duration: 2000,
}).then((toast) => {
toast.present();
});
}
}
}

我的测试如下: 我正在运行 registerUser(( 方法,该方法订阅了 userService 中的 eventEmitter(在测试中模拟(,然后调用 showToast(( 方法,该方法将显示一个 toast,其中包含事件中服务返回的结果作为值。

import { CUSTOM_ELEMENTS_SCHEMA, EventEmitter } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RegisterUserPage } from './register-user.page';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { UserService } from 'src/app/services/user.service';
import { RegisterUser } from 'src/app/classes/register-user';
import { ToastController } from '@ionic/angular';
import { Result } from 'src/app/classes/result';
describe('RegisterUserPage', () => {
let component: RegisterUserPage;
let fixture: ComponentFixture<RegisterUserPage>;
const userServiceSpy = {
registerUser() {},
async getAllUsersAsync() {},
resultEvent: new EventEmitter()
};
const toastControllerMock = {
create({}) {return new Promise((resolve, reject) => {
resolve();
});
}
};
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ RegisterUserPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [FormsModule, ReactiveFormsModule],
providers: [
{ provide: UserService, useValue: userServiceSpy },
{ provide: ToastController, useValue: toastControllerMock }
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(RegisterUserPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should display the result', async () => {
const userService = TestBed.get(UserService);
const toastController = TestBed.get(ToastController);
spyOn(toastController, 'create').and.callThrough();
component.registerUser(new RegisterUser('', '', '', '', ''));
userService.resultEvent.emit(new Result(400, true));
const successMessage = {
message: 'Benutzer angelegt',
duration: 2000,
};
const failMessage = {
message: 'Ein Fehler ist aufgetreten Code:(500)',
duration: 2000,
};
component['showToast'](new Result(200, true));
expect(toastController.create).toHaveBeenCalledWith(successMessage);
component['showToast'](new Result(500, false));
expect(toastController.create).toHaveBeenCalledWith(failMessage);
});
});

不知何故,ngDestroy()函数被调用,该函数在测试完成之前从事件发射器中取消订阅
因此,我遇到了对象取消订阅错误。

知道如何解决这个问题吗?

按以下方式修复它: 我没有取消订阅事件发射器,而是将订阅保存到 Subscription 类型的变量中并取消订阅。

export class ...{
public resultSubsciption: Subscription;
ngOnDestroy(): void {
this.resultSubsciption.unsubscribe();
}
public registerUser(user: RegisterUser) {
this.userService.registerUser(user);
this.resultSubsciption = this.userService.resultEvent.subscribe((result: Result) => 
this.showToast(result));
}
}

订阅管理应该这样完成:
对象取消订阅错误:当我在角度 2 中使用 ngx-progress 时对象取消订阅错误

相关内容

  • 没有找到相关文章

最新更新