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

Copied to Clipboard!

How to use registerOnTouched method in ng-mocks

Best JavaScript code snippet using ng-mocks

control-value-acessor-connector.spec.ts

Source:control-value-acessor-connector.spec.ts

...27  });28  it('registerOnTouched call valueAccessor.registerOnTouched', () => {29    const formControlDirectiveMock = {30      valueAccessor: {31        registerOnTouched(fn) {}32      }33    } as FormControlDirective;34    component.formControlDirective = formControlDirectiveMock;35    component.registerOnTouched(() => {});36    expect(component.formControlDirective.valueAccessor).toBeDefined();37  });38  it('registerOnTouched call NOT valueAccessor.registerOnTouched', () => {39    const formControlDirectiveMock = {40      valueAccessor: null41    } as FormControlDirective;42    component.formControlDirective = formControlDirectiveMock;43    component.registerOnTouched(() => {});44    expect(component.formControlDirective.valueAccessor).toBeNull();45  });46  it('registerOnTouched call valueAccessor.registerOnChange', () => {47    const formControlDirectiveMock = {48      valueAccessor: {49        registerOnChange(fn) {}50      }51    } as FormControlDirective;52    component.formControlDirective = formControlDirectiveMock;53    component.registerOnChange(() => {});54    expect(component.formControlDirective.valueAccessor).toBeDefined();55  });56  it('registerOnChange call NOT valueAccessor.registerOnChange', () => {57    const formControlDirectiveMock = {...

pizza-toppings.component.spec.ts

Source:pizza-toppings.component.spec.ts

...26    });27  });28  describe('#registerOnTouched', () => {29    it('should set fn', () => {30      component.registerOnTouched(fn);31      expect(component.onTouch).toBe(fn);32    });33  });34  describe('#writeValue', () => {35    it('should set value', () => {36      const value = 'value';37      component.writeValue(value);38      expect(component.value).toBe(value);39    });40  });41  describe('#updateTopping', () => {42    beforeEach(() => {43      component.registerOnChange(fn);44    });45    it('should unset value', () => {46      const topping = 'bacon';47      component.value = [topping];48      component.updateTopping(topping);49      expect(component.value).toEqual([]);50    });51    it('should set value', () => {52      const topping = 'bacon';53      component.updateTopping(topping);54      expect(component.value).toEqual([topping]);55    });56  });57  describe('#onBlur', () => {58    it('should set focused', () => {59      const value = 'value';60      component.onBlur(value);61      expect(component.focused).toBe('');62    });63  });64  describe('#onFocus', () => {65    it('should set focused value', () => {66      const value = 'value';67      component.registerOnTouched(fn);68      component.onFocus(value);69      expect(component.focused).toBe(value);70    });71  });...

checkbox.component.spec.ts

Source:checkbox.component.spec.ts

...34    function pass() {35      return true;36    }37    spyOn(component, 'registerOnTouched').and.callThrough();38    component.registerOnTouched(pass);39    expect(component.registerOnTouched).toHaveBeenCalled();40  });41  it('Checkbox : transform', () => {42    component.transform('red');43    expect(component.checked).toEqual(false);44  });45  it('Checkbox : onChange', () => {46    const event = { preventDefault: jasmine.createSpy(), stopPropagation: jasmine.createSpy(), target: { checked: true } };47    component.onChange(event);48    expect(event.preventDefault).toHaveBeenCalled();49  });...

Using AI Code Generation

