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

How to use LegacyControlValueAccessor method in ng-mocks

Best JavaScript code snippet using ng-mocks

mock-control-value-accessor.ts

Source:mock-control-value-accessor.ts

1import { Mock } from './mock';2/**3 * LegacyControlValueAccessor was used to be a way to manipulate a mock ControlValueAccessor.4 *5 * @deprecated use isMockControlValueAccessor or isMockValidator instead (removing in A13)6 * @see https://ng-mocks.sudo.eu/api/helpers/isMockControlValueAccessor7 * @see https://ng-mocks.sudo.eu/api/helpers/isMockValidator8 */9export class LegacyControlValueAccessor extends Mock {10  /**11   * @deprecated use isMockControlValueAccessor instead (removing in A13)12   * @see https://ng-mocks.sudo.eu/api/helpers/isMockControlValueAccessor13   */14  public __simulateChange(value: any): void;15  // istanbul ignore next16  public __simulateChange() {17    // nothing to do.18  }19  // istanbul ignore next20  /**21   * @deprecated use isMockControlValueAccessor instead (removing in A13)22   * @see https://ng-mocks.sudo.eu/api/helpers/isMockControlValueAccessor23   */24  public __simulateTouch() {25    // nothing to do.26  }27  // istanbul ignore next28  /**29   * @deprecated use isMockValidator instead (removing in A13)30   * @see https://ng-mocks.sudo.eu/api/helpers/isMockValidator31   */32  public __simulateValidatorChange() {33    // nothing to do.34  }35}36/**37 * MockControlValueAccessor exposes access to a mock ControlValueAccessor.38 * It should be used in a combination with isMockControlValueAccessor.39 *40 * @see https://ng-mocks.sudo.eu/api/helpers/isMockControlValueAccessor41 */42export interface MockControlValueAccessor {43  /**44   * It simulates an external change of the value.45   * Please consider usage of ngMocks.change().46   *47   * @see https://ng-mocks.sudo.eu/extra/mock-form-controls48   * @see https://ng-mocks.sudo.eu/api/ngMocks/change49   */50  __simulateChange(value: any): void;51  /**52   * It simulates an external touch.53   * Please consider usage of ngMocks.touch().54   *55   * @see https://ng-mocks.sudo.eu/extra/mock-form-controls56   * @see https://ng-mocks.sudo.eu/api/ngMocks/touch57   */58  __simulateTouch(): void;59}60/**61 * MockValidator exposes access to a mock Validator.62 * It should be used in a combination with isMockValidator.63 *64 * @see https://ng-mocks.sudo.eu/api/helpers/isMockValidator65 */66export interface MockValidator {67  /**68   * it simulates an external validation change.69   *70   * @see https://ng-mocks.sudo.eu/extra/mock-form-controls71   */72  __simulateValidatorChange(): void;...

types.ts

Source:types.ts

1// istanbul ignore file2import { ChangeDetectorRef, ElementRef, TemplateRef, ViewContainerRef } from '@angular/core';3import { LegacyControlValueAccessor } from '../common/mock-control-value-accessor';4/**5 * MockedDirective is a legacy representation of an interface of a mock directive instance.6 * Please avoid its usage and try to rely on ngMocks.render() and ngMocks.hide().7 *8 * @see https://ng-mocks.sudo.eu/api/ngMocks/render#render-structural-directives9 * @see https://ng-mocks.sudo.eu/api/ngMocks/hide10 */11export type MockedDirective<T> = T &12  LegacyControlValueAccessor & {13    /**14     * Pointer to ChangeDetectorRef.15     */16    __cdr?: ChangeDetectorRef;17    /**18     * Pointer to current element in case of Attribute Directives.19     */20    __element?: ElementRef;21    /**22     * Just a flag for easy understanding what it is.23     */24    __isStructural: boolean;25    /**26     * Pointer to the template of Structural Directives.27     */28    __template?: TemplateRef<any>;29    /**30     * Pointer to ViewContainerRef.31     */32    __vcr?: ViewContainerRef;33    /**34     * @deprecated use this.__vcr (removing in A13)35     */36    __viewContainer?: ViewContainerRef;37    /**38     * @deprecated use ngMocks.render instead (removing in A13)39     * @see https://ng-mocks.sudo.eu/api/ngMocks/render#render-structural-directives40     */41    __render($implicit?: any, variables?: Record<keyof any, any>): void;...

Using AI Code Generation

1import { LegacyControlValueAccessor } from 'ng-mocks';2import { Component, forwardRef } from '@angular/core';3import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';4@Component({5    <input type="text" [value]="value" (input)="onInput($event)" />6    {7      useExisting: forwardRef(() => TestComponent),8    },9})10export class TestComponent implements ControlValueAccessor {11  value = '';12  onInput(event: any): void {13    this.value = event.target.value;14    this.onChange(this.value);15  }16  onChange = (_: any) => {};17  registerOnChange(fn: any): void {18    this.onChange = fn;19  }20  registerOnTouched(fn: any): void {}21  writeValue(obj: any): void {22    this.value = obj;23  }24}25describe('TestComponent', () => {26  it('should work', () => {27    const fixture = MockRender(TestComponent);28    const component = fixture.point.componentInstance;29    const input = fixture.debugElement.query(By.css('input'));30    const value = 'test';31    input.nativeElement.value = value;32    input.nativeElement.dispatchEvent(new Event('input'));33    expect(component.value).toEqual(value);34  });35});36import { TestComponent } from './test';37import { MockBuilder, MockRender } from 'ng-mocks';38import { AppModule } from './app.module';39describe('TestComponent', () => {40  beforeEach(() => MockBuilder(TestComponent, AppModule));41  it('should work', () => {42    const fixture = MockRender(TestComponent);43    const component = fixture.point.componentInstance;44    const input = fixture.debugElement.query(By.css('input'));45    const value = 'test';46    input.nativeElement.value = value;47    input.nativeElement.dispatchEvent(new Event('input'));48    expect(component.value).toEqual(value);49  });50});51import { TestBed } from '@angular/core/testing';52import { By } from '@angular/platform-browser';53import { MockBuilder, MockRender } from 'ng-mocks';54import { TestComponent } from './test';55import { AppModule } from './app.module';56describe('TestComponent', () => {57  beforeEach(() => MockBuilder(TestComponent, AppModule));58  it('should work', () => {

Using AI Code Generation

1import { ControlValueAccessor } from '@angular/forms';2import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';3describe('LegacyControlValueAccessor', () => {4  beforeEach(() => MockBuilder(LegacyControlValueAccessorComponent));5  it('should render', () => {6    const fixture = MockRender(LegacyControlValueAccessorComponent);7    expect(fixture.point.componentInstance).toBeDefined();8  });9  it('should have a value', () => {10    const fixture = MockRender(LegacyControlValueAccessorComponent);11    const component = fixture.point.componentInstance;12    expect(component).toBeDefined();13    expect(component.value).toBeDefined();14  });15  it('should have a value of 0', () => {16    const fixture = MockRender(LegacyControlValueAccessorComponent);17    const component = fixture.point.componentInstance;18    expect(component.value).toBe(0);19  });20  it('should have a value of 1', () => {21    const fixture = MockRender(LegacyControlValueAccessorComponent);22    const component = fixture.point.componentInstance;23    component.value = 1;24    expect(component.value).toBe(1);25  });26  it('should have a value of 2', () => {27    const fixture = MockRender(LegacyControlValueAccessorComponent);28    const component = fixture.point.componentInstance;29    component.value = 2;30    expect(component.value).toBe(2);31  });32  it('should have a value of 3', () => {33    const fixture = MockRender(LegacyControlValueAccessorComponent);34    const component = fixture.point.componentInstance;35    component.value = 3;36    expect(component.value).toBe(3);37  });38  it('should have a value of 4', () => {39    const fixture = MockRender(LegacyControlValueAccessorComponent);40    const component = fixture.point.componentInstance;41    component.value = 4;42    expect(component.value).toBe(4);43  });44  it('should have a value of 5', () => {45    const fixture = MockRender(LegacyControlValueAccessorComponent);46    const component = fixture.point.componentInstance;47    component.value = 5;48    expect(component.value).toBe(5);49  });50  it('should have a value of 6', () => {51    const fixture = MockRender(LegacyControlValueAccessorComponent);52    const component = fixture.point.componentInstance;53    component.value = 6;54    expect(component.value).toBe

Using AI Code Generation

1import { Component, ViewChild } from '@angular/core';2import { By } from '@angular/platform-browser';3import { FormsModule } from '@angular/forms';4import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';5@Component({6})7class AppComponent {8  @ViewChild('input', { static: true }) public input;9  public value = 'test';10}11describe('AppComponent', () => {12  beforeEach(() => MockBuilder(AppComponent).mock(FormsModule));13  it('should render value', () => {14    const fixture = MockRender(AppComponent);15    const input = ngMocks.findInstance(AppComponent).input;16    const inputEl = ngMocks.find(By.directive(AppComponent)).componentInstance.input;17    expect(input.value).toEqual('test');18    expect(inputEl.value).toEqual('test');19  });20});

Using AI Code Generation

1import { LegacyControlValueAccessor } from 'ng-mocks';2export class MyComponent implements LegacyControlValueAccessor {3  public writeValue(value: any): void {4  }5  public registerOnChange(fn: any): void {6  }7  public registerOnTouched(fn: any): void {8  }9  public setDisabledState(isDisabled: boolean): void {10  }11}12import { MyComponent } from './test';13import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';14import { AppModule } from './app.module';15describe('MyComponent', () => {16  beforeEach(() => MockBuilder(MyComponent, AppModule));17  beforeEach(() => MockRender(MyComponent));18  it('should create', () => {19    const fixture = MockRender(MyComponent);20    const component = fixture.point.componentInstance;21    expect(component).toBeTruthy();22  });23  it('should be called registerOnChange', () => {24    const fixture = MockRender(MyComponent);25    const component = fixture.point.componentInstance;26    const spy = spyOn(component, 'registerOnChange');27    const onChangeFn = () => {};28    ngMocks.change(MyComponent, onChangeFn);29    expect(spy).toHaveBeenCalledWith(onChangeFn);30  });31  it('should be called registerOnTouched', () => {32    const fixture = MockRender(MyComponent);33    const component = fixture.point.componentInstance;34    const spy = spyOn(component, 'registerOnTouched');35    const onTouchedFn = () => {};36    ngMocks.change(MyComponent, onTouchedFn);37    expect(spy).toHaveBeenCalledWith(onTouchedFn);38  });39  it('should be called setDisabledState', () => {40    const fixture = MockRender(MyComponent);41    const component = fixture.point.componentInstance;42    const spy = spyOn(component, 'setDisabledState');43    const isDisabled = true;44    ngMocks.change(MyComponent, isDisabled);45    expect(spy).toHaveBeenCalledWith(isDisabled);46  });47});48import { ControlValueAccessor } from 'ng-mocks';49export class MyComponent implements ControlValueAccessor {50  public writeValue(value: any): void {51  }52  public registerOnChange(fn: any): void {

Using AI Code Generation

1import { ɵangular_packages_forms_forms_y as ɵangular_packages_forms_forms_x } from '@angular/forms';2const LegacyControlValueAccessor = ɵangular_packages_forms_forms_x;3export class MockControlValueAccessor extends LegacyControlValueAccessor {4  writeValue(obj: any): void {5    super.writeValue(obj);6  }7  registerOnChange(fn: any): void {8    super.registerOnChange(fn);9  }10  registerOnTouched(fn: any): void {11    super.registerOnTouched(fn);12  }13  setDisabledState?(isDisabled: boolean): void {14    super.setDisabledState(isDisabled);15  }16}17import { MockControlValueAccessor } from './test';18describe('test', () => {19  it('should work', () => {20    const mockControlValueAccessor = new MockControlValueAccessor();21    expect(mockControlValueAccessor.writeValue).toBeDefined();22    expect(mockControlValueAccessor.registerOnChange).toBeDefined();23    expect(mockControlValueAccessor.registerOnTouched).toBeDefined();24    expect(mockControlValueAccessor.setDisabledState).toBeDefined();25  });26});27import { ɵangular_packages_forms_forms_x as LegacyControlValueAccessor } from '@angular/forms';28export class MockControlValueAccessor extends LegacyControlValueAccessor {29  writeValue(obj: any): void {30    super.writeValue(obj);31  }32  registerOnChange(fn: any): void {33    super.registerOnChange(fn);34  }35  registerOnTouched(fn: any): void {36    super.registerOnTouched(fn);37  }38  setDisabledState?(isDisabled: boolean): void {39    super.setDisabledState(isDisabled);40  }41}42import { MockControlValueAccessor } from './test';43describe('test', () => {44  it('should work', () => {45    const mockControlValueAccessor = new MockControlValueAccessor();46    expect(mockControlValueAccessor.writeValue).toBeDefined();47    expect(mockControlValueAccessor.registerOnChange).toBeDefined();48    expect(mockControlValueAccessor.registerOnTouched).toBeDefined();49    expect(mockControlValueAccessor.setDisabledState).toBeDefined();50  });51});

Using AI Code Generation

1import { LegacyControlValueAccessor } from 'ng-mocks';2import { MyComponent } from './my.component';3import { MyControlValueAccessorDirective } from './my-control-value-accessor.directive';4const mockMyControlValueAccessorDirective = LegacyControlValueAccessor(MyControlValueAccessorDirective);5const mockMyComponent = MockRender(MyComponent, {6});7const instance = mockMyComponent.point.componentInstance;8instance.myMethod();9expect(instance.myMethod).toHaveBeenCalled();10instance.myMethod.mockReset();11expect(instance.myMethod).not.toHaveBeenCalled();12instance.myMethod.mockRestore();13expect(instance.myMethod).toHaveBeenCalled();14import { Component } from '@angular/core';15@Component({16})17export class MyComponent {}18import { Directive, forwardRef } from '@angular/core';19import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';20@Directive({21    {22      useExisting: forwardRef(() => MyControlValueAccessorDirective),23    },24})25export class MyControlValueAccessorDirective implements ControlValueAccessor {26  public myMethod(): void {}27}

Using AI Code Generation

1import { LegacyControlValueAccessor } from 'ng-mocks';2class TestComponent {3  @Input() public formControlName: string;4  @Input() public formControl: FormControl;5  public writeValue = jasmine.createSpy('writeValue');6  public registerOnChange = jasmine.createSpy('registerOnChange');7  public registerOnTouched = jasmine.createSpy('registerOnTouched');8}9TestBed.configureTestingModule({10  imports: [ReactiveFormsModule],11});12const fixture = TestBed.createComponent(TestComponent);13const component = fixture.componentInstance;14LegacyControlValueAccessor.mock(component, {15  formControl: new FormControl('test'),16});17fixture.detectChanges();18expect(component.writeValue).toHaveBeenCalledWith('test');19expect(component.registerOnChange).toHaveBeenCalledWith(jasmine.any(Function));20expect(component.registerOnTouched).toHaveBeenCalledWith(jasmine.any(Function));21import { LegacyControlValueAccessor } from 'ng-mocks';22describe('LegacyControlValueAccessor', () => {23  it('should mock the control value accessor', () => {24    const writeValue = jasmine.createSpy('writeValue');25    const registerOnChange = jasmine.createSpy('registerOnChange');26    const registerOnTouched = jasmine.createSpy('registerOnTouched');27    const component = {28      formControl: new FormControl('test'),29    };30    LegacyControlValueAccessor.mock(component);31    expect(writeValue).toHaveBeenCalledWith('test');32    expect(registerOnChange).toHaveBeenCalledWith(jasmine.any(Function));33    expect(registerOnTouched).toHaveBeenCalledWith(jasmine.any(Function));34  });35});

Using AI Code Generation

1import { LegacyControlValueAccessor } from 'ng-mocks';2const mockControlValueAccessor = LegacyControlValueAccessor(MyComponent, 'myControl');3describe('MyComponent', () => {4  it('should have a control', () => {5    const fixture = TestBed.createComponent(MyComponent);6    fixture.detectChanges();7    expect(mockControlValueAccessor(fixture)).toBeDefined();8  });9});10import { MyComponent } from './my.component';11describe('MyComponent', () => {12  it('should have a control', () => {13    const fixture = TestBed.createComponent(MyComponent);14    fixture.detectChanges();15    expect(fixture.debugElement.query(By.css('input')).nativeElement.value).toEqual('value');16  });17});18import { MyComponent } from './my.component';19describe('MyComponent', () => {20  it('should have a control', () => {21    const fixture = TestBed.createComponent(MyComponent);22    fixture.detectChanges();23    expect(fixture.debugElement.query(By.css('input')).nativeElement.value).toEqual('value');24  });25});26import { MyComponent } from './my.component';27describe('MyComponent', () => {28  it('should have a control', () => {29    const fixture = TestBed.createComponent(MyComponent);30    fixture.detectChanges();31    expect(fixture.debugElement.query(By.css('input')).nativeElement.value).toEqual('value');32  });33});34import { MyComponent } from './my.component';35describe('MyComponent', () => {36  it('should have a control', () => {37    const fixture = TestBed.createComponent(MyComponent);38    fixture.detectChanges();39    expect(fixture.debugElement.query(By.css('input')).nativeElement.value).toEqual('value');40  });41});

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.