ng-mocks - npm Package Compare versions

Comparing version 7.4.0 to 7.5.0

dist/index.d.ts

@@ -5,4 +5,5 @@ export * from './lib/common';
 export * from './lib/mock-directive';
+export * from './lib/mock-helper';
 export * from './lib/mock-render';
 export * from './lib/mock-module';
 export * from './lib/mock-pipe';

dist/index.js

@@ -10,2 +10,3 @@ "use strict";
 __export(require("./lib/mock-directive"));
+__export(require("./lib/mock-helper"));
 __export(require("./lib/mock-render"));
@@ -12,0 +13,0 @@ __export(require("./lib/mock-module"));

dist/lib/mock-component/mock-component.d.ts

 import { Type } from '@angular/core';
 export declare type MockedComponent<T> = T & {
+    __hide(contentChildSelector: string): void;
+    __render(contentChildSelector: string, $implicit?: any, variables?: {
+        [key: string]: any;
+    }): void;
     __simulateChange(value: any): void;
@@ -4,0 +8,0 @@ __simulateTouch(): void;

dist/lib/mock-component/mock-component.js

 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -32,2 +43,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     var template = "<ng-content></ng-content>";
+    var viewChildRefs = new Map();
     if (queries) {
@@ -44,6 +56,10 @@ var queriesKeys = Object.keys(queries);
             }
-            return "\n          <div data-key=\"" + query.selector + "\">\n            <ng-container *ngTemplateOutlet=\"" + key + "\"></ng-container>\n          </div>\n        ";
+            viewChildRefs.set(query.selector, key);
+            queries["__mockView_" + key] = new core_1.ViewChild("__" + query.selector, {
+                read: core_1.ViewContainerRef,
+            });
+            return "\n          <div *ngIf=\"mockRender_" + query.selector + "\" data-key=\"" + query.selector + "\">\n            <ng-template #__" + query.selector + "></ng-template>\n          </div>\n        ";
         }).join('');
         if (templateQueries) {
-            template = "\n        <div data-key=\"ng-content\">" + template + "</div>\n        " + templateQueries + "\n      ";
+            template = "\n        " + template + "\n        " + templateQueries + "\n      ";
         }
@@ -69,9 +85,6 @@ }
     var ComponentMock = (function () {
-        function ComponentMock() {
+        function ComponentMock(changeDetector) {
             var _this = this;
             this.__simulateChange = function (param) { };
             this.__simulateTouch = function () { };
-            this.registerOnChange = function (fn) {
-                _this.__simulateChange = fn;
-            };
             this.writeValue = function (value) { };
@@ -86,3 +99,28 @@ Object.keys(component.prototype).forEach(function (method) {
             });
+            this.__hide = function (contentChildSelector) {
+                var key = viewChildRefs.get(contentChildSelector);
+                if (key) {
+                    _this["mockRender_" + contentChildSelector] = false;
+                    changeDetector.detectChanges();
+                }
+            };
+            this.__render = function (contentChildSelector, $implicit, variables) {
+                var key = viewChildRefs.get(contentChildSelector);
+                var templateRef;
+                var viewContainer;
+                if (key) {
+                    _this["mockRender_" + contentChildSelector] = true;
+                    changeDetector.detectChanges();
+                    viewContainer = _this["__mockView_" + key];
+                    templateRef = _this[key];
+                    if (viewContainer && templateRef) {
+                        viewContainer.clear();
+                        viewContainer.createEmbeddedView(templateRef, __assign({}, variables, { $implicit: $implicit }));
+                    }
+                }
+            };
         }
+        ComponentMock.prototype.registerOnChange = function (fn) {
+            this.__simulateChange = fn;
+        };
         ComponentMock.prototype.registerOnTouched = function (fn) {
@@ -93,3 +131,3 @@ this.__simulateTouch = fn;
             common_1.MockOf(component),
-            __metadata("design:paramtypes", [])
+            __metadata("design:paramtypes", [core_1.ChangeDetectorRef])
         ], ComponentMock);
@@ -96,0 +134,0 @@ return ComponentMock;

dist/lib/mock-component/mock-component.spec.js

@@ -70,3 +70,3 @@ "use strict";
         var mockedComponent = fixture.debugElement
-            .query(platform_browser_1.By.directive(mock_component_1.MockComponent(simple_component_component_1.SimpleComponent)))
+            .query(platform_browser_1.By.directive(simple_component_component_1.SimpleComponent))
             .componentInstance;
@@ -79,3 +79,3 @@ expect(mockedComponent.someInput).toEqual('hi');
         var mockedComponent = fixture.debugElement
-            .query(platform_browser_1.By.directive(mock_component_1.MockComponent(simple_component_component_1.SimpleComponent)));
+            .query(platform_browser_1.By.directive(simple_component_component_1.SimpleComponent));
         expect(mockedComponent.componentInstance.someInput3).toEqual(true);
@@ -86,3 +86,3 @@ });
         var mockedComponent = fixture.debugElement
