feat(wrapper): Add raw option to .html()

vuejs · Oct 21, 2022 · ff93e5e · ff93e5e
1 parent 0b5548d
commit ff93e5e
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 2 deletions.
diff --git a/docs/api/index.md b/docs/api/index.md
@@ -1378,10 +1378,14 @@ test('getComponent', () => {
 
 Returns the HTML of an element.
 
+By default the output is formatted with [`js-beautify`](https://github.com/beautify-web/js-beautify)
+to make snapshots more readable. Use `raw: true` option to receive the unformatted html string.
+
 **Signature:**
 
 ```ts
 html(): string
+html(options?: { raw?: boolean }): string
 ```
 
 **Details:**
@@ -1405,7 +1409,13 @@ import Component from './Component.vue'
 test('html', () => {
   const wrapper = mount(Component)
 
-  expect(wrapper.html()).toBe('<div><p>Hello world</p></div>')
+  expect(wrapper.html()).toBe(
+    '<div>\n' +
+    '  <p>Hello world</p>\n' +
+    '</div>'
+  )
+
+  expect(wrapper.html({ raw: true })).toBe('<div><p>Hello world</p></div>')
 })
 ```
 

diff --git a/src/baseWrapper.ts b/src/baseWrapper.ts
@@ -217,8 +217,9 @@ export default abstract class BaseWrapper<ElementType extends Node>
   }
   abstract setValue(value?: any): Promise<void>
 
-  html(): string {
+  html(options?: { raw?: boolean }): string {
     const stringNodes = this.getRootNodes().map((node) => stringifyNode(node))
+    if (options?.raw) return stringNodes.join('')
 
     return stringNodes
       .map((node) =>

diff --git a/tests/html.spec.ts b/tests/html.spec.ts
@@ -3,6 +3,12 @@ import { defineComponent, h } from 'vue'
 
 import { mount } from '../src'
 
+const nestedTemplate =
+  '<div><div class="element"><span>Text 1</span></div><div>Text 2</div></div>'
+const NestedNodes = defineComponent({
+  template: nestedTemplate
+})
+
 describe('html', () => {
   it('returns html when mounting single root node', () => {
     const Component = defineComponent({
@@ -16,6 +22,29 @@ describe('html', () => {
     expect(wrapper.html()).toBe('<div>Text content</div>')
   })
 
+  it('returns formatted html string', () => {
+    const wrapper = mount(NestedNodes)
+
+    expect(wrapper.html()).toBe(
+      '<div>\n' +
+        '  <div class="element"><span>Text 1</span></div>\n' +
+        '  <div>Text 2</div>\n' +
+        '</div>'
+    )
+    expect(wrapper.html()).toBe(
+      '<div>\n' +
+        '  <div class="element"><span>Text 1</span></div>\n' +
+        '  <div>Text 2</div>\n' +
+        '</div>'
+    )
+  })
+
+  it('returns raw html string', () => {
+    const wrapper = mount(NestedNodes)
+
+    expect(wrapper.html({ raw: true })).toBe(nestedTemplate)
+  })
+
   describe('multiple root components', () => {
     const originalTemplate = [
       '<div>foo</div>',
@@ -35,6 +64,11 @@ describe('html', () => {
       expect(wrapper.html()).toBe(originalTemplate.join('\n'))
     })
 
+    it('returns the raw html when mounting multiple root nodes', () => {
+      const wrapper = mount(Component)
+      expect(wrapper.html({ raw: true })).toBe(originalTemplate.join(''))
+    })
+
     it('returns the html when multiple root component is located inside other component', () => {
       const ParentComponent = defineComponent({
         components: { MultipleRoots: Component },