feat: serialize for test renderer

packages/renderer-test/__tests__/testRenderer.spec.ts

@@ -10,25 +10,20 @@ import {
   NodeOpTypes,
   nextTick,
   observable,
-  resetOps
+  resetOps,
+  serialize
 } from '../src'
 
 describe('test renderer', () => {
   it('should work', () => {
     class App extends Component {
-      data() {
-        return {
-          id: 'test',
-          text: 'hello'
-        }
-      }
       render() {
         return h(
           'div',
           {
-            id: this.id
+            id: 'test'
           },
-          this.text
+          'hello'
         )
       }
     }
@@ -128,4 +123,28 @@ describe('test renderer', () => {
       text: 'bar'
     })
   })
+
+  it('should be able to serialize nodes', () => {
+    class App extends Component {
+      render() {
+        return h(
+          'div',
+          {
+            id: 'test'
+          },
+          'hello'
+        )
+      }
+    }
+    const root = nodeOps.createElement('div')
+    render(h(App), root)
+
+    expect(serialize(root)).toEqual(
+      `<div>
+  <div id="test">
+    hello
+  </div>
+</div>`
+    )
+  })
 })

packages/renderer-test/src/index.ts

@@ -10,5 +10,6 @@ const { render: _render } = createRenderer({
 type publicRender = (node: VNode | null, container: TestElement) => void
 export const render = _render as publicRender
 
+export { serialize } from './serialize'
 export * from './nodeOps'
 export * from '@vue/core'

packages/renderer-test/src/serialize.ts

@@ -0,0 +1,30 @@
+import { TestElement, TestNode, NodeTypes, TestText } from './nodeOps'
+
+export function serialize(node: TestNode, depth: number = 0): string {
+  if (node.type === NodeTypes.ELEMENT) {
+    return serializeElement(node, depth)
+  } else {
+    return serializeText(node, depth)
+  }
+}
+
+function serializeElement(node: TestElement, depth: number): string {
+  const props = Object.keys(node.props)
+    .map(key => {
+      return `${key}=${JSON.stringify(node.props[key])}`
+    })
+    .join(' ')
+  const children = node.children.length
+    ? `\n${node.children.map(c => serialize(c, depth + 1))}\n`
+    : ``
+  const padding = `  `.repeat(depth)
+  return (
+    `${padding}<${node.tag}${props ? ` ${props}` : ``}>` +
+    `${children}` +
+    `${padding}</${node.tag}>`
+  )
+}
+
+function serializeText(node: TestText, depth: number): string {
+  return `  `.repeat(depth) + node.text
+}