ng-mocks 13.5.0 → 14.0.0

package/README.md

@@ -1,8 +1,8 @@
-[![chat on gitter](https://img.shields.io/gitter/room/ike18t/ng-mocks)](https://gitter.im/ng-mocks/community)
-[![npm version](https://img.shields.io/npm/v/ng-mocks)](https://www.npmjs.com/package/ng-mocks)
-[![build status](https://img.shields.io/circleci/build/github/ike18t/ng-mocks/master)](https://app.circleci.com/pipelines/github/ike18t/ng-mocks?branch=master)
-[![coverage status](https://img.shields.io/coveralls/github/ike18t/ng-mocks/master)](https://coveralls.io/github/ike18t/ng-mocks?branch=master)
-[![language grade](https://img.shields.io/lgtm/grade/javascript/g/ike18t/ng-mocks)](https://lgtm.com/projects/g/ike18t/ng-mocks/context:javascript)
+[<img src="https://img.shields.io/gitter/room/ike18t/ng-mocks" alt="chat on gitter" width="90" height="20" />](https://gitter.im/ng-mocks/community)
+[<img src="https://img.shields.io/npm/v/ng-mocks" alt="npm version" width="88" height="20" />](https://www.npmjs.com/package/ng-mocks)
+[<img src="https://img.shields.io/circleci/build/github/ike18t/ng-mocks/master" alt="build status" width="88" height="20" />](https://app.circleci.com/pipelines/github/ike18t/ng-mocks?branch=master)
+[<img src="https://img.shields.io/coveralls/github/ike18t/ng-mocks/master" alt="coverage status" width="104" height="20" />](https://coveralls.io/github/ike18t/ng-mocks?branch=master)
+[<img src="https://img.shields.io/lgtm/grade/javascript/g/ike18t/ng-mocks" alt="language grade" width="138" height="20" />](https://lgtm.com/projects/g/ike18t/ng-mocks/context:javascript)
 
 # Mock components, services and more out of annoying dependencies for simplification of Angular testing
 
@@ -71,14 +71,6 @@ An example of a spec for a profile edit component.
 // In the following test suite, we would like to
 // cover behavior of the component.
 describe('profile:classic', () => {
-  // First of all, we would like to reuse the same
-  // TestBed in every test.
-  // ngMocks.faster suppresses reset of TestBed
-  // after each test and allows to use TestBed,
-  // MockBuilder and MockRender in beforeAll.
-  // https://ng-mocks.sudo.eu/api/ngMocks/faster
-  ngMocks.faster();
-
   // Helps to reset customizations after each test.
   MockInstance.scope();
 

package/examples/MockComponent/test.spec.ts

@@ -1,8 +1,10 @@
+import { CommonModule } from '@angular/common';
 import {
   Component,
   ContentChild,
   EventEmitter,
   Input,
+  NgModule,
   Output,
   TemplateRef,
 } from '@angular/core';
@@ -33,18 +35,24 @@ class DependencyComponent {
     ></app-child>
   `,
 })
-class TestedComponent {
+class MyComponent {
   public value = '';
   public trigger = (obj: any) => obj;
 }
 
+@NgModule({
+  imports: [CommonModule],
+  declarations: [MyComponent, DependencyComponent],
+})
+class ItsModule {}
+
 describe('MockComponent', () => {
   beforeEach(() => {
-    return MockBuilder(TestedComponent).mock(DependencyComponent);
+    return MockBuilder(MyComponent, ItsModule);
   });
 
   it('sends the correct value to the child input', () => {
-    const fixture = MockRender(TestedComponent);
+    const fixture = MockRender(MyComponent);
     const component = fixture.point.componentInstance;
 
     // The same as
@@ -58,7 +66,7 @@ describe('MockComponent', () => {
       ).componentInstance;
 
     // Let's pretend that DependencyComponent has 'someInput' as
-    // an input. TestedComponent sets its value via
+    // an input. MyComponent sets its value via
     // `[someInput]="value"`. The input's value will be passed into
     // the mock component so we can assert on it.
     component.value = 'foo';
@@ -69,7 +77,7 @@ describe('MockComponent', () => {
   });
 
   it('does something on an emit of the child component', () => {
-    const fixture = MockRender(TestedComponent);
+    const fixture = MockRender(MyComponent);
     const component = fixture.point.componentInstance;
 
     // The same as
@@ -80,7 +88,7 @@ describe('MockComponent', () => {
     const mockComponent = ngMocks.findInstance(DependencyComponent);
 
     // Again, let's pretend DependencyComponent has an output
-    // called 'someOutput'. TestedComponent listens on the output via
+    // called 'someOutput'. MyComponent listens on the output via
     // `(someOutput)="trigger($event)"`.
     // Let's install a spy and trigger the output.
     ngMocks.stubMember(

package/examples/MockDirective-Attribute/test.spec.ts

@@ -3,6 +3,7 @@ import {
   Directive,
   EventEmitter,
   Input,
+  NgModule,
   Output,
 } from '@angular/core';
 
@@ -29,18 +30,24 @@ class DependencyDirective {
     ></span>
   `,
 })
-class TestedComponent {
+class MyComponent {
   public value = '';
   public trigger = () => undefined;
 }
 
+@NgModule({
+  declarations: [MyComponent, DependencyDirective],
+})
+class ItsModule {}
+
 describe('MockDirective:Attribute', () => {
   beforeEach(() => {
-    return MockBuilder(TestedComponent).mock(DependencyDirective);
+    // DependencyDirective is a declaration in ItsModule.
+    return MockBuilder(MyComponent, ItsModule);
   });
 
   it('sends the correct value to the input', () => {
-    const fixture = MockRender(TestedComponent);
+    const fixture = MockRender(MyComponent);
     const component = fixture.point.componentInstance;
 
     // The same as
@@ -54,7 +61,7 @@ describe('MockDirective:Attribute', () => {
     );
 
     // Let's pretend DependencyDirective has 'someInput'
-    // as an input. TestedComponent sets its value via
+    // as an input. MyComponent sets its value via
     // `[someInput]="value"`. The input's value will be passed into
     // the mock directive so we can assert on it.
     component.value = 'foo';
@@ -65,7 +72,7 @@ describe('MockDirective:Attribute', () => {
   });
 
   it('does something on an emit of the child directive', () => {
-    const fixture = MockRender(TestedComponent);
+    const fixture = MockRender(MyComponent);
     const component = fixture.point.componentInstance;
 
     // The same as
@@ -79,7 +86,7 @@ describe('MockDirective:Attribute', () => {
     );
 
     // Again, let's pretend DependencyDirective has an output called
-    // 'someOutput'. TestedComponent listens on the output via
+    // 'someOutput'. MyComponent listens on the output via
     // `(someOutput)="trigger()"`.
     // Let's install a spy and trigger the output.
     ngMocks.stubMember(

package/examples/MockDirective-Structural/test.spec.ts

@@ -33,7 +33,7 @@ class TargetComponent {
 @NgModule({
   declarations: [TargetComponent, DependencyDirective],
 })
-class TargetModule {}
+class ItsModule {}
 
 describe('MockDirective:Structural', () => {
   // IMPORTANT: by default structural directives are not rendered.
@@ -41,7 +41,8 @@ describe('MockDirective:Structural', () => {
   // Usually a developer knows the context and can render it
   // manually with proper setup.
   beforeEach(() => {
-    return MockBuilder(TargetComponent, TargetModule).mock(
+    // DependencyDirective is a declaration in ItsModule.
+    return MockBuilder(TargetComponent, ItsModule).mock(
       DependencyDirective,
       {
         // render: true, // <-- a flag to render the directive by default

package/examples/MockForms/test.spec.ts

@@ -1,4 +1,4 @@
-import { Component, forwardRef } from '@angular/core';
+import { Component, forwardRef, NgModule } from '@angular/core';
 import {
   ControlValueAccessor,
   FormsModule,
@@ -33,18 +33,27 @@ class DependencyComponent implements ControlValueAccessor {
   selector: 'tested',
   template: ` <app-child [(ngModel)]="value"></app-child> `,
 })
-class TestedComponent {
+class MyComponent {
   public value: any;
 }
 
+@NgModule({
+  imports: [FormsModule],
+  declarations: [MyComponent, DependencyComponent],
+})
+class ItsModule {}
+
 describe('MockForms', () => {
   // Helps to reset customizations after each test.
   MockInstance.scope();
 
   beforeEach(() => {
-    return MockBuilder(TestedComponent)
-      .mock(DependencyComponent)
-      .keep(FormsModule);
+    // DependencyComponent is a declaration in ItsModule.
+    return (
+      MockBuilder(MyComponent, ItsModule)
+        // FormsModule is an import in ItsModule.
+        .keep(FormsModule)
+    );
   });
 
   it('sends the correct value to the mock form component', async () => {
@@ -61,7 +70,7 @@ describe('MockForms', () => {
     // the spy via MockInstance before the render.
     MockInstance(DependencyComponent, 'writeValue', writeValue);
 
-    const fixture = MockRender(TestedComponent);
+    const fixture = MockRender(MyComponent);
     // FormsModule needs fixture.whenStable()
     // right after MockRender to install all hooks.
     await fixture.whenStable();

package/examples/MockInstance/test.spec.ts

@@ -1,7 +1,9 @@
+import { CommonModule } from '@angular/common';
 import {
   AfterViewInit,
   Component,
   Injector,
+  NgModule,
   ViewChild,
 } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
@@ -39,11 +41,17 @@ class RealComponent implements AfterViewInit {
   }
 }
 
+@NgModule({
+  imports: [CommonModule],
+  declarations: [RealComponent, ChildComponent],
+})
+class ItsModule {}
+
 describe('MockInstance', () => {
   // A normal setup of the TestBed, TargetComponent will be replaced
   // with its mock object.
   // Do not forget to return the promise of MockBuilder.
-  beforeEach(() => MockBuilder(RealComponent).mock(ChildComponent));
+  beforeEach(() => MockBuilder(RealComponent, ItsModule));
 
   beforeEach(() => {
     // Because TargetComponent is replaced with its mock object,

package/examples/MockModule/test.spec.ts

@@ -42,18 +42,25 @@ class DependencyModule {}
     ></app-child>
   `,
 })
-class TestedComponent {
+class MyComponent {
   public value = '';
   public trigger = () => undefined;
 }
 
+@NgModule({
+  imports: [DependencyModule],
+  declarations: [MyComponent],
+})
+class ItsModule {}
+
 describe('MockModule', () => {
   beforeEach(() => {
-    return MockBuilder(TestedComponent).mock(DependencyModule);
+    // DependencyModule is an import of ItsModule.
+    return MockBuilder(MyComponent, ItsModule);
   });
 
-  it('renders TestedComponent with its dependencies', () => {
-    const fixture = MockRender(TestedComponent);
+  it('renders MyComponent with its dependencies', () => {
+    const fixture = MockRender(MyComponent);
     const component = fixture.point.componentInstance;
 
     expect(component).toBeTruthy();

package/examples/MockPipe/test.spec.ts

@@ -23,7 +23,7 @@ class TargetComponent {}
 @NgModule({
   declarations: [TargetComponent, DependencyPipe],
 })
-class TargetModule {}
+class ItsModule {}
 
 // A fake transform function.
 const fakeTransform = (...args: string[]) => JSON.stringify(args);
@@ -39,9 +39,10 @@ describe('MockPipe', () => {
   // const spy = jest.fn().mockImplementation(fakeTransform);
 
   beforeEach(() => {
-    return MockBuilder(TargetComponent, TargetModule).mock(
-      DependencyPipe,
-      spy,
+    return (
+      MockBuilder(TargetComponent, ItsModule)
+        // DependencyPipe is a declaration in ItsModule
+        .mock(DependencyPipe, spy)
     );
   });
 

package/examples/MockReactiveForms/test.spec.ts

@@ -1,4 +1,4 @@
-import { Component, forwardRef } from '@angular/core';
+import { Component, forwardRef, NgModule } from '@angular/core';
 import {
   ControlValueAccessor,
   FormControl,
@@ -34,18 +34,24 @@ class DependencyComponent implements ControlValueAccessor {
   selector: 'tested',
   template: ' <app-child [formControl]="formControl"></app-child> ',
 })
-class TestedComponent {
+class MyComponent {
   public readonly formControl = new FormControl();
 }
 
+@NgModule({
+  imports: [ReactiveFormsModule],
+  declarations: [MyComponent, DependencyComponent],
+})
+class ItsModule {}
+
 describe('MockReactiveForms', () => {
   // Helps to reset MockInstance customizations after each test.
   MockInstance.scope();
 
   beforeEach(() => {
-    return MockBuilder(TestedComponent)
-      .mock(DependencyComponent)
-      .keep(ReactiveFormsModule);
+    return MockBuilder(MyComponent, ItsModule).keep(
+      ReactiveFormsModule,
+    );
   });
 
   it('sends the correct value to the mock form component', () => {
@@ -62,7 +68,7 @@ describe('MockReactiveForms', () => {
     // the spy via MockInstance before the render.
     MockInstance(DependencyComponent, 'writeValue', writeValue);
 
-    const fixture = MockRender(TestedComponent);
+    const fixture = MockRender(MyComponent);
     const component = fixture.point.componentInstance;
 
     // During initialization it should be called

package/examples/MockRender/test.spec.ts

@@ -37,7 +37,7 @@ class DependencyModule {}
     ></app-child>
   `,
 })
-class TestedComponent {
+class MyComponent {
   @Output() public readonly trigger = new EventEmitter();
   @Input() public value1 = 'default1';
   @Input() public value2 = 'default2';
@@ -45,7 +45,7 @@ class TestedComponent {
 
 describe('MockRender', () => {
   // Do not forget to return the promise of MockBuilder.
-  beforeEach(() => MockBuilder(TestedComponent, DependencyModule));
+  beforeEach(() => MockBuilder(MyComponent, DependencyModule));
 
   it('renders template', () => {
     const spy =
@@ -93,7 +93,7 @@ describe('MockRender', () => {
     // Generates a template like:
     // <tested [value1]="value1" [value2]="value2"
     // (trigger)="trigger"></tested>.
-    const fixture = MockRender(TestedComponent, {
+    const fixture = MockRender(MyComponent, {
       trigger: spy,
       value1: 'something2',
     });

package/examples/TestHttpInterceptor/test.spec.ts

@@ -18,6 +18,7 @@ import {
   MockBuilder,
   MockRender,
   NG_MOCKS_INTERCEPTORS,
+  ngMocks,
 } from 'ng-mocks';
 
 // An interceptor we want to test.
@@ -92,13 +93,13 @@ describe('TestHttpInterceptor', () => {
   });
 
   it('triggers interceptor', () => {
-    const fixture = MockRender('');
-    const client: HttpClient =
-      fixture.debugElement.injector.get(HttpClient);
-    const httpMock: HttpTestingController =
-      fixture.debugElement.injector.get(HttpTestingController);
+    MockRender();
 
-    // Let's do a simply request.
+    // Let's extract the service and http controller for testing.
+    const client = ngMocks.findInstance(HttpClient);
+    const httpMock = ngMocks.findInstance(HttpTestingController);
+
+    // Let's do a simple request.
     client.get('/target').subscribe();
 
     // Now we can assert that a header has been added to the request.

package/examples/TestHttpRequest/test.spec.ts

@@ -6,7 +6,7 @@ import {
 import { Injectable, NgModule } from '@angular/core';
 import { Observable } from 'rxjs';
 
-import { MockBuilder, MockRender } from 'ng-mocks';
+import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';
 
 // A service that does http requests.
 @Injectable()
@@ -39,12 +39,11 @@ describe('TestHttpRequest', () => {
   });
 
   it('sends a request', () => {
-    const fixture = MockRender('');
+    MockRender();
+
     // Let's extract the service and http controller for testing.
-    const service: TargetService =
-      fixture.debugElement.injector.get(TargetService);
-    const httpMock: HttpTestingController =
-      fixture.debugElement.injector.get(HttpTestingController);
+    const service = ngMocks.findInstance(TargetService);
+    const httpMock = ngMocks.findInstance(HttpTestingController);
 
     // A simple subscription to check what the service returns.
     let actual: any;

package/examples/TestLifecycleHooks/test.spec.ts

@@ -100,7 +100,7 @@ describe('TestLifecycleHooks', () => {
     const service: TargetService =
       fixture.debugElement.injector.get(TargetService);
 
-    // By default nothing should be initialized.
+    // By default, nothing should be initialized.
     expect(service.onChanges).toHaveBeenCalledTimes(0);
 
     // Now let's render the component.

package/examples/TestPipe/test.spec.ts

@@ -28,15 +28,15 @@ describe('TestPipe', () => {
   beforeEach(() => MockBuilder(TargetPipe));
 
   it('sorts strings', () => {
-    const fixture = MockRender('{{ values | target}}', {
-      values: ['1', '3', '2'],
+    const fixture = MockRender(TargetPipe, {
+      $implicit: ['1', '3', '2'],
     });
 
     expect(fixture.nativeElement.innerHTML).toEqual('1, 2, 3');
   });
 
   it('reverses strings on param', () => {
-    const fixture = MockRender('{{ values | target:flag}}', {
+    const fixture = MockRender('{{ values | target:flag }}', {
       flag: false,
       values: ['1', '3', '2'],
     });

package/examples/TestProviderInComponent/test.spec.ts

@@ -1,6 +1,6 @@
 import { Component, Injectable } from '@angular/core';
 
-import { MockBuilder, MockRender } from 'ng-mocks';
+import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';
 
 // A simple service, might have contained more logic,
 // but it is redundant for the test demonstration.
@@ -31,9 +31,9 @@ describe('TestProviderInComponent', () => {
     // to access the service.
     const fixture = MockRender(TargetComponent);
 
-    // The root element is fixture.point and it is the TargetComponent
-    // with its injector for extracting internal services.
-    const service = fixture.point.injector.get(TargetService);
+    // The component's element is fixture.point.
+    // Now we can use ngMocks.get to extract internal services.
+    const service = ngMocks.get(fixture.point, TargetService);
 
     // Here we go, now we can assert everything about the service.
     expect(service.value).toEqual('target');

package/examples/TestProviderInDirective/test.spec.ts

@@ -49,26 +49,30 @@ describe('TestProviderInDirective', () => {
   beforeEach(() => MockBuilder(TargetService, TargetDirective));
 
   it('has access to the service via a directive', () => {
-    // Let's render a div with the directive. It provides a point
-    // to access the service.
-    const fixture = MockRender('<div target></div>');
+    // Let's render a div with the directive.
+    MockRender('<div target></div>');
 
-    // The root element is fixture.point and it has access to the
-    // context of the directive. Its injector can extract the service.
-    const service = fixture.point.injector.get(TargetService);
+    // Let's find the debugElement with the directive.
+    // Please note, that we use ngMocks.find here.
+    const el = ngMocks.find(TargetDirective);
+
+    // Let's extract the service.
+    const service = ngMocks.get(el, TargetService);
 
     // Here we go, now we can assert everything about the service.
     expect(service.value).toEqual(true);
   });
 
   it('has access to the service via a structural directive', () => {
-    // Let's render a div with the directive. It provides a point to
-    // access the service.
-    const fixture = MockRender('<div *target></div>');
+    // Let's render a div with the directive.
+    MockRender('<div *target></div>');
+
+    // Let's find the debugNode with the directive.
+    // Please note, that we use ngMocks.reveal here.
+    const node = ngMocks.reveal(TargetDirective);
 
-    // The root element is fixture.point and it has access to the
-    // context of the directive. Its injector can extract the service.
-    const service = fixture.point.injector.get(TargetService);
+    // Let's extract the service.
+    const service = ngMocks.get(node, TargetService);
 
     // Here we go, now we can assert everything about the service.
     expect(service.value).toEqual(true);

package/examples/TestRoute/test.spec.ts

@@ -60,8 +60,9 @@ class TargetModule {}
 
 describe('TestRoute:Route', () => {
   beforeEach(() => {
-    return MockBuilder(RouterModule, TargetModule).keep(
-      RouterTestingModule.withRoutes([]),
+    return MockBuilder(
+      [RouterModule, RouterTestingModule.withRoutes([])],
+      TargetModule,
     );
   });
 
@@ -111,9 +112,14 @@ describe('TestRoute:Component', () => {
   // RouterTestingModule.withRoutes([]), yes yes, with empty routes
   // to have tools for testing.
   beforeEach(() => {
-    return MockBuilder(TargetComponent, TargetModule)
-      .keep(RouterModule)
-      .keep(RouterTestingModule.withRoutes([]));
+    return MockBuilder(
+      [
+        TargetComponent,
+        RouterModule,
+        RouterTestingModule.withRoutes([]),
+      ],
+      TargetModule,
+    );
   });
 
   it('navigates between pages', fakeAsync(() => {
@@ -127,8 +133,8 @@ describe('TestRoute:Component', () => {
       tick(); // is needed for rendering of the current route.
     }
 
-    // By default our routes do not have a component.
-    // Therefore non of them should be rendered.
+    // By default, our routes do not have a component.
+    // Therefore, none of them should be rendered.
     expect(location.path()).toEqual('/');
     expect(() => ngMocks.find(Target1Component)).toThrow();
     expect(() => ngMocks.find(Target2Component)).toThrow();

package/examples/TestRoutingGuard/test.spec.ts

@@ -115,10 +115,10 @@ describe('TestRoutingGuard', () => {
   // to have tools for testing. And the last thing is to exclude
   // `NG_MOCKS_GUARDS` to remove all other guards.
   beforeEach(() => {
-    return MockBuilder(LoginGuard, TargetModule)
-      .exclude(NG_MOCKS_GUARDS)
-      .keep(RouterModule)
-      .keep(RouterTestingModule.withRoutes([]));
+    return MockBuilder(
+      [LoginGuard, RouterModule, RouterTestingModule.withRoutes([])],
+      TargetModule,
+    ).exclude(NG_MOCKS_GUARDS);
   });
 
   // It is important to run routing tests in fakeAsync.

package/examples/TestRoutingResolver/test.spec.ts

@@ -88,9 +88,14 @@ describe('TestRoutingResolver', () => {
   // add RouterTestingModule.withRoutes([]), yes yes, with empty
   // routes to have tools for testing.
   beforeEach(() => {
-    return MockBuilder(DataResolver, TargetModule)
-      .keep(RouterModule)
-      .keep(RouterTestingModule.withRoutes([]));
+    return MockBuilder(
+      [
+        DataResolver,
+        RouterModule,
+        RouterTestingModule.withRoutes([]),
+      ],
+      TargetModule,
+    );
   });
 
   // It is important to run routing tests in fakeAsync.