feat: remove ng* attributes from component snapshots

AngularSnapshotSerializer.js

@@ -29,6 +29,17 @@ const print = (val, print, indent, opts, colors) => {
     .map(node => Array.from(node.renderElement.childNodes).map(print).join(''))
     .join(opts.edgeSpacing);
 
+
+  const nodesWithoutDebugInformation = nodes
+    .split('\n')
+    // remove extra debug nodes
+    .map(removeExtraAttribute('_ngcontent'))
+    .map(removeExtraAttribute('_nghost'))
+    .map(removeExtraAttribute('ng-reflect-'))
+    // filter empty strings
+    .filter(str => !!str.trim())
+    .join('\n');
+
   const attributes = Object.keys(val.componentInstance);
 
   if (attributes.length) {
@@ -48,7 +59,7 @@ const print = (val, print, indent, opts, colors) => {
     componentAttrs +
     (componentAttrs.length ? '\n' : '') +
     '>\n' +
-    indent(nodes) +
+    indent(nodesWithoutDebugInformation) +
     '\n</' +
     componentName +
     '>'
@@ -65,3 +76,13 @@ module.exports = {
   print: print,
   test: test
 };
+
+function removeExtraAttribute (textToReplace) {
+  return val => {
+    if (val.includes(textToReplace)) {
+      return val.replace(new RegExp(`${textToReplace}.*?$`), '').trim();
+    } else {
+      return val;
+    }
+  }
+}

example/src/app/__snapshots__/app.component.spec.ts.snap

@@ -18,15 +18,13 @@ exports[`AppComponent snaps 1`] = `
     >
       aaa $1234
     </span>
-    
     <span
       class="ng-tns-c1-0 ng-star-inserted"
       style=""
     >
       ddd
     </span>
      \`test'chars""
-  
   </h1>
 </app-root>
 `;

example/src/app/a-bit-more-complex-component/__snapshots__/a-bit-more-complex.component.spec.ts.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ABitMoreComplexComponent snapshot test 1`] = `
+<app-a-bit-more-complex
+  anotherVar="false"
+  someVar={[Function Boolean]}
+>
+  <div
+    class="kek"
+  >
+     diary works! 
+    <div
+      class="inner-class"
+    >
+      <div>
+        another case
+      </div>
+    </div>
+    <div>
+      one more case case
+    </div>
+    <div>
+      <app-child-component
+        kek="someVar"
+      >
+        stubbedBody
+      </app-child-component>
+    </div>
+  </div>
+</app-a-bit-more-complex>
+`;

example/src/app/a-bit-more-complex-component/a-bit-more-complex.component.spec.ts

@@ -0,0 +1,34 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ABitMoreComplexComponent } from './a-bit-more-complex.component';
+import { ChildComponent } from './child.component';
+
+describe('ABitMoreComplexComponent', () => {
+  let component: ABitMoreComplexComponent;
+  let fixture: ComponentFixture<ABitMoreComplexComponent>;
+
+  beforeEach(
+    async(() => {
+      TestBed.configureTestingModule({
+        declarations: [ABitMoreComplexComponent, ChildComponent],
+      })
+        .overrideComponent(ChildComponent, {set: {template: 'stubbedBody'}})
+        .compileComponents();
+    }),
+  );
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ABitMoreComplexComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('snapshot test', () => {
+    expect(fixture).toMatchSnapshot();
+  });
+});

example/src/app/a-bit-more-complex-component/a-bit-more-complex.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-a-bit-more-complex',
+  template: `
+    <div class="kek">
+      diary works!
+      <div *ngIf="someVar" class="inner-class">
+        <div *ngIf="anotherVar" class="inner-hidden"></div>
+        <div>another case</div>
+      </div>
+      <div>one more case case</div>
+      <div><app-child-component kek="someVar"></app-child-component></div>
+    </div>
+  `,
+  styles: [
+    `.kekq { color: red }`
+  ]
+})
+export class ABitMoreComplexComponent implements OnInit {
+  someVar = true;
+  anotherVar = false;
+
+  constructor() {}
+
+  ngOnInit() {}
+}

example/src/app/a-bit-more-complex-component/child.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-child-component',
+  template: `
+    <div class="kek">
+      {{ kek }}
+      <div>
+        rly
+        <p>complex</p>
+        <div>component
+          <div>oh my god!</div>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [
+    `.kek { color: red }`
+  ]
+})
+export class ChildComponent implements OnInit {
+  @Input() kek = null;
+
+  constructor() {}
+
+  ngOnInit() {}
+}

example/src/app/calc/__snapshots__/calc.component.spec.ts.snap

@@ -8,8 +8,6 @@ exports[`CalcComponent should snap 1`] = `
 >
   <p
     class="a-default-class"
-    ng-reflect-klass="a-default-class"
-    ng-reflect-ng-class="[object Object]"
   >
      calc works! 1337 another text node test-image-stub 
   </p>

example/src/app/on-push/__snapshots__/on-push.component.spec.ts.snap

@@ -8,7 +8,6 @@ exports[`OnPushComponent should reflect toppings @Input() via *ngFor 1`] = `
   <h3>
     Chilli pizza
   </h3><ul>
-    
     <li>
       first
     </li>
@@ -24,7 +23,6 @@ exports[`OnPushComponent should reflect toppings @Input() via *ngFor 2`] = `
   <h3>
     Chilli pizza
   </h3><ul>
-    
     <li>
       anchovy
     </li>
@@ -46,7 +44,6 @@ exports[`OnPushComponent should snapshot pizza name @Input 1`] = `
   <h3>
     Chilli pizza
   </h3><ul>
-    
   </ul>
 </app-on-push>
 `;

example/src/app/simple/__snapshots__/simple.component.spec.ts.snap

@@ -4,7 +4,6 @@ exports[`SimpleComponent snapshots 1`] = `
 <app-simple>
   <p>
      simple works!
-  
   </p>
 </app-simple>
 `;