ng-mocks 13.5.2 → 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
 

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/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.

package/examples/TestStandaloneComponent/test.spec.ts

@@ -0,0 +1,87 @@
+import {
+  Component,
+  Input,
+  NgModule,
+  Pipe,
+  PipeTransform,
+  VERSION,
+} from '@angular/core';
+
+import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';
+
+// A simple standalone pipe we are going to mock.
+@Pipe({
+  name: 'standalone',
+  standalone: true,
+} as never)
+class StandalonePipe implements PipeTransform {
+  transform(value: string | null): string {
+    return `${value}:${this.constructor.name}`;
+  }
+}
+
+// A simple dependency component we are going to mock.
+@Component({
+  selector: 'dependency',
+  template: '<ng-content></ng-content>',
+})
+class DependencyComponent {
+  @Input() public readonly name: string | null = null;
+}
+
+// A module which declares and exports the dependency component.
+@NgModule({
+  declarations: [DependencyComponent],
+  exports: [DependencyComponent],
+})
+class DependencyModule {}
+
+// A standalone component we are going to test.
+@Component({
+  selector: 'standalone',
+  template: `<dependency [name]="name">{{
+    name | standalone
+  }}</dependency>`,
+  standalone: true,
+  imports: [DependencyModule, StandalonePipe],
+} as never)
+class StandaloneComponent {
+  @Input() public readonly name: string | null = null;
+}
+
+describe('TestStandaloneComponent', () => {
+  if (Number.parseInt(VERSION.major, 10) < 14) {
+    it('needs a14', () => {
+      // pending('Need Angular > 5');
+      expect(true).toBeTruthy();
+    });
+
+    return;
+  }
+
+  beforeEach(() => {
+    return MockBuilder(StandaloneComponent);
+  });
+
+  it('renders dependencies', () => {
+    const fixture = MockRender(StandaloneComponent, {
+      name: 'test',
+    });
+
+    // asserting that we passed the input
+    const dependencyComponent = ngMocks.findInstance(
+      DependencyComponent,
+    );
+    expect(dependencyComponent.name).toEqual('test');
+
+    // asserting how we called the pipe
+    const standalonePipe = ngMocks.findInstance(StandalonePipe);
+    // it's possible because of autoSpy.
+    expect(standalonePipe.transform).toHaveBeenCalledWith('test');
+
+    // or asserting the generated html
+    expect(ngMocks.formatHtml(fixture)).toEqual(
+      '<standalone ng-reflect-name="test"><dependency ng-reflect-name="test"></dependency></standalone>',
+    );
+  });
+});

package/examples/TestStandaloneDirective/test.spec.ts

@@ -0,0 +1,68 @@
+import {
+  Directive,
+  Injectable,
+  Input,
+  OnInit,
+  VERSION,
+} from '@angular/core';
+
+import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';
+
+// @TODO remove with A5 support
+const injectableRootServiceArgs = [
+  {
+    providedIn: 'root',
+  } as never,
+];
+
+// A root service we want to mock.
+@Injectable(...injectableRootServiceArgs)
+class RootService {
+  trigger(name: string | null) {
+    // does something very cool
+
+    return name;
+  }
+}
+
+// A standalone directive we are going to test.
+@Directive({
+  selector: 'standalone',
+  standalone: true,
+} as never)
+class StandaloneDirective implements OnInit {
+  @Input() public readonly name: string | null = null;
+
+  constructor(public readonly rootService: RootService) {}
+
+  ngOnInit(): void {
+    this.rootService.trigger(this.name);
+  }
+}
+
+describe('TestStandaloneDirective', () => {
+  if (Number.parseInt(VERSION.major, 10) < 14) {
+    it('needs a14', () => {
+      // pending('Need Angular > 5');
+      expect(true).toBeTruthy();
+    });
+
+    return;
+  }
+
+  beforeEach(() => {
+    return MockBuilder(StandaloneDirective);
+  });
+
+  it('renders dependencies', () => {
+    // Rendering the directive.
+    MockRender(StandaloneDirective, {
+      name: 'test',
+    });
+
+    // Asserting that StandaloneDirective calls RootService.trigger.
+    const rootService = ngMocks.findInstance(RootService);
+    // it's possible because of autoSpy.
+    expect(rootService.trigger).toHaveBeenCalledWith('test');
+  });
+});