feat: ignore Angular IDs similar to React functionality (#80)

This commit is contained in:
Paul Spears 2021-02-15 20:33:27 -06:00 committed by GitHub
parent 9e94d1127f
commit 68d2f9befa
2 changed files with 17 additions and 10 deletions

View file

@ -10,7 +10,7 @@ const path = require('path')
const { const {
serializeDomElement, serializeDomElement,
serializeReactToHTML, serializeToHTML,
identity, identity,
countSnapshots countSnapshots
} = require('./utils') } = require('./utils')
@ -172,7 +172,7 @@ function registerCypressSnapshot () {
const pickSerializer = (asJson, value) => { const pickSerializer = (asJson, value) => {
if (Cypress.dom.isJquery(value)) { if (Cypress.dom.isJquery(value)) {
return asJson ? serializeDomElement : serializeReactToHTML return asJson ? serializeDomElement : serializeToHTML
} }
return identity return identity
} }

View file

@ -12,29 +12,36 @@ function serializeDomElement ($el) {
json.attributes.value = $el.context.value json.attributes.value = $el.context.value
} }
return deleteReactIdFromJson(json) return deleteTransientIdsFromJson(json)
} }
// remove React id, too transient // remove React and Angular ids, which are transient
function deleteReactIdFromJson (json) { function deleteTransientIdsFromJson(json) {
if (json.attributes) { if (json.attributes) {
delete json.attributes['data-reactid'] delete json.attributes['data-reactid']
Object.keys(json.attributes)
.filter(key => key.startsWith('_ng'))
.forEach(attr => delete json.attributes[attr])
delete json.attributes['']
} }
if (Array.isArray(json.childNodes)) { if (Array.isArray(json.childNodes)) {
json.childNodes.forEach(deleteReactIdFromJson) json.childNodes.forEach(deleteTransientIdsFromJson)
} }
return json return json
} }
const stripReactIdAttributes = (html) => { const stripTransientIdAttributes = (html) => {
const dataReactId = /data\-reactid="[\.\d\$\-abcdfef]+"/g const dataReactId = /data\-reactid="[\.\d\$\-abcdfef]+"/g
const angularId = /_ng(content|host)\-[0-9a-z-]+(="")?/g
return html.replace(dataReactId, '') return html.replace(dataReactId, '')
.replace(angularId, '')
} }
const serializeReactToHTML = (el$) => { const serializeToHTML = (el$) => {
const html = el$[0].outerHTML const html = el$[0].outerHTML
const stripped = stripReactIdAttributes(html) const stripped = stripTransientIdAttributes(html)
const options = { const options = {
wrap_line_length: 80, wrap_line_length: 80,
indent_inner_html: true, indent_inner_html: true,
@ -55,7 +62,7 @@ const countSnapshots = (snapshots) =>
module.exports = { module.exports = {
SNAPSHOT_FILE_NAME: 'snapshots.js', SNAPSHOT_FILE_NAME: 'snapshots.js',
serializeDomElement, serializeDomElement,
serializeReactToHTML, serializeToHTML,
identity, identity,
countSnapshots countSnapshots
} }