Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

How to use ngAfterViewChecked method in ng-mocks

Best JavaScript code snippet using ng-mocks

lifcycle-hooks.spec.ts

Source:lifcycle-hooks.spec.ts

1import { Component } from '@angular/core';2import { TestBed } from '@angular/core/testing';3import { Logger } from '../../../src/lifecycle/app/util/logger';4import { FlatComponent } from './components/flat.component';5import { FirstLevelComponent } from './components/first-level.component';6import { SecondLevelComponent } from './components/second-level.component';7import { ThirdLevelComponent } from './components/third-level.component';8describe('Lifecycle hooks - ', () => {9	class MockLogger {10		private cycles: Array<string> = [];11		log(text: string): void {12			this.cycles.push(text);13		}14		print(): Array<string> {15			return this.cycles;16		}17		clear(): void {18			this.cycles = [];19		}20	}21	let mockLogger = new MockLogger();22	describe('Flat, one level component', () => {23		beforeEach(() => {24			TestBed25				.configureTestingModule({26					imports: [],27					declarations: [28						FlatComponent29					],30					providers: [31						{32							provide: Logger, useValue: mockLogger33						}34					]35				});36		});37		it('should invoke lifecycle hooks - without OnChanges', () => {38			// given39			const expectedCycles = [40				'ngOnInit',41				'ngDoCheck',42				'ngAfterContentInit',43				'ngAfterContentChecked',44				'ngAfterViewInit',45				'ngAfterViewChecked',46				'ngOnDestroy'47			];48			TestBed.overrideTemplate(FlatComponent, `<p>Level one Component</p>`);49			const fixture = TestBed.createComponent(FlatComponent);50			// when51			fixture.detectChanges();52			fixture.destroy();53			// then54			expect(mockLogger.print()).toEqual(expectedCycles);55		});56	});57	/**58	 * OnChanges Lifecycle Hook is invoked only when component has "input" and that property has a value.59	 */60	describe('Component with input should invoke all lifecycle hooks -', () => {61		@Component({62			selector: 'test',63			template: `64				<ct-flat [input]="'value'"></ct-flat>`65		})66		class TestComponent {67		}68		beforeEach(() => {69			mockLogger.clear();70			TestBed71				.configureTestingModule({72					imports: [],73					declarations: [74						TestComponent,75						FlatComponent76					],77					providers: [{78						provide: Logger, useValue: mockLogger79					}]80				});81		});82		it('should fire OnChanges', () => {83			// given84			const expectedCycles = [85				'ngOnChanges',86				'ngOnInit',87				'ngDoCheck',88				'ngAfterContentInit',89				'ngAfterContentChecked',90				'ngAfterViewInit',91				'ngAfterViewChecked',92				'ngOnDestroy'93			];94			const fixture = TestBed.createComponent(TestComponent);95			// when96			fixture.detectChanges();97			fixture.destroy();98			// then99			expect(mockLogger.print()).toEqual(expectedCycles);100		})101	});102	describe('Simple Two level components tree -', () => {103		beforeEach(() => {104			mockLogger.clear();105			TestBed106				.configureTestingModule({107					imports: [],108					declarations: [109						FirstLevelComponent,110						SecondLevelComponent111					],112					providers: [{113						provide: Logger, useValue: mockLogger114					}]115				});116		});117		/**118		 *119		 * <ct-first-level>120		 *     <ct-second-level></ct-second-level>121		 * </ct-first-level>122		 *123		 */124		it('components does not have content', () => {125			// given126			const expectedCycles = [127				'First level - ngOnInit',128				'First level - ngDoCheck',129				'First level - ngAfterContentInit',130				'First level - ngAfterContentChecked',131				'Second level - ngOnInit',132				'Second level - ngDoCheck',133				'Second level - ngAfterContentInit',134				'Second level - ngAfterContentChecked',135				'Second level - ngAfterViewInit',136				'Second level - ngAfterViewChecked',137				'First level - ngAfterViewInit',138				'First level - ngAfterViewChecked',139				'Second level - ngOnDestroy',140				'First level - ngOnDestroy'141			];142			const fixture = TestBed.createComponent(FirstLevelComponent);143			// when144			fixture.detectChanges();145			fixture.destroy();146			// then147			expect(mockLogger.print()).toEqual(expectedCycles);148		});149		it('Second level component has input', () => {150			// given151			const expectedCycles = [152				'First level - ngOnInit',153				'First level - ngDoCheck',154				'First level - ngAfterContentInit',155				'First level - ngAfterContentChecked',156				'Second level - ngOnChanges',157				'Second level - ngOnInit',158				'Second level - ngDoCheck',159				'Second level - ngAfterContentInit',160				'Second level - ngAfterContentChecked',161				'Second level - ngAfterViewInit',162				'Second level - ngAfterViewChecked',163				'First level - ngAfterViewInit',164				'First level - ngAfterViewChecked',165				'Second level - ngOnDestroy',166				'First level - ngOnDestroy'167			];168			TestBed.overrideTemplate(FirstLevelComponent, `<ct-second-level [input]="'Text'" ></ct-second-level>`);169			const fixture = TestBed.createComponent(FirstLevelComponent);170			// when171			fixture.detectChanges();172			fixture.destroy();173			// then174			expect(mockLogger.print()).toEqual(expectedCycles);175		});176	});177	describe('Simple Three level components tree -', () => {178		beforeEach(() => {179			mockLogger.clear();180			TestBed181				.configureTestingModule({182					imports: [],183					declarations: [184						FirstLevelComponent,185						SecondLevelComponent,186						ThirdLevelComponent187					],188					providers: [{189						provide: Logger, useValue: mockLogger190					}]191				});192		});193		/**194		 *195		 * <ct-first-level>196		 *     <ct-second-level>197		 *         <ct-third-level></ct-third-level>198		 *     </ct-second-level>199		 * </ct-first-level>200		 *201		 */202		it('components does not have content', () => {203			// given204			const expectedCycles = [205				'First level - ngOnInit',206				'First level - ngDoCheck',207				'First level - ngAfterContentInit',208				'First level - ngAfterContentChecked',209				'Second level - ngOnInit',210				'Second level - ngDoCheck',211				'Second level - ngAfterContentInit',212				'Second level - ngAfterContentChecked',213				'Third level - ngOnInit',214				'Third level - ngDoCheck',215				'Third level - ngAfterContentInit',216				'Third level - ngAfterContentChecked',217				'Third level - ngAfterViewInit',218				'Third level - ngAfterViewChecked',219				'Second level - ngAfterViewInit',220				'Second level - ngAfterViewChecked',221				'First level - ngAfterViewInit',222				'First level - ngAfterViewChecked',223				'Third level - ngOnDestroy',224				'Second level - ngOnDestroy',225				'First level - ngOnDestroy'226			];227			TestBed.overrideTemplate(SecondLevelComponent, `<ct-third-level ></ct-third-level>`);228			const fixture = TestBed.createComponent(FirstLevelComponent);229			// when230			fixture.detectChanges();231			fixture.destroy();232			// then233			expect(mockLogger.print()).toEqual(expectedCycles);234		});235	});236	describe('input modifications', () => {237		@Component({238			selector: 'test',239			template: `<ct-first-level [input]="val" ></ct-first-level>`240		})241		class InputTestComponent {242			val = 8;243			changeVal() {244				this.val = 10;245			}246		}247		beforeEach(() => {248			TestBed249				.configureTestingModule({250					imports: [],251					declarations: [252						InputTestComponent,253						FirstLevelComponent254					],255					providers: [{256						provide: Logger, useValue: mockLogger257					}]258				});259		});260		it('Change input value of a component', () => {261			// given262			const expectedCycles = [263				'First level - ngOnChanges',264				'First level - ngDoCheck',265				'First level - ngAfterContentChecked',266				'First level - ngAfterViewChecked'267			];268			TestBed.overrideTemplate(FirstLevelComponent, `no content`);269			const fixture = TestBed.createComponent(InputTestComponent);270			// when271			fixture.detectChanges();272			mockLogger.clear();273			fixture.componentInstance.changeVal();274			fixture.detectChanges();275			// then276			expect(mockLogger.print()).toEqual(expectedCycles);277		});278	});...

on-after-view-checked.ts

Source:on-after-view-checked.ts

...16  // changeDetection: ChangeDetectionStrategy.OnPush17})18class GrandChildComponent implements AfterViewChecked {19  @Input() grandChildReceived: string;20  ngAfterViewChecked(){21    console.log('GrandChild: in ngAfterViewChecked');22  }23}24@Component({25  selector: 'child',26  styles: ['.child{background:lightgreen}'],27  directives: [GrandChildComponent],28  template: `29     <div class="child">30      <h2>Child</h2>31      <div>Greeting: {{greeting}}</div>32      <div>Message: <input [(ngModel)]="message"></div>33      <grand-child [grandChildReceived]="message"></grand-child>34    </div>35  `,36  changeDetection: ChangeDetectionStrategy.OnPush37})38class ChildComponent implements AfterViewChecked {39  @Input() greeting: string;40  message: string = 'Initial message';41  ngAfterViewChecked() {42    console.log("Child: in ngAfterViewChecked");43  }44}45@Component({46  selector: 'app',47  directives: [ChildComponent],48  styles: ['.parent {background: lightblue}'],49  template: `50     <div class="parent">51       <h2>Parent</h2>52      <div>Greeting: <input type="text" [value]="greeting" (change)="greeting = $event.target.value"></div>53      <child [greeting]="greeting"></child>54    </div>55  `,56  // changeDetection: ChangeDetectionStrategy.OnPush57})58class AppComponent implements AfterViewChecked {59  greeting: string = 'Hello';60  ngAfterViewChecked() {61    console.log("Parent: in ngAfterViewChecked");62  }63}64enableProdMode();...

ng-after-view-checked.component.ts

Source:ng-after-view-checked.component.ts

...14  }15  ngAfterContentInit(){16    console.log("after content init");17  }18  ngAfterViewChecked(){19    console.log("after view checked")20  }21  clickMe(){22    console.log("link clicked")23  }24  //ngAfterViewChecked () ÄÆ°á»£c gá»i sau ngAfterContentInit25  // ngAfterViewChecked () ÄÆ°á»£c gá»i sau má»i ngAfterContentChecked tiáº¿p theo.26  // KÃch hoáº¡t hÃ m clickMe () sáº½ kÃch hoáº¡t ngAfterViewChecked ()27  // Khi nÃ o báº¡n nÃªn sá» dá»¥ng ngAfterViewChecked?28  // ngAfterViewChecked há»¯u Ãch khi báº¡n29  // muá»n gá»i má»t mÃ³c vÃ²ng Äá»i sau khi táº¥t cáº£ cÃ¡c thÃ nh pháº§n con ÄÃ£ ÄÆ°á»£c khá»i táº¡o vÃ  kiá»m tra....

Using AI Code Generation

1import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';2import { TestComponent } from './test.component';3describe('TestComponent', () => {4  beforeEach(() => MockBuilder(TestComponent));5  it('should create', () => {6    const fixture = MockRender(TestComponent);7    const component = ngMocks.findInstance(TestComponent);8    spyOn(component, 'ngAfterViewChecked');9    fixture.detectChanges();10    expect(component.ngAfterViewChecked).toHaveBeenCalled();11  });12});13import { Component, OnInit } from '@angular/core';14@Component({15})16export class TestComponent implements OnInit {17  constructor() { }18  ngOnInit(): void {19  }20  ngAfterViewChecked(): void {21    console.log('ngAfterViewChecked');22  }23}24div {25  color: red;26}27    ✓ should create (26ms)

Using AI Code Generation

1import {Component, ViewChild} from '@angular/core';2import {TestBed} from '@angular/core/testing';3import {MockBuilder, MockRender, ngMocks} from 'ng-mocks';4@Component({5})6class TargetComponent {7  @ViewChild('myDiv') myDiv: any;8  ngAfterViewChecked(): void {9    console.log('ngAfterViewChecked');10  }11}12describe('ngAfterViewChecked', () => {13  beforeEach(() => MockBuilder(TargetComponent));14  it('should call ngAfterViewChecked', () => {15    const fixture = MockRender(TargetComponent);16    const component = ngMocks.findInstance(TargetComponent);17    spyOn(component, 'ngAfterViewChecked');18    fixture.detectChanges();19    expect(component.ngAfterViewChecked).toHaveBeenCalled();20  });21});

Using AI Code Generation

1import { Component, AfterViewChecked } from '@angular/core';2import { MockBuilder, MockRender } from 'ng-mocks';3import { AppModule } from './app.module';4@Component({5})6class AppComponent implements AfterViewChecked {7  public ngAfterViewChecked(): void {8    console.log('ngAfterViewChecked');9  }10}11describe('AppComponent', () => {12  beforeEach(() => MockBuilder(AppComponent, AppModule));13  it('renders the component', () => {14    const fixture = MockRender(AppComponent);15    expect(fixture.nativeElement).toBeDefined();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 } from '@angular/core';26@Component({27})28export class AppComponent {}29{30  "compilerOptions": {31  },32}33{34  "compilerOptions": {35    "importHelpers": true,

Using AI Code Generation

1import { Component, AfterViewChecked, ViewChild, ElementRef } from '@angular/core';2import { MockComponent } from 'ng-mocks';3import { ChildComponent } from './child.component';4@Component({5})6export class ParentComponent implements AfterViewChecked {7  @ViewChild('child', { static: true }) child: ChildComponent;8  ngAfterViewChecked() {9    console.log(this.child);10  }11}12describe('ParentComponent', () => {13  it('should create', () => {14    const fixture = MockRender(ParentComponent);15    expect(fixture.point.componentInstance).toBeDefined();16  });17});18import { Component } from '@angular/core';19@Component({20})21export class ChildComponent {22  constructor() {}23}24import { MockRender } from 'ng-mocks';25import { ChildComponent } from './child.component';26describe('ChildComponent', () => {27  it('should create', () => {28    const fixture = MockRender(ChildComponent);29    expect(fixture.point.componentInstance).toBeDefined();30  });31});32import { Component, AfterViewChecked, ViewChild, ElementRef } from '@angular/core';33import { MockComponent } from 'ng-mocks';34import { ChildComponent } from './child.component';35@Component({36})37export class ParentComponent implements AfterViewChecked {38  @ViewChild('child', { static: true }) child: ChildComponent;39  ngAfterViewChecked() {40    console.log(this.child);41  }42}43describe('ParentComponent', () => {44  it('should create', () => {45    const fixture = MockRender(ParentComponent);46    expect(fixture.point.componentInstance).toBeDefined();47  });48});

Using AI Code Generation

1import { Component, OnInit } from '@angular/core';2import { MockComponent } from 'ng-mocks';3@Component({4})5export class TestComponent implements OnInit {6  show: boolean = false;7  constructor() {}8  ngOnInit() {}9  ngAfterViewChecked() {10    this.show = true;11  }12}13import { Component, OnInit } from '@angular/core';14@Component({15})16export class MockComponent implements OnInit {17  constructor() {}18  ngOnInit() {}19}20import { async, ComponentFixture, TestBed } from '@angular/core/testing';21import { MockComponent } from 'ng-mocks';22import { TestComponent } from './test';23describe('MockComponent', () => {24  let component: TestComponent;25  let fixture: ComponentFixture<TestComponent>;26  beforeEach(async(() => {27    TestBed.configureTestingModule({28      declarations: [TestComponent, MockComponent(MockComponent)]29    }).compileComponents();30  }));31  beforeEach(() => {32    fixture = TestBed.createComponent(TestComponent);33    component = fixture.componentInstance;34    fixture.detectChanges();35  });36  it('should create', () => {37    expect(component).toBeTruthy();38  });39});

Using AI Code Generation

1import { Component } from '@angular/core';2import { MockComponent } from 'ng-mocks';3@Component({4})5export class TestComponent {6  data = 'test';7}8import { Component, Input, AfterViewChecked } from '@angular/core';9@Component({10    <div>{{ data }}</div>11})12export class ChildComponent implements AfterViewChecked {13  @Input() data: string;14  ngAfterViewChecked() {15    console.log('ngAfterViewChecked called');16  }17}18import { ComponentFixture, TestBed } from '@angular/core/testing';19import { MockComponent } from 'ng-mocks';20import { ChildComponent } from './child-component';21import { TestComponent } from './test';22describe('TestComponent', () => {23  let component: TestComponent;24  let fixture: ComponentFixture<TestComponent>;25  beforeEach(async () => {26    await TestBed.configureTestingModule({27      declarations: [TestComponent, MockComponent(ChildComponent)],28    }).compileComponents();29  });30  beforeEach(() => {31    fixture = TestBed.createComponent(TestComponent);32    component = fixture.componentInstance;33    fixture.detectChanges();34  });35  it('should create', () => {36    expect(component).toBeTruthy();37  });38});39import { ComponentFixture, TestBed } from '@angular/core/testing';40import { MockComponent } from 'ng-mocks';41import { ChildComponent } from './child-component';42import { TestComponent } from './test';43describe('TestComponent', () => {44  let component: TestComponent;45  let fixture: ComponentFixture<TestComponent>;46  beforeEach(async () => {47    await TestBed.configureTestingModule({48      declarations: [TestComponent, MockComponent(ChildComponent)],49    }).compileComponents();50  });51  beforeEach(() => {52    fixture = TestBed.createComponent(TestComponent);53    component = fixture.componentInstance;54    fixture.detectChanges();55  });56  it('should create', () => {57    expect(component).toBeTruthy();58  });59});60import { ComponentFixture, TestBed } from '@angular/core/testing';61import { MockComponent } from 'ng-mocks';62import { ChildComponent } from './child-component';63import { TestComponent } from './test';64describe('TestComponent', () =>

Using AI Code Generation

1import { Component, AfterViewChecked } from '@angular/core';2@Component({3})4export class AppComponent implements AfterViewChecked {5  show = false;6  ngAfterViewChecked() {7    this.show = true;8  }9}10import { MockBuilder, MockRender } from 'ng-mocks';11import { AppComponent } from './test';12describe('AppComponent', () => {13  beforeEach(() => MockBuilder(AppComponent));14  it('should create the app', () => {15    const fixture = MockRender(AppComponent);16    expect(fixture.nativeElement).toBeDefined();17  });18});

Using AI Code Generation

1import { Component, Input, ViewChild, ViewChildren, AfterViewChecked } from '@angular/core';2@Component({3})4export class MockingNgAfterViewCheckedComponent implements AfterViewChecked {5  public ngAfterViewChecked() {6    console.log('ngAfterViewChecked called');7  }8}9import { MockBuilder, MockRender, MockedComponentFixture } from 'ng-mocks';10import { MockingNgAfterViewCheckedComponent } from './test';11describe('MockingNgAfterViewCheckedComponent', () => {12  let component: MockingNgAfterViewCheckedComponent;13  let fixture: MockedComponentFixture<MockingNgAfterViewCheckedComponent>;14  beforeEach(() => MockBuilder(MockingNgAfterViewCheckedComponent));15  beforeEach(() => {16    fixture = MockRender(MockingNgAfterViewCheckedComponent);17    component = fixture.point.componentInstance;18  });19  it('should call ngAfterViewChecked', () => {20    spyOn(component, 'ngAfterViewChecked');21    fixture.detectChanges();22    expect(component.ngAfterViewChecked).toHaveBeenCalled();23  });24});

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.