(feat) Ignore attributes

[meinaart]

(feat) Ignore attributes

[Vandivier]

ignoreAttributes should be an array which can include string or regex

I am using angular to prerender a static site and view encapsulation generates attributes prefixed with _ngcontent- and then a hash is appended. For example _ngcontent-vga-c1

[talentlessguy]

@skozin "Support ignoring certain attributes" sounds awesome.

So it can look like:

{
  ...,
  ignoreAttributes: ['style', 'class']
}

[franciscotrillo]

This would be useful when working with vue components that include scoped styles. Since the framework adds a data-v-{hash} attribute to the elements.
But an array of attribute names would not be enough. The hash is part of the name so a regEx or a comparator function would be better.

[Vandivier]

I don't think it's overkill. We would need to pick one to run first though. I imagine ignoreAttributes should run first so that if you debug ignoreFunction all other changes are already processed.

[dheerajvs]

Similar to OP, I'm using a library (styletron) which compiles styles to atomic css. However I feel ignoring the class names may defeat the utility of snapshot testing when styles are changes inadvertently.

Instead, if we have custom serializers like jest has for snapshot testing, we can write a serializer that substitutes class names with actual styles. This will be very useful when diffing snapshots that differ in styles.

[skozin]

A similar issue in @cypress/snapshot: cypress-io/snapshot#79.

I would extend this to "Support ignoring certain attributes" or "Allow specifying custom DOM serialization function". In our case, we need to ignore programmatically-generated style attributes.

[Vandivier]

Another approach would be like ignoreFunction which passes the document string into this function and the result is processed before diffing against the old snapshot. The current issue is ignoring attributes but an ignoreFunction could have additional use cases. Another use case I am working around separately is to ignore marketing analytics pixel tags, which get a UUI inserted, for example.

[talentlessguy]

@Vandivier what about both ignoreAttributes and ignoreFunction (some prefer X, others prefer Y)? or it is overkill in your opinion?

[Vandivier]

@talentlessguy @franciscotrillo I agree to prefer regex over an array of attribute names.

The implementation could be similar to the Angular sanitizer options feature requested here:
angular/angular#36650