Add ability to remove component attributes in snapshot

e2e/snapshot-serializers/__tests__/__snapshots__/foo.component.spec.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`snapshot should work 1`] = `
+exports[`FooComponent should allow generating snapshot 1`] = `
 <foo
   condition1={[Function Boolean]}
   condition2="false"
@@ -17,7 +17,36 @@ exports[`snapshot should work 1`] = `
 </foo>
 `;
 
-exports[`snapshot should work 2`] = `
+exports[`FooComponent should allow generating snapshot 2`] = `
+<div
+  id="root1"
+>
+  <p>
+    Line 1
+  </p>
+  <div>
+    <div>
+       val1 
+    </div>
+
+
+  </div>
+</div>
+`;
+
+exports[`FooComponent should allow generating snapshot with removed component attributes with snapshot serializer option 1`] = `
+<foo>
+  <p>
+    Line 1
+  </p><div>
+    <div>
+       val1 
+    </div>
+  </div>
+</foo>
+`;
+
+exports[`FooComponent should allow generating snapshot with removed component attributes with snapshot serializer option 2`] = `
 <div
   id="root0"
 >

e2e/snapshot-serializers/__tests__/foo.component.html

@@ -1,3 +1,4 @@
+<!-- SOMETHING -->
 <p>Line 1</p>
 <div>
     <div *ngIf="condition1">

e2e/snapshot-serializers/__tests__/foo.component.spec.ts

@@ -1,5 +1,7 @@
 import { Component, Input } from '@angular/core';
