How to use afterViewInit method in ng-mocks

Best JavaScript code snippet using ng-mocks

rx-state.component-patterns.spec.ts

Source:rx-state.component-patterns.spec.ts

1import { ComponentFixture, TestBed } from '@angular/core/testing';2import {3  AfterViewInit,4  Component,5  Input,6  Output,7  ViewChild,8} from '@angular/core';9import { initialPrimitiveState, PrimitiveState } from '@test-helpers';10import { Observable, Subject } from 'rxjs';11import { RxState } from '@rx-angular/state';12import { select } from '@rx-angular/state/selections';13const initialChildState = { str: 'initialChildState' };14@Component({15  selector: 'rx-angular-state-glue-test',16  template: `17    <span id="child">{{18      (str$ | async) == null ? 'undefined' : (str$ | async)19    }}</span>20  `,21})22export class RxStateGlueComponent23  extends RxState<{ str: string }>24  implements AfterViewInit {25  afterViewInit = false;26  str$ = this.select('str');27  @Input()28  set str(str: string) {29    if (str !== null && str !== '') {30      this.set({ str });31    }32  }33  @Output()34  strChange: Observable<string> = this.$.pipe(select('str'));35  @Output()36  strChangeWrong: Observable<string> = this.select('str');37  constructor() {38    super();39    this.set(initialChildState);40  }41  ngAfterViewInit(): void {42    this.afterViewInit = true;43  }44}45@Component({46  selector: 'rx-angular-state-glue-container-test',47  template: `48    <span id="parent">{{49      (str$ | async) == null ? 'undefined' : (str$ | async)50    }}</span>51    <rx-angular-state-glue-test52      [str]="str$ | async"53      (strChange)="strChange$.next($event)"54      (strChangeWrong)="strChangeWrong$.next($event)"55    >56    </rx-angular-state-glue-test>57  `,58})59export class RxStateGlueContainerComponent60  extends RxState<PrimitiveState & { strWrong: string }>61  implements AfterViewInit {62  strChange$ = new Subject<string>();63  strChangeWrong$ = new Subject<string>();64  str$ = this.select('str');65  afterViewInit = false;66  @ViewChild(RxStateGlueComponent)67  child: RxStateGlueComponent;68  constructor() {69    super();70    this.connect('str', this.strChange$);71    this.connect('strWrong', this.strChangeWrong$);72  }73  ngAfterViewInit(): void {74    this.afterViewInit = true;75  }76}77describe('GlueTestComponent', () => {78  let parent: RxStateGlueContainerComponent;79  let parentFixture: ComponentFixture<RxStateGlueContainerComponent>;80  beforeEach(() => {81    TestBed.configureTestingModule({82      declarations: [RxStateGlueComponent, RxStateGlueContainerComponent],83      teardown: { destroyAfterEach: true },84    });85    parentFixture = TestBed.createComponent(RxStateGlueContainerComponent);86    parentFixture.detectChanges();87    parent = parentFixture.componentInstance;88  });89  it('should render values in parent initial', () => {90    parent.set(initialPrimitiveState);91    expect(parent.get()?.str).toBe(initialPrimitiveState.str);92  });93  it('should render values changes in parent', () => {94    parent.set(initialPrimitiveState);95    expect(parent.get()?.str).toBe(initialPrimitiveState.str);96    parent.set({ str: 'changeInParent' });97    // @TODO use state checker98    expect(parent.get()?.str).toBe('changeInParent');99  });100  it('should render values in child initial', () => {101    parent.set(initialPrimitiveState);102    parentFixture.detectChanges();103    expect(parent.child.get()?.str).toBe(initialPrimitiveState.str);104  });105  it('should pass values from parent to child', () => {106    parent.set(initialPrimitiveState);107    parentFixture.detectChanges();108    expect(parent.child.get()?.str).toBe(initialPrimitiveState.str);109    parent.set({ str: 'newParent' });110    parentFixture.detectChanges();111    expect(parent.child.get()?.str).toBe('newParent');112  });113  it('should work with output initialisation', () => {114    expect(parent.afterViewInit).toBeTruthy();115    expect(parent.child.afterViewInit).toBeTruthy();116    expect(parent.get().str).toBe(undefined);117    expect(parent.child.get().str).toBe(initialChildState.str);118    const value1FromParent = 'value1FromParent';119    parent.set({ str: value1FromParent });120    expect(parent.get().str).toBe(value1FromParent);121    expect(parent.child.get().str).toBe(initialChildState.str);122    parentFixture.detectChanges();123    expect(parent.get().str).toBe(value1FromParent);124    expect(parent.child.get().str).toBe(value1FromParent);125  });126  it('should work wrong output initialisation', () => {127    expect(parent.afterViewInit).toBeTruthy();128    expect(parent.child.afterViewInit).toBeTruthy();129    expect(parent.get().str).toBe(undefined);130    expect(parent.get().strWrong).toBe(initialChildState.str);131    expect(parent.child.get().str).toBe(initialChildState.str);132  });...

widget.ts

Source:widget.ts

...57        this.cd.detectChanges();58      }59      this.firstVisual = true;60    });61    this.afterViewInit();62  }63  setValue(value: SFValue) {64    this.formProperty.setValue(value, false);65    di(this.ui, 'valueChanges', this.formProperty.path, this.formProperty);66  }67  get value() {68    return this.formProperty.value;69  }70  detectChanges(onlySelf = false) {71    if (onlySelf) {72      this.cd.markForCheck();73    } else {74      this.formProperty.root.widget.cd.markForCheck();75    }76  }77  abstract reset(value: SFValue): void;78  abstract afterViewInit(): void;79}80export class ControlWidget extends Widget<FormProperty, SFUISchemaItem> {81  reset(_value: SFValue) {}82  afterViewInit() {}83}84export class ControlUIWidget<UIT extends SFUISchemaItem> extends Widget<FormProperty, UIT> {85  reset(_value: SFValue) {}86  afterViewInit() {}87}88export class ArrayLayoutWidget extends Widget<ArrayProperty, SFArrayWidgetSchema> implements AfterViewInit {89  reset(_value: SFValue) {}90  afterViewInit() {}91  ngAfterViewInit() {92    this.formProperty.errorsChanges.pipe(takeUntil(this.sfItemComp!.unsubscribe$)).subscribe(() => this.cd.detectChanges());93  }94}95export class ObjectLayoutWidget extends Widget<ObjectProperty, SFObjectWidgetSchema> implements AfterViewInit {96  reset(_value: SFValue) {}97  afterViewInit() {}98  ngAfterViewInit() {99    this.formProperty.errorsChanges.pipe(takeUntil(this.sfItemComp!.unsubscribe$)).subscribe(() => this.cd.detectChanges());100  }...

hooks.ts

Source:hooks.ts

1import { AfterViewInit, Injectable, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';2import { ReplaySubject, Subject } from 'rxjs';3@Injectable()4export abstract class Hooks implements OnDestroy, AfterViewInit, OnChanges {5  afterViewInit$ = new ReplaySubject(1);6  onChanges$ = new Subject<SimpleChanges>();7  onDestroy$ = new ReplaySubject(1);8  ngOnChanges(changes: SimpleChanges): void {9    this.onChanges$.next(changes);10  }11  ngAfterViewInit(): void {12    this.afterViewInit$.next(undefined);13    this.afterViewInit$.complete();14  }15  ngOnDestroy(): void {16    this.onDestroy$.next(undefined);17    this.onChanges$.complete();18    this.afterViewInit$.complete();19    this.onDestroy$.complete();20  }...

Using AI Code Generation

1import { ComponentFixture, TestBed } from '@angular/core/testing';2import { NgMocks } from 'ng-mocks';3import { AppComponent } from './app.component';4describe('AppComponent', () => {5  let component: AppComponent;6  let fixture: ComponentFixture<AppComponent>;7  beforeEach(async () => {8    await TestBed.configureTestingModule({9    }).compileComponents();10  });11  beforeEach(() => {12    fixture = TestBed.createComponent(AppComponent);13    component = fixture.componentInstance;14    fixture.detectChanges();15  });16  it('should create the app', () => {17    expect(component).toBeTruthy();18  });19  it('should have as title "angular-testing"', () => {20    expect(component.title).toEqual('angular-testing');21  });22  it('should render title', () => {23    const compiled = fixture.nativeElement;24    expect(compiled.querySelector('.content span').textContent).toContain(25    );26  });27  it('should call afterViewInit', () => {28    const spy = spyOn(component, 'afterViewInit');29    NgMocks.triggerLifecycle(fixture, 'afterViewInit');30    expect(spy).toHaveBeenCalled();31  });32});33import { AfterViewInit, Component, OnInit } from '@angular/core';34@Component({35})36export class AppComponent implements OnInit, AfterViewInit {37  title = 'angular-testing';38  constructor() {}39  ngOnInit(): void {}40  ngAfterViewInit(): void {41    console.log('AfterViewInit');42  }43}44    {{ title }} app is running!45.content {46  text-align: center;47  span {48    font-size: 24px;49  }50}51import { ComponentFixture, TestBed } from '@angular/core/testing';52import { NgMocks } from 'ng-mocks';53import { AppComponent } from './app.component';54describe('AppComponent', () => {55  let component: AppComponent;56  let fixture: ComponentFixture<AppComponent>;57  beforeEach(async () => {

Using AI Code Generation

1import { AfterViewInit, Component, ViewChild } from '@angular/core';2import { MockComponent } from 'ng-mocks';3@Component({4})5class ChildComponent implements AfterViewInit {6  public ngAfterViewInit(): void {7    console.log('child');8  }9}10@Component({11})12class ParentComponent {13  @ViewChild(MockComponent(ChildComponent))14  public child!: ChildComponent;15}16import { ComponentFixture, TestBed } from '@angular/core/testing';17import { MockComponent } from 'ng-mocks';18import { ParentComponent } from './test';19describe('AppComponent', () => {20  let component: ParentComponent;21  let fixture: ComponentFixture<ParentComponent>;22  beforeEach(async () => {23    await TestBed.configureTestingModule({24      declarations: [ParentComponent, MockComponent(ChildComponent)],25    }).compileComponents();26  });27  beforeEach(() => {28    fixture = TestBed.createComponent(ParentComponent);29    component = fixture.componentInstance;30    fixture.detectChanges();31  });32  it('should create', () => {33    expect(component).toBeTruthy();34  });35  it('should call child ngAfterViewInit', () => {36    const spy = jest.spyOn(component.child, 'ngAfterViewInit');37    component.child.ngAfterViewInit();38    expect(spy).toHaveBeenCalled();39  });40});41import { AfterViewInit, Component, ViewChild } from '@angular/core';42import { MockComponent } from 'ng-mocks';43@Component({44})45class ChildComponent implements AfterViewInit {46  public ngAfterViewInit(): void {47    console.log('child');48  }49}50@Component({51})52class ParentComponent {53  @ViewChild(MockComponent(ChildComponent))54  public child!: ChildComponent;55}

Using AI Code Generation

1import { Component, ViewChild } from '@angular/core';2import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';3@Component({4})5class TargetComponent {6  @ViewChild('input', { static: true }) public input!: HTMLInputElement;7}8describe('target', () => {9  ngMocks.faster();10  beforeEach(() => MockBuilder(TargetComponent));11  it('works', () => {12    const fixture = MockRender(TargetComponent);13    expect(fixture.point.componentInstance.input).toBeDefined();14  });15});16import { Component, ViewChild } from '@angular/core';17import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';18@Component({19})20class TargetComponent {21  @ViewChild('input', { static: true }) public input!: HTMLInputElement;22}23describe('target', () => {24  ngMocks.faster();25  beforeEach(() => MockBuilder(TargetComponent));26  it('works', () => {27    const fixture = MockRender(TargetComponent);28    expect(fixture.point.componentInstance.input).toBeDefined();29  });30});31import { Component, ViewChild } from '@angular/core';32import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';33@Component({34})35class TargetComponent {36  @ViewChild('input', { static: true }) public input!: HTMLInputElement;37}38describe('target', () => {39  ngMocks.faster();40  beforeEach(() => MockBuilder(TargetComponent));41  it('works', () => {42    const fixture = MockRender(TargetComponent);43    expect(fixture.point.componentInstance.input).toBeDefined();44  });45});46import { Component, ViewChild } from '@angular/core';47import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';48@Component({49})50class TargetComponent {51  @ViewChild('input', { static: true }) public input!: HTMLInputElement;52}53describe('target', () => {

Using AI Code Generation

1import { MockRender, ngMocks } from 'ng-mocks';2import { MyComponent } from './my.component';3describe('MyComponent', () => {4  beforeEach(() => MockRender(MyComponent));5  it('should call afterViewInit', () => {6    const component = ngMocks.find(MyComponent);7    spyOn(component, 'afterViewInit');8    ngMocks.triggerLifecycle(component, 'afterViewInit');9    expect(component.afterViewInit).toHaveBeenCalled();10  });11});

Using AI Code Generation

1import { MockComponent } from 'ng-mocks';2import { Component, AfterViewInit, ViewChild } from '@angular/core';3import { ChildComponent } from './child.component';4@Component({5})6export class ParentComponent implements AfterViewInit {7  @ViewChild('parentDiv') parentDiv: any;8  ngAfterViewInit() {9    console.log('Parent', this.parentDiv.nativeElement);10  }11}12@Component({13})14export class ChildComponent implements AfterViewInit {15  @ViewChild('childDiv') childDiv: any;16  ngAfterViewInit() {17    console.log('Child', this.childDiv.nativeElement);18  }19}20describe('Component: Parent', () => {21  let component: ParentComponent;22  let fixture: ComponentFixture<ParentComponent>;23  beforeEach(async(() => {24    TestBed.configureTestingModule({25        MockComponent(ChildComponent),26    }).compileComponents();27  }));28  beforeEach(() => {29    fixture = TestBed.createComponent(ParentComponent);30    component = fixture.componentInstance;31    fixture.detectChanges();32  });33  it('should create', () => {34    expect(component).toBeTruthy();35  });36});37Parent { nativeElement: {…} }38Child { nativeElement: {…} }39import { MockComponent } from 'ng-mocks';40import { Component, AfterViewInit, ViewChild } from '@angular/core';41import { ChildComponent } from './child.component';42@Component({43})44export class ParentComponent implements AfterViewInit {45  @ViewChild('parentDiv') parentDiv: any;46  ngAfterViewInit() {47    console.log('Parent', this.parentDiv.nativeElement);48  }49}50@Component({51})52export class ChildComponent implements AfterViewInit {53  @ViewChild('childDiv') childDiv: any;54  ngAfterViewInit() {

Using AI Code Generation

1import {Component} from '@angular/core';2import {AfterViewInit, OnInit} from '@angular/core';3import {MockBuilder, MockRender} from 'ng-mocks';4import {TestComponent} from './test.component';5@Component({6})7class TestComponent {8  ngOnInit() {9    console.log('onInit');10  }11  ngAfterViewInit() {12    console.log('afterViewInit');13  }14}15describe('TestComponent', () => {16  beforeEach(() => MockBuilder(TestComponent));17  it('should create', () => {18    const fixture = MockRender(TestComponent);19    expect(fixture.point.componentInstance).toBeDefined();20  });21});22import {Component, OnInit} from '@angular/core';23@Component({24})25export class TestComponent implements OnInit {26  constructor() { }27  ngOnInit() {28  }29}30  <button (click)="onClick()">Click me!</button>31div {32  background-color: #f1f1f1;33  padding: 20px;34  margin: 20px;35}36import { async, ComponentFixture, TestBed } from '@angular/core/testing';37import { TestComponent } from './test.component';38describe('TestComponent', () => {39  let component: TestComponent;40  let fixture: ComponentFixture<TestComponent>;41  beforeEach(async(() => {42    TestBed.configureTestingModule({43    })44    .compileComponents();45  }));46  beforeEach(() => {47    fixture = TestBed.createComponent(TestComponent);48    component = fixture.componentInstance;49    fixture.detectChanges();50  });51  it('should create', () => {52    expect(component).toBeTruthy();53  });54});55export declare class TestComponent implements OnInit {56    constructor();57    ngOnInit(): void;58}59{"__symbolic":"module","version":4,"metadata":{"TestComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","name":"Component","module":"@angular/core"},"arguments":[{"selector":"app-test","templateUrl":"./test.component.html","styleUrls":["./test.component.css"]}]}],"members":{

Using AI Code Generation

1import { Component, AfterViewInit } from '@angular/core';2import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';3@Component({4})5export class AppComponent implements AfterViewInit {6  ngAfterViewInit() {7    ngMocks.find('#myDiv').nativeElement.innerHTML = 'my text';8  }9}10describe('AppComponent', () => {11  beforeEach(() => MockBuilder(AppComponent));12  it('sets text in div', () => {13    const fixture = MockRender(AppComponent);14    expect(fixture.nativeElement.innerHTML).toContain('my text');15  });16});17import { Component, AfterViewChecked } from '@angular/core';18import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';19@Component({20})21export class AppComponent implements AfterViewChecked {22  ngAfterViewChecked() {23    ngMocks.find('#myDiv').nativeElement.innerHTML = 'my text';24  }25}26describe('AppComponent', () => {27  beforeEach(() => MockBuilder(AppComponent));28  it('sets text in div', () => {29    const fixture = MockRender(AppComponent);30    expect(fixture.nativeElement.innerHTML).toContain('my text');31  });32});33import { Component, AfterContentInit } from '@angular/core';34import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';35@Component({36})37export class AppComponent implements AfterContentInit {38  ngAfterContentInit() {39    ngMocks.find('#myDiv').nativeElement.innerHTML = 'my text';40  }41}42describe('AppComponent', () => {43  beforeEach(() => MockBuilder(AppComponent));44  it('sets text in div', () => {45    const fixture = MockRender(AppComponent);46    expect(fixture.nativeElement.innerHTML).toContain('my text');47  });48});49import { Component, AfterContentChecked } from '@angular/core';50import { MockBuilder, MockRender, ng

Using AI Code Generation

1import { MockRender, ngMocks } from 'ng-mocks';2describe('ng-mocks', () => {3  it('should render', () => {4    const fixture = MockRender(`5    `);6    const myDiv = ngMocks.find(fixture.debugElement, '#myDiv');7    expect(myDiv).toBeTruthy();8  });9});10import 'zone.js/dist/zone-testing';11import { getTestBed } from '@angular/core/testing';12import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';13declare const require: any;14getTestBed().initTestEnvironment(15  platformBrowserDynamicTesting()16);17const context = require.context('./', true, /\.spec\.ts$/);18context.keys().map(context);

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.