Skip to content

Commit

Permalink
fix: pretty print wrapper.html() output (#510)
Browse files Browse the repository at this point in the history 
Mimics v1 output by using "pretty" on HTML output before returning it from a wrapper.

Fixes #498
  • Loading branch information
@tbuteler
tbuteler committed Apr 2, 2021
1 parent cd1b708 commit 3e85d6e
Show file tree
Hide file tree
Showing 7 changed files with 167 additions and 43 deletions.
2 changes: 2 additions & 0 deletions package.json
View file
Expand Up @@ -21,6 +21,7 @@
"@rollup/plugin-replace": "^2.4.2",
"@types/jest": "26.0.22",
"@types/node": "14.14.37",
"@types/pretty": "^2.0.0",
"@vue/compiler-sfc": "3.0.11",
"babel-jest": "^26.6.3",
"babel-preset-jest": "^26.6.2",
Expand All @@ -31,6 +32,7 @@
"jsdom-global": "^3.0.2",
"lint-staged": "^10.5.4",
"prettier": "^2.2.1",
"pretty": "^2.0.0",
"reflect-metadata": "^0.1.13",
"rollup": "^2.44.0",
"rollup-plugin-typescript2": "^0.30.0",
Expand Down
5 changes: 3 additions & 2 deletions src/vueWrapper.ts
View file
Expand Up @@ -2,6 +2,7 @@ import { ComponentPublicInstance, nextTick, App } from 'vue'
import { ShapeFlags } from '@vue/shared'
// @ts-ignore todo - No DefinitelyTyped package exists for this
import eventTypes from 'dom-event-types'
import pretty from 'pretty'

import { config } from './config'
import { DOMWrapper } from './domWrapper'
Expand Down Expand Up @@ -90,10 +91,10 @@ export class VueWrapper<T extends ComponentPublicInstance>
html() {
// cover cases like <Suspense>, multiple root nodes.
if (this.parentElement['__vue_app__']) {
return this.parentElement.innerHTML
return pretty(this.parentElement.innerHTML)
}

return this.element.outerHTML
return pretty(this.element.outerHTML)
}

find<K extends keyof HTMLElementTagNameMap>(
Expand Down
4 changes: 3 additions & 1 deletion tests/html.spec.ts
View file
Expand Up @@ -24,7 +24,9 @@ describe('html', () => {

const wrapper = mount(Component)

expect(wrapper.html()).toBe('<div>foo</div><div>bar</div><div>baz</div>')
expect(wrapper.html()).toBe(
'<div>foo</div>\n' + '<div>bar</div>\n' + '<div>baz</div>'
)
})

it('returns the html when mounting a Suspense component', () => {
Expand Down
4 changes: 3 additions & 1 deletion tests/mountingOptions/global.components.spec.ts
View file
Expand Up @@ -41,7 +41,9 @@ describe('global.components', () => {
expect(spy).not.toHaveBeenCalled()
spy.mockRestore()
expect(wrapper.html()).toBe(
`<div><global-component-stub></global-component-stub></div>`
'<div>\n' +
' <global-component-stub></global-component-stub>\n' +
'</div>'
)
})

Expand Down
40 changes: 25 additions & 15 deletions tests/mountingOptions/stubs.global.spec.ts
View file
Expand Up @@ -34,7 +34,7 @@ describe('mounting options: stubs', () => {
}
})

expect(wrapper.html()).toBe('<div></div><foo-stub></foo-stub>')
expect(wrapper.html()).toBe('<div></div>\n' + '<foo-stub></foo-stub>')
})

// https://github.com/vuejs/vue-test-utils-next/issues/249
Expand All @@ -57,7 +57,7 @@ describe('mounting options: stubs', () => {
})

expect(wrapper.html()).toBe(
'<div><foo-stub></foo-stub><a></a><span></span></div>'
'<div>\n' + ' <foo-stub></foo-stub><a></a><span></span>\n' + '</div>'
)
expect(wrapper.getComponent(RouterLinkStub).vm.to).toBe('/foo')
})
Expand All @@ -79,7 +79,7 @@ describe('mounting options: stubs', () => {
})

expect(wrapper.html()).toEqual(
'<div><functional-foo-stub></functional-foo-stub></div>'
'<div>\n' + ' <functional-foo-stub></functional-foo-stub>\n' + '</div>'
)
})

Expand All @@ -94,7 +94,9 @@ describe('mounting options: stubs', () => {
}
})

expect(wrapper.html()).toEqual('<div><foo-stub></foo-stub></div>')
expect(wrapper.html()).toEqual(
'<div>\n' + ' <foo-stub></foo-stub>\n' + '</div>'
)
})

it('passes all attributes to stubbed components', () => {
Expand All @@ -116,7 +118,9 @@ describe('mounting options: stubs', () => {
})

expect(wrapper.html()).toEqual(
'<div><foo-stub class="bar" test-id="foo" dynamic="[object Object]"></foo-stub></div>'
'<div>\n' +
' <foo-stub class="bar" test-id="foo" dynamic="[object Object]"></foo-stub>\n' +
'</div>'
)
})

Expand All @@ -141,7 +145,7 @@ describe('mounting options: stubs', () => {
}
})

expect(wrapper.html()).toBe('<div></div><foo-stub></foo-stub>')
expect(wrapper.html()).toBe('<div></div>\n' + '<foo-stub></foo-stub>')
})

