How to force call `super.ngOnDestroy`

user_4292623 0
Viewed 363

I have an abstract class that helps in avoiding repetitive code (to unsubscribe observables), it looks like:

export abstract class SubscriptionManagmentDirective implements OnDestroy {
  componetDestroyed = new Subject<void>()

  constructor() {}

  ngOnDestroy(): void {
    this.componetDestroyed.next()
    this.componetDestroyed.unsubscribe()
  }
}

In some cases it happened that I override ngOnDestroy and forget to call super.ngOnDestroy() and then subscriptions go wild. I added a unit test to the extending components to test that un-subscriptions has been called, but to do so I have to actually remember to add them.

My question is,

  • is there a way to force that super.ngOnDestroy() is called whenever the component is extended?
  • or is there a way to write a unit test for the abstract class that would be tested on any component that extend that class?

Any help would be appreciated, thanks.

jasmine observable angular typescript abstract-class
3 Answers

I think the best approach to this would be adding "noImplicitOverride": true to your tsconfig. It won't necessarily help you remember to call a super method but it will force you to be explicit about overriding methods, throwing a compilation error in cases where you override a method without using the override keyword. It is then up to the developer to decide if the super method needs to be called or not.

https://www.typescriptlang.org/tsconfig#noImplicitOverride

user_11282900

  1. No, there is no such way to auto call method from an abstract.

  2. You have to unit test only in isolation. Just create an inline test class that extends your abstract and then unit test ngOnDestroy. It's totally enough.

user_25253370

I can think of only one way, very hacky and ugly. One thing that is enforced is the super() call in the constructor, by TypeScript itself. Therefore you could

class Foo {
  constructor() {
    const oldNgOnDestroy = this.ngOnDestroy;

    this.ngOnDestroy = function() {
      console.log("decorated ngOnDestroy");
      return oldNgOnDestroy();
    }.bind(this);
  }

  ngOnDestroy() {
    console.log("original ngOnDestroy");
  }
}

class Bar extends Foo {
  constructor() {
    super();
  }
}

class Baz extends Foo {
  constructor() {
    super();
  }

  ngOnDestroy() {
    console.log("custom ngOnDestroy");
  }
}

const bar = new Bar();
bar.ngOnDestroy();
const baz = new Baz();
baz.ngOnDestroy();

As I said, hacky and ugly.

user_71942680
Related