Skip to content

Commit

Permalink
issue-1146: updated so that pretty printing html is default
Browse files Browse the repository at this point in the history
  • Loading branch information
@addisonssense
addisonssense committed May 16, 2019
1 parent a9eda95 commit 72f10fb
Show file tree
Hide file tree
Showing 7 changed files with 83 additions and 80 deletions.
1 change: 0 additions & 1 deletion flow/wrapper.flow.js
View file
Expand Up @@ -5,7 +5,6 @@ import type WrapperArray from '~src/WrapperArray'

declare type Selector = any
declare type Components = { [name: string]: Component }
declare type HtmlOptions = { prettyPrint: boolean }

declare interface BaseWrapper {
// eslint-disable-line no-undef
Expand Down
5 changes: 1 addition & 4 deletions packages/test-utils/src/wrapper.js
View file
Expand Up @@ -222,10 +222,7 @@ export default class Wrapper implements BaseWrapper {
/**
* Returns HTML of element as a string
*/
html(options?: HtmlOptions): string {
if (options && !options.prettyPrint) {
return this.element.outerHTML
}
html(): string {
return pretty(this.element.outerHTML)
}

Expand Down
9 changes: 6 additions & 3 deletions test/specs/mount.spec.js
View file
Expand Up @@ -340,9 +340,12 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'mount', () => {
if (vueVersion > 2.3) {
expect(wrapper.vm.$attrs).to.eql({ height: '50px', extra: 'attr' })
}
const htmlOptions = { prettyPrint: false }
expect(wrapper.html(htmlOptions)).to.equal(
`<div height="50px" extra="attr"><p class="prop-1">prop1</p> <p class="prop-2"></p></div>`

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

Expand Down
69 changes: 42 additions & 27 deletions test/specs/mounting-options/scopedSlots.spec.js
View file
Expand Up @@ -7,7 +7,6 @@ import Vue from 'vue'
describeWithShallowAndMount('scopedSlots', mountingMethod => {
const sandbox = sinon.createSandbox()
const windowSave = window
const htmlOptions = { prettyPrint: false }

afterEach(() => {
window = windowSave // eslint-disable-line no-native-reassign
Expand All @@ -29,7 +28,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
}
}
)
expect(wrapper.html(htmlOptions)).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 @@ -48,7 +47,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
}
}
)
expect(wrapper.html(htmlOptions)).to.equal('<div><p>bar</p></div>')
expect(wrapper.html()).to.equal('<div>\n' + ' <p>bar</p>\n' + '</div>')
})

itDoNotRunIf(
Expand Down Expand Up @@ -88,7 +87,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
}
}
)
expect(notDestructuringWrapper.html(htmlOptions)).to.equal('<p>1,foo</p>')
expect(notDestructuringWrapper.html()).to.equal('<p>1,foo</p>')
}
)

Expand All @@ -113,7 +112,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
}
}
)
expect(destructuringWrapper.html(htmlOptions)).to.equal('<p>1,foo</p>')
expect(destructuringWrapper.html()).to.equal('<p>1,foo</p>')

const notDestructuringWrapper = mountingMethod(
{
Expand All @@ -131,7 +130,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
}
}
)
expect(notDestructuringWrapper.html(htmlOptions)).to.equal('<p>1,foo</p>')
expect(notDestructuringWrapper.html()).to.equal('<p>1,foo</p>')
}
)

