fix: adding NG_VALUE_ACCESSOR for mat components

closes #157

e2e/a10es2015ivy/src/app/app.component.ts

@@ -2,8 +2,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
+  template: 'ng-mocks',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {}

e2e/a10es2015noivy/src/app/app.component.ts

@@ -2,8 +2,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
+  template: 'ng-mocks',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {}

e2e/a10es5ivy/src/app/app.component.ts

@@ -2,8 +2,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
+  template: 'ng-mocks',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {}

e2e/a10es5noivy/src/app/app.component.ts

@@ -2,8 +2,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
+  template: 'ng-mocks',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {}

e2e/a5es2015/src/app/app.component.ts

@@ -1,10 +1,8 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
+  template: 'ng-mocks',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AppComponent {
-  title = 'app';
-}
+export class AppComponent {}

e2e/a5es5/src/app/app.component.ts

@@ -1,10 +1,8 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
+  template: 'ng-mocks',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AppComponent {
-  title = 'app';
-}
+export class AppComponent {}

e2e/a6es2015/src/app/app.component.ts

@@ -2,8 +2,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
     selector: 'app-root',
-    templateUrl: './app.component.html',
-    styleUrls: ['./app.component.scss'],
+    template: 'ng-mocks',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {}

e2e/a6es5/src/app/app.component.ts

@@ -2,8 +2,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
     selector: 'app-root',
-    templateUrl: './app.component.html',
-    styleUrls: ['./app.component.scss'],
+    template: 'ng-mocks',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {}

e2e/a7es2015/src/app/app.component.ts

@@ -2,8 +2,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
     selector: 'app-root',
-    templateUrl: './app.component.html',
-    styleUrls: ['./app.component.scss'],
+    template: 'ng-mocks',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {}

e2e/a7es5/src/app/app.component.ts

@@ -2,8 +2,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
     selector: 'app-root',
-    templateUrl: './app.component.html',
-    styleUrls: ['./app.component.scss'],
+    template: 'ng-mocks',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {}

e2e/a8es2015/src/app/app.component.ts

@@ -2,8 +2,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
     selector: 'app-root',
-    templateUrl: './app.component.html',
-    styleUrls: ['./app.component.scss'],
+    template: 'ng-mocks',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {}

e2e/a8es5/src/app/app.component.ts

@@ -2,8 +2,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
     selector: 'app-root',
-    templateUrl: './app.component.html',
-    styleUrls: ['./app.component.scss'],
+    template: 'ng-mocks',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {}

e2e/a9es2015ivy/package.json

@@ -20,10 +20,12 @@
     },
     "dependencies": {
         "@angular/animations": "~9.0.7",
+        "@angular/cdk": "~9.2.4",
         "@angular/common": "~9.0.7",
         "@angular/compiler": "~9.0.7",
         "@angular/core": "~9.0.7",
         "@angular/forms": "~9.0.7",
+        "@angular/material": "~9.2.4",
         "@angular/platform-browser": "~9.0.7",
         "@angular/platform-browser-dynamic": "~9.0.7",
         "@angular/router": "~9.0.7",

e2e/a9es2015ivy/src/app/app.component.ts

@@ -2,8 +2,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
     selector: 'app-root',
-    templateUrl: './app.component.html',
-    styleUrls: ['./app.component.scss'],
+    template: 'ng-mocks',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {}

e2e/a9es2015noivy/src/app/app.component.ts

@@ -2,8 +2,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
     selector: 'app-root',
-    templateUrl: './app.component.html',
-    styleUrls: ['./app.component.scss'],
+    template: 'ng-mocks',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {}

e2e/a9es5ivy/src/app/app.component.ts

@@ -2,8 +2,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
     selector: 'app-root',
-    templateUrl: './app.component.html',
-    styleUrls: ['./app.component.scss'],
+    template: 'ng-mocks',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {}

e2e/a9es5noivy/src/app/app.component.ts

@@ -2,8 +2,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
     selector: 'app-root',
-    templateUrl: './app.component.html',
-    styleUrls: ['./app.component.scss'],
+    template: 'ng-mocks',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {}

lib/mock-component/mock-component.ts

@@ -110,20 +110,34 @@ export function MockComponent<TComponent>(
     template,
   };
 
-  for (const providerDef of flatten(providers)) {
-    const provider =
+  let includeNgValueAccessor = true;
+  for (const providerDef of flatten(providers || [])) {
+    const provide =
       providerDef && typeof providerDef === 'object' && providerDef.provide ? providerDef.provide : providerDef;
-    if (options.providers && provider === NG_VALUE_ACCESSOR) {
+    if (includeNgValueAccessor && options.providers && provide === NG_VALUE_ACCESSOR) {
+      includeNgValueAccessor = false;
       options.providers.push({
         multi: true,
-        provide: NG_VALUE_ACCESSOR,
+        provide,
         useExisting: forwardRef(() => ComponentMock),
       });
     }
-    if (options.providers && provider === NG_VALIDATORS) {
+    if (options.providers && provide === NG_VALIDATORS) {
+      options.providers.push({
+        multi: true,
+        provide,
+        useExisting: forwardRef(() => ComponentMock),
+      });
+    } else if (
+      includeNgValueAccessor &&
+      options.providers &&
+      provide !== providerDef &&
+      providerDef.useExisting === component
+    ) {
+      includeNgValueAccessor = false;
       options.providers.push({
         multi: true,
-        provide: NG_VALIDATORS,
+        provide: NG_VALUE_ACCESSOR,
         useExisting: forwardRef(() => ComponentMock),
       });
     }

lib/mock-directive/mock-directive.ts

@@ -67,20 +67,20 @@ export function MockDirective<TDirective>(directive: Type<TDirective>): Type<Moc
     selector,
   };
 
-  for (const providerDef of flatten(providers)) {
-    const provider =
+  for (const providerDef of flatten(providers || [])) {
+    const provide =
       providerDef && typeof providerDef === 'object' && providerDef.provide ? providerDef.provide : providerDef;
-    if (options.providers && provider === NG_VALUE_ACCESSOR) {
+    if (options.providers && provide === NG_VALUE_ACCESSOR) {
       options.providers.push({
         multi: true,
-        provide: NG_VALUE_ACCESSOR,
+        provide,
         useExisting: forwardRef(() => DirectiveMock),
       });
     }
-    if (options.providers && provider === NG_VALIDATORS) {
+    if (options.providers && provide === NG_VALIDATORS) {
       options.providers.push({
         multi: true,
-        provide: NG_VALIDATORS,
+        provide,
         useExisting: forwardRef(() => DirectiveMock),
       });
     }