Open talentlessguy opened 4 years ago
A similar issue in @cypress/snapshot
: https://github.com/cypress-io/snapshot/issues/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.
@skozin "Support ignoring certain attributes" sounds awesome.
So it can look like:
{
...,
ignoreAttributes: ['style', 'class']
}
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
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.
@Vandivier what about both ignoreAttributes
and ignoreFunction
(some prefer X, others prefer Y)? or it is overkill in your opinion?
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.
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.
@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: https://github.com/angular/angular/issues/36650
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.
Is your feature request related to a problem? Please describe.
I have an app that is built with
styled-components
so all classNames are generated randomly.Describe the solution you'd like
Some option like
ignoreAttributes
would fit.That'd be nice to skip classNames so snapshots will work properly.
E.g. instead of this:
I would see this:
Describe alternatives you've considered Image snapshots