it('prevents lifecycle hooks triggering in a stub', () => {
Expand Down Expand Up @@ -236,7 +240,7 @@ describe('mounting options: stubs', () => {

expect(created).not.toHaveBeenCalled()
expect(wrapper.html()).toBe(
'<div id="root"><div id="msg">Hello world</div></div>'
'<div id="root">\n' + ' <div id="msg">Hello world</div>\n' + '</div>'
)
})

Expand Down Expand Up @@ -274,7 +278,7 @@ describe('mounting options: stubs', () => {
}
})

expect(wrapper.html()).toBe('<span></span><div></div>')
expect(wrapper.html()).toBe('<span></span>\n' + '<div></div>')
})

it('stubs a component with a kabeb-case name', () => {
Expand Down Expand Up @@ -341,7 +345,9 @@ describe('mounting options: stubs', () => {
const wrapper = mount(Comp)

expect(wrapper.html()).toBe(
'<transition-stub><div id="content"></div></transition-stub>'
'<transition-stub>\n' +
' <div id="content"></div>\n' +
'</transition-stub>'
)
})

Expand Down Expand Up @@ -440,7 +446,9 @@ describe('mounting options: stubs', () => {
}
})
expect(wrapper.html()).toBe(
`<div><component-with-slots-stub>Default</component-with-slots-stub></div>`
'<div>\n' +
' <component-with-slots-stub>Default</component-with-slots-stub>\n' +
'</div>'
)
})

Expand All @@ -452,7 +460,9 @@ describe('mounting options: stubs', () => {
}
})
expect(wrapper.html()).toBe(
'<div><component-with-slots-stub></component-with-slots-stub></div>'
'<div>\n' +
' <component-with-slots-stub></component-with-slots-stub>\n' +
'</div>'
)
})

Expand Down Expand Up @@ -485,10 +495,10 @@ describe('mounting options: stubs', () => {
})

expect(wrapper.html()).toEqual(
'<component-with-slots-stub>' +
'<component-with-slots-stub>' +
'<simple-slot-stub>nested content</simple-slot-stub>' +
'</component-with-slots-stub>' +
'<component-with-slots-stub>\n' +
' <component-with-slots-stub>\n' +
' <simple-slot-stub>nested content</simple-slot-stub>\n' +
' </component-with-slots-stub>\n' +
'</component-with-slots-stub>'
)
})
Expand Down
44 changes: 22 additions & 22 deletions tests/shallowMount.spec.ts
View file
Expand Up @@ -40,25 +40,25 @@ describe('shallowMount', () => {
it('stubs all components automatically using { shallow: true }', () => {
const wrapper = mount(ComponentWithChildren, { shallow: true })
expect(wrapper.html()).toEqual(
'<div class="ComponentWithChildren">' +
'<hello-stub></hello-stub>' +
'<component-with-input-stub></component-with-input-stub>' +
'<component-without-name-stub></component-without-name-stub>' +
'<script-setup-stub></script-setup-stub>' +
'<with-props-stub></with-props-stub>' +
'<div class="ComponentWithChildren">\n' +
' <hello-stub></hello-stub>\n' +
' <component-with-input-stub></component-with-input-stub>\n' +
' <component-without-name-stub></component-without-name-stub>\n' +
' <script-setup-stub></script-setup-stub>\n' +
' <with-props-stub></with-props-stub>\n' +
'</div>'
)
})

it('stubs all components automatically using shallowMount', () => {
const wrapper = shallowMount(ComponentWithChildren)
expect(wrapper.html()).toEqual(
'<div class="ComponentWithChildren">' +
'<hello-stub></hello-stub>' +
'<component-with-input-stub></component-with-input-stub>' +
'<component-without-name-stub></component-without-name-stub>' +
'<script-setup-stub></script-setup-stub>' +
'<with-props-stub></with-props-stub>' +
'<div class="ComponentWithChildren">\n' +
' <hello-stub></hello-stub>\n' +
' <component-with-input-stub></component-with-input-stub>\n' +
' <component-without-name-stub></component-without-name-stub>\n' +
' <script-setup-stub></script-setup-stub>\n' +
' <with-props-stub></with-props-stub>\n' +
'</div>'
)
})
Expand All @@ -73,12 +73,12 @@ describe('shallowMount', () => {
}
})
expect(wrapper.html()).toEqual(
'<div class="ComponentWithChildren">' +
'<div>Override</div>' +
'<component-with-input-stub></component-with-input-stub>' +
'<component-without-name-stub></component-without-name-stub>' +
'<script-setup-stub></script-setup-stub>' +
'<with-props-stub></with-props-stub>' +
'<div class="ComponentWithChildren">\n' +
' <div>Override</div>\n' +
' <component-with-input-stub></component-with-input-stub>\n' +
' <component-without-name-stub></component-without-name-stub>\n' +
' <script-setup-stub></script-setup-stub>\n' +
' <with-props-stub></with-props-stub>\n' +
'</div>'
)
})
Expand All @@ -93,10 +93,10 @@ describe('shallowMount', () => {
}
})
expect(wrapper.html()).toEqual(
'<div>Override</div>' +
'<component-with-input-stub></component-with-input-stub>' +
'<stub></stub>' +
'<stub></stub>' +
'<div>Override</div>\n' +
'<component-with-input-stub></component-with-input-stub>\n' +
'<stub></stub>\n' +
'<stub></stub>\n' +
'<with-props-stub></with-props-stub>'
)
})
Expand Down

0 comments on commit 3e85d6e

Please sign in to comment.