From ba496a430c31506d67072e0663a3ce66c1054e23 Mon Sep 17 00:00:00 2001 From: Sharikov Vladislav Date: Tue, 28 Nov 2017 23:18:31 +0300 Subject: [PATCH] feat: remove ng* attributes from component snapshots --- AngularSnapshotSerializer.js | 23 ++++++++++++- .../__snapshots__/app.component.spec.ts.snap | 2 -- .../a-bit-more-complex.component.spec.ts.snap | 31 +++++++++++++++++ .../a-bit-more-complex.component.spec.ts | 34 +++++++++++++++++++ .../a-bit-more-complex.component.ts | 27 +++++++++++++++ .../child.component.ts | 27 +++++++++++++++ .../__snapshots__/calc.component.spec.ts.snap | 2 -- .../on-push.component.spec.ts.snap | 3 -- .../simple.component.spec.ts.snap | 1 - 9 files changed, 141 insertions(+), 9 deletions(-) create mode 100644 example/src/app/a-bit-more-complex-component/__snapshots__/a-bit-more-complex.component.spec.ts.snap create mode 100644 example/src/app/a-bit-more-complex-component/a-bit-more-complex.component.spec.ts create mode 100644 example/src/app/a-bit-more-complex-component/a-bit-more-complex.component.ts create mode 100644 example/src/app/a-bit-more-complex-component/child.component.ts diff --git a/AngularSnapshotSerializer.js b/AngularSnapshotSerializer.js index 4aec73726d..c0f5b0b118 100644 --- a/AngularSnapshotSerializer.js +++ b/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' @@ -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; + } + } +} \ No newline at end of file diff --git a/example/src/app/__snapshots__/app.component.spec.ts.snap b/example/src/app/__snapshots__/app.component.spec.ts.snap index 7349e7483b..6a41e2cf6f 100644 --- a/example/src/app/__snapshots__/app.component.spec.ts.snap +++ b/example/src/app/__snapshots__/app.component.spec.ts.snap @@ -18,7 +18,6 @@ exports[`AppComponent snaps 1`] = ` > aaa $1234 - \`test'chars"" - `; diff --git a/example/src/app/a-bit-more-complex-component/__snapshots__/a-bit-more-complex.component.spec.ts.snap b/example/src/app/a-bit-more-complex-component/__snapshots__/a-bit-more-complex.component.spec.ts.snap new file mode 100644 index 0000000000..e5d0b00260 --- /dev/null +++ b/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`] = ` + +
+ diary works! +
+
+ another case +
+
+
+ one more case case +
+
+ + stubbedBody + +
+
+ +`; diff --git a/example/src/app/a-bit-more-complex-component/a-bit-more-complex.component.spec.ts b/example/src/app/a-bit-more-complex-component/a-bit-more-complex.component.spec.ts new file mode 100644 index 0000000000..84ced88983 --- /dev/null +++ b/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; + + 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(); + }); +}); diff --git a/example/src/app/a-bit-more-complex-component/a-bit-more-complex.component.ts b/example/src/app/a-bit-more-complex-component/a-bit-more-complex.component.ts new file mode 100644 index 0000000000..d7b1fff108 --- /dev/null +++ b/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: ` +
+ diary works! +
+
+
another case
+
+
one more case case
+
+
+ `, + styles: [ + `.kekq { color: red }` + ] +}) +export class ABitMoreComplexComponent implements OnInit { + someVar = true; + anotherVar = false; + + constructor() {} + + ngOnInit() {} +} diff --git a/example/src/app/a-bit-more-complex-component/child.component.ts b/example/src/app/a-bit-more-complex-component/child.component.ts new file mode 100644 index 0000000000..263c104b4e --- /dev/null +++ b/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: ` +
+ {{ kek }} +
+ rly +

complex

+
component +
oh my god!
+
+
+
+ `, + styles: [ + `.kek { color: red }` + ] +}) +export class ChildComponent implements OnInit { + @Input() kek = null; + + constructor() {} + + ngOnInit() {} +} diff --git a/example/src/app/calc/__snapshots__/calc.component.spec.ts.snap b/example/src/app/calc/__snapshots__/calc.component.spec.ts.snap index 17a2085089..f97b8bfd3b 100644 --- a/example/src/app/calc/__snapshots__/calc.component.spec.ts.snap +++ b/example/src/app/calc/__snapshots__/calc.component.spec.ts.snap @@ -8,8 +8,6 @@ exports[`CalcComponent should snap 1`] = ` >

calc works! 1337 another text node test-image-stub

diff --git a/example/src/app/on-push/__snapshots__/on-push.component.spec.ts.snap b/example/src/app/on-push/__snapshots__/on-push.component.spec.ts.snap index 290aef6e2c..628683c759 100644 --- a/example/src/app/on-push/__snapshots__/on-push.component.spec.ts.snap +++ b/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`] = `

Chilli pizza

    -
  • first
    • @@ -24,7 +23,6 @@ exports[`OnPushComponent should reflect toppings @Input() via *ngFor 2`] = `

    Chilli pizza

      -
    • anchovy
      • @@ -46,7 +44,6 @@ exports[`OnPushComponent should snapshot pizza name @Input 1`] = `

      Chilli pizza

        -
      `; diff --git a/example/src/app/simple/__snapshots__/simple.component.spec.ts.snap b/example/src/app/simple/__snapshots__/simple.component.spec.ts.snap index 7c20ea59a6..3f5a36f073 100644 --- a/example/src/app/simple/__snapshots__/simple.component.spec.ts.snap +++ b/example/src/app/simple/__snapshots__/simple.component.spec.ts.snap @@ -4,7 +4,6 @@ exports[`SimpleComponent snapshots 1`] = `

      simple works! -

      `;