Skip to content

Commit

Permalink
feat: add option to pretty print html components (#1229)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: html output will now be formatted
  • Loading branch information
@addisonssense @eddyerburgh
addisonssense authored and eddyerburgh committed May 18, 2019
1 parent 2a4c6ef commit 99336c4
Show file tree
Hide file tree
Showing 9 changed files with 156 additions and 32 deletions.
4 changes: 4 additions & 0 deletions flow/modules.flow.js
View file
Expand Up @@ -27,3 +27,7 @@ declare module 'cheerio' {
declare module 'semver' {
declare module.exports: any
}

declare module 'pretty' {
declare module.exports: any
}
3 changes: 2 additions & 1 deletion packages/test-utils/package.json
View file
Expand Up @@ -39,6 +39,7 @@
},
"dependencies": {
"dom-event-types": "^1.0.0",
"lodash": "^4.17.4"
"lodash": "^4.17.4",
"pretty": "^2.0.0"
}
}
3 changes: 2 additions & 1 deletion packages/test-utils/src/wrapper.js
View file
@@ -1,6 +1,7 @@
// @flow

import Vue from 'vue'
import pretty from 'pretty'
import getSelector from './get-selector'
import { REF_SELECTOR, FUNCTIONAL_OPTIONS, VUE_VERSION } from 'shared/consts'
import config from './config'
Expand Down Expand Up @@ -222,7 +223,7 @@ export default class Wrapper implements BaseWrapper {
* Returns HTML of element as a string
*/
html(): string {
return this.element.outerHTML
return pretty(this.element.outerHTML)
}

/**
Expand Down
6 changes: 5 additions & 1 deletion test/specs/mount.spec.js
View file
Expand Up @@ -340,8 +340,12 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'mount', () => {
if (vueVersion > 2.3) {
expect(wrapper.vm.$attrs).to.eql({ height: '50px', extra: 'attr' })
}

expect(wrapper.html()).to.equal(
`<div height="50px" extra="attr"><p class="prop-1">prop1</p> <p class="prop-2"></p></div>`
'<div height="50px" extra="attr">\n' +
' <p class="prop-1">prop1</p>\n' +
' <p class="prop-2"></p>\n' +
'</div>'
)
})

Expand Down
40 changes: 28 additions & 12 deletions test/specs/mounting-options/scopedSlots.spec.js
View file
Expand Up @@ -28,7 +28,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
}
}
)
expect(wrapper.html()).to.equal('<div><p>bar,123</p></div>')
expect(wrapper.html()).to.equal('<div>\n' + ' <p>bar,123</p>\n' + '</div>')
})

itDoNotRunIf(vueVersion < 2.1, 'handles render functions', () => {
Expand All @@ -47,7 +47,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
}
}
)
expect(wrapper.html()).to.equal('<div><p>bar</p></div>')
expect(wrapper.html()).to.equal('<div>\n' + ' <p>bar</p>\n' + '</div>')
})

itDoNotRunIf(
Expand Down Expand Up @@ -146,38 +146,54 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
}
})
expect(wrapper.find('#destructuring').html()).to.equal(
'<div id="destructuring"><p>0,1</p><p>1,2</p><p>2,3</p></div>'
'<div id="destructuring">\n' +
' <p>0,1</p>\n' +
' <p>1,2</p>\n' +
' <p>2,3</p>\n' +
'</div>'
)
expect(wrapper.find('#slots').html()).to.equal(
'<div id="slots"><span>123</span></div>'
)
expect(wrapper.find('#list').html()).to.equal(
'<div id="list"><p>0,a1</p><p>1,a2</p><p>2,a3</p></div>'
'<div id="list">\n' +
' <p>0,a1</p>\n' +
' <p>1,a2</p>\n' +
' <p>2,a3</p>\n' +
'</div>'
)
expect(wrapper.find('#single').html()).to.equal(
'<div id="single"><p>abc</p></div>'
'<div id="single">\n' + ' <p>abc</p>\n' + '</div>'
)
expect(wrapper.find('#noProps').html()).to.equal(
'<div id="noProps"><p>baz</p></div>'
'<div id="noProps">\n' + ' <p>baz</p>\n' + '</div>'
)
wrapper.vm.items = [4, 5, 6]
wrapper.vm.foo = [{ text: 'b1' }, { text: 'b2' }, { text: 'b3' }]
wrapper.vm.bar = 'ABC'
await Vue.nextTick()
expect(wrapper.find('#destructuring').html()).to.equal(
'<div id="destructuring"><p>0,4</p><p>1,5</p><p>2,6</p></div>'
'<div id="destructuring">\n' +
' <p>0,4</p>\n' +
' <p>1,5</p>\n' +
' <p>2,6</p>\n' +
'</div>'
)
expect(wrapper.find('#slots').html()).to.equal(
'<div id="slots"><span>123</span></div>'
)
expect(wrapper.find('#list').html()).to.equal(
'<div id="list"><p>0,b1</p><p>1,b2</p><p>2,b3</p></div>'
'<div id="list">\n' +
' <p>0,b1</p>\n' +
' <p>1,b2</p>\n' +
' <p>2,b3</p>\n' +
'</div>'
)
expect(wrapper.find('#single').html()).to.equal(
'<div id="single"><p>ABC</p></div>'
'<div id="single">\n' + ' <p>ABC</p>\n' + '</div>'
)
expect(wrapper.find('#noProps').html()).to.equal(
'<div id="noProps"><p>baz</p></div>'
'<div id="noProps">\n' + ' <p>baz</p>\n' + '</div>'
)
})

Expand All @@ -197,7 +213,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
}
}
)
expect(wrapper.html()).to.equal('<div><p>bar</p></div>')
expect(wrapper.html()).to.equal('<div>\n' + ' <p>bar</p>\n' + '</div>')
})

itDoNotRunIf(vueVersion < 2.5, 'handles no slot-scope', () => {
Expand All @@ -214,7 +230,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
}
}
)
expect(wrapper.html()).to.equal('<div><p>bar,123</p></div>')
expect(wrapper.html()).to.equal('<div>\n' + ' <p>bar,123</p>\n' + '</div>')
})

itDoNotRunIf(
Expand Down
9 changes: 7 additions & 2 deletions test/specs/mounting-options/slots.spec.js
View file
Expand Up @@ -497,7 +497,10 @@ describeWithShallowAndMount('options.slots', mountingMethod => {
)
).to.equal(true)
expect(ParentComponent.html()).to.equal(
'<div><div><span baz="qux">FOO,quux</span></div><div><span baz="qux">FOO,quux</span></div></div>'
'<div>\n' +
' <div><span baz="qux">FOO,quux</span></div>\n' +
' <div><span baz="qux">FOO,quux</span></div>\n' +
'</div>'
)

ParentComponent = mount(
Expand Down Expand Up @@ -529,6 +532,8 @@ describeWithShallowAndMount('options.slots', mountingMethod => {
c => c.$options.name === childComponentName
)
).to.equal(true)
expect(ParentComponent.html()).to.equal('<div><p>1234</p></div>')
expect(ParentComponent.html()).to.equal(
'<div>\n' + ' <p>1234</p>\n' + '</div>'
)
})
})
15 changes: 9 additions & 6 deletions test/specs/shallow-mount.spec.js
View file
Expand Up @@ -89,7 +89,10 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
localVue
})
expect(wrapper.html()).to.equal(
'<child-stub><p>Hello</p> <p>World</p></child-stub>'
'<child-stub>\n' +
' <p>Hello</p>\n' +
' <p>World</p>\n' +
'</child-stub>'
)
})

Expand Down Expand Up @@ -517,11 +520,11 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
}
const wrapper = shallowMount(TestComponent)
expect(wrapper.html()).to.equal(
'<div>' +
'<childcomponent-stub></childcomponent-stub> ' +
'<anonymous-stub></anonymous-stub> ' +
'<anonymous-stub></anonymous-stub> ' +
'<anonymous-stub></anonymous-stub>' +
'<div>\n' +
' <childcomponent-stub></childcomponent-stub>\n' +
' <anonymous-stub></anonymous-stub>\n' +
' <anonymous-stub></anonymous-stub>\n' +
' <anonymous-stub></anonymous-stub>\n' +
'</div>'
)
})
Expand Down
14 changes: 11 additions & 3 deletions test/specs/wrapper/html.spec.js
View file
Expand Up @@ -20,7 +20,7 @@ describeWithShallowAndMount('html', mountingMethod => {
}
}
})
const expectedHtml = '<div>1<div class="tester">test</div></div>'
const expectedHtml = '<div>1<div class="tester">test</div>\n' + '</div>'
expect(wrapper.html()).to.equal(expectedHtml)
})

Expand All @@ -32,9 +32,17 @@ describeWithShallowAndMount('html', mountingMethod => {
expect(wrapper.html()).to.equal('<div></div>')
})

it('returns a Wrappers HTML as a string', () => {
it('returns a Wrappers HTML as a pretty printed string', () => {
const expectedHtml =
'<input id="input-submit" type="submit" class="input-submit">'
'<body>\n' +
' <div>\n' +
' <ul>\n' +
' <li></li>\n' +
' <li></li>\n' +
' </ul>\n' +
' </div>\n' +
'</body>'

const compiled = compileToFunctions(expectedHtml)
const wrapper = mountingMethod(compiled)
expect(wrapper.html()).to.equal(expectedHtml)
Expand Down

0 comments on commit 99336c4

Please sign in to comment.