feat(MockRender): the host element doesn't have __ngContext__ attribu…

…te anymore #3811

NOTE: If you use jest snapshots it might require to update them and remove the `__ngContext__` attribute from `mock-render` nodes.

.commitlintrc.yml

@@ -3,7 +3,7 @@ rules:
   body-max-line-length:
     - 2
     - always
-    - 120
+    - Infinity
   subject-case:
     - 0
     - always

.eslintignore

@@ -21,4 +21,5 @@ tests-failures/
 tmp/
 
 **/*.sh
+**/*.snap
 **/.nvmrc

.prettierignore

@@ -19,4 +19,5 @@ test-reports/
 tmp/
 
 **/*.sh
+**/*.snap
 **/.nvmrc

e2e/jest/src/tests/issue-3811/__snapshots__/test.spec.ts.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`issue-3811 should render mock-render without __ngContext__ on the first run 1`] = `
+<mock-render>
+  <hello>
+    <h1>
+      Hello Joe!
+    </h1>
+  </hello>
+</mock-render>
+`;
+
+exports[`issue-3811 should render mock-render without __ngContext__ on the second run 1`] = `
+<mock-render>
+  <hello>
+    <h1>
+      Hello Jane!
+    </h1>
+  </hello>
+</mock-render>
+`;

e2e/jest/src/tests/issue-3811/test.spec.ts

@@ -0,0 +1,34 @@
+import { Component, Input } from '@angular/core';
+import { MockBuilder, MockRender } from 'ng-mocks';
+
+@Component({
+  selector: 'hello',
+  template: `<h1>Hello {{ name }}!</h1>`,
+})
+export class HelloComponent {
+  @Input() public name: string | null = null;
+}
+
+// @see https://github.com/help-me-mom/ng-mocks/issues/3811
+// The problem is that Angular adds `__ngContext__` on the host element (<mock-render>).
+// It's an index of the current context: 0, 1, 2, 3.
+// So if you have 2 tests, you have 2 contexts, but if you run only 1 test, you have 1 context,
+// and, therefore, the snapshot assertion will fail, because the single run has `0` index, whereas in the suite run,
+// it can be any other number.
+// The solution is to remove __ngContext__ from the snapshot html, so there is no number with the index in it.
+// The test below asserts that snapshots don't have __ngContext__ anymore.
+describe('issue-3811', () => {
+  beforeEach(() => {
+    return MockBuilder(HelloComponent);
+  });
+
+  it('should render mock-render without __ngContext__ on the first run', () => {
+    const fixture = MockRender(HelloComponent, { name: 'Joe' });
+    expect(fixture).toMatchSnapshot();
+  });
+
+  it('should render mock-render without __ngContext__ on the second run', () => {
+    const fixture = MockRender(HelloComponent, { name: 'Jane' });
+    expect(fixture).toMatchSnapshot();
+  });
+});

libs/ng-mocks/src/lib/mock-render/func.create-wrapper.ts

@@ -29,6 +29,16 @@ const generateWrapperComponent = ({ bindings, options, inputs }: any) => {
     public constructor() {
       coreDefineProperty(this, '__ngMocksOutput', generateWrapperOutput(this));
 
+      // The getter helps to remove the __ngContext__ attribute from <mock-render> tag.
+      // It helps with snapshot assertions.
+      // @see https://github.com/help-me-mom/ng-mocks/issues/3811
+      let ngContext = 0;
+      helperDefinePropertyDescriptor(this, '__ngContext__', {
+        get: () => ngContext,
+        set: (newValue: any) => (ngContext = newValue),
+        enumerable: false,
+      });
+
       if (!bindings) {
         for (const input of inputs || []) {
           let value: any = null;

tests/issue-3811/test.spec.ts

@@ -0,0 +1,11 @@
+import { MockRender } from 'ng-mocks';
+
+// we need to ensure that MockRender component provides correct access to the __ngContext__ property.
+describe('issue-3811', () => {
+  it('provides access to __ngContext__', () => {
+    const fixture = MockRender('');
+    const ngContext = (fixture.componentInstance as any)
+      .__ngContext__;
+    expect(ngContext).toBeDefined();
+  });
+});