ng-mocks 13.2.0 → 13.4.1

package/examples/MockBuilder/spec.components.fixtures.ts

@@ -22,7 +22,7 @@ import { TOKEN_CUSTOMIZE, TOKEN_KEEP, TOKEN_MOCK } from './spec.tokens.fixtures'
     </div>
   `,
 })
-export class ComponentContentChild<T> {
+export class ContentChildComponent<T> {
   @ContentChild('block', {} as any) public readonly injectedBlock: TemplateRef<any> | undefined;
   @Input() public items: T[] | undefined;
 }
@@ -98,19 +98,19 @@ export class MyComponent {
   selector: 'c-1',
   template: 'MyComponent1',
 })
-export class MyComponent1 {}
+export class My1Component {}
 
 @Component({
   selector: 'c-2',
   template: 'MyComponent2',
 })
-export class MyComponent2 {}
+export class My2Component {}
 
 @Component({
   selector: 'c-3',
   template: 'MyComponent3',
 })
-export class MyComponent3 {}
+export class My3Component {}
 
 @Component({
   selector: 'c-keep',

package/examples/MockBuilder/spec.modules.fixtures.ts

@@ -3,13 +3,13 @@ import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 
 import {
-  ComponentContentChild,
+  ContentChildComponent,
   KeepComponent,
   MockComponent,
+  My1Component,
+  My2Component,
+  My3Component,
   MyComponent,
-  MyComponent1,
-  MyComponent2,
-  MyComponent3,
 } from './spec.components.fixtures';
 import { KeepDirective, MockDirective, MyDirective } from './spec.directives.fixtures';
 import { CustomizePipe, KeepPipe, MockPipe, MyPipe, RestorePipe } from './spec.pipes.fixtures';
@@ -48,8 +48,8 @@ import { TOKEN_CUSTOMIZE, TOKEN_KEEP, TOKEN_MOCK } from './spec.tokens.fixtures'
 export class ModuleMock {}
 
 @NgModule({
-  declarations: [MyComponent1, MyComponent2, MyComponent3, ComponentContentChild],
-  exports: [MyComponent1, MyComponent2, MyComponent3, ComponentContentChild],
+  declarations: [My1Component, My2Component, My3Component, ContentChildComponent],
+  exports: [My1Component, My2Component, My3Component, ContentChildComponent],
   imports: [CommonModule],
 })
 export class ModuleKeep {}

package/examples/MockBuilder/test.deep.spec.ts

@@ -1,16 +1,17 @@
 import { HttpBackend, HttpClientModule } from '@angular/common/http';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { inject, TestBed } from '@angular/core/testing';
+
 import { MockBuilder, MockRender } from 'ng-mocks';
 
 import {
-  ComponentContentChild,
+  ContentChildComponent,
   KeepComponent,
   MockComponent,
+  My1Component,
+  My2Component,
+  My3Component,
   MyComponent,
-  MyComponent1,
-  MyComponent2,
-  MyComponent3,
 } from './spec.components.fixtures';
 import {
   KeepDirective,
@@ -51,7 +52,7 @@ import {
 describe('MockBuilder:deep', () => {
   beforeEach(async () => {
     const ngModule = MockBuilder(MyComponent, MyModule)
-      .mock(ComponentContentChild, {
+      .mock(ContentChildComponent, {
         render: {
           block: {
             $implicit: '-$implicit-',
@@ -130,7 +131,7 @@ describe('MockBuilder:deep', () => {
 
       // Even it belongs to the module that is marked as kept,
       // the component will be replaced with its mock copy.
-      .mock(MyComponent3)
+      .mock(My3Component)
 
       // and now we want to build our NgModule.
       .build();
@@ -138,10 +139,10 @@ describe('MockBuilder:deep', () => {
 
     // Extra configuration
     TestBed.overrideTemplate(
-      MyComponent1,
+      My1Component,
       'If we need to tune testBed',
     );
-    TestBed.overrideTemplate(MyComponent2, 'More callbacks');
+    TestBed.overrideTemplate(My2Component, 'More callbacks');
 
     return TestBed.compileComponents();
   });

package/examples/MockBuilder/test.ng-mocks.spec.ts

@@ -1,15 +1,16 @@
 import { HttpClientModule } from '@angular/common/http';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { inject, TestBed } from '@angular/core/testing';
+
 import { isMockedNgDefOf, MockBuilder, NG_MOCKS } from 'ng-mocks';
 
 import {
   KeepComponent,
   MockComponent,
+  My1Component,
+  My2Component,
+  My3Component,
   MyComponent,
-  MyComponent1,
-  MyComponent2,
-  MyComponent3,
 } from './spec.components.fixtures';
 import {
   KeepDirective,
@@ -65,7 +66,7 @@ describe('MockBuilder:ngMocks', () => {
 
       // Even it belongs to the module we want to keep,
       // it will be still replaced with a mock copy.
-      .mock(MyComponent3)
+      .mock(My3Component)
 
       // and now we want to build our NgModule.
       .build();
@@ -73,10 +74,10 @@ describe('MockBuilder:ngMocks', () => {
 
     // Extra configuration
     TestBed.overrideTemplate(
-      MyComponent1,
+      My1Component,
       'If we need to tune testBed',
     );
-    TestBed.overrideTemplate(MyComponent2, 'More callbacks');
+    TestBed.overrideTemplate(My2Component, 'More callbacks');
 
     return TestBed.compileComponents();
   });
@@ -150,9 +151,9 @@ describe('MockBuilder:ngMocks', () => {
       expect(restorePipe).toBe(restorePipe);
 
       // mock nested
-      const myComponent3 = mocks.get(MyComponent3);
+      const myComponent3 = mocks.get(My3Component);
       expect(
-        isMockedNgDefOf(myComponent3, MyComponent3, 'c'),
+        isMockedNgDefOf(myComponent3, My3Component, 'c'),
       ).toBeTruthy();
     },
   ));

package/examples/MockBuilder/test.promise.spec.ts

@@ -1,26 +1,26 @@
 import { MockBuilder, MockRender } from 'ng-mocks';
 
 import {
-  MyComponent1,
-  MyComponent2,
+  My1Component,
+  My2Component,
 } from './spec.components.fixtures';
 
 describe('MockBuilder:promise', () => {
   beforeEach(() => {
     return (
       MockBuilder()
-        .keep(MyComponent1)
-        .keep(MyComponent2)
+        .keep(My1Component)
+        .keep(My2Component)
 
         // In case if you need extra customization of TestBed in promise way.
         .beforeCompileComponents(testBed => {
           testBed.overrideTemplate(
-            MyComponent1,
+            My1Component,
             'If we need to tune testBed',
           );
         })
         .beforeCompileComponents(testBed => {
-          testBed.overrideTemplate(MyComponent2, 'More callbacks');
+          testBed.overrideTemplate(My2Component, 'More callbacks');
         })
     );
   });

package/examples/MockComponent/test.spec.ts

@@ -6,15 +6,16 @@ import {
   Output,
   TemplateRef,
 } from '@angular/core';
+
 import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';
 
 @Component({
   selector: 'app-child',
-  template: `child`,
+  template: 'child',
 })
 class DependencyComponent {
   @ContentChild('something', {} as any)
-  public injectedSomething: TemplateRef<{}> | undefined;
+  public injectedSomething: TemplateRef<void> | undefined;
 
   @Input()
   public someInput = '';

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

@@ -5,6 +5,7 @@ import {
   Input,
   Output,
 } from '@angular/core';
+
 import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';
 
 @Directive({
@@ -24,13 +25,13 @@ class DependencyDirective {
     <span
       dependency
       [dependency-input]="value"
-      (dependency-output)="trigger($event)"
+      (dependency-output)="trigger()"
     ></span>
   `,
 })
 class TestedComponent {
   public value = '';
-  public trigger = () => {};
+  public trigger = () => undefined;
 }
 
 describe('MockDirective:Attribute', () => {
@@ -79,7 +80,7 @@ describe('MockDirective:Attribute', () => {
 
     // Again, let's pretend DependencyDirective has an output called
     // 'someOutput'. TestedComponent listens on the output via
-    // `(someOutput)="trigger($event)"`.
+    // `(someOutput)="trigger()"`.
     // Let's install a spy and trigger the output.
     ngMocks.stubMember(
       component,

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

@@ -1,10 +1,12 @@
 import {
   Component,
   Directive,
-  EventEmitter,
   Input,
-  Output,
+  NgModule,
+  TemplateRef,
+  ViewContainerRef,
 } from '@angular/core';
+
 import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';
 
 @Directive({
@@ -14,38 +16,43 @@ class DependencyDirective {
   @Input('dependency')
   public someInput = '';
 
-  @Output('dependency-output')
-  public someOutput = new EventEmitter();
+  public constructor(
+    protected templateRef: TemplateRef<any>,
+    protected viewContainerRef: ViewContainerRef,
+  ) {}
 }
 
 @Component({
   selector: 'tested',
-  template: ` <span
-    *dependency="value"
-    (dependency-output)="trigger($event)"
-    >content</span
-  >`,
+  template: '<span *dependency="value">content</span>',
 })
-class TestedComponent {
+class TargetComponent {
   public value = '';
-  public trigger = () => {};
 }
 
+@NgModule({
+  declarations: [TargetComponent, DependencyDirective],
+})
+class TargetModule {}
+
 describe('MockDirective:Structural', () => {
   // IMPORTANT: by default structural directives are not rendered.
   // Because they might require a context which should be provided.
   // Usually a developer knows the context and can render it
   // manually with proper setup.
   beforeEach(() => {
-    return MockBuilder(TestedComponent).mock(DependencyDirective, {
-      // render: true, // <-- a flag to render the directive by default
-    });
+    return MockBuilder(TargetComponent, TargetModule).mock(
+      DependencyDirective,
+      {
+        // render: true, // <-- a flag to render the directive by default
+      },
+    );
   });
 
   it('renders content of the child structural directive', () => {
-    const fixture = MockRender(TestedComponent);
+    const fixture = MockRender(TargetComponent);
 
-    // Let's assert that nothing has been rendered inside of
+    // Let's assert that nothing has been rendered inside
     // the structural directive by default.
     expect(fixture.nativeElement.innerHTML).not.toContain(
       '>content<',

package/examples/MockForms/test.spec.ts

@@ -1,11 +1,10 @@
-// tslint:disable strict-type-predicates
-
 import { Component, forwardRef } from '@angular/core';
 import {
   ControlValueAccessor,
   FormsModule,
   NG_VALUE_ACCESSOR,
 } from '@angular/forms';
+
 import {
   MockBuilder,
   MockInstance,
@@ -22,7 +21,7 @@ import {
     },
   ],
   selector: 'app-child',
-  template: `dependency`,
+  template: 'dependency',
 })
 class DependencyComponent implements ControlValueAccessor {
   public registerOnChange = (fn: any): void => fn;

package/examples/MockInstance/test.spec.ts

@@ -4,9 +4,10 @@ import {
   Injector,
   ViewChild,
 } from '@angular/core';
-import { MockBuilder, MockInstance, MockRender } from 'ng-mocks';
 import { Observable, Subject } from 'rxjs';
 
+import { MockBuilder, MockInstance, MockRender } from 'ng-mocks';
+
 // A copy of EMPTY, which does not exist in A5.
 const EMPTY = new Subject<any>();
 EMPTY.complete();

package/examples/MockModule/test.spec.ts

@@ -8,15 +8,16 @@ import {
   Output,
   TemplateRef,
 } from '@angular/core';
+
 import { MockBuilder, MockRender } from 'ng-mocks';
 
 @Component({
   selector: 'app-child',
-  template: `dependency`,
+  template: 'dependency',
 })
 class DependencyComponent {
   @ContentChild('something', {} as any)
-  public injectedSomething?: TemplateRef<{}>;
+  public injectedSomething?: TemplateRef<any>;
 
   @Input()
   public someInput = '';
@@ -37,13 +38,13 @@ class DependencyModule {}
   template: `
     <app-child
       [someInput]="value"
-      (someOutput)="trigger($event)"
+      (someOutput)="trigger()"
     ></app-child>
   `,
 })
 class TestedComponent {
   public value = '';
-  public trigger = () => {};
+  public trigger = () => undefined;
 }
 
 describe('MockModule', () => {

package/examples/MockObservable/test.spec.ts

@@ -1,12 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { Component, Injectable, NgModule } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+
 import {
   MockBuilder,
   MockInstance,
   MockRender,
   ngMocks,
 } from 'ng-mocks';
-import { Observable, Subject } from 'rxjs';
 
 // A simple service, might have contained more logic,
 // but it is redundant for the test demonstration.
@@ -21,7 +22,7 @@ class TargetService {
 
 @Component({
   selector: 'target',
-  template: `{{ list | json }}`,
+  template: '{{ list | json }}',
 })
 class TargetComponent {
   public list: number[] = [];

package/examples/MockPipe/test.spec.ts

@@ -1,21 +1,34 @@
-import { Component, Pipe, PipeTransform } from '@angular/core';
+import {
+  Component,
+  NgModule,
+  Pipe,
+  PipeTransform,
+} from '@angular/core';
+
 import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';
 
 @Pipe({ name: 'dependency' })
 class DependencyPipe implements PipeTransform {
-  public transform = (name: string): string => `hi ${name}`;
+  public transform(name: string): string {
+    return `hi ${name}`;
+  }
 }
 
 @Component({
   selector: 'component',
-  template: `{{ 'foo' | dependency }}`,
+  template: '{{ "foo" | dependency }}',
 })
-class TestedComponent {}
+class TargetComponent {}
 
-describe('MockPipe', () => {
-  // A fake transform function.
-  const fakeTransform = (...args: string[]) => JSON.stringify(args);
+@NgModule({
+  declarations: [TargetComponent, DependencyPipe],
+})
+class TargetModule {}
 
+// A fake transform function.
+const fakeTransform = (...args: string[]) => JSON.stringify(args);
+
+describe('MockPipe', () => {
   // A spy, just in case if we want to verify
   // how the pipe has been called.
   const spy =
@@ -26,11 +39,14 @@ describe('MockPipe', () => {
   // const spy = jest.fn().mockImplementation(fakeTransform);
 
   beforeEach(() => {
-    return MockBuilder(TestedComponent).mock(DependencyPipe, spy);
+    return MockBuilder(TargetComponent, TargetModule).mock(
+      DependencyPipe,
+      spy,
+    );
   });
 
   it('transforms values to json', () => {
-    const fixture = MockRender(TestedComponent);
+    const fixture = MockRender(TargetComponent);
 
     expect(fixture.nativeElement.innerHTML).toEqual(
       '<component>["foo"]</component>',

package/examples/MockProvider/test.spec.ts

@@ -6,6 +6,7 @@ import {
   InjectionToken,
 } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
+
 import { MockProvider, MockRender } from 'ng-mocks';
 
 const UNK_TOKEN = new InjectionToken('UNK_TOKEN');

package/examples/MockReactiveForms/test.spec.ts

@@ -1,5 +1,3 @@
-// tslint:disable strict-type-predicates
-
 import { Component, forwardRef } from '@angular/core';
 import {
   ControlValueAccessor,
@@ -7,6 +5,7 @@ import {
   NG_VALUE_ACCESSOR,
   ReactiveFormsModule,
 } from '@angular/forms';
+
 import {
   MockBuilder,
   MockInstance,
@@ -23,7 +22,7 @@ import {
     },
   ],
   selector: 'app-child',
-  template: `dependency`,
+  template: 'dependency',
 })
 class DependencyComponent implements ControlValueAccessor {
   public registerOnChange = (fn: any): void => fn;
@@ -33,7 +32,7 @@ class DependencyComponent implements ControlValueAccessor {
 
 @Component({
   selector: 'tested',
-  template: ` <app-child [formControl]="formControl"></app-child> `,
+  template: ' <app-child [formControl]="formControl"></app-child> ',
 })
 class TestedComponent {
   public readonly formControl = new FormControl();

package/examples/MockRender/test.spec.ts

@@ -1,5 +1,3 @@
-// tslint:disable strict-type-predicates
-
 import { CommonModule } from '@angular/common';
 import {
   Component,
@@ -10,15 +8,16 @@ import {
   Output,
   TemplateRef,
 } from '@angular/core';
+
 import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';
 
 @Component({
   selector: 'app-child',
-  template: `dependency`,
+  template: 'dependency',
 })
 class DependencyComponent {
   @ContentChild('something', {} as any)
-  public injectedSomething?: TemplateRef<{}>;
+  public injectedSomething?: TemplateRef<any>;
   @Input() public someInput = '';
   @Output() public readonly someOutput = new EventEmitter();
 }
@@ -33,8 +32,8 @@ class DependencyModule {}
   selector: 'tested',
   template: `
     <app-child
-      [someInput]="value"
-      (someOutput)="trigger($event)"
+      [someInput]="value1"
+      (someOutput)="trigger.emit($event)"
     ></app-child>
   `,
 })

package/examples/MockSanitizer/test.spec.ts

@@ -1,5 +1,6 @@
 import { Component, SecurityContext } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
+
 import {
   MockBuilder,
   MockProvider,

package/examples/MockViewChild/test.spec.ts

@@ -1,5 +1,6 @@
 import { Component, NgModule, ViewChild } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
+
 import {
   MockBuilder,
   MockInstance,

package/examples/TestAttributeDirective/test.spec.ts

@@ -4,6 +4,7 @@ import {
   HostListener,
   Input,
 } from '@angular/core';
+
 import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';
 
 // The purpose of the directive is to add a background color
@@ -36,7 +37,7 @@ describe('TestAttributeDirective', () => {
   beforeEach(() => MockBuilder(TargetDirective));
 
   it('uses default background color', () => {
-    const fixture = MockRender(`<div target></div>`);
+    const fixture = MockRender('<div target></div>');
 
     // By default, without the mouse enter, there is no background
     // color on the div.
@@ -69,7 +70,7 @@ describe('TestAttributeDirective', () => {
     // parameter of MockRender, simply pass there variables for the
     // template, they'll become properties of
     // fixture.componentInstance.
-    const fixture = MockRender(`<div [color]="color" target></div>`, {
+    const fixture = MockRender('<div [color]="color" target></div>', {
       color: 'red',
     });
 

package/examples/TestDirectiveLetOf/dynamic.spec.ts

@@ -4,6 +4,7 @@ import {
   TemplateRef,
   ViewContainerRef,
 } from '@angular/core';
+
 import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';
 
 @Directive({

package/examples/TestDirectiveLetOf/static.spec.ts

@@ -4,6 +4,7 @@ import {
   TemplateRef,
   ViewContainerRef,
 } from '@angular/core';
+
 import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';
 
 @Directive({

package/examples/TestHttpInterceptor/test.spec.ts

@@ -1,23 +1,24 @@
 import {
+  HTTP_INTERCEPTORS,
   HttpClient,
   HttpClientModule,
   HttpEvent,
   HttpHandler,
   HttpInterceptor,
   HttpRequest,
-  HTTP_INTERCEPTORS,
 } from '@angular/common/http';
 import {
   HttpClientTestingModule,
   HttpTestingController,
 } from '@angular/common/http/testing';
 import { Injectable, NgModule } from '@angular/core';
+import { Observable } from 'rxjs';
+
 import {
   MockBuilder,
   MockRender,
   NG_MOCKS_INTERCEPTORS,
 } from 'ng-mocks';
-import { Observable } from 'rxjs';
 
 // An interceptor we want to test.
 @Injectable()

package/examples/TestHttpRequest/test.spec.ts

@@ -4,9 +4,10 @@ import {
   HttpTestingController,
 } from '@angular/common/http/testing';
 import { Injectable, NgModule } from '@angular/core';
-import { MockBuilder, MockRender } from 'ng-mocks';
 import { Observable } from 'rxjs';
 
+import { MockBuilder, MockRender } from 'ng-mocks';
+
 // A service that does http requests.
 @Injectable()
 class TargetService {

package/examples/TestLazyModule/test.spec.ts

@@ -1,5 +1,6 @@
 import { Component, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
+
 import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';
 
 import { LazyComponent, LazyModule } from './lazy-module';