html snapshot from dom elements

This commit is contained in:
Gleb Bahmutov 2017-12-10 14:03:20 -05:00
parent fb79175620
commit f5f0b20492
4 changed files with 17 additions and 13 deletions

View file

@ -1,6 +1,6 @@
{ {
"standard.enable": false, "standard.enable": false,
"eslint.enable": true, "eslint.enable": true,
"eslint.autoFixOnSave": false, "eslint.autoFixOnSave": true,
"git.ignoreLimitWarning": true "git.ignoreLimitWarning": true
} }

View file

@ -86,6 +86,7 @@
"am-i-a-dependency": "1.1.2", "am-i-a-dependency": "1.1.2",
"check-more-types": "2.24.0", "check-more-types": "2.24.0",
"its-name": "1.0.0", "its-name": "1.0.0",
"js-beautify": "1.7.5",
"lazy-ass": "1.6.0", "lazy-ass": "1.6.0",
"snap-shot-store": "1.2.3", "snap-shot-store": "1.2.3",
"switchcase": "0.0.3" "switchcase": "0.0.3"

View file

@ -6,7 +6,7 @@ const { initStore } = require('snap-shot-store')
const la = require('lazy-ass') const la = require('lazy-ass')
const is = require('check-more-types') const is = require('check-more-types')
const { const {
serializeDomElement, isJqueryElement,
serializeReactToHTML, serializeReactToHTML,
identity, identity,
countSnapshots countSnapshots
@ -114,10 +114,6 @@ function registerCypressSnapshot () {
default: identity default: identity
}) })
function isJqueryElement (x) {
return 'wrap' in x
}
function snapshot (value, humanName) { function snapshot (value, humanName) {
console.log('human name', humanName) console.log('human name', humanName)
const snapshotName = getSnapshotName(this.test, humanName) const snapshotName = getSnapshotName(this.test, humanName)

View file

@ -1,5 +1,6 @@
/* global Cypress */ /* global Cypress */
const sd = require('@wildpeaks/snapshot-dom') const sd = require('@wildpeaks/snapshot-dom')
const beautify = require('js-beautify').html
function isJqueryElement (x) { function isJqueryElement (x) {
return 'wrap' in x return 'wrap' in x
@ -21,23 +22,29 @@ function serializeDomElement ($el) {
return json return json
} }
const stripReactIdAttributes = html => { const stripReactIdAttributes = (html) => {
const dataReactId = /data\-reactid="[\.\d\$\-abcdfef]+"/g const dataReactId = /data\-reactid="[\.\d\$\-abcdfef]+"/g
return html.replace(dataReactId, '') return html.replace(dataReactId, '')
} }
const serializeReactToHTML = el$ => { const serializeReactToHTML = (el$) => {
debugger
const html = el$[0].outerHTML const html = el$[0].outerHTML
const stripped = stripReactIdAttributes(html) const stripped = stripReactIdAttributes(html)
return stripped const options = {
wrap_line_length: 80,
indent_inner_html: true,
indent_size: 2,
wrap_attributes: 'force'
}
const pretty = beautify(stripped, options)
return pretty
} }
const identity = x => x const identity = (x) => x
const publicProps = name => !name.startsWith('__') const publicProps = (name) => !name.startsWith('__')
const countSnapshots = snapshots => const countSnapshots = (snapshots) =>
Object.keys(snapshots).filter(publicProps).length Object.keys(snapshots).filter(publicProps).length
module.exports = { module.exports = {