title: How to unit test unsubscribe function in angular
body: <p>I would like to find a way to test unsubscribe function calls on Subscriptions and Subjects.</p>
  
  <p>I came up with a few possible solutions, but every one of these have pros and cons. Please keep in mind that I do not want to alter the access modifier of a variable for testing purposes.</p>
  
  <ol>
  <li>Accessing private variable of component with reflection.</li>
  </ol>
  
  <p>In that case I have a private class variable which stores a subscription:</p>
  
  <p><em>component.ts:</em></p>
  
  <pre class="lang-js prettyprint-override"><code>private mySubscription: Subscription;
  //...
  ngOnInit(): void {
      this.mySubscription = this.store
          .select(mySelector)
          .subscribe((value: any) =&gt; console.log(value));
  }
  
  ngOnDestroy(): void {
      this.mySubscription.unsubscribe();
  }
  </code></pre>
  
  <hr>
  
  <p><em>component.spec.ts:</em></p>
  
  <pre class="lang-js prettyprint-override"><code>spyOn(component['mySubscription'], 'unsubscribe');
  component.ngOnDestroy();
  expect(component['mySubscription'].unsubscribe).toHaveBeenCalledTimes(1);
  </code></pre>
  
  <hr>
  
  <p>pros:</p>
  
  <ul>
  <li>I can reach mySubscription.</li>
  <li>I can test that the unsubscribe method was invoked on the right
  subscription.</li>
  </ul>
  
  <p>cons:</p>
  
  <ul>
  <li>I can reach mySubscription only with reflection, what I would like to    avoid if possible.</li>
  </ul>
  
  <hr>
  
  <ol start="2">
  <li>I create a variable for subscription just like in option 1., but instead of reaching the variable with reflection I simply check that the unsubscribe method was invoked, without knowing the source.</li>
  </ol>
  
  <p><em>component.ts:</em> same as in option 1</p>
  
  <hr>
  
  <p><em>component.spec.ts:</em></p>
  
  <pre class="lang-js prettyprint-override"><code>spyOn(Subscription.prototype, 'unsubscribe');
  component.ngOnDestroy();
  expect(Subscription.prototype.unsubscribe).toHaveBeenCalledTimes(1);
  </code></pre>
  
  <hr>
  
  <p>pros:</p>
  
  <ul>
  <li>I can test that the unsubscribe method was called</li>
  </ul>
  
  <p>cons:</p>
  
  <ul>
  <li>I can not test the source of the invoked unsubscribe method.</li>
  </ul>
  
  <hr>
  
  <ol start="3">
  <li>I implemented a helper function which invokes unsubscribe method on the passed parameters which are subscriptions.</li>
  </ol>
  
  <p><em>subscription.helper.ts:</em></p>
  
  <pre class="lang-js prettyprint-override"><code>export class SubscriptionHelper {
  
      static unsubscribeAll(...subscriptions: Subscription[]) {
          subscriptions.forEach((subscription: Subscription) =&gt; {
                  subscription.unsubscribe();
              });
      }
  }
  </code></pre>
  
  <hr>
  
  <p><em>component.ts:</em> same as in option 1, but ngOnDestroy is different:</p>
  
  <pre class="lang-js prettyprint-override"><code>ngOnDestroy(): void {
      SubscriptionHelper.unsubscribeAll(this.mySubscription);
  }
  </code></pre>
  
  <hr>
  
  <p><em>component.spec.ts:</em></p>
  
  <pre class="lang-js prettyprint-override"><code>spyOn(SubscriptionHelper, 'unsubscribeAll');
  component.ngOnDestroy();
  expect(SubscriptionHelper.unsubscribeAll).toHaveBeenCalledTimes(1);
  </code></pre>
  
  <hr>
  
  <p>pros:</p>
  
  <ul>
  <li>I can test that the helper function was called</li>
  </ul>
  
  <p>cons:</p>
  
  <ul>
  <li>I can not test that the unsubscribe function was called on a specific subscription.</li>
  </ul>
  
  <hr>
  
  <p>What do you guys suggest? How do you test the cleanup in unit test?</p>