-            .query(platform_browser_1.By.directive(mock_component_1.MockComponent(simple_component_component_1.SimpleComponent)))
+            .query(platform_browser_1.By.directive(simple_component_component_1.SimpleComponent))
             .componentInstance;
@@ -95,3 +95,3 @@ mockedComponent.someOutput1.emit('hi');
         var mockedComponent = fixture.debugElement
-            .query(platform_browser_1.By.directive(mock_component_1.MockComponent(simple_component_component_1.SimpleComponent)))
+            .query(platform_browser_1.By.directive(simple_component_component_1.SimpleComponent))
             .componentInstance;
@@ -108,3 +108,3 @@ mockedComponent.someOutput2.emit('hi');
         var mockedComponents = fixture.debugElement
-            .queryAll(platform_browser_1.By.directive(mock_component_1.MockComponent(simple_component_component_1.SimpleComponent)));
+            .queryAll(platform_browser_1.By.directive(simple_component_component_1.SimpleComponent));
         var mockedComponent1 = mockedComponents[0].componentInstance;
@@ -116,3 +116,3 @@ var mockedComponent2 = mockedComponents[1].componentInstance;
         var mockedComponent = fixture.debugElement
-            .query(platform_browser_1.By.directive(mock_component_1.MockComponent(empty_component_component_1.EmptyComponent)));
+            .query(platform_browser_1.By.directive(empty_component_component_1.EmptyComponent));
         expect(mockedComponent).not.toBeNull();
