Merge pull request #541 from satanTime/issues/538

Issues/538

README.md

@@ -90,11 +90,11 @@ describe('app-component', () => {
   // mock declarations and providers.
   beforeEach(() => {
     // A spy on a method which returns children.
-    // When an instance of ChildCompnent is being created,
+    // When an instance of ChildComponent is being created,
     // the method will be replaced with the spy.
     // https://ng-mocks.sudo.eu/api/MockInstance
     MockInstance(
-      ChildCompnent,
+      ChildComponent,
       'list',
       jasmine.createSpy(),
     ).and.returnValue([]);

docs/articles/extra/sanitizer.md

@@ -0,0 +1,63 @@
+---
+title: Mocking DomSanitizer
+description: Information how to test usage of DomSanitizer in Angular 
+sidebar_label: Mocking DomSanitizer 
+---
+
+This article explains how to mock `DomSanitizer` in Angular tests properly.
+
+The biggest issue is that `DomSanitizer` are used internally by Angular.
+Therefore, mocking them can cause unpredictable errors such as:
+
+- TypeError: view.root.sanitizer.sanitize is not a function
+- TypeError: _co.domSanitizer.bypassSecurityTrustHtml is not a function
+
+Another problem is that both of the class is abstract and there is no way to detect their abstract methods in javascript runtime
+in order to provide mock functions or spies instead.
+
+However, `ng-mocks` contains [`MockRender`](../api/MockRender.md) which supports additional providers for rendered things.
+Therefore, if we use [`MockRender`](../api/MockRender.md) and [`MockProvider`](../api/MockProvider.md), we can achieve desired environment and behavior:
+
+```ts
+// rendering TargetComponent component
+MockRender(TargetComponent, null, {
+  // providing special overrides for TargetComponent
+  providers: [
+    // Mocking DomSanitizer with a fake method
+    MockProvider(DomSanitizer, {
+      // the override should be provided explicitly
+      // because sanitize method is abstract
+      sanitize: jasmine.createSpy('sanitize'),
+    }),
+  ],
+});
+```
+
+Profit.
+
+## Full example
+
+A full example of **mocking DomSanitizer** in Angular tests.
+
+- [Try it on StackBlitz](https://stackblitz.com/github/ng-mocks/examples?file=src/examples/MockSanitizer/test.spec.ts&initialpath=%3Fspec%3DMockSanitizer)
+- [Try it on CodeSandbox](https://codesandbox.io/s/github/ng-mocks/examples?file=/src/examples/MockSanitizer/test.spec.ts&initialpath=%3Fspec%3DMockSanitizer)
+
+```ts
+describe('MockSanitizer', () => {
+  beforeEach(() => MockBuilder(TargetComponent));
+
+  it('renders expected mock values', () => {
+    MockRender(TargetComponent, null, {
+      providers: [
+        MockProvider(DomSanitizer, {
+          sanitize: (context: SecurityContext, value: string) =>
+            `sanitized:${context}:${value.length}`,
+        }),
+      ],
+    });
+
+    expect(ngMocks.formatHtml(ngMocks.find('div')))
+      .toEqual('sanitized:1:23');
+  });
+});
+```

docs/sidebars.js

@@ -87,7 +87,13 @@ module.exports = {
     {
       type: 'category',
       label: 'Extra',
-      items: ['extra/customize-mocks', 'extra/mock-observables', 'extra/mock-form-controls', 'extra/with-3rd-party'],
+      items: [
+        'extra/customize-mocks',
+        'extra/mock-observables',
+        'extra/mock-form-controls',
+        'extra/sanitizer',
+        'extra/with-3rd-party',
+      ],
     },
     {
       type: 'category',

examples/MockSanitizer/test.spec.ts

@@ -0,0 +1,39 @@
+import { Component, SecurityContext } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import {
+  MockBuilder,
+  MockProvider,
+  MockRender,
+  ngMocks,
+} from 'ng-mocks';
+
+@Component({
+  selector: 'target',
+  template: `
+    <div
+      [innerHTML]="sanitizer.sanitize(1, '<strong>value1</strong>')"
+    ></div>
+  `,
+})
+class TargetComponent {
+  public constructor(public readonly sanitizer: DomSanitizer) {}
+}
+
+describe('MockSanitizer', () => {
+  beforeEach(() => MockBuilder(TargetComponent));
+
+  it('renders expected mock values', () => {
+    MockRender(TargetComponent, null, {
+      providers: [
+        MockProvider(DomSanitizer, {
+          sanitize: (context: SecurityContext, value: string) =>
+            `sanitized:${context}:${value.length}`,
+        }),
+      ],
+    });
+
+    expect(ngMocks.formatHtml(ngMocks.find('div'))).toEqual(
+      'sanitized:1:23',
+    );
+  });
+});

libs/ng-mocks/src/lib/common/core.config.ts

@@ -9,6 +9,10 @@ export default {
     'EventManager',
     'Injector', // ivy only
     'RendererFactory2',
+
+    // https://github.com/ike18t/ng-mocks/issues/538
+    'Sanitizer',
+    'DomSanitizer',
   ],
   neverMockToken: [
     'InjectionToken Set Injector scope.', // INJECTOR_SCOPE // ivy only

libs/ng-mocks/src/lib/mock-render/mock-render.ts

@@ -50,7 +50,7 @@ const fixtureFactory = <T>(template: any, meta: Directive, params: any, flags: a
     template: mockTemplate,
   };
   const fixture: any = generateFixture({ ...meta, params, options });
-  if (flags.detectChanges) {
+  if (flags.detectChanges === undefined || flags.detectChanges) {
     fixture.detectChanges();
   }
 

libs/ng-mocks/src/lib/mock-service/helper.extract-methods-from-prototype.ts

@@ -1,8 +1,32 @@
+const sanitizerMethods = [
+  'sanitize',
+  'bypassSecurityTrustHtml',
+  'bypassSecurityTrustStyle',
+  'bypassSecurityTrustScript',
+  'bypassSecurityTrustUrl',
+  'bypassSecurityTrustResourceUrl',
+];
+
+const extraMethods: Record<string, undefined | string[]> = {
+  DomSanitizer: sanitizerMethods,
+  Sanitizer: sanitizerMethods,
+};
+
+const getOwnPropertyNames = (prototype: any): string[] => {
+  const result: string[] = Object.getOwnPropertyNames(prototype);
+  for (const method of extraMethods[prototype.constructor.name] ?? []) {
+    result.push(method);
+  }
+
+  return result;
+};
+
 export default <T>(service: T): string[] => {
   const result: string[] = [];
+
   let prototype = service;
   while (prototype && Object.getPrototypeOf(prototype) !== null) {
-    for (const method of Object.getOwnPropertyNames(prototype)) {
+    for (const method of getOwnPropertyNames(prototype)) {
       if ((method as any) === 'constructor') {
         continue;
       }

tests/issue-538/test.spec.ts

@@ -0,0 +1,71 @@
+import { Component } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import {
+  MockBuilder,
+  MockProvider,
+  MockRender,
+  ngMocks,
+} from 'ng-mocks';
+
+@Component({
+  selector: 'target',
+  template: `
+    <div
+      [innerHTML]="
+        domSanitizer.bypassSecurityTrustHtml(
+          '<strong>value1</strong>'
+        )
+      "
+    ></div>
+  `,
+})
+class TargetComponent {
+  public constructor(public readonly domSanitizer: DomSanitizer) {}
+}
+
+// TypeError: view.root.sanitizer.sanitize is not a function
+describe('issue-538', () => {
+  describe('keep', () => {
+    beforeEach(() => MockBuilder(TargetComponent));
+
+    it('renders expected real values', () => {
+      MockRender(TargetComponent);
+
+      expect(ngMocks.formatHtml(ngMocks.find('div'))).toEqual(
+        '<strong>value1</strong>',
+      );
+    });
+  });
+
+  describe('mock', () => {
+    beforeEach(() =>
+      MockBuilder(TargetComponent).mock(DomSanitizer, {
+        bypassSecurityTrustHtml: (value: string) => `${value.length}`,
+        sanitize: (_: any, value: string) => `${value}`,
+      }),
+    );
+
+    it('renders mess due to internal injections', () => {
+      MockRender(TargetComponent);
+
+      expect(ngMocks.formatHtml(ngMocks.find('div'))).toEqual('23');
+    });
+  });
+
+  describe('mock-render', () => {
+    beforeEach(() => MockBuilder(TargetComponent));
+
+    it('renders expected mock values', () => {
+      MockRender(TargetComponent, null, {
+        providers: [
+          MockProvider(DomSanitizer, {
+            bypassSecurityTrustHtml: (value: string) =>
+              `${value.length}`,
+          }),
+        ],
+      });
+
+      expect(ngMocks.formatHtml(ngMocks.find('div'))).toEqual('23');
+    });
+  });
+});

tests/ng-mocks-render/cdr.spec.ts

@@ -0,0 +1,63 @@
+import { Component, OnInit } from '@angular/core';
+import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';
+
+@Component({
+  selector: 'target',
+  template: '{{ value }}',
+})
+class TargetComponent implements OnInit {
+  public value = '';
+
+  public ngOnInit(): void {
+    this.value = 'rendered';
+  }
+}
+
+describe('ng-mocks-render:cdr', () => {
+  ngMocks.faster();
+  beforeAll(() => MockBuilder(TargetComponent));
+
+  it('detects instantly w/o params and options', () => {
+    const fixture = MockRender(TargetComponent);
+    expect(ngMocks.formatText(fixture)).toEqual('rendered');
+  });
+
+  it('detects instantly w/ params and w/o options', () => {
+    const fixture = MockRender(TargetComponent, {});
+    expect(ngMocks.formatText(fixture)).toEqual('rendered');
+  });
+
+  it('detects instantly w/ params and w/ options', () => {
+    const fixture = MockRender(TargetComponent, {}, {});
+    expect(ngMocks.formatText(fixture)).toEqual('rendered');
+  });
+
+  it('detects instantly w/ params and w/ flag', () => {
+    const fixture = MockRender(
+      TargetComponent,
+      {},
+      {
+        detectChanges: true,
+      },
+    );
+    expect(ngMocks.formatText(fixture)).toEqual('rendered');
+  });
+
+  it('does not detect as a flag', () => {
+    const fixture = MockRender(TargetComponent, undefined, false);
+    expect(ngMocks.formatText(fixture)).toEqual('');
+
+    fixture.detectChanges();
+    expect(ngMocks.formatText(fixture)).toEqual('rendered');
+  });
+
+  it('does not detect as options', () => {
+    const fixture = MockRender(TargetComponent, undefined, {
+      detectChanges: false,
+    });
+    expect(ngMocks.formatText(fixture)).toEqual('');
+
+    fixture.detectChanges();
+    expect(ngMocks.formatText(fixture)).toEqual('rendered');
+  });
+});