如何在 Angular 和 Jasmine 中对退订进行单元测试？

Question

我的组件中有私有类成员，例如

private querySubscription: Subscription;.

在我的ngOnDestroy() 我取消订阅：

ngOnDestroy(): void { this.querySubscription.unsubscribe(); this.userSettingsSubscription.unsubscribe(); }

如何在 jasmine 的单元测试中测试我是否真的正确取消了订阅？我可以以编程方式调用ngOnDestory()，因为它是公开的，但我无法测试我的私人班级成员。

Answer 1

如果您使用的是 Typescript，我想您在设置 testBed 时要在测试模块中测试私有成员，您必须使用注入器调用您的服务。

beforeEach(() => {
    TestBed.configureTestingModule({
        providers: [
            YourService,
        ],
        imports: [ HttpClientTestingModule ],
    });
    const injector = getTestBed();
    service = injector.get(YourService);
}); 

现在您可以使用service.myMethod 访问您的服务公共方法，使用(service as any).privateMethod() 访问您的私有方法。

由于 typescript 始终编译为 JavaScript，而在 JavaScript 中，您没有公共私有成员，因此您必须使用 (service as any) 构造。

编辑 1

在你能够访问一个私有之后，你可以访问它的属性，所以你接下来要做的是（在伪代码中）：

    spyOn((service as any).privateMethod, 'setBar');

    service.ngOnDestroy()

    expect((service as any).privateMethod.setBar).toHaveBeenCalled();

Answer 2

您应该模拟您的私有变量（您可以通过数组表示法访问），然后调用您的函数，并期望订阅被关闭。

Stackblitz

  it('should unsubscribe on destroy', () => {
    component['querySubscription'] = of(true).subscribe();

    component.ngOnDestroy();

    expect(component['querySubscription'].closed).toBeTruthy();
  });

编辑 1

由于数组表示法，此解决方案有效。在 javascript 中，您没有私有或公共变量：您只有变量。

Typescript 强制您遵守私有/公共，但您始终可以解决这个问题。

如果你不想这样做，你应该创建一个公共函数来创建这样的订阅

createSubscription() {
  this.querySubscription = this.someFunction().subscribe();
}

如果您不想使用数组表示法，这是唯一可行的解​​决方案（我忘了说，这根本不是一个坏习惯）。

由你来选择你喜欢哪一个！

Answer 3

可能是这样的：

export class ObservableHelper {
    getMockObservable() {
        const s = new Subscription();
        const obs = new Observable();
        spyOn(obs, 'subscribe').and.returnValue(s);
        spyOn(s, 'unsubscribe');
        return {obs, s};
    }
}

在您的规范文件中：

let helper = new ObservableHelper();
let o1 = helper.getMockObservable();

其中一条评论已经提到，在创建新订阅时必须进行 Mock。如果您正在调用一个外部服务并返回一个 observable，则 o1.obs 可以用作相同的返回值。

例如如果您正在订阅 PubSub 服务：

pubSubSpy.sub.withArgs(jasmine.any(Object), 'test').and.returnValue(o1.obs);


// Act
service.ngOnDestroy();

// Assert
expect(o1.s.unsubscribe).toHaveBeenCalledTimes(1);

Answer 4

在我的 beforeEach 中，我将 Subscription 设置为 rxjs 类的新实例，然后我可以直接监视它。

import { Subject, Subscription } from 'rxjs';
....
let pagingSubscriptionSpy: jasmine.Spy;
beforeEach(() => {
 service.pagingSubscription = new Subscription();
 pagingSubscriptionSpy = spyOn(service.pagingSubscription, 'unsubscribe');
})
....
it('calls getEventunsubscribesPaged', () => {
   expect(pagingSubscriptionSpy).toHaveBeenCalledTimes(1);
});