theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip: update runtime-test

Browse Source
This commit is contained in:
Evan You 2019-08-21 17:05:14 -04:00
parent 13f5067656
commit b5384006d2
3 changed files with 146 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/runtime-core/src/component.ts
View File

@ -254,6 +254,11 @@ export function setupStatefulComponent(instance: ComponentInstance) {
} }
instance.render = Component.render as RenderFunction instance.render = Component.render as RenderFunction
} }
} else {
if (__DEV__ && !Component.render) {
// TODO warn missing render fn
}
instance.render = Component.render as RenderFunction
} }
} }

280
packages/runtime-test/__tests__/testRuntime.spec.ts
View File

@ -4,18 +4,19 @@ import {
nodeOps, nodeOps,
NodeTypes, NodeTypes,
TestElement, TestElement,
TestText TestText,
// dumpOps, ref,
// NodeOpTypes, reactive,
// nextTick, dumpOps,
// state, resetOps,
// resetOps, NodeOpTypes,
// serialize, nextTick,
// triggerEvent serialize,
triggerEvent
} from '../src' } from '../src'
describe('test renderer', () => { describe('test renderer', () => {
it('should work', async () => { it('should work', () => {
const root = nodeOps.createElement('div') const root = nodeOps.createElement('div')
render( render(
h( h(
@ -40,137 +41,132 @@ describe('test renderer', () => {
expect(text.text).toBe('hello') expect(text.text).toBe('hello')
}) })
// it('should record ops', async () => { it('should record ops', async () => {
// const store = state({ const state = reactive({
// id: 'test', id: 'test',
// text: 'hello' text: 'hello'
// }) })
// class App extends Component { const App = {
// render() { render() {
// return h( return h(
// 'div', 'div',
// { {
// id: store.id id: state.id
// }, },
// store.text state.text
// ) )
// } }
// } }
// const root = nodeOps.createElement('div') const root = nodeOps.createElement('div')
// resetOps() resetOps()
// await render(h(App), root) render(h(App), root)
// const ops = dumpOps() const ops = dumpOps()
// expect(ops.length).toBe(5) expect(ops.length).toBe(4)
// expect(ops[0]).toEqual({ expect(ops[0]).toEqual({
// type: NodeOpTypes.CREATE, type: NodeOpTypes.CREATE,
// nodeType: NodeTypes.ELEMENT, nodeType: NodeTypes.ELEMENT,
// tag: 'div', tag: 'div',
// targetNode: root.children[0] targetNode: root.children[0]
// }) })
// expect(ops[1]).toEqual({ expect(ops[1]).toEqual({
// type: NodeOpTypes.PATCH, type: NodeOpTypes.PATCH,
// targetNode: root.children[0], targetNode: root.children[0],
// propKey: 'id', propKey: 'id',
// propPrevValue: null, propPrevValue: null,
// propNextValue: 'test' propNextValue: 'test'
// }) })
// expect(ops[2]).toEqual({ expect(ops[2]).toEqual({
// type: NodeOpTypes.CREATE, type: NodeOpTypes.SET_ELEMENT_TEXT,
// nodeType: NodeTypes.TEXT, text: 'hello',
// text: 'hello', targetNode: root.children[0]
// targetNode: (root.children[0] as TestElement).children[0] })
// })
expect(ops[3]).toEqual({
// expect(ops[3]).toEqual({ type: NodeOpTypes.INSERT,
// type: NodeOpTypes.APPEND, targetNode: root.children[0],
// targetNode: (root.children[0] as TestElement).children[0], parentNode: root,
// parentNode: root.children[0] refNode: null
// }) })
// expect(ops[4]).toEqual({ // test update ops
// type: NodeOpTypes.APPEND, state.id = 'foo'
// targetNode: root.children[0], state.text = 'bar'
// parentNode: root await nextTick()
// })
const updateOps = dumpOps()
// // test update ops expect(updateOps.length).toBe(2)
// store.id = 'foo'
// store.text = 'bar' expect(updateOps[0]).toEqual({
// await nextTick() type: NodeOpTypes.PATCH,
targetNode: root.children[0],
// const updateOps = dumpOps() propKey: 'id',
// expect(updateOps.length).toBe(2) propPrevValue: 'test',
propNextValue: 'foo'
// expect(updateOps[0]).toEqual({ })
// type: NodeOpTypes.PATCH,
// targetNode: root.children[0], expect(updateOps[1]).toEqual({
// propKey: 'id', type: NodeOpTypes.SET_ELEMENT_TEXT,
// propPrevValue: 'test', targetNode: root.children[0],
// propNextValue: 'foo' text: 'bar'
// }) })
})
// expect(updateOps[1]).toEqual({
// type: NodeOpTypes.SET_TEXT, it('should be able to serialize nodes', () => {
// targetNode: (root.children[0] as TestElement).children[0], const App = {
// text: 'bar' render() {
// }) return h(
// }) 'div',
{
// it('should be able to serialize nodes', async () => { id: 'test'
// class App extends Component { },
// render() { [h('span', 0, 'foo'), 'hello']
// return h( )
// 'div', }
// { }
// id: 'test' const root = nodeOps.createElement('div')
// }, render(h(App), root)
// [h('span', 'foo'), 'hello'] expect(serialize(root)).toEqual(
// ) `<div><div id="test"><span>foo</span>hello</div></div>`
// } )
// } // indented output
// const root = nodeOps.createElement('div') expect(serialize(root, 2)).toEqual(
// await render(h(App), root) `<div>
// expect(serialize(root)).toEqual( <div id="test">
// `<div><div id="test"><span>foo</span>hello</div></div>` <span>
// ) foo
// expect(serialize(root, 2)).toEqual( </span>
// `<div> hello
// <div id="test"> </div>
// <span> </div>`
// foo )
// </span> })
// hello
// </div> it('should be able to trigger events', async () => {
// </div>` const count = ref(0)
// )
// }) const App = () => {
return h(
// it('should be able to trigger events', async () => { 'span',
// class App extends Component { {
// count = 0 onClick: () => {
// inc() { count.value++
// this.count++ }
// } },
// render() { count.value
// return h( )
// 'div', }
// {
// onClick: this.inc const root = nodeOps.createElement('div')
// }, render(h(App), root)
// this.count triggerEvent(root.children[0] as TestElement, 'click')
// ) expect(count.value).toBe(1)
// } await nextTick()
// } expect(serialize(root)).toBe(`<div><span>1</span></div>`)
// const app = await renderInstance(App) })
// triggerEvent(app.$el, 'click')
// expect(app.count).toBe(1)
// await nextTick()
// expect(serialize(app.$el)).toBe(`<div>1</div>`)
// })
}) })

27
packages/runtime-test/src/nodeOps.ts
View File

@ -4,6 +4,15 @@ export const enum NodeTypes {
COMMENT = 'comment' COMMENT = 'comment'
} }
export const enum NodeOpTypes {
CREATE = 'create',
INSERT = 'insert',
REMOVE = 'remove',
SET_TEXT = 'setText',
SET_ELEMENT_TEXT = 'setElementText',
PATCH = 'patch'
}
export interface TestElement { export interface TestElement {
id: number id: number
type: NodeTypes.ELEMENT type: NodeTypes.ELEMENT
@ -30,15 +39,6 @@ export interface TestComment {
export type TestNode = TestElement | TestText | TestComment export type TestNode = TestElement | TestText | TestComment
export const enum NodeOpTypes {
CREATE = 'create',
INSERT = 'insert',
REMOVE = 'remove',
SET_TEXT = 'setText',
SET_ELEMENT_TEXT = 'setElementText',
PATCH = 'patch'
}
export interface NodeOp { export interface NodeOp {
type: NodeOpTypes type: NodeOpTypes
nodeType?: NodeTypes nodeType?: NodeTypes
@ -184,7 +184,14 @@ function setElementText(el: TestElement, text: string) {
el.children.forEach(c => { el.children.forEach(c => {
c.parentNode = null c.parentNode = null
}) })
el.children = [createText(text)] el.children = [
{
id: nodeId++,
type: NodeTypes.TEXT,
text,
parentNode: el
}
]
} }
function parentNode(node: TestNode): TestElement | null { function parentNode(node: TestNode): TestElement | null {