1import { Component, forwardRef, Input } from '@angular/core';2import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';3import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';4@Component({5  template: ` <input [value]="value" (input)="value = $event.target.value" /> `,6    {7      useExisting: forwardRef(() => TestComponent),8    },9})10export class TestComponent implements ControlValueAccessor {11  @Input() value = '';12  writeValue(value: any): void {13    this.value = value;14  }15  registerOnChange(fn: any): void {16  }17  registerOnTouched(fn: any): void {18  }19  setDisabledState?(isDisabled: boolean): void {}20}21describe('TestComponent', () => {22  beforeEach(() => MockBuilder(TestComponent));23  it('should register on touched', () => {24    const fixture = MockRender(TestComponent);25    ngMocks.onTouched(fixture.debugElement);26  });27});28import { TestComponent } from './test';29describe('TestComponent', () => {30  it('should register on touched', () => {31    const fixture = MockRender(TestComponent);32    ngMocks.onTouched(fixture.debugElement);33  });34});35import { TestComponent } from './test';36describe('TestComponent', () => {37  it('should register on touched', () => {38    const fixture = MockRender(TestComponent);39    ngMocks.onTouched(fixture.debugElement);40  });

Using AI Code Generation

1import { registerOnTouched } from 'ng-mocks';2@Component({3})4export class TestComponent implements OnInit, ControlValueAccessor {5  @ViewChild('input', { static: true }) input: ElementRef;6  constructor() { }7  ngOnInit() {8  }9  writeValue(obj: any): void {10  }11  registerOnChange(fn: any): void {12  }13  registerOnTouched(fn: any): void {14    registerOnTouched(this.input, fn);15  }16  setDisabledState?(isDisabled: boolean): void {17  }18}19  <input matInput #input (blur)="onBlur()">20import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';21import { TestComponent } from './test.component';22describe('TestComponent', () => {23  beforeEach(() => MockBuilder(TestComponent));24  it('should call registerOnTouched method', () => {25    const component = MockRender(TestComponent).point.componentInstance;26    const spy = spyOn(component, 'onBlur');27    ngMocks.trigger(component.input, 'blur');28    expect(spy).toHaveBeenCalled();29  });30});31import { Component, OnInit, ViewChild, ElementRef, ControlValueAccessor } from '@angular/core';32@Component({33})34export class TestComponent implements OnInit, ControlValueAccessor {35  @ViewChild('input', { static: true }) input: ElementRef;36  constructor() { }37  ngOnInit() {38  }39  writeValue(obj: any): void {40  }41  registerOnChange(fn: any): void {42  }43  registerOnTouched(fn: any): void {44  }45  setDisabledState?(isDisabled: boolean): void {46  }47  onBlur() {48    console.log('onBlur');49  }50}51import { NgModule } from '@angular/core';52import { CommonModule } from '@angular/common';53import { MatFormFieldModule, MatInputModule } from '@angular/material';54import { TestComponent } from './test.component';55@NgModule({56  imports:

Using AI Code Generation

1import { Component } from '@angular/core';2import { MockBuilder, MockRender, MockedComponentFixture, ngMocks } from 'ng-mocks';3import { TestComponent } from './test.component';4describe('TestComponent', () => {5  ngMocks.faster();6  let component: TestComponent;7  let fixture: MockedComponentFixture<TestComponent>;8  beforeEach(() => MockBuilder(TestComponent));9  beforeEach(() => {10    fixture = MockRender(TestComponent);11    component = fixture.point.componentInstance;12  });13  it('should call registerOnTouched', () => {14    const spy = spyOn(component, 'registerOnTouched');15    component.ngOnChanges();16    expect(spy).toHaveBeenCalled();17  });18});19import { Component, forwardRef, Input, OnInit } from '@angular/core';20import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';21@Component({22    {23      useExisting: forwardRef(() => TestComponent),24    },25})26export class TestComponent implements OnInit, ControlValueAccessor {27  @Input() value: any;28  constructor() {}29  ngOnInit(): void {}30  writeValue(obj: any): void {31    this.value = obj;32  }33  registerOnChange(fn: any): void {}34  registerOnTouched(fn: any): void {35    console.log('registerOnTouched called');36  }37  setDisabledState?(isDisabled: boolean): void {}38  onChange(event: any) {39    this.value = event.target.value;40    this.onChangeCallback(this.value);41  }42  onChangeCallback: any = () => {};43}44  <input matInput [(ngModel)]="value" (change)="onChange($event)" />

Using AI Code Generation

1import { registerOnTouched } from 'ng-mocks';2import { registerOnChange } from 'ng-mocks';3import { registerOnValidatorChange } from 'ng-mocks';4import { registerOnDisabledChange } from 'ng-mocks';5import { registerOnDestroy } from 'ng-mocks';6import { registerOnAfterViewInit } from 'ng-mocks';7import { registerOnAfterViewChecked } from 'ng-mocks';8import { registerOnAfterContentInit } from 'ng-mocks';9import { registerOnAfterContentChecked } from 'ng-mocks';10import { registerOnInit } from 'ng-mocks';11import { registerOnChanges } from 'ng-mocks';12import { registerOnDoCheck } from 'ng-mocks';13import { registerOnAfterViewChecked } from 'ng-mocks';14import { registerOnAfterContentInit } from 'ng-mocks';15import { registerOnAfterContentChecked } from 'ng-mocks';

Using AI Code Generation

1import { registerOnTouched } from 'ng-mocks';2class MockNgControl {3  registerOnTouched(fn: () => void): void {4    registerOnTouched(fn);5  }6}7describe('test', () => {8  it('should call registerOnTouched', () => {9    const mockNgControl = new MockNgControl();10    const mock = jest.fn();11    mockNgControl.registerOnTouched(mock);12    expect(mock).toHaveBeenCalled();13  });14});15describe('MyComponent', () => {16  let component: MyComponent;17  let fixture: ComponentFixture<MyComponent>;18  let form: FormGroup;19  beforeEach(async(() => {20    TestBed.configureTestingModule({21      imports: [ ReactiveFormsModule ]22    })23    .compileComponents();24  }));25  beforeEach(() => {26    fixture = TestBed.createComponent(MyComponent);27    component = fixture.componentInstance;28    fixture.detectChanges();29    form = component.form;30  });31  it('should be invalid when empty', () => {32    expect(form.valid).toBeFalsy();33  });34  it('should be valid when not empty', () => {35    form.controls['field'].setValue('value');36    expect(form.valid).toBeTruthy();37  });38});39I have tried to debug the issue and I think the problem is that the form is not updated after the field is set. I have also tried to use fixture.detectChanges() but it didn't help. I am using Angular 9.1.2 and jest 25.5.4

Using AI Code Generation

1export class TestComponent implements ControlValueAccessor {2  public registerOnTouched(fn: any): void {3    console.log('registerOnTouched called');4  }5}6export class TestComponent implements ControlValueAccessor {7  public registerOnChange(fn: any): void {8    console.log('registerOnChange called');9  }10}11export class TestComponent implements ControlValueAccessor {12  public writeValue(obj: any): void {13    console.log('writeValue called');14  }15}

Using AI Code Generation

1import { registerOnTouched } from 'ng-mocks';2import { MyComponent } from './my-component';3import { MyComponentMock } from './my-component.mock';4import { MyComponentModule } from './my-component.module';5describe('MyComponent', () => {6  let component: MyComponent;7  let fixture: ComponentFixture<MyComponent>;8  beforeEach(() => {9    TestBed.configureTestingModule({10      imports: [MyComponentModule],11    });12    fixture = TestBed.createComponent(MyComponent);13    component = fixture.componentInstance;14  });15  it('should call onTouched', () => {16    const onTouched = registerOnTouched(MyComponentMock);17    component.ngOnInit();18    expect(onTouched).toHaveBeenCalled();19  });20});21import { createMock } from 'ng-mocks';22import { MyComponent } from './my-component';23export const MyComponentMock = createMock(MyComponent);24import { Component, NgModule } from '@angular/core';25import { ReactiveFormsModule } from '@angular/forms';26import { MatInputModule } from '@angular/material/input';27import { MatFormFieldModule } from '@angular/material/form-field';28import { MyComponent } from './my-component';29@NgModule({30  imports: [ReactiveFormsModule, MatInputModule, MatFormFieldModule],31})32export class MyComponentModule {}33import { Component, forwardRef } from '@angular/core';34import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';35@Component({36    {37      useExisting: forwardRef(() => MyComponent),38    },39})40export class MyComponent implements ControlValueAccessor {41  public value = '';42  private onChange: (_: any) => void = () => {};43  private onTouched: () => void = () => {};44  public writeValue(value: any): void {45    this.value = value;46  }47  public registerOnChange(fn: any): void {48    this.onChange = fn;49  }50  public registerOnTouched(fn: any): void {51    this.onTouched = fn;52  }53  public ngOnInit(): void {54    this.onTouched();55  }56}

Using AI Code Generation

1import {Component, NgModule} from '@angular/core';2import {BrowserModule} from '@angular/platform-browser';3import {FormsModule, ReactiveFormsModule} from '@angular/forms';4import {MockBuilder, MockRender, MockReset, ngMocks} from 'ng-mocks';5@Component({6      <input type="text" name="test" [(ngModel)]="value" />7})8class AppComponent {9  public value: string = '';10}11@NgModule({12  imports: [BrowserModule, FormsModule, ReactiveFormsModule],13})14class AppModule {}15describe('AppComponent', () => {16  beforeEach(() => MockBuilder(AppComponent, AppModule));17  it('should be defined', () => {18    const fixture = MockRender(AppComponent);19    const component = fixture.point.componentInstance;20    expect(component).toBeDefined();21  });22  it('should call registerOnTouched method', () => {23    const fixture = MockRender(AppComponent);24    const component = fixture.point.componentInstance;25    const control = ngMocks.findInstance(fixture.debugElement, 'input');26    const spy = spyOn(component, 'registerOnTouched');27    control.onTouched();28    expect(spy).toHaveBeenCalled();29  });30});31at Object.<anonymous> (src/app/test.js:52:15)

Using AI Code Generation

1import { registerOnTouched } from 'ng-mocks';2it('should be touched', () => {3  const fixture = MockRender(`4  `);5  const control = MockRender.get(fixture.debugElement, NgModel).control;6  registerOnTouched(control, () => {7  });8});9it('should be disabled', () => {10  const fixture = MockRender(`11  `);12  const control = MockRender.get(fixture.debugElement, NgModel).control;13  expect(control.disabled).toBe(true);14});15it('should be enabled', () => {16  const fixture = MockRender(`17  `);18  const control = MockRender.get(fixture.debugElement, NgModel).control;19  expect(control.disabled).toBe(false);20});21it('should be dirty', () => {22  const fixture = MockRender(`23  `);24  const control = MockRender.get(fixture.debugElement, NgModel).control;25  control.markAsDirty();26  expect(control.dirty).toBe(true);27});28it('should be pristine', () => {29  const fixture = MockRender(`30  `);31  const control = MockRender.get(fixture.debugElement, NgModel).control;32  expect(control.pristine).toBe(true);33});34it('should be valid', () => {35  const fixture = MockRender(`

Using AI Code Generation

1import { Component, OnInit } from '@angular/core';2import { FormControl, FormGroup, Validators } from '@angular/forms';3import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';4@Component({5})6export class AppComponent implements OnInit {7  formGroup: FormGroup;8  ngOnInit() {9    this.formGroup = new FormGroup({10      formControlName: new FormControl('', [Validators.required]),11    });12  }13}14describe('AppComponent', () => {15  beforeEach(() => MockBuilder(AppComponent));16  it('should test formControlName', () => {17    const fixture = MockRender(AppComponent);18    const formControlName = ngMocks.find('input').control;19    expect(formControlName).toBeTruthy();20    expect(formControlName.touched).toBeFalsy();21    formControlName.markAsTouched();22    expect(formControlName.touched).toBeTruthy();23  });24});25import { Component, OnInit } from '@angular/core';26import { FormControl, FormGroup, Validators } from '@angular/forms';27import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';28@Component({29})30export class AppComponent implements OnInit {31  formGroup: FormGroup;32  ngOnInit() {33    this.formGroup = new FormGroup({34      formControlName: new FormControl('', [Validators.required]),35    });36  }37}38describe('AppComponent', () => {39  beforeEach(() => MockBuilder(AppComponent));40  it('should test formControlName', () => {41    const fixture = MockRender(AppComponent);42    const formControlName = ngMocks.find('input').control;43    expect(formControlName).toBeTruthy();44    expect(formControlName.touched).toBeFalsy();45    formControlName.markAsTouched();46    expect(formControlName.touched).toBeTruthy();47  });48});

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.