-import { TestBed, waitForAsync } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
+
+import serializer from '../../../build/serializers/ng-snapshot';
 
 @Component({
     selector: 'foo',
@@ -22,14 +24,44 @@ class FooComponent {
     condition2 = false;
 }
 
-test('snapshot should work', waitForAsync(() => {
-    TestBed.configureTestingModule({
-        declarations: [FooComponent],
+describe('FooComponent', () => {
+    test('should allow generating snapshot with removed component attributes with snapshot serializer option', () => {
+        expect.addSnapshotSerializer({
+            print: (val, print, indent, options, colors) =>
+                serializer.print(
+                    val,
+                    print,
+                    indent,
+                    {
+                        ...options,
+                        omitAllCompAttrs: true,
+                    },
+                    colors,
+                ),
+            test: serializer.test,
+        });
+
+        TestBed.configureTestingModule({
+            declarations: [FooComponent],
+        });
+
+        const fixture = TestBed.createComponent(FooComponent);
+        fixture.detectChanges();
+
+        expect(fixture).toMatchSnapshot();
+        expect(fixture.debugElement.nativeElement).toMatchSnapshot();
     });
 
-    const fixture = TestBed.createComponent(FooComponent);
-    fixture.detectChanges();
+    test('should allow generating snapshot', () => {
+        expect.addSnapshotSerializer(serializer);
+        TestBed.configureTestingModule({
+            declarations: [FooComponent],
+        });
+
+        const fixture = TestBed.createComponent(FooComponent);
+        fixture.detectChanges();
 
-    expect(fixture).toMatchSnapshot();
-    expect(fixture.debugElement.nativeElement).toMatchSnapshot();
-}));
+        expect(fixture).toMatchSnapshot();
+        expect(fixture.debugElement.nativeElement).toMatchSnapshot();
+    });
+});

src/serializers/ng-snapshot.ts

@@ -1,55 +1,38 @@
-import type { ComponentRef, Type, ɵCssSelectorList } from '@angular/core';
+import type { ɵComponentType, ɵDirectiveDef } from '@angular/core';
 import type { ComponentFixture } from '@angular/core/testing';
-import type { Colors } from 'pretty-format';
+import type { OldPlugin } from 'pretty-format';
 
-/**
- * The follow interfaces are customized heavily inspired by @angular/core/core.d.ts
- */
-interface ComponentDef {
-    selectors: ɵCssSelectorList;
-}
-interface IvyComponentType extends Type<unknown> {
-    ɵcmp: ComponentDef;
-}
-interface NgComponentRef extends ComponentRef<unknown> {
-    componentType: IvyComponentType;
-    _elDef: any; // eslint-disable-line @typescript-eslint/no-explicit-any
-    _view: any; // eslint-disable-line @typescript-eslint/no-explicit-any
-}
-interface NgComponentFixture extends ComponentFixture<unknown> {
-    componentRef: NgComponentRef;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    componentInstance: Record<string, any>;
-}
+const attributesToRemovePatterns = ['__ngContext__'];
 
-/**
- * The following types haven't been exported by jest so temporarily we copy typings from 'pretty-format'
- */
-interface PluginOptions {
-    edgeSpacing: string;
-    min: boolean;
-    spacing: string;
-}
-type Indent = (indentSpaces: string) => string;
-type Printer = (elementToSerialize: unknown) => string;
+type PluginPrintFnArgs = Parameters<OldPlugin['print']>;
 
-const attributesToRemovePatterns = ['__ngContext__'];
+type NgSnapshotOptions = {
+    omitAllCompAttrs?: boolean;
+};
+
+type PluginPrintFn = (
+    fixture: PluginPrintFnArgs[0],
+    printer: PluginPrintFnArgs[1],
+    indent: PluginPrintFnArgs[2],
+    opts: PluginPrintFnArgs[3] & NgSnapshotOptions,
+    colors: PluginPrintFnArgs[4],
+) => string;
 
-const print = (
-    fixture: NgComponentFixture,
-    printer: Printer,
-    indent: Indent,
-    opts: PluginOptions,
-    colors: Colors,
-): string => {
-    let componentAttrs = '';
-    const { componentRef, componentInstance } = fixture;
-    const componentDef = componentRef.componentType.ɵcmp;
+const removeTrailingWhiteSpaces = (serializedComponent: string): string => {
+    return serializedComponent.replace(/\n^\s*\n/gm, '\n');
+};
+
+const print: PluginPrintFn = (fixture, printer, indent, opts, colors) => {
+    const { componentRef, componentInstance } = fixture as ComponentFixture<Record<string, unknown>>;
+    const componentDef = (componentRef.componentType as ɵComponentType<unknown>).ɵcmp as ɵDirectiveDef<unknown>;
     const componentName = componentDef.selectors[0][0] as string;
     const nodes = Array.from(componentRef.location.nativeElement.childNodes).map(printer).join('');
-    const attributes = Object.keys(componentInstance).filter((key) => !attributesToRemovePatterns.includes(key));
-    if (attributes.length) {
-        componentAttrs += attributes
+    let serializedComponent = '';
+    if (opts.omitAllCompAttrs) {
+        serializedComponent = '<' + componentName + '>\n' + indent(nodes) + '\n</' + componentName + '>';
+    } else {
+        const attributes = Object.keys(componentInstance).filter((key) => !attributesToRemovePatterns.includes(key));
+        const componentAttrs = attributes
             .sort()
             .map((attribute) => {
                 const compAttrVal = componentInstance[attribute];
@@ -65,26 +48,26 @@ const print = (
                 );
             })
             .join('');
+        serializedComponent =
+            '<' +
+            componentName +
+            componentAttrs +
+            (componentAttrs.length ? '\n' : '') +
+            '>\n' +
+            indent(nodes) +
+            '\n</' +
+            componentName +
+            '>';
     }
 
-    return (
-        '<' +
-        componentName +
-        componentAttrs +
-        (componentAttrs.length ? '\n' : '') +
-        '>\n' +
-        indent(nodes) +
-        '\n</' +
-        componentName +
-        '>'
-    ).replace(/\n^\s*\n/gm, '\n');
+    serializedComponent = removeTrailingWhiteSpaces(serializedComponent);
+
+    return serializedComponent;
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
-const test = (val: any): boolean =>
-    !!val && typeof val === 'object' && Object.prototype.hasOwnProperty.call(val, 'componentRef');
+const test: OldPlugin['test'] = (val) => !!val && typeof val === 'object' && 'componentRef' in val;
 
 export = {
     print,
     test,
-};
+} as OldPlugin;

website/docs/getting-started/options.md

@@ -82,7 +82,7 @@ export default jestConfig;
 
 ```js tab
 // jest.config.js
-const snapshotSerializers = require('../build/serializers');
+const snapshotSerializers = require('jest-preset-angular/build/serializers');
 
 module.exports = {
   moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],
@@ -140,10 +140,7 @@ Jest runs with `jest-preset-angular` neither in browser nor through dev server.
 - `"moduleFileExtensions"` – our modules are TypeScript (`ts`), HTML (`html`), JavaScript (`js`), JSON (`json`) and ESM JavaScript (`mjs`) files.
 - `"moduleNameMapper"` – if you're using absolute imports here's how to tell Jest where to look for them; uses `RegExp`.
 - `"resolver"` - instruct Jest how to resolve entry file based on `package.json` definitions.
-- `"snapshotSerializers"` - array of serializers which will be applied to snapshot the code. Note: by default angular adds
-  some angular-specific attributes to the code (like `ng-reflect-*`, `ng-version="*"`, `_ngcontent-c*` etc).
-  This package provides serializer to remove such attributes. This makes snapshots cleaner and more human-readable.
-  To remove such specific attributes use `no-ng-attributes` serializer. You need to add `no-ng-attributes` serializer manually.
+- `"snapshotSerializers"` - array of serializers which will be applied to snapshot the code. See more in [Snapshot testing](../guides/snapshot-testing.md)
 - `"testEnvironment"` – the test environment to run on.
 - `"transformIgnorePatterns"`: instruct Jest to transform any `.mjs` files which come from `node_modules`.
 - `"transform"` – run every `TS`, `JS`, `MJS`, `HTML`, or `SVG` file through so called _Jest transformer_; this lets Jest understand non-JS syntax.