Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Issue(1147): Add option to pretty print html components #1229

Merged
merged 5 commits into from May 18, 2019
Merged

Issue(1147): Add option to pretty print html components #1229

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
76afc50
issue-1147: Add option to pretty print html components
addisonssense May 9, 2019
e1ff1e4
issue-1147: Add test for pretty print html
addisonssense May 9, 2019
423690d
issue-1146: Add flow types
addisonssense May 9, 2019
a9eda95
issue-1146: Make prettyPrint default; update existing tests
addisonssense May 13, 2019
72f10fb
issue-1146: updated so that pretty printing html is default
addisonssense May 16, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions flow/modules.flow.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
@@ -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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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