fix(#324): smarter touches and changes

libs/ng-mocks/src/lib/mock-helper/cva/mock-helper.change.ts

@@ -50,20 +50,23 @@ const handleKnown = (valueAccessor: any, value: any): boolean => {
   return false;
 };
 
+const hasListener = (el: DebugElement): boolean =>
+  el.listeners.filter(listener => listener.name === 'input').length > 0;
+
 const keys = ['onChange', '_onChange', 'changeFn', '_onChangeCallback', 'onModelChange'];
 
 export default (el: DebugElement, value: any): void => {
   const valueAccessor = funcGetVca(el);
-  if (handleKnown(valueAccessor, value)) {
+  if (handleKnown(valueAccessor, value) || hasListener(el)) {
     triggerInput(el, value);
 
     return;
   }
 
   for (const key of keys) {
     if (typeof valueAccessor[key] === 'function') {
-      triggerInput(el, value);
-      // valueAccessor[key](value);
+      valueAccessor.writeValue(value);
+      valueAccessor[key](value);
 
       return;
     }

libs/ng-mocks/src/lib/mock-helper/cva/mock-helper.touch.ts

@@ -33,20 +33,22 @@ const handleKnown = (valueAccessor: any): boolean => {
   return false;
 };
 
+const hasListener = (el: DebugElement): boolean =>
+  el.listeners.filter(listener => listener.name === 'focus' || listener.name === 'blur').length > 0;
+
 const keys = ['onTouched', '_onTouched', '_cvaOnTouch', '_markAsTouched', '_onTouchedCallback', 'onModelTouched'];
 
 export default (el: DebugElement): void => {
   const valueAccessor = funcGetVca(el);
-  if (handleKnown(valueAccessor)) {
+  if (handleKnown(valueAccessor) || hasListener(el)) {
     triggerTouch(el);
 
     return;
   }
 
   for (const key of keys) {
     if (typeof valueAccessor[key] === 'function') {
-      triggerTouch(el);
-      // valueAccessor[key]();
+      valueAccessor[key]();
 
       return;
     }

tests/ng-mocks-change/cdr-change.spec.ts

@@ -0,0 +1,166 @@
+// tslint:disable member-ordering
+
+import { Component, NgModule } from '@angular/core';
+import {
+  ControlValueAccessor,
+  FormControl,
+  FormsModule,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  providers: [
+    {
+      multi: true,
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: CvaComponent,
+    },
+  ],
+  selector: 'cva',
+  template: ` {{ show }} `,
+})
+class CvaComponent implements ControlValueAccessor {
+  public onChange: any = () => undefined;
+  public onTouched: any = () => undefined;
+  public show: any = null;
+
+  public registerOnChange = (onChange: any) =>
+    (this.onChange = onChange);
+  public registerOnTouched = (onTouched: any) =>
+    (this.onTouched = onTouched);
+
+  public writeValue = (value: any) => {
+    this.show = value;
+  };
+}
+
+@Component({
+  selector: 'target',
+  template: `
+    <cva [formControl]="control" class="form-control"></cva>
+    <cva [(ngModel)]="value" class="ng-model"></cva>
+  `,
+})
+class TargetComponent {
+  public control = new FormControl();
+  public value: string | null = null;
+}
+
+@NgModule({
+  declarations: [CvaComponent, TargetComponent],
+  imports: [ReactiveFormsModule, FormsModule],
+})
+class MyModule {}
+
+// checking how normal form works
+describe('ng-mocks-change:cdr-change', () => {
+  const dataSet: Array<[string, () => void]> = [
+    ['real', () => MockBuilder(TargetComponent).keep(MyModule)],
+    [
+      'mock-vca',
+      () =>
+        MockBuilder(TargetComponent)
+          .keep(MyModule)
+          .mock(CvaComponent),
+    ],
+  ];
+  for (const [label, init] of dataSet) {
+    describe(label, () => {
+      const destroy$ = new Subject<void>();
+
+      beforeEach(init);
+
+      afterAll(() => {
+        destroy$.next();
+        destroy$.complete();
+      });
+
+      it('correctly changes CVA', () => {
+        const fixture = MockRender(TargetComponent);
+        const component = fixture.point.componentInstance;
+        const spy = jasmine.createSpy('valueChange');
+        component.control.valueChanges
+          .pipe(takeUntil(destroy$))
+          .subscribe(spy);
+
+        const formControl = ngMocks.find('.form-control');
+        expect(ngMocks.formatHtml(formControl)).toEqual('');
+        expect(ngMocks.formatHtml(formControl, true)).toContain(
+          'class="form-control ng-untouched ng-pristine ng-valid"',
+        );
+        expect(spy).toHaveBeenCalledTimes(0);
+        ngMocks.change(formControl, '123');
+        expect(spy).toHaveBeenCalledTimes(1);
+        expect(component.control.value).toEqual('123');
+        expect(ngMocks.formatHtml(formControl)).toEqual('');
+        expect(ngMocks.formatHtml(formControl, true)).toContain(
+          'class="form-control ng-untouched ng-pristine ng-valid"',
+        );
+
+        // nothing should be rendered so far, but now we trigger the render
+        fixture.detectChanges();
+        if (label === 'real') {
+          expect(ngMocks.formatHtml(formControl)).toEqual('123');
+        }
+        expect(ngMocks.formatHtml(formControl, true)).toContain(
+          'class="form-control ng-untouched ng-valid ng-dirty"',
+        );
+
+        const ngModel = ngMocks.find('.ng-model');
+        expect(ngMocks.formatHtml(ngModel)).toEqual('');
+        expect(ngMocks.formatHtml(ngModel, true)).toContain(
+          'class="ng-model ng-untouched ng-pristine ng-valid"',
+        );
+        ngMocks.change(ngModel, '123');
+        expect(component.value).toEqual('123');
+        expect(ngMocks.formatHtml(ngModel)).toEqual('');
+        expect(ngMocks.formatHtml(ngModel, true)).toContain(
+          'class="ng-model ng-untouched ng-pristine ng-valid"',
+        );
+
+        // nothing should be rendered so far, but now we trigger the render
+        fixture.detectChanges();
+        if (label === 'real') {
+          expect(ngMocks.formatHtml(ngModel)).toEqual('123');
+        }
+        expect(ngMocks.formatHtml(ngModel, true)).toContain(
+          'class="ng-model ng-untouched ng-valid ng-dirty"',
+        );
+      });
+    });
+  }
+});
+
+describe('ng-mocks-change:cdr-change:full-mock', () => {
+  const destroy$ = new Subject<void>();
+
+  beforeEach(() => MockBuilder(TargetComponent, MyModule));
+
+  afterAll(() => {
+    destroy$.next();
+    destroy$.complete();
+  });
+
+  it('correctly changes CVA', () => {
+    const fixture = MockRender(TargetComponent);
+    const component = fixture.point.componentInstance;
+    const spy = jasmine.createSpy('valueChange');
+    component.control.valueChanges
+      .pipe(takeUntil(destroy$))
+      .subscribe(spy);
+
+    const formControl = ngMocks.find('.form-control');
+    expect(spy).toHaveBeenCalledTimes(0);
+    ngMocks.change(formControl, '123');
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(component.control.value).toEqual('123');
+
+    const ngModel = ngMocks.find('.ng-model');
+    ngMocks.change(ngModel, '123');
+    expect(component.value).toEqual('123');
+  });
+});

tests/ng-mocks-change/cdr.spec.ts → tests/ng-mocks-change/cdr-input.spec.ts

@@ -59,7 +59,7 @@ class TargetComponent {
 class MyModule {}
 
 // checking how normal form works
-describe('ng-mocks-change:cdr', () => {
+describe('ng-mocks-change:cdr-input', () => {
   const dataSet: Array<[string, () => void]> = [
     ['real', () => MockBuilder(TargetComponent).keep(MyModule)],
     [
@@ -137,7 +137,7 @@ describe('ng-mocks-change:cdr', () => {
   }
 });
 
-describe('ng-mocks-change:cdr:full-mock', () => {
+describe('ng-mocks-change:cdr-change:full-mock', () => {
   const destroy$ = new Subject<void>();
 
   beforeEach(() => MockBuilder(TargetComponent, MyModule));

tests/ng-mocks-touch/cdr.spec.ts → tests/ng-mocks-touch/cdr-blur.spec.ts

@@ -57,7 +57,7 @@ class TargetComponent {
 class MyModule {}
 
 // checking how normal form works
-describe('ng-mocks-touch:cdr', () => {
+describe('ng-mocks-touch:cdr-blur', () => {
   const dataSet: Array<[string, () => void]> = [
     ['real', () => MockBuilder(TargetComponent).keep(MyModule)],
     [
@@ -110,7 +110,7 @@ describe('ng-mocks-touch:cdr', () => {
   }
 });
 
-describe('ng-mocks-touch:cdr:full-mock', () => {
+describe('ng-mocks-touch:cdr-blur:full-mock', () => {
   beforeEach(() => MockBuilder(TargetComponent, MyModule));
 
   it('correctly touches CVA', () => {

tests/ng-mocks-touch/cdr-touch.spec.ts

@@ -0,0 +1,122 @@
+// tslint:disable member-ordering
+
+import { Component, NgModule } from '@angular/core';
+import {
+  ControlValueAccessor,
+  FormControl,
+  FormsModule,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';
+
+@Component({
+  providers: [
+    {
+      multi: true,
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: CvaComponent,
+    },
+  ],
+  selector: 'cva',
+  template: ` {{ show }} `,
+})
+class CvaComponent implements ControlValueAccessor {
+  public onChange: any = () => undefined;
+  public onTouched: any = () => undefined;
+  public show: any = null;
+
+  public registerOnChange = (onChange: any) =>
+    (this.onChange = onChange);
+  public registerOnTouched = (onTouched: any) =>
+    (this.onTouched = onTouched);
+
+  public writeValue = (value: any) => {
+    this.show = value;
+  };
+}
+
+@Component({
+  selector: 'target',
+  template: `
+    <cva [formControl]="control" class="form-control"></cva>
+    <cva [(ngModel)]="value" class="ng-model"></cva>
+  `,
+})
+class TargetComponent {
+  public control = new FormControl();
+  public value: string | null = null;
+}
+
+@NgModule({
+  declarations: [CvaComponent, TargetComponent],
+  imports: [ReactiveFormsModule, FormsModule],
+})
+class MyModule {}
+
+// checking how normal form works
+describe('ng-mocks-touch:cdr-blur', () => {
+  const dataSet: Array<[string, () => void]> = [
+    ['real', () => MockBuilder(TargetComponent).keep(MyModule)],
+    [
+      'mock-vca',
+      () =>
+        MockBuilder(TargetComponent)
+          .keep(MyModule)
+          .mock(CvaComponent),
+    ],
+  ];
+
+  for (const [label, init] of dataSet) {
+    describe(label, () => {
+      beforeEach(init);
+
+      it('correctly touches CVA', () => {
+        const fixture = MockRender(TargetComponent);
+
+        const formControl = ngMocks.find('.form-control');
+        expect(ngMocks.formatHtml(formControl, true)).toContain(
+          'class="form-control ng-untouched ng-pristine ng-valid"',
+        );
+        ngMocks.touch(formControl);
+        expect(ngMocks.formatHtml(formControl, true)).toContain(
+          'class="form-control ng-untouched ng-pristine ng-valid"',
+        );
+
+        // nothing should be rendered so far, but now we trigger the render
+        fixture.detectChanges();
+        expect(ngMocks.formatHtml(formControl, true)).toContain(
+          'class="form-control ng-pristine ng-valid ng-touched"',
+        );
+
+        const ngModel = ngMocks.find('.ng-model');
+        expect(ngMocks.formatHtml(ngModel, true)).toContain(
+          'class="ng-model ng-untouched ng-pristine ng-valid"',
+        );
+        ngMocks.touch(ngModel);
+        expect(ngMocks.formatHtml(ngModel, true)).toContain(
+          'class="ng-model ng-untouched ng-pristine ng-valid"',
+        );
+
+        // nothing should be rendered so far, but now we trigger the render
+        fixture.detectChanges();
+        expect(ngMocks.formatHtml(ngModel, true)).toContain(
+          'class="ng-model ng-pristine ng-valid ng-touched"',
+        );
+      });
+    });
+  }
+});
+
+describe('ng-mocks-touch:cdr-blur:full-mock', () => {
+  beforeEach(() => MockBuilder(TargetComponent, MyModule));
+
+  it('correctly touches CVA', () => {
+    const fixture = MockRender(TargetComponent);
+    const component = fixture.point.componentInstance;
+
+    const formControl = ngMocks.find('.form-control');
+    ngMocks.touch(formControl);
+    expect(component.control.touched).toEqual(true);
+  });
+});