Expand All @@ -146,39 +145,55 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
noProps: '<p slot-scope="baz">baz</p>'
}
})
expect(wrapper.find('#destructuring').html(htmlOptions)).to.equal(
'<div id="destructuring"><p>0,1</p><p>1,2</p><p>2,3</p></div>'
expect(wrapper.find('#destructuring').html()).to.equal(
'<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(htmlOptions)).to.equal(
expect(wrapper.find('#slots').html()).to.equal(
'<div id="slots"><span>123</span></div>'
)
expect(wrapper.find('#list').html(htmlOptions)).to.equal(
'<div id="list"><p>0,a1</p><p>1,a2</p><p>2,a3</p></div>'
expect(wrapper.find('#list').html()).to.equal(
'<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(htmlOptions)).to.equal(
'<div id="single"><p>abc</p></div>'
expect(wrapper.find('#single').html()).to.equal(
'<div id="single">\n' + ' <p>abc</p>\n' + '</div>'
)
expect(wrapper.find('#noProps').html(htmlOptions)).to.equal(
'<div id="noProps"><p>baz</p></div>'
expect(wrapper.find('#noProps').html()).to.equal(
'<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(htmlOptions)).to.equal(
'<div id="destructuring"><p>0,4</p><p>1,5</p><p>2,6</p></div>'
expect(wrapper.find('#destructuring').html()).to.equal(
'<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(htmlOptions)).to.equal(
expect(wrapper.find('#slots').html()).to.equal(
'<div id="slots"><span>123</span></div>'
)
expect(wrapper.find('#list').html(htmlOptions)).to.equal(
'<div id="list"><p>0,b1</p><p>1,b2</p><p>2,b3</p></div>'
expect(wrapper.find('#list').html()).to.equal(
'<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(htmlOptions)).to.equal(
'<div id="single"><p>ABC</p></div>'
expect(wrapper.find('#single').html()).to.equal(
'<div id="single">\n' + ' <p>ABC</p>\n' + '</div>'
)
expect(wrapper.find('#noProps').html(htmlOptions)).to.equal(
'<div id="noProps"><p>baz</p></div>'
expect(wrapper.find('#noProps').html()).to.equal(
'<div id="noProps">\n' + ' <p>baz</p>\n' + '</div>'
)
})

Expand All @@ -198,7 +213,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
}
}
)
expect(wrapper.html(htmlOptions)).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 @@ -215,7 +230,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
}
}
)
expect(wrapper.html(htmlOptions)).to.equal('<div><p>bar,123</p></div>')
expect(wrapper.html()).to.equal('<div>\n' + ' <p>bar,123</p>\n' + '</div>')
})

itDoNotRunIf(
Expand Down Expand Up @@ -287,7 +302,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => {
localVue
})

expect(wrapper.html(htmlOptions)).to.contain('span')
expect(wrapper.html()).to.contain('span')
}
)
})
17 changes: 10 additions & 7 deletions test/specs/mounting-options/slots.spec.js
View file
Expand Up @@ -8,8 +8,6 @@ import { itDoNotRunIf } from 'conditional-specs'
import { mount, createLocalVue } from '~vue/test-utils'

describeWithShallowAndMount('options.slots', mountingMethod => {
const htmlOptions = { prettyPrint: false }

it('mounts component with default slot if passed component in slot object', () => {
const wrapper = mountingMethod(ComponentWithSlots, {
slots: { default: Component }
Expand Down Expand Up @@ -182,8 +180,8 @@ describeWithShallowAndMount('options.slots', mountingMethod => {
footer: '<p>world</p>'
}
})
expect(wrapper.html(htmlOptions)).to.contain('<span>hello</span>')
expect(wrapper.html(htmlOptions)).to.contain('<p>world</p>')
expect(wrapper.html()).to.contain('<span>hello</span>')
expect(wrapper.html()).to.contain('<p>world</p>')
})

it('mounts component with default and named text slot', () => {
Expand Down Expand Up @@ -498,8 +496,11 @@ describeWithShallowAndMount('options.slots', mountingMethod => {
c => c.$options.name === childComponentName
)
).to.equal(true)
expect(ParentComponent.html(htmlOptions)).to.equal(
'<div><div><span baz="qux">FOO,quux</span></div><div><span baz="qux">FOO,quux</span></div></div>'
expect(ParentComponent.html()).to.equal(
'<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 @@ -531,6 +532,8 @@ describeWithShallowAndMount('options.slots', mountingMethod => {
c => c.$options.name === childComponentName
)
).to.equal(true)
expect(ParentComponent.html(htmlOptions)).to.equal('<div><p>1234</p></div>')
expect(ParentComponent.html()).to.equal(
'<div>\n' + ' <p>1234</p>\n' + '</div>'
)
})
})
51 changes: 23 additions & 28 deletions test/specs/shallow-mount.spec.js
View file
Expand Up @@ -13,8 +13,6 @@ import { describeRunIf, itDoNotRunIf } from 'conditional-specs'

describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
const sandbox = sinon.createSandbox()
const htmlOptions = { prettyPrint: false }

beforeEach(() => {
sandbox.stub(console, 'info').callThrough()
sandbox.stub(console, 'error').callThrough()
Expand Down Expand Up @@ -71,7 +69,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
const wrapper = shallowMount(TestComponent, {
localVue
})
expect(wrapper.html(htmlOptions)).to.equal('<child-stub>Hello</child-stub>')
expect(wrapper.html()).to.equal('<child-stub>Hello</child-stub>')
})

it('renders named slots', () => {
Expand All @@ -90,8 +88,11 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
const wrapper = shallowMount(TestComponent, {
localVue
})
expect(wrapper.html(htmlOptions)).to.equal(
'<child-stub><p>Hello</p> <p>World</p></child-stub>'
expect(wrapper.html()).to.equal(
'<child-stub>\n' +
' <p>Hello</p>\n' +
' <p>World</p>\n' +
'</child-stub>'
)
})

Expand All @@ -101,7 +102,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
components: { Child: {} }
}
const wrapper = shallowMount(TestComponent)
expect(wrapper.html(htmlOptions)).to.equal('<child-stub></child-stub>')
expect(wrapper.html()).to.equal('<child-stub></child-stub>')
})

