1. 首页
  2. 问题列表
  3. 如何在角单元测试退订功能
提问者：小点点

如何在角单元测试退订功能


我想找到一种方法来测试订阅和主题上的取消订阅函数调用。

我想出了一些可能的解决方案，但每一个都有优缺点。请记住，我不想出于测试目的更改变量的访问修饰符。

  1. 使用反射访问组件的私有变量。

在这种情况下，我有一个存储订阅的私有类变量：

组件. ts：

private mySubscription: Subscription;
//...
ngOnInit(): void {
    this.mySubscription = this.store
        .select(mySelector)
        .subscribe((value: any) => console.log(value));
}

ngOnDestroy(): void {
    this.mySubscription.unsubscribe();
}

组件.规格：

spyOn(component['mySubscription'], 'unsubscribe');
component.ngOnDestroy();
expect(component['mySubscription'].unsubscribe).toHaveBeenCalledTimes(1);

优点：

  • 我可以访问mySubscription。
  • 我可以测试取消订阅方法是否在正确的订阅上调用了。

缺点：

  • 我只能通过反射来访问mySubscription，如果可能的话，我想避免这种情况。

组件. ts：与选项1相同

组件.规格：

spyOn(Subscription.prototype, 'unsubscribe');
component.ngOnDestroy();
expect(Subscription.prototype.unsubscribe).toHaveBeenCalledTimes(1);

优点：

  • 我可以测试取消订阅方法是否被调用

缺点：

  • 我无法测试调用的取消订阅方法的来源。

订阅. helper.ts：

export class SubscriptionHelper {

    static unsubscribeAll(...subscriptions: Subscription[]) {
        subscriptions.forEach((subscription: Subscription) => {
                subscription.unsubscribe();
            });
    }
}

组件. ts：与选项1相同，但ngOnDestroy不同：

ngOnDestroy(): void {
    SubscriptionHelper.unsubscribeAll(this.mySubscription);
}

组件.规格：

spyOn(SubscriptionHelper, 'unsubscribeAll');
component.ngOnDestroy();
expect(SubscriptionHelper.unsubscribeAll).toHaveBeenCalledTimes(1);

优点：

  • 我可以测试辅助函数是否被调用

缺点：

  • 我无法测试取消订阅功能是否在特定订阅上调用。

你们有什么建议？如何在单元测试中测试清理？


共3个答案

匿名用户

我也遇到了同样的问题，这是我的解决方案：

组件. ts：

private subscription: Subscription;
//...
ngOnInit(): void {
    this.subscription = this.route.paramMap.subscribe((paramMap: ParamMap) => {
        // ...
    });
}

ngOnDestroy(): void {
    this.subscription.unsubscribe();
}

组件.规格：


let dataMock;

let storeMock: Store;
let storeStub: {
    select: Function,
    dispatch: Function
};

let paramMapMock: ParamMap;
let paramMapSubscription: Subscription;
let paramMapObservable: Observable<ParamMap>;

let activatedRouteMock: ActivatedRoute;
let activatedRouteStub: {
    paramMap: Observable<ParamMap>;
};

beforeEach(async(() => {
    dataMock = { /* some test data */ };

    storeStub = {
        select: (fn: Function) => of((id: string) => dataMock),
        dispatch: jasmine.createSpy('dispatch')
    };

    paramMapMock = {
        keys: [],
        has: jasmine.createSpy('has'),
        get: jasmine.createSpy('get'),
        getAll: jasmine.createSpy('getAll')
    };

    paramMapSubscription = new Subscription();
    paramMapObservable = new Observable<ParamMap>();

    spyOn(paramMapSubscription, 'unsubscribe').and.callThrough();
    spyOn(paramMapObservable, 'subscribe').and.callFake((fn: Function): Subscription => {
        fn(paramMapMock);
        return paramMapSubscription;
    });

    activatedRouteStub = {
        paramMap: paramMapObservable
    };

    TestBed.configureTestingModule({
       // ...
       providers: [
           { provide: Store, useValue: storeStub },
           { provide: ActivatedRoute, useValue: activatedRouteStub }
       ]
    })
    .compileComponents();
}));

// ...

it('unsubscribes when destoryed', () => {
    fixture.detectChanges();

    component.ngOnDestroy();

    expect(paramMapSubscription.unsubscribe).toHaveBeenCalled();
});

这对我有用，我希望对你也有用！

匿名用户

我想出了一个让它工作的方法。

首先，我不会为每个订阅创建一个订阅实例，我通常只使用一个订阅实例，并通过使用实现teardownLogic并允许子订阅的me方法“add”添加到我需要的尽可能多的订阅中。

private subscriptions: Subscription;
 //...
ngOnInit(): void {
  this.mySubscription.add(
    this.store
      .select(mySelector)
      .subscribe((value: any) => console.log(value))
  );
}

ngOnDestroy(): void {
  this.subscriptions.unsubscribe();
}

通过这样做，在我的测试中，我可以依赖订阅原型并检测取消订阅方法调用。在这种情况下，在我调用ngOnDestroy之后。

const spy = spyOn(Subscription.prototype, 'unsubscribe');
component.ngOnDestroy();
expect(spy).toHaveBeenCalledTimes(1);

匿名用户

你觉得这个好看吗？

component.mySubscription = new Subscription();

spyOn(component.mySubscription, 'unsubscribe');
component.ngOnDestroy();

expect(component.mySubscription.unsubscribe).toHaveBeenCalledTimes(1);

相关问题