KaneAI - World’s First E2E Software Testing Agent.Signup for Private Beta 
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.
LambdaTest Learning Hubs:
- JUnit Tutorial
- TestNG Tutorial
- Webdriver Tutorial
- WebDriverIO Tutorial
- Protractor Tutorial
- Selenium 4 Tutorial
- Jenkins Tutorial
- NUnit Tutorial
- Jest Tutorial
- Playwright Tutorial
- Cypress Tutorial
- PyTest Tutorial
YouTube
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Run ng-mocks automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