it('renders children for functional components', () => {
Expand All @@ -116,7 +117,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
const wrapper = shallowMount(TestComponent, {
localVue
})
expect(wrapper.html(htmlOptions)).to.equal('<child-stub>Hello</child-stub>')
expect(wrapper.html()).to.equal('<child-stub>Hello</child-stub>')
})

it('stubs globally registered components', () => {
Expand Down Expand Up @@ -172,9 +173,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
}
}
const wrapper = shallowMount(TestComponent)
expect(wrapper.html(htmlOptions)).to.contain(
'<child-stub prop="a" attr="hello"'
)
expect(wrapper.html()).to.contain('<child-stub prop="a" attr="hello"')
}
)

Expand All @@ -192,7 +191,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
}
}
const wrapper = shallowMount(TestComponent)
expect(wrapper.html(htmlOptions)).to.contain('<child-stub class="b a"')
expect(wrapper.html()).to.contain('<child-stub class="b a"')
}
)

Expand All @@ -210,9 +209,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
}
}
const wrapper = shallowMount(TestComponent)
expect(wrapper.html(htmlOptions)).to.contain(
'<child-stub prop="a" attr="hello"'
)
expect(wrapper.html()).to.contain('<child-stub prop="a" attr="hello"')
})

it('renders classes for functional components', () => {
Expand All @@ -229,7 +226,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
components
}
const wrapper = shallowMount(TestComponent)
expect(wrapper.html(htmlOptions)).to.contain('<child-stub class="b a"')
expect(wrapper.html()).to.contain('<child-stub class="b a"')
const TestComponent2 = {
template: `<child :class="classA"/>`,
data: () => ({
Expand All @@ -238,7 +235,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
components
}
const wrapper2 = shallowMount(TestComponent2)
expect(wrapper2.html(htmlOptions)).to.contain('<child-stub class="a"')
expect(wrapper2.html()).to.contain('<child-stub class="a"')
const TestComponent3 = {
template: `<child class="b" />`,
data: () => ({
Expand All @@ -247,7 +244,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
components
}
const wrapper3 = shallowMount(TestComponent3)
expect(wrapper3.html(htmlOptions)).to.contain('<child-stub class="b"')
expect(wrapper3.html()).to.contain('<child-stub class="b"')
})

itDoNotRunIf(vueVersion < 2.1, 'handles recursive components', () => {
Expand All @@ -260,7 +257,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
name: 'test-component'
}
const wrapper = shallowMount(TestComponent)
expect(wrapper.html(htmlOptions)).to.contain('<test-component-stub>')
expect(wrapper.html()).to.contain('<test-component-stub>')
expect(console.error).not.calledWith('[Vue warn]')
})

Expand Down Expand Up @@ -427,9 +424,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
}
const wrapper = shallowMount(TestComponent)

expect(wrapper.html(htmlOptions)).to.equal(
'<custom-element></custom-element>'
)
expect(wrapper.html()).to.equal('<custom-element></custom-element>')
})

it('stubs lazily registered components', () => {
Expand Down Expand Up @@ -476,7 +471,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {

localVue.use(myPlugin)
const wrapper = shallowMount(TestComponent, { localVue })
expect(wrapper.html(htmlOptions)).to.contain('registered-component-stub')
expect(wrapper.html()).to.contain('registered-component-stub')
})

it('throws an error when the component fails to mount', () => {
Expand Down Expand Up @@ -524,12 +519,12 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
}
}
const wrapper = shallowMount(TestComponent)
expect(wrapper.html(htmlOptions)).to.equal(
'<div>' +
'<childcomponent-stub></childcomponent-stub> ' +
'<anonymous-stub></anonymous-stub> ' +
'<anonymous-stub></anonymous-stub> ' +
'<anonymous-stub></anonymous-stub>' +
expect(wrapper.html()).to.equal(
'<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

0 comments on commit 72f10fb

Please sign in to comment.