[Feature]: Add the ability to configure whether component inputs should be included in the snapshot or not.

[MillerSvt]

🚀 Feature Proposal

Add the ability to configure whether component inputs should be included in the snapshot or not.

Component:

@Component({
    selector: 'app-test',
    standalone: true,
    imports: [CommonModule],
    templateUrl: './test.component.html',
    styleUrl: './test.component.less',
    providers: [TestService],
})
export class TestComponent {
    foo = 123;
}

Currently generated snapshot:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`TestComponent should create 1`] = `
<app-test
  foo={[Function Number]}
>
  <p>
    test works!
  </p>
</app-test>
`;

Expected snapshot with option:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`TestComponent should create 1`] = `
<app-test>
  <p>
    test works!
  </p>
</app-test>
`;

Motivation

The expect(fixture).toMatchSnapshot() method always generates a snapshot with all the attributes of the component. However, when an attribute changes, it necessitates the regeneration of all snapshots. It would be beneficial to introduce an option for configuring the serializer to exclude all attributes.

Example

No response

[ahnpnl]

You can do expect(fixture.debugElement.nativeElement).toMatchSnapshot() this should give the raw HTML. Would it help?

[datebackk]

You can do expect(fixture.debugElement.nativeElement).toMatchSnapshot() this should give the raw HTML. Would it help?

Render <div id="root0"></div> instead of host selector

[ahnpnl]

Ah right, look at the code at

jest-preset-angular/src/serializers/ng-snapshot.ts

Line 51 in 084d8b4

if (attributes.length) {

seems to be the place to get component attributes.

In this case, snapshot serializer can accept plugin options

jest-preset-angular/src/serializers/ng-snapshot.ts

Line 28 in 084d8b4

interface PluginOptions {

which should allow such extra configuration. There is a catch with this way of configuration is, it will apply to all snapshots instead of one single snapshot test.

With existing codes, we can have few options:

• Make this feature as a part of built in serializer
• Or provide an option on serializer to opt in/out this feature.
• Add custom snapshot matcher with allows to pass such configuration. Probably this way would allow to configure per test

Which way would you suggest?

[MillerSvt]

I think we don't need to configure this for each test individually. With existing snapshots, we can re-generate them once.

I think adding the omitAttributes option (false by default) will be the best solution. This won't ruin existing snapshots, but it will also add the ability to manually disable attributes.

[ahnpnl]

Ok I think we go with configuration on Jest level config first and see. The Jest level config most likely shares some options with serializer functions so custom matchers can also be easily supported.