diff --git a/CHANGELOG.md b/CHANGELOG.md
index a3f3191c53..bd7e38eff9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
#### Fixes
* Make `AngularSnapshotSerializer` compatible with Ivy ([#366](https://github.com/thymikee/jest-preset-angular/pull/366))
+* Make `AngularSnapshotSerializer` remove auto-generated angular classes in addition to attributes
### v8.1.2
diff --git a/example/src/app/__snapshots__/app.component.spec.ts.snap b/example/src/app/__snapshots__/app.component.spec.ts.snap
index 20a7cb8898..ba4f379f5d 100644
--- a/example/src/app/__snapshots__/app.component.spec.ts.snap
+++ b/example/src/app/__snapshots__/app.component.spec.ts.snap
@@ -7,20 +7,15 @@ exports[`AppComponent snaps 1`] = `
title={[Function String]}
variableWithPrecedingDolar={[Function Number]}
>
-
+
app works!
-
+
aaa $1234
ddd
diff --git a/example/src/app/app.component.html b/example/src/app/app.component.html
index c54c8ad50a..7415d6e9d4 100644
--- a/example/src/app/app.component.html
+++ b/example/src/app/app.component.html
@@ -1,6 +1,6 @@
{{title}}
-
+
aaa ${{variableWithPrecedingDolar}}
ddd
`test'chars""
diff --git a/src/AngularNoNgAttributesSnapshotSerializer.js b/src/AngularNoNgAttributesSnapshotSerializer.js
index ed4b66aea7..47366da4cc 100644
--- a/src/AngularNoNgAttributesSnapshotSerializer.js
+++ b/src/AngularNoNgAttributesSnapshotSerializer.js
@@ -3,23 +3,55 @@
const jestDOMElementSerializer = require('pretty-format').plugins.DOMElement;
const attributesToRemovePatterns = ['ng-reflect', '_nghost', '_ngcontent', 'ng-version'];
+const attributesToClean = {
+ class: [/^(?:mat|cdk|ng).*-\w*\d+-\d+$/, /^ng-star-inserted$/], // e.g. "ng-tns-c25-1" or "ng-star-inserted", literally
+ id: [/^(?:mat|cdk|ng).*-\d+$/], // e.g. "mat-input-4", "cdk-step-content-0-0"
+ for: [/^(?:mat|cdk|ng).*-\d+$/], // e.g. "mat-form-field-label-9"
+ 'aria-owns': [/^(?:mat|cdk|ng).*-\d+$/], // e.g. "mat-input-4"
+ 'aria-labelledby': [/^(?:mat|cdk|ng).*-\d+$/], // e.g. "mat-input-4", "cdk-step-label-0-0"
+ 'aria-controls': [/^(?:mat|cdk|ng).*-\d+$/], // e.g. "cdk-step-content-2-0"
+};
const hasAttributesToRemove = (attribute) =>
attributesToRemovePatterns
.some(removePattern => attribute.name.startsWith(removePattern));
+const hasAttributesToClean = (attribute) => {
+ return Object.keys(attributesToClean).some(
+ removePatternKey => attribute.name === removePatternKey,
+ );
+};
const serialize = (node, ...rest) => {
const nodeCopy = node.cloneNode(true);
+ // Remove angular-specific attributes
Object.values(nodeCopy.attributes)
.filter(hasAttributesToRemove)
.forEach(attribute => nodeCopy.attributes.removeNamedItem(attribute.name));
+ // Remove angular auto-added classes
+ Object.values(nodeCopy.attributes)
+ .filter(hasAttributesToClean)
+ .forEach(attribute => {
+ attribute.value = attribute.value
+ .split(' ')
+ .filter(attrValue => {
+ return !attributesToClean[attribute.name].some(attributeCleanRegex =>
+ attributeCleanRegex.test(attrValue),
+ );
+ })
+ .join(' ');
+ if (attribute.value === '') {
+ nodeCopy.attributes.removeNamedItem(attribute.name);
+ } else {
+ nodeCopy.attributes.setNamedItem(attribute);
+ }
+ });
return jestDOMElementSerializer.serialize(nodeCopy, ...rest);
};
const serializeTestFn = (val) => {
return val.attributes !== undefined && Object.values(val.attributes)
- .some(hasAttributesToRemove)
+ .some(attribute => hasAttributesToRemove(attribute) || hasAttributesToClean(attribute))
};
const test = val =>
jestDOMElementSerializer.test(val) && serializeTestFn(val);