fix(a14): injecting mock components in vcr.createComponent #333

Author: satanTime

libs/ng-mocks/src/lib/common/ng-mocks-global-overrides.ts

@@ -1,18 +1,20 @@
-import { Component, Directive, NgModule, Pipe } from '@angular/core';
+import { Component, Directive, NgModule, Pipe, ViewContainerRef } from '@angular/core';
 import { getTestBed, MetadataOverride, TestBed, TestBedStatic, TestModuleMetadata } from '@angular/core/testing';
 
 import funcExtractTokens from '../mock-builder/func.extract-tokens';
 import getOverrideDef from '../mock-builder/promise/get-override-def';
 import { ngMocks } from '../mock-helper/mock-helper';
 import mockHelperFasterInstall from '../mock-helper/mock-helper.faster-install';
 import { MockProvider } from '../mock-provider/mock-provider';
+import helperCreateClone from '../mock-service/helper.create-clone';
 
 import coreDefineProperty from './core.define-property';
 import { flatten, mapEntries, mapValues } from './core.helpers';
+import coreInjector from './core.injector';
 import coreReflectMeta from './core.reflect.meta';
 import coreReflectModuleResolve from './core.reflect.module-resolve';
 import coreReflectProvidedIn from './core.reflect.provided-in';
-import { NG_MOCKS_TOUCHES } from './core.tokens';
+import { NG_MOCKS, NG_MOCKS_TOUCHES } from './core.tokens';
 import { AnyType } from './core.types';
 import funcGetProvider from './func.get-provider';
 import { isNgDef } from './func.is-ng-def';
@@ -226,10 +228,57 @@ const resetTestingModule =
     return original.call(TestBed);
   };
 
+const viewContainerInstall = () => {
+  const vcr: any = ViewContainerRef;
+
+  // istanbul ignore else
+  if (!vcr.ngMocksOverridesInstalled) {
+    const ngElementId = vcr.__NG_ELEMENT_ID__;
+
+    // istanbul ignore else
+    if (ngElementId) {
+      coreDefineProperty(
+        vcr,
+        '__NG_ELEMENT_ID__',
+        helperCreateClone(ngElementId, undefined, undefined, (...ngElementIdArgs: any[]) => {
+          const vcrInstance = ngElementId.apply(ngElementId, ngElementIdArgs);
+
+          const createComponent = vcrInstance.createComponent;
+          coreDefineProperty(
+            vcrInstance,
+            'createComponent',
+            helperCreateClone(
+              createComponent,
+              undefined,
+              undefined,
+              (component: any, ...createComponentArgs: any[]) => {
+                const map = coreInjector(NG_MOCKS, vcrInstance.injector);
+
+                return createComponent.apply(vcrInstance, [
+                  map?.get(component) ?? component,
+                  ...createComponentArgs,
+                ] as any);
+              },
+            ),
+            true,
+          );
+
+          return vcrInstance;
+        }),
+        true,
+      );
+    }
+
+    coreDefineProperty(ViewContainerRef, 'ngMocksOverridesInstalled', true);
+  }
+};
+
 const install = () => {
-  const hooks = mockHelperFasterInstall();
   // istanbul ignore else
   if (!(TestBed as any).ngMocksOverridesInstalled) {
+    const hooks = mockHelperFasterInstall();
+    viewContainerInstall();
+
     // istanbul ignore else
     if (hooks.before.indexOf(configureTestingModule) === -1) {
       hooks.before.push(configureTestingModule);
@@ -238,6 +287,7 @@ const install = () => {
     if (hooks.after.indexOf(resetTestingModule) === -1) {
       hooks.after.push(resetTestingModule);
     }
+
     coreDefineProperty(TestBed, 'ngMocksOverridesInstalled', true);
   }
 };

libs/ng-mocks/src/lib/mock-builder/promise/handle-entry-components.ts

@@ -17,15 +17,16 @@ import helperCreateClone from '../../mock-service/helper.create-clone';
 import { NgMeta } from './types';
 
 class EntryComponentsModule {
-  protected origin: module.ComponentFactoryResolver['resolveComponentFactory'];
+  protected originCFR: module.ComponentFactoryResolver['resolveComponentFactory'];
 
   public constructor(map: Map<any, any>, protected componentFactoryResolver: module.ComponentFactoryResolver) {
-    this.origin = componentFactoryResolver.resolveComponentFactory;
+    this.originCFR = componentFactoryResolver.resolveComponentFactory;
     componentFactoryResolver.resolveComponentFactory = helperCreateClone(
-      this.origin,
+      this.originCFR,
       undefined,
       undefined,
-      (component: any) => this.origin.call(componentFactoryResolver, map.get(component) ?? component) as any,
+      (component: any, ...args: any[]) =>
+        this.originCFR.apply(componentFactoryResolver, [map.get(component) ?? component, ...args] as any),
     );
   }
 }
@@ -39,11 +40,11 @@ export default (ngModule: NgMeta): void => {
     }
   }
   // the way to cause entryComponents to do its work
-  const entryComponent = extendClass(EntryComponentsModule);
+  const entryModule = extendClass(EntryComponentsModule);
   module.NgModule({
     // Ivy knows how to make any component an entry point,
     // but we still would like to patch resolveComponentFactory in order to provide mocks.
     entryComponents: isIvy ? [] : /* istanbul ignore next */ entryComponents,
-  })(entryComponent);
-  ngModule.imports.push(entryComponent);
+  })(entryModule);
+  ngModule.imports.push(entryModule);
 };

tests/issue-333/test.spec.ts

@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
 import * as core from '@angular/core';
+import { TestBed } from '@angular/core/testing';
 import { isMockOf, MockBuilder, MockRender, ngMocks } from 'ng-mocks';
 
 @core.Component({
@@ -36,6 +37,14 @@ class MockComponent {
   public flag = true;
 }
 
+@core.NgModule({
+  declarations: [MockComponent, DepComponent],
+  entryComponents: [MockComponent],
+  exports: [MockComponent],
+  imports: [CommonModule],
+})
+class MockModule {}
+
 // @see https://github.com/ike18t/ng-mocks/issues/333
 describe('issue-333', () => {
   describe('1:keep', () => {
@@ -127,4 +136,22 @@ describe('issue-333', () => {
       );
     });
   });
+
+  // Ensuring that everything has been reset properly
+  describe('real', () => {
+    beforeEach(async () =>
+      TestBed.configureTestingModule({
+        imports: [MockModule, OverlayModule],
+      }).compileComponents(),
+    );
+
+    it('renders all components', () => {
+      const fixture = MockRender(DynamicOverlayComponent);
+      expect(ngMocks.formatText(fixture)).toEqual(``);
+
+      fixture.point.componentInstance.attachComponent(MockComponent);
+      fixture.detectChanges();
+      expect(ngMocks.formatText(fixture)).toEqual(`Dependency`);
+    });
+  });
 });