@@ -154,15 +154,28 @@ });
         it('renders all @ContentChild properties and ngContent in wrappers too', function () {
+            var block1;
+            var block2;
+            var block3;
             fixture.detectChanges();
             var templateOutlet = fixture.debugElement.query(platform_browser_1.By.css('#element-with-content-and-template'));
             expect(templateOutlet).toBeTruthy();
-            var ngContent = templateOutlet.query(platform_browser_1.By.css('[data-key="ng-content"]'));
+            var ngContent = templateOutlet;
             expect(ngContent).toBeTruthy();
             expect(ngContent.nativeElement.innerText.trim()).toEqual('ng-content body header ng-content body footer');
-            var block1 = templateOutlet.query(platform_browser_1.By.css('[data-key="block1"]'));
+            block1 = templateOutlet.query(platform_browser_1.By.css('[data-key="block1"]'));
+            expect(block1).toBeFalsy();
+            templateOutlet.componentInstance.__render('block1');
+            block1 = templateOutlet.query(platform_browser_1.By.css('[data-key="block1"]'));
             expect(block1).toBeTruthy();
             expect(block1.nativeElement.innerText.trim()).toEqual('block 1 body');
-            var block2 = templateOutlet.query(platform_browser_1.By.css('[data-key="block2"]'));
+            block2 = templateOutlet.query(platform_browser_1.By.css('[data-key="block2"]'));
+            expect(block2).toBeFalsy();
+            templateOutlet.componentInstance.__render('block2');
+            block2 = templateOutlet.query(platform_browser_1.By.css('[data-key="block2"]'));
             expect(block2).toBeTruthy();
             expect(block2.nativeElement.innerText.trim()).toEqual('block 2 body');
-            var block3 = templateOutlet.query(platform_browser_1.By.css('[data-key="block3"]'));
+            block3 = templateOutlet.query(platform_browser_1.By.css('[data-key="block3"]'));
+            expect(block3).toBeFalsy();
+            templateOutlet.componentInstance.__render('block3');
+            fixture.detectChanges();
+            block3 = templateOutlet.query(platform_browser_1.By.css('[data-key="block3"]'));
             expect(block3).toBeTruthy();
@@ -169,0 +182,0 @@ expect(block3.nativeElement.innerText.trim()).toEqual('');

dist/lib/mock-directive/mock-directive.d.ts

@@ -1,3 +0,12 @@
-import { Type } from '@angular/core';
+import { ElementRef, TemplateRef, Type, ViewContainerRef } from '@angular/core';
+export declare type MockedDirective<T> = T & {
+    __element?: ElementRef;
+    __isStructural: boolean;
+    __template?: TemplateRef<any>;
+    __viewContainer?: ViewContainerRef;
+    __render($implicit?: any, variables?: {
+        [key: string]: any;
+    }): void;
+};
 export declare function MockDirectives(...directives: Array<Type<any>>): Array<Type<any>>;
-export declare function MockDirective<TDirective>(directive: Type<TDirective>): Type<TDirective>;
+export declare function MockDirective<TDirective>(directive: Type<TDirective>): Type<MockedDirective<TDirective>>;

dist/lib/mock-directive/mock-directive.js

 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -34,4 +45,8 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     var DirectiveMock = (function () {
-        function DirectiveMock(templateRef, viewContainer) {
+        function DirectiveMock(element, template, viewContainer) {
             var _this = this;
+            this.__element = element;
+            this.__isStructural = viewContainer && template;
+            this.__template = template;
+            this.__viewContainer = viewContainer;
             Object.keys(directive.prototype).forEach(function (method) {
@@ -45,4 +60,10 @@ if (!_this[method]) {
             });
-            if (templateRef && viewContainer) {
-                viewContainer.createEmbeddedView(templateRef);
+            this.__render = function ($implicit, variables) {
+                if (viewContainer && template) {
+                    viewContainer.clear();
+                    viewContainer.createEmbeddedView(template, __assign({}, variables, { $implicit: $implicit }));
+                }
+            };
+            if (viewContainer && template) {
+                this.__render();
             }
@@ -64,5 +85,7 @@ }
             }),
-            __param(0, core_1.Optional()), __param(0, core_1.Inject(core_1.TemplateRef)),
-            __param(1, core_1.Optional()), __param(1, core_1.Inject(core_1.ViewContainerRef)),
-            __metadata("design:paramtypes", [core_1.TemplateRef,
+            __param(0, core_1.Optional()),
+            __param(1, core_1.Optional()),
+            __param(2, core_1.Optional()),
+            __metadata("design:paramtypes", [core_1.ElementRef,
+                core_1.TemplateRef,
                 core_1.ViewContainerRef])
@@ -69,0 +92,0 @@ ], DirectiveMock);

dist/lib/mock-directive/mock-directive.spec.js

@@ -102,8 +102,8 @@ "use strict";
     it('should have use the original component\'s selector', function () {
-        var element = fixture.debugElement.query(platform_browser_1.By.directive(mock_directive_1.MockDirective(ExampleDirective)));
+        var element = fixture.debugElement.query(platform_browser_1.By.directive(ExampleDirective));
         expect(element).not.toBeNull();
     });
     it('should have the input set on the mock component', function () {
-        var debugElement = fixture.debugElement.query(platform_browser_1.By.directive(mock_directive_1.MockDirective(ExampleDirective)));
-        var element = debugElement.injector.get(mock_directive_1.MockDirective(ExampleDirective));
+        var debugElement = fixture.debugElement.query(platform_browser_1.By.directive(ExampleDirective));
+        var element = debugElement.injector.get(ExampleDirective);
         expect(element.something).toEqual('hi');
@@ -113,4 +113,4 @@ expect(element.exampleDirective).toEqual('bye');
     it('triggers output bound behavior for extended outputs', function () {
-        var debugElement = fixture.debugElement.query(platform_browser_1.By.directive(mock_directive_1.MockDirective(ExampleDirective)));
-        var element = debugElement.injector.get(mock_directive_1.MockDirective(ExampleDirective));
+        var debugElement = fixture.debugElement.query(platform_browser_1.By.directive(ExampleDirective));
+        var element = debugElement.injector.get(ExampleDirective);
         element.someOutput.emit(true);
@@ -124,3 +124,3 @@ expect(component.emitted).toEqual(true);
     it('can mock formControlDirective from angular', function () {
-        var debugElement = fixture.debugElement.query(platform_browser_1.By.directive(mock_directive_1.MockDirective(ExampleDirective)));
+        var debugElement = fixture.debugElement.query(platform_browser_1.By.directive(ExampleDirective));
         expect(debugElement).not.toBeNull();
@@ -127,0 +127,0 @@ });

dist/lib/mock-module/mock-module.js

@@ -11,4 +11,2 @@ "use strict";
 var core_1 = require("@angular/core");
-var platform_browser_1 = require("@angular/platform-browser");
-var animations_1 = require("@angular/platform-browser/animations");
 var common_2 = require("../common");
@@ -18,2 +16,10 @@ var reflect_1 = require("../common/reflect");
 var cache = new Map();
+var neverMockProvidedToken = [
+    'InjectionToken Application Initializer',
+];
+var neverMockProvidedFunction = [
+    'ApplicationInitStatus',
+    'DomRendererFactory2',
+    'RendererFactory2',
+];
 var mockProvider = function (provider) {
@@ -23,5 +29,9 @@ var provide = typeof provider === 'object' && provider.provide ? provider.provide : provider;
     if (typeof provide === 'object' && provide.ngMetadataName === 'InjectionToken'
-        && provide.toString() === 'InjectionToken Application Initializer') {
+        && neverMockProvidedToken.includes(provide.toString())) {
         return undefined;
     }
+    if (typeof provide === 'function'
+        && neverMockProvidedFunction.includes(provide.name)) {
+        return undefined;
+    }
     return {
@@ -93,3 +103,3 @@ multi: multi,
 exports.MockModule = MockModule;
-var NEVER_MOCK = [common_1.CommonModule, platform_browser_1.BrowserModule, animations_1.BrowserAnimationsModule];
+var NEVER_MOCK = [common_1.CommonModule];
 function MockIt(module) {
@@ -96,0 +106,0 @@ var mockedModule = {};

dist/lib/mock-render/mock-render.d.ts

 import { ComponentFixture } from '@angular/core/testing';
-export declare function MockRender<TComponent>(template: string, params: TComponent): ComponentFixture<TComponent>;
+export declare function MockRender<TComponent>(template: string, params?: TComponent): ComponentFixture<TComponent>;

dist/lib/mock-render/mock-render.js

@@ -16,4 +16,6 @@ "use strict";
     }()));
+    testing_1.getTestBed()._instantiated = false;
+    testing_1.getTestBed()._moduleFactory = undefined;
     testing_1.TestBed.configureTestingModule({
-        declarations: [component]
+        declarations: [component],
     });
@@ -20,0 +22,0 @@ var fixture = testing_1.TestBed.createComponent(component);

package.json

 {
   "name": "ng-mocks",
-  "version": "7.4.0",
+  "version": "7.5.0",
   "description": "Functions for creating angular mocks",
@@ -44,7 +44,5 @@ "main": "dist/index.js",
   "peerDependencies": {
-    "@angular/animations": ">=5.x <=7.x",
     "@angular/compiler": ">=5.x <=7.x",
     "@angular/core": ">=5.x <=7.x",
-    "@angular/forms": ">=5.x <=7.x",
-    "@angular/platform-browser": ">=5.x <=7.x"
+    "@angular/forms": ">=5.x <=7.x"
   },
@@ -51,0 +49,0 @@ "devDependencies": {

README.md

@@ -26,77 +26,95 @@ [![Build Status](https://travis-ci.org/ike18t/ng-mocks.png?branch=master)](https://travis-ci.org/ike18t/ng-mocks)
 ```typescript
-import { async, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { MockComponent } from 'ng-mocks';
+import { MockComponent, MockedComponent, MockRender } from 'ng-mocks';
 import { DependencyComponent } from './dependency.component';
 import { TestedComponent } from './tested.component';
 
-describe('TestedComponent', () => {
+describe('MockComponent', () => {
   let fixture: ComponentFixture<TestedComponent>;
+  let component: TestedComponent;
 
-  beforeEach(async() => {
+  beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [
         TestedComponent,
-        MockComponent(DependencyComponent)
+        MockComponent(DependencyComponent),
       ]
-    })
-    .compileComponents();
-    .then(() => {
-      fixture = TestBed.createComponent(TestedComponent);
-      component = fixture.componentInstance;
-      fixture.detectChanges();
     });
-  }));
 
+    fixture = TestBed.createComponent(TestedComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
   it('should send the correct value to the dependency component input', () => {
-    // let's pretend Dependency Component (unmocked) has 'someInput' as an  input
+    const mockedComponent = fixture.debugElement
+      .query(By.css('dependency-component-selector'))
+      .componentInstance as DependencyComponent; // casting to retain type safety
+
+    // let's pretend Dependency Component (unmocked) has 'someInput' as an input
     // the input value will be passed into the mocked component so you can assert on it
-    const mockedComponent = fixture.debugElement
-                                   .query(By.css('dependency-component-selector'))
-                                   .componentInstance as DependencyComponent; // casting to retain type safety
-    expect(mockedComponent.someInput).toEqual('foo'); // if you casted mockedComponent as the original component type then this is type safe
+    component.value = 'foo';
+    fixture.detectChanges();
+
+    // if you casted mockedComponent as the original component type then this is type safe
+    expect(mockedComponent.someInput).toEqual('foo');
   });
 
   it('should do something when the dependency component emits on its output', () => {
+    spyOn(component, 'trigger');
     const mockedComponent = fixture.debugElement
-                                   .query(By.directive(MockComponent(DependencyComponent)))
-                                   .componentInstance as DependencyComponent; // casting to retain type safety
+      .query(By.directive(DependencyComponent))
+      .componentInstance as DependencyComponent; // casting to retain type safety
+
     // again, let's pretend DependencyComponent has an output called 'someOutput'
     // emit on the output that MockComponent setup when generating the mock of Dependency Component
-    mockedComponent.someOutput.emit(new Foo()); // if you casted mockedComponent as the original component type then this is type safe
-    fixture.detectChanges();
+    // if you casted mockedComponent as the original component type then this is type safe
+    mockedComponent.someOutput.emit({
+      payload: 'foo',
+    });
+
     // assert on some side effect
+    expect(component.trigger).toHaveBeenCalledWith({
+      payload: 'foo',
+    });
   });
 
-  // <mocked-dependency-component><p>inside content</p></mocked-dependency-component>
   it('should render something inside of the dependency component', () => {
+    const localFixture = MockRender(`
+      <dependency-component-selector>
+        <p>inside content</p>
+      </dependency-component-selector>
+    `);
     // because component does not have any @ContentChild we can access html directly.
-    const mockedNgContent = fixture.debugElement
-                                   .query(By.directive(MockComponent(DependencyComponent)))
-                                   .innerHTML;
+    // assert on some side effect
+    const mockedNgContent = localFixture.debugElement
+      .query(By.directive(DependencyComponent))
+      .nativeElement.innerHTML;
     expect(mockedNgContent).toContain('<p>inside content</p>');
-    fixture.detectChanges();
-    // assert on some side effect
   });
 
-  // <mocked-dependency-component>
-  //   <ng-template #something><p>inside something</p></ng-template>
-  //   <p>inside content</p>
-  // </mocked-dependency-component>
   it('should render something inside of the dependency component', () => {
-    // because component does have @ContentChild we need to use wrappers.
-    const mockedNgContent = fixture.debugElement
-                                   .query(By.directive(MockComponent(DependencyComponent)))
-                                   .query(By.css('[data-key="ng-content"]'))
-                                   .innerHTML;
+    const localFixture = MockRender(`
+      <dependency-component-selector>
+        <ng-template #something><p>inside template</p></ng-template>
+        <p>inside content</p>
+      </dependency-component-selector>
+    `);
+
+    // injected ng-content says as it was.
+    const mockedNgContent = localFixture.debugElement
+      .query(By.directive(DependencyComponent))
+      .nativeElement.innerHTML;
     expect(mockedNgContent).toContain('<p>inside content</p>');
-    
-    const mockedNgTemplate = fixture.debugElement
-                                   .query(By.directive(MockComponent(DependencyComponent)))
-                                   .query(By.css('[data-key="something"]'))
-                                   .innerHTML;
-    expect(mockedNgTemplate).toContain('<p>inside something</p>');
-    
-    fixture.detectChanges();
-    // assert on some side effect
+
+    // because component does have @ContentChild we need to render them first with proper context.
+    const mockedElement = localFixture.debugElement.query(By.directive(DependencyComponent));
+    const mockedComponent: MockedComponent<DependencyComponent> = mockedElement.componentInstance;
+    mockedComponent.__render('something');
+    localFixture.detectChanges();
+
+    const mockedNgTemplate = mockedElement.query(By.css('[data-key="something"]'))
+      .nativeElement.innerHTML;
+    expect(mockedNgTemplate).toContain('<p>inside template</p>');
   });
@@ -115,43 +133,58 @@ });
 ```typescript
-import { async, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { MockComponent } from 'ng-mocks';
+import { MockDirective, MockHelper } from 'ng-mocks';
 import { DependencyDirective } from './dependency.directive';
 import { TestedComponent } from './tested.component';
 
-describe('TestedComponent', () => {
+describe('MockDirective', () => {
   let fixture: ComponentFixture<TestedComponent>;
+  let component: TestedComponent;
 
-  beforeEach(async() => {
+  beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [
         TestedComponent,
-        MockDirective(DependencyDirective)
+        MockDirective(DependencyDirective),
       ]
-    })
-    .compileComponents();
-    .then(() => {
-      fixture = TestBed.createComponent(TestedComponent);
-      component = fixture.componentInstance;
-      fixture.detectChanges();
     });
-  }));
 
+    fixture = TestBed.createComponent(TestedComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
   it('should send the correct value to the dependency component input', () => {
+    component.value = 'foo';
+    fixture.detectChanges();
+
     // let's pretend Dependency Directive (unmocked) has 'someInput' as an input
     // the input value will be passed into the mocked directive so you can assert on it
-    const debugElement = fixture.debugElement.query(By.directive(MockDirective(DependencyDirective)));
-    const mockedDirectiveInstance = debugElement.injector
-                                                .get(MockDirective(DependencyDirective)) as DependencyDirective; // casting to retain type safety
-    expect(mockedDirectiveInstance.someInput).toEqual('foo');
+    const mockedDirectiveInstance = MockHelper.getDirective(
+      fixture.debugElement.query(By.css('span')),
+      DependencyDirective,
+    );
+    expect(mockedDirectiveInstance).toBeTruthy();
+    if (mockedDirectiveInstance) {
+      expect(mockedDirectiveInstance.someInput).toEqual('foo');
+    }
+    // assert on some side effect
   });
 
   it('should do something when the dependency directive emits on its output', () => {
-    const debugElement = fixture.debugElement.query(By.directive(MockDirective(DependencyDirective)));
-    const mockedDirectiveInstance = debugElement.injector
-                                                .get(MockDirective(DependencyDirective)) as DependencyDirective; // casting to retain type safety
+    spyOn(component, 'trigger');
+    fixture.detectChanges();
+
     // again, let's pretend DependencyDirective has an output called 'someOutput'
     // emit on the output that MockDirective setup when generating the mock of Dependency Directive
-    mockedDirectiveInstance.someOutput.emit(new Foo()); // if you casted mockedDirective as the original component type then this is type safe
-    fixture.detectChanges();
+    const mockedDirectiveInstance = MockHelper.getDirective(
+      fixture.debugElement.query(By.css('span')),
+      DependencyDirective,
+    );
+    expect(mockedDirectiveInstance).toBeTruthy();
+    if (mockedDirectiveInstance) {
+      mockedDirectiveInstance.someOutput.emit({
+        payload: 'foo',
+      }); // if you casted mockedDirective as the original component type then this is type safe
+    }
     // assert on some side effect
@@ -171,29 +204,28 @@ });
 ```typescript
-import { async, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { MockComponent } from 'ng-mocks';
+import { MockPipe } from 'ng-mocks';
 import { DependencyPipe } from './dependency.pipe';
 import { TestedComponent } from './tested.component';
 
-describe('TestedComponent', () => {
+describe('MockPipe', () => {
   let fixture: ComponentFixture<TestedComponent>;
 
-  beforeEach(async() => {
+  beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [
         TestedComponent,
-        MockPipe(DependencyPipe, (...args) => JSON.stringify(args)), // alternatively you can use MockPipes to mock multiple but you lose the ability to override
+
+        // alternatively you can use MockPipes to mock multiple but you lose the ability to override
+        MockPipe(DependencyPipe, (...args) => JSON.stringify(args)),
       ]
-    })
-    .compileComponents();
-    .then(() => {
-      fixture = TestBed.createComponent(TestedComponent);
-      component = fixture.componentInstance;
-      fixture.detectChanges();
     });
-  }));
 
+    fixture = TestBed.createComponent(TestedComponent);
+    fixture.detectChanges();
+  });
+
   describe('with transform override', () => {
     it('should return the result of the provided transform function', () => {
-      expect(fixture.debugElement.query(By.css('#elementUsingPipe')).nativeElement.innerHTML).toEqual('foo');
+      expect(fixture.debugElement.query(By.css('span')).nativeElement.innerHTML).toEqual('["foo"]');
     });
@@ -212,33 +244,36 @@ });
 ```typescript
-import { async, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { MockComponent, MockedComponent } from 'ng-mocks';
-import { ReactiveFormComponent } from './dependency.component';
+import { DependencyComponent } from './dependency.component';
 import { TestedComponent } from './tested.component';
 
-describe('TestedComponent', () => {
+describe('MockReactiveForms', () => {
   let fixture: ComponentFixture<TestedComponent>;
+  let component: TestedComponent;
 
-  beforeEach(async() => {
+  beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [
         TestedComponent,
-        MockComponent(DependencyComponent)
-      ]
-    })
-    .compileComponents();
-    .then(() => {
-      fixture = TestBed.createComponent(TestedComponent);
-      component = fixture.componentInstance;
-      fixture.detectChanges();
+        MockComponent(DependencyComponent),
+      ],
+      imports: [
+        ReactiveFormsModule,
+      ],
     });
-  }));
 
+    fixture = TestBed.createComponent(TestedComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
   it('should send the correct value to the dependency component input', () => {
     const mockedReactiveFormComponent = fixture.debugElement
-                                               .query(By.css('dependency-component-selector'))
-                                               .componentInstance as MockedComponent<ReactiveFormComponent>; // casting to retain type safety
-                                   
-    mockedReactiveFormComponent.__simulateChange('foo');                               
-    expect(component.formControl.value).toBe('foo')
+      .query(By.css('dependency-component-selector'))
+      .componentInstance as MockedComponent<DependencyComponent>; // casting to retain type safety
+
+    mockedReactiveFormComponent.__simulateChange('foo');
+    expect(component.formControl.value).toBe('foo');
   });
@@ -260,20 +295,29 @@ });
 ```typescript
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MockModule } from 'ng-mocks';
+import { DependencyModule } from './dependency.module';
+import { TestedComponent } from './tested.component';
+
 describe('MockModule', () => {
-  let fixture: ComponentFixture<ComponentSubject>;
+  let fixture: ComponentFixture<TestedComponent>;
+  let component: TestedComponent;
 
-  beforeEach(async(() => {
+  beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [
-        ComponentSubject
+        TestedComponent,
       ],
       imports: [
-        MockModule(DependencyModule)
+        MockModule(DependencyModule),
       ],
-    })
-    .compileComponents()
-    .then(() => {
-      fixture = TestBed.createComponent(ComponentSubject);
-      fixture.detectChanges();
     });
-  }));
+
+    fixture = TestBed.createComponent(TestedComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('renders nothing without any error', () => {
+    expect(component).toBeTruthy();
+  });
 });
@@ -287,2 +331,8 @@ ```
 ```typescript
+import { TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { MockModule, MockRender } from 'ng-mocks';
+import { DependencyModule } from './dependency.module';
+import { TestedComponent } from './tested.component';
+
 describe('MockRender', () => {
@@ -292,9 +342,8 @@
     TestBed.configureTestingModule({
+      declarations: [
+        TestedComponent,
+      ],
       imports: [
-        MockModule(AppModule),
+        MockModule(DependencyModule),
       ],
-      declarations: [
-        Real1Component,
-        Real2Component,
-      ]
     });
@@ -304,17 +353,15 @@ });
   it('renders ', () => {
+    const spy = jasmine.createSpy();
     const fixture = MockRender(
       `
-        <real-1 (click)="myListener1($event)" [some]="myParam1" other="check">
-          something as ng-content
-        </real-1>
-        <real-2 (click)="myParam2 = $event" [some]="myParam2">
+        <tested (trigger)="myListener1($event)" [value1]="myParam1" value2="check">
           <ng-template #header>
             something as ng-template
           </ng-template>
-        </real-2>
+          something as ng-content
+        </tested>
       `,
       {
+        myListener1: spy,
         myParam1: 'something1',
-        myParam2: 'something2',
-        myListener1: createSpy('myListener1'),
       }
@@ -324,5 +371,8 @@ );
     // assert on some side effect
-    // fixture.componentInstance.myParam1;
-    // fixture.componentInstance.myParam2;
-    // fixture.componentInstance.myListener1;
+    const componentInstance = fixture.debugElement.query(By.directive(TestedComponent))
+      .componentInstance as TestedComponent;
+    componentInstance.trigger.emit('foo');
+    expect(componentInstance.value1).toEqual('something1');
+    expect(componentInstance.value2).toEqual('check');
+    expect(spy).toHaveBeenCalledWith('foo');
   });
@@ -329,0 +379,0 @@ });

No alert changes

Improved metrics

Total package byte prevSize

237906

increased by9.68%

Dependency count

3

decreased by-40%

Number of package files

103

increased by9.57%

Lines of code

2026

increased by13.76%

Number of lines in readme file

377

increased by15.29%

No dependency changes