test(runtime-core/renderer): tests for rendering elements (#699)

diff --git a/packages/runtime-core/__tests__/rendererElement.spec.ts b/packages/runtime-core/__tests__/rendererElement.spec.ts
index ffab39f5ef8d4543929e6b5de3f24133a6901cdc..4e044ad408e9bff6ec421751f6a57416eea62d2c 100644 (file)
--- a/packages/runtime-core/__tests__/rendererElement.spec.ts
+++ b/packages/runtime-core/__tests__/rendererElement.spec.ts
@@ -1,9 +1,51 @@
+import {
+  h,
+  render,
+  nodeOps,
+  TestElement,
+  serializeInner as inner
+} from '@vue/runtime-test'
+
 describe('renderer: element', () => {
-  test.todo('with props')
+  let root: TestElement
+
+  beforeEach(() => {
+    root = nodeOps.createElement('div')
+  })
+
+  it('should create an element', () => {
+    render(h('div'), root)
+    expect(inner(root)).toBe('<div></div>')
+  })
+
+  it('should create an element with props', () => {
+    render(h('div', { id: 'foo', class: 'bar' }), root)
+    expect(inner(root)).toBe('<div id="foo" class="bar"></div>')
+  })
+
+  it('should create an element with direct text children', () => {
+    render(h('div', ['foo', ' ', 'bar']), root)
+    expect(inner(root)).toBe('<div>foo bar</div>')
+  })
+
+  it('should create an element with direct text children and props', () => {
+    render(h('div', { id: 'foo' }, ['bar']), root)
+    expect(inner(root)).toBe('<div id="foo">bar</div>')
+  })
+
+  it('should update an element tag which is already mounted', () => {
+    render(h('div', ['foo']), root)
+    expect(inner(root)).toBe('<div>foo</div>')
 
-  test.todo('with direct text children')
+    render(h('span', ['foo']), root)
+    expect(inner(root)).toBe('<span>foo</span>')
+  })
 
-  test.todo('with text node children')
+  it('should update element props which is already mounted', () => {
+    render(h('div', { id: 'bar' }, ['foo']), root)
+    expect(inner(root)).toBe('<div id="bar">foo</div>')
 
-  test.todo('handle already mounted VNode')
+    render(h('div', { id: 'baz', class: 'bar' }, ['foo']), root)
+    expect(inner(root)).toBe('<div id="baz" class="bar">foo</div>')
+  })
 })