KaneAI - World’s First E2E Software Testing Agent.Signup for Private Beta Join TestMu Conference

How to use ngOnDestroy method in ng-mocks

Best JavaScript code snippet using ng-mocks

auto-unusbscribe.decorator.spec.ts

Source:auto-unusbscribe.decorator.spec.ts

...6  @AutoUnsubscribe()7  public parameter$ = new BehaviorSubject(0);8  @AutoUnsubscribe()9  public subscription = interval(1000).subscribe();10  public ngOnDestroy(): void { }11  @AutoUnsubscribe()12  public methodObservable(): BehaviorSubject<number> {13    return new BehaviorSubject(0);14  }15  @AutoUnsubscribe()16  public methodSubscription(): Subscription {17    return new BehaviorSubject(0).subscribe();18  }19}20describe('AutoUnsubscribe', () => {21  let component: TestComponent;22  beforeEach(() => {23    component = new TestComponent();24  });25  it('should unsubscribe from parameter after ngOnDestroy called', () => {26    const subscription = component.parameter$.subscribe();27    expect(subscription.closed).toBeFalse();28    component.ngOnDestroy();29    expect(subscription.closed).toBeTrue();30  });31  it('should unsubscribe from method result after ngOnDestroy called', () => {32    const subscription = component.methodObservable().subscribe();33    expect(subscription.closed).toBeFalse();34    component.ngOnDestroy();35    expect(subscription.closed).toBeTrue();36  });37  it('should unsubscribe from method thar return subscription after ngOnDestroy called', () => {38    const subscription = component.methodSubscription();39    expect(subscription.closed).toBeFalse();40    component.ngOnDestroy();41    expect(subscription.closed).toBeTrue();42  });43  it('should unsubscribe from overided parameter after ngOnDestroy called', () => {44    const subscription1 = component.parameter$.subscribe();45    component.parameter$ = new BehaviorSubject(1);46    const subscription2 = component.parameter$.subscribe();47    expect(subscription1.closed).toBeFalse();48    expect(subscription2.closed).toBeFalse();49    component.ngOnDestroy();50    expect(subscription1.closed).toBeTrue();51    expect(subscription2.closed).toBeTrue();52  });53  it('should unsubscribe from observables with pipe after ngOnDestroy called', () => {54    const subscription = component.parameter$55      .pipe(switchMap(() => of(1)))56      .subscribe();57    expect(subscription.closed).toBeFalse();58    component.ngOnDestroy();59    expect(subscription.closed).toBeTrue();60  });61  it('should unsubscribe from observables with lift after ngOnDestroy called', () => {62    const subscription = component.parameter$63      .lift(switchMap(() => of(1)))64      .subscribe();65    expect(subscription.closed).toBeFalse();66    component.ngOnDestroy();67    expect(subscription.closed).toBeTrue();68  });69  it('should unsubscribe from asObservable() after ngOnDestroy called', () => {70    const subscription = component.parameter$.asObservable().subscribe();71    expect(subscription.closed).toBeFalse();72    component.ngOnDestroy();73    expect(subscription.closed).toBeTrue();74  });75  it('should unsubscribe from subscription of parameter only in destroyed instance', () => {76    const subscriptionFirst = component.parameter$.subscribe();77    const newInstance = new TestComponent();78    const subscriptionSecond = newInstance.parameter$.subscribe();79    newInstance.ngOnDestroy();80    expect(subscriptionSecond.closed).toBeTrue();81    expect(subscriptionFirst.closed).toBeFalse();82  });83  it('should unsubscribe from subscription of method only in destroyed instance', () => {84    const subscriptionFirst = component.methodObservable().subscribe();85    const newInstance = new TestComponent();86    const subscriptionSecond = newInstance.methodObservable().subscribe();87    newInstance.ngOnDestroy();88    expect(subscriptionSecond.closed).toBeTrue();89    expect(subscriptionFirst.closed).toBeFalse();90  });91  it('should unsubscribe from subscription of method with subscription only in destroyed instance', () => {92    const subscriptionFirst = component.methodSubscription();93    const newInstance = new TestComponent();94    const subscriptionSecond = newInstance.methodSubscription();95    newInstance.ngOnDestroy();96    expect(subscriptionSecond.closed).toBeTrue();97    expect(subscriptionFirst.closed).toBeFalse();98  });99  it('should unsubscribe from parameter with subscription', () => {100    expect(component.subscription.closed).toBeFalse();101    component.ngOnDestroy();102    expect(component.subscription.closed).toBeTrue();103  });...

auto-unsubscribe.spec.ts

Source:auto-unsubscribe.spec.ts

...12  it("should call unsubscribe on destroy", () => {13    @AutoUnsubscribe()14    class TodsComponent {15      sub = mockSubscription;16      ngOnDestroy() {}17    }18    new TodsComponent().ngOnDestroy();19    expect(mockSubscription.unsubscribe.mock.calls.length).toBe(1);20  });21  it("should call unsubscribe on custom event callback", () => {22    @AutoUnsubscribe({ event: "ionViewDidLeave" })23    class TodsComponent {24      sub = mockSubscription;25      ngOnDestroy() {}26      ionViewDidLeave() {}27    }28    const cmp = new TodsComponent();29    cmp.ngOnDestroy();30    expect(mockSubscription.unsubscribe.mock.calls.length).toBe(0);31    cmp.ionViewDidLeave();32    expect(mockSubscription.unsubscribe.mock.calls.length).toBe(1);33  });34  it("should work with multiple observables", () => {35    @AutoUnsubscribe()36    class TodsComponent {37      sub = mockSubscription;38      sub2 = mockSubscription2;39      ngOnDestroy() {}40    }41    new TodsComponent().ngOnDestroy();42    expect(mockSubscription.unsubscribe.mock.calls.length).toBe(1);43    expect(mockSubscription2.unsubscribe.mock.calls.length).toBe(1);44  });45  it("should NOT unsubscribe if property is in blacklist", () => {46    @AutoUnsubscribe({ blackList: ["sub"] })47    class TodsComponent {48      sub = mockSubscription;49      sub2 = mockSubscription2;50      ngOnDestroy() {}51    }52    new TodsComponent().ngOnDestroy();53    expect(mockSubscription.unsubscribe.mock.calls.length).toBe(0);54    expect(mockSubscription2.unsubscribe.mock.calls.length).toBe(1);55  });56  describe("includeArrays", () => {57    it("should unsubscribe an array of subscriptions", () => {58      @AutoUnsubscribe({ arrayName: "subs" })59      class TodsComponent {60        subs = Array(3).fill(mockSubscription);61        ngOnDestroy() {}62      }63      new TodsComponent().ngOnDestroy();64      expect(mockSubscription.unsubscribe.mock.calls.length).toBe(3);65    });66  });67  describe("arrayName", () => {68    beforeEach(() => {69      @AutoUnsubscribe({ arrayName: "subscriptions" })70      class TodsComponent {71        subscriptions = Array(3).fill(mockSubscription);72        subs = Array(3).fill(mockSubscription2);73        ngOnDestroy() {}74      }75      new TodsComponent().ngOnDestroy();76    });77    it(`should unsubscribe from subscriptions in specified array`, () => {78      expect(mockSubscription.unsubscribe.mock.calls.length).toBe(3);79    });80    it(`should not unsubscribe from subscriptions in other arrays`, () => {81      expect(mockSubscription2.unsubscribe.mock.calls.length).toBe(0);82    });83  });...

child-ngondestroy.component.ts

Source:child-ngondestroy.component.ts

...8  constructor() { }9  ngOnInit(): void {10    console.log("child init")11  }12  ngOnDestroy(){13    console.log("destroying child...")14  }15  //ngOnDestroy () ÄÆ°á»£c gá»i khi má»t thÃ nh pháº§n sáº¯p bá» há»§y.16  // LÆ°u Ã½ cÃ¡ch vÃ dá»¥ "há»§y" thÃ nh pháº§n con thÃ´ng qua Äiá»u kiá»n ngIf = 'showChild'17  //Khi nÃ o thÃ¬ báº¡n nÃªn sá» dá»¥ng ngOnDestroy?18  // Sá» dá»¥ng ngOnDestroy cÃ³ Ã½ nghÄ©a khi báº¡n muá»n triá»n khai hÃ nh vi tÃ¹y chá»nh khi má»t thÃ nh pháº§n bá» phÃ¡ há»§y.19  // ngOnDestroy cÃ³ thá» há»¯u Ãch khi báº¡n cáº§n há»§y ÄÄng kÃ½ khá»i cÃ¡c trang cÃ³ thá» quan sÃ¡t20  // hoáº·c thá»±c hiá»n báº¥t ká»³ thao tÃ¡c dá»n dáº¹p nÃ o khÃ¡c khi há»§y má»t thÃ nh pháº§n....

Using AI Code Generation

1import { Component, Input, OnDestroy, OnInit } from '@angular/core';2import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';3import { Subject } from 'rxjs';4import { takeUntil } from 'rxjs/operators';5import { TestComponent } from './test.component';6@Component({7})8export class TestComponent implements OnInit, OnDestroy {9  @Input() name: string;10  private destroyed = new Subject();11  constructor() {}12  ngOnInit(): void {13    setTimeout(() => {14      this.name = 'Angular';15    }, 500);16  }17  ngOnDestroy(): void {18    this.destroyed.next();19    this.destroyed.complete();20  }21}22import { Component, Input, OnDestroy, OnInit } from '@angular/core';23import { Subject } from 'rxjs';24import { takeUntil } from 'rxjs/operators';25@Component({26    <h1>{{ name }}</h1>27})28export class TestComponent implements OnInit, OnDestroy {29  @Input() name: string;30  private destroyed = new Subject();31  constructor() {}32  ngOnInit(): void {33    setTimeout(() => {34      this.name = 'Angular';35    }, 500);36  }37  ngOnDestroy(): void {38    this.destroyed.next();39    this.destroyed.complete();40  }41}42import { MockBuilder, MockRender } from 'ng-mocks';43import { TestComponent } from './test.component';44import { TestComponent } from './test.component';45describe('TestComponent', () => {46  beforeEach(() => MockBuilder(TestComponent).keep(TestComponent));47  it('should create', () => {48    const fixture = MockRender(TestComponent, { name: 'Angular' });49    ngMocks.expectInstance(TestComponent);50    ngMocks.expectInstance(TestComponent);51    expect(fixture.point.componentInstance).toBeTruthy();52    expect(fixture.point.componentInstance).toBeTruthy();53  });54});

Using AI Code Generation

1import { Component, OnDestroy } from '@angular/core';2import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';3@Component({4})5export class TestComponent implements OnDestroy {6  ngOnDestroy(): void {7    console.log('destroyed');8  }9}10describe('TestComponent', () => {11  beforeEach(() => MockBuilder(TestComponent));12  it('should be destroyed', () => {13    const fixture = MockRender(TestComponent);14    const component = ngMocks.findInstance(TestComponent);15    expect(component).toBeDefined();16    fixture.destroy();17    expect(component).toBeUndefined();18  });19});20import { TestComponent } from './test';21describe('TestComponent', () => {22  beforeEach(() => {23    spyOn(TestComponent.prototype, 'ngOnDestroy');24  });25  it('should be destroyed', () => {26    const fixture = MockRender(TestComponent);27    fixture.destroy();28    expect(TestComponent.prototype.ngOnDestroy).toHaveBeenCalled();29  });30});31describe('TestComponent', () => {32  beforeEach(() => {33    spyOn(TestComponent.prototype, 'ngOnDestroy');34  });35  it('should be destroyed', () => {36    const fixture = MockRender(TestComponent);37    fixture.destroy();38    expect(TestComponent.prototype.ngOnDestroy).toHaveBeenCalled();39  });40});

Using AI Code Generation

1import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';2import { MyComponent } from './my-component';3describe('MyComponent', () => {4  beforeEach(() => MockBuilder(MyComponent));5  it('should destroy the component', () => {6    const fixture = MockRender(MyComponent);7    ngMocks.destroy(fixture);8  });9});10import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';11import { MyComponent } from './my-component';12describe('MyComponent', () => {13  beforeEach(() => MockBuilder(MyComponent));14  it('should destroy the component instance', () => {15    const fixture = MockRender(MyComponent);16    ngMocks.destroy(fixture.point.componentInstance);17  });18});

Using AI Code Generation

1import { MockBuilder, MockRender, MockInstance } from 'ng-mocks';2import { MyComponent } from './my-component';3describe('MyComponent', () => {4  beforeEach(() => MockBuilder(MyComponent));5  it('should call ngOnDestroy', () => {6    const fixture = MockRender(MyComponent);7    const instance = MockInstance(MyComponent);8    spyOn(instance, 'ngOnDestroy');9    fixture.destroy();10    expect(instance.ngOnDestroy).toHaveBeenCalled();11  });12});13import { Component, OnDestroy } from '@angular/core';14@Component({15})16export class MyComponent implements OnDestroy {17  ngOnDestroy(): void {18    console.log('ngOnDestroy called');19  }20}21import { MockBuilder, MockRender, MockInstance } from 'ng-mocks';22import { MyComponent } from './my-component';23describe('MyComponent', () => {24  beforeEach(() => MockBuilder(MyComponent));25  it('should call ngOnDestroy', () => {26    const fixture = MockRender(MyComponent);27    const instance = MockInstance(MyComponent);28    spyOn(instance, 'ngOnDestroy');29    fixture.destroy();30    expect(instance.ngOnDestroy).toHaveBeenCalled();31  });32});33import { Component, OnDestroy } from '@angular/core';34@Component({35})36export class MyComponent implements OnDestroy {37  ngOnDestroy(): void {38    console.log('ngOnDestroy called');39  }40}41import { MockBuilder, MockRender, MockInstance } from 'ng-mocks';42import { MyComponent } from './my-component';43describe('MyComponent', () => {44  beforeEach(() => MockBuilder(MyComponent));45  it('should call ngOnDestroy', () => {46    const fixture = MockRender(MyComponent);47    const instance = MockInstance(MyComponent);48    spyOn(instance, 'ngOnDestroy');49    fixture.destroy();50    expect(instance.ngOnDestroy).toHaveBeenCalled();51  });52});53import { Component, OnDestroy } from '@angular/core';54@Component({55})56export class MyComponent implements OnDestroy {57  ngOnDestroy(): void {58    console.log('ngOnDestroy called');59  }60}61import { MockBuilder, MockRender

Using AI Code Generation

1import { MockInstance } from 'ng-mocks';2import { Component } from '@angular/core';3import { Subject } from 'rxjs';4@Component({5})6export class TestComponent {7  private _ngUnsubscribe = new Subject();8  ngOnDestroy() {9    this._ngUnsubscribe.next();10    this._ngUnsubscribe.complete();11  }12}13describe('TestComponent', () => {14  let component: TestComponent;15  beforeEach(() => {16    component = MockInstance(TestComponent);17  });18  it('should create', () => {19    expect(component).toBeTruthy();20  });21  it('should call ngOnDestroy', () => {22    const spy = spyOn(component, 'ngOnDestroy');23    component.ngOnDestroy();24    expect(spy).toHaveBeenCalled();25  });26});27import { MockInstance } from 'ng-mocks';28import { Component } from '@angular/core';29import { Subject } from 'rxjs';30@Component({31})32export class TestComponent {33  private _ngUnsubscribe = new Subject();34  ngOnDestroy() {35    this._ngUnsubscribe.next();36    this._ngUnsubscribe.complete();37  }38}39describe('TestComponent', () => {40  let component: TestComponent;41  beforeEach(() => {42    component = MockInstance(TestComponent);43  });44  it('should create', () => {45    expect(component).toBeTruthy();46  });47  it('should call ngOnDestroy', () => {48    const spy = spyOn(component, 'ngOnDestroy');49    component.ngOnDestroy();50    expect(spy).toHaveBeenCalled();51  });52});53import { MockInstance } from 'ng-mocks';54import { Component } from '@angular/core';55import { Subject } from 'rxjs';56@Component({57})58export class TestComponent {59  private _ngUnsubscribe = new Subject();60  ngOnDestroy() {61    this._ngUnsubscribe.next();62    this._ngUnsubscribe.complete();63  }64}65describe('TestComponent', () => {66  let component: TestComponent;67  beforeEach(() => {68    component = MockInstance(TestComponent);69  });70  it('should create', () => {71    expect(component).toBeTruthy();72  });

Using AI Code Generation

1import { Component } from '@angular/core';2import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';3@Component({4})5class TargetComponent {6  ngOnDestroy() {7    console.log('ngOnDestroy called');8  }9}10describe('ngOnDestroy', () => {11  beforeEach(() => MockBuilder(TargetComponent));12  it('check ngOnDestroy method called', () => {13    const fixture = MockRender(TargetComponent);14    fixture.destroy();15    expect(ngMocks.formatText(fixture.debugElement)).toEqual('ngOnDestroy called');16  });17});

Using AI Code Generation

1import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';2import { AppModule } from './app.module';3describe('MockBuilder', () => {4  beforeEach(() => MockBuilder(AppModule));5  it('should render', () => {6    const fixture = MockRender();7    expect(fixture).toBeDefined();8  });9  it('should call ngOnDestroy', () => {10    const fixture = MockRender();11    const component = fixture.point.componentInstance;12    ngMocks.stubMember(component, 'ngOnDestroy', () => {13      console.log('ngOnDestroy called');14    });15    ngMocks.triggerLifecycle(fixture.point.componentInstance, 'ngOnDestroy');16  });17});18import { NgModule } from '@angular/core';19import { BrowserModule } from '@angular/platform-browser';20import { AppComponent } from './app.component';21@NgModule({22  imports: [BrowserModule],23})24export class AppModule {}25import { Component, OnDestroy } from '@angular/core';26@Component({27})28export class AppComponent implements OnDestroy {29  title = 'ng-mocks';30  ngOnDestroy(): void {31    console.log('ngOnDestroy called');32  }33}34import { Component, OnDestroy } from '@angular/core';35@Component({36})37export class ChildComponent implements OnDestroy {38  ngOnDestroy(): void {39    console.log('ngOnDestroy called');40  }41}42import { MockBuilder, MockRender } from 'ng-mocks';43import { AppModule } from '../app.module';44import { ChildComponent } from './child.component';45describe('ChildComponent', () => {46  beforeEach(() => MockBuilder(ChildComponent, AppModule));47  it('should render', () => {48    const fixture = MockRender(ChildComponent);49    expect(fixture).toBeDefined();50  });51});

Using AI Code Generation

1import { MockRender } from 'ng-mocks';2describe('MockRender', () => {3  it('destroy', () => {4    const fixture = MockRender(`5    `);6    expect(fixture.destroy).toBeDefined();7    expect(fixture.destroy).toBeInstanceOf(Function);8    fixture.destroy();9  });10});11import { MockRender } from 'ng-mocks';12describe('MockRender', () => {13  it('destroy', () => {14    const fixture = MockRender(`15    `);16    expect(fixture.destroy).toBeDefined();17    expect(fixture.destroy).toBeInstanceOf(Function);18    fixture.destroy();19  });20});21import { MockRender } from 'ng-mocks';22describe('MockRender', () => {23  it('destroy', () => {24    const fixture = MockRender(`25    `);26    expect(fixture.destroy).toBeDefined();27    expect(fixture.destroy).toBeInstanceOf(Function);28    fixture.destroy();29  });30});31import { MockRender } from 'ng-mocks';32describe('MockRender', () => {33  it('destroy', () => {34    const fixture = MockRender(`35    `);36    expect(fixture.destroy).toBeDefined();37    expect(fixture.destroy).toBeInstanceOf(Function);38    fixture.destroy();39  });40});41import { MockRender } from 'ng-mocks';42describe('MockRender', () => {43  it('destroy', () => {44    const fixture = MockRender(`45    `);46    expect(fixture.destroy).toBeDefined();47    expect(fixture.destroy).toBeInstanceOf(Function);48    fixture.destroy();49  });50});

Using AI Code Generation

1ngMocks.defaultMock(ngMocks.defaultMock, {2  ngOnDestroy: () => {3    console.log('ngOnDestroy called');4  }5});6import {TestBed} from '@angular/core/testing';7import {Test} from './test';8describe('Test', () => {9  let test: Test;10  beforeEach(() => {11    TestBed.configureTestingModule({12    });13    test = TestBed.createComponent(Test).componentInstance;14  });15  it('should call ngOnDestroy', () => {16    test.ngOnDestroy();17  });18});

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.