vue3-yuanma/packages/runtime-core/__tests__/vdomFragment.spec.ts

// These tests are outdated.

// import {
//   createVNode as h,
//   render,
//   nodeOps,
//   NodeTypes,
//   TestElement,
//   Fragment,
//   reactive,
//   serialize,
//   nextTick,
//   resetOps,
//   dumpOps,
//   NodeOpTypes
// } from '@vue/runtime-test'

// describe('vdom: fragment', () => {
//   it('should allow returning multiple component root nodes', async () => {
//     class App extends Component {
//       render() {
//         return [h('div', 'one'), 'two']
//       }
//     }
//     const root = nodeOps.createElement('div')
//     await render(h(App), root)
//     expect(serialize(root)).toBe(`<div><div>one</div>two</div>`)
//     expect(root.children.length).toBe(2)
//     expect(root.children[0]).toMatchObject({
//       type: NodeTypes.ELEMENT,
//       tag: 'div'
//     })
//     expect((root.children[0] as TestElement).children[0]).toMatchObject({
//       type: NodeTypes.TEXT,
//       text: 'one'
//     })
//     expect(root.children[1]).toMatchObject({
//       type: NodeTypes.TEXT,
//       text: 'two'
//     })
//   })

//   it('should be able to explicitly create fragments', async () => {
//     class App extends Component {
//       render() {
//         return h('div', [h(Fragment, [h('div', 'one'), 'two'])])
//       }
//     }
//     const root = nodeOps.createElement('div')
//     await render(h(App), root)
//     const parent = root.children[0] as TestElement
//     expect(serialize(parent)).toBe(`<div><div>one</div>two</div>`)
//   })

//   it('should be able to patch fragment children (unkeyed)', async () => {
//     const state = observable({ ok: true })
//     class App extends Component {
//       render() {
//         return state.ok
//           ? createFragment(
//               [h('div', 'one'), createTextVNode('two')],
//               ChildrenFlags.NONE_KEYED_VNODES
//             )
//           : createFragment(
//               [h('div', 'foo'), createTextVNode('bar'), createTextVNode('baz')],
//               ChildrenFlags.NONE_KEYED_VNODES
//             )
//       }
//     }
//     const root = nodeOps.createElement('div')
//     await render(h(App), root)

//     expect(serialize(root)).toBe(`<div><div>one</div>two</div>`)

//     state.ok = false
//     await nextTick()
//     expect(serialize(root)).toBe(`<div><div>foo</div>barbaz</div>`)
//   })

//   it('should be able to patch fragment children (implicitly keyed)', async () => {
//     const state = observable({ ok: true })
//     class App extends Component {
//       render() {
//         return state.ok
//           ? [h('div', 'one'), 'two']
//           : [h('pre', 'foo'), 'bar', 'baz']
//       }
//     }
//     const root = nodeOps.createElement('div')
//     await await render(h(App), root)

//     expect(serialize(root)).toBe(`<div><div>one</div>two</div>`)

//     state.ok = false
//     await nextTick()
//     expect(serialize(root)).toBe(`<div><pre>foo</pre>barbaz</div>`)
//   })

//   it('should be able to patch fragment children (explcitly keyed)', async () => {
//     const state = observable({ ok: true })
//     class App extends Component {
//       render() {
//         return state.ok
//           ? [h('div', { key: 1 }, 'one'), h('div', { key: 2 }, 'two')]
//           : [h('div', { key: 2 }, 'two'), h('div', { key: 1 }, 'one')]
//       }
//     }
//     const root = nodeOps.createElement('div')
//     await render(h(App), root)

//     expect(serialize(root)).toBe(`<div><div>one</div><div>two</div></div>`)

//     resetOps()
//     state.ok = false
//     await nextTick()
//     expect(serialize(root)).toBe(`<div><div>two</div><div>one</div></div>`)
//     const ops = dumpOps()
//     // should be moving nodes instead of re-creating them
//     expect(ops.some(op => op.type === NodeOpTypes.CREATE)).toBe(false)
//   })

//   it('should be able to move fragment', async () => {
//     const state = observable({ ok: true })
//     class App extends Component {
//       render() {
//         return state.ok
//           ? h('div', [
//               h('div', { key: 1 }, 'outer'),
//               h(Fragment, { key: 2 }, [
//                 h('div', { key: 1 }, 'one'),
//                 h('div', { key: 2 }, 'two')
//               ])
//             ])
//           : h('div', [
//               h(Fragment, { key: 2 }, [
//                 h('div', { key: 2 }, 'two'),
//                 h('div', { key: 1 }, 'one')
//               ]),
//               h('div', { key: 1 }, 'outer')
//             ])
//       }
//     }
//     const root = nodeOps.createElement('div')
//     await render(h(App), root)
//     const parent = root.children[0] as TestElement

//     expect(serialize(parent)).toBe(
//       `<div><div>outer</div><div>one</div><div>two</div></div>`
//     )

//     resetOps()
//     state.ok = false
//     await nextTick()
//     expect(serialize(parent)).toBe(
//       `<div><div>two</div><div>one</div><div>outer</div></div>`
//     )
//     const ops = dumpOps()
//     // should be moving nodes instead of re-creating them
//     expect(ops.some(op => op.type === NodeOpTypes.CREATE)).toBe(false)
//   })

//   it('should be able to handle nested fragments', async () => {
//     const state = observable({ ok: true })
//     class App extends Component {
//       render() {
//         return state.ok
//           ? [
//               h('div', { key: 1 }, 'outer'),
//               h(Fragment, { key: 2 }, [
//                 h('div', { key: 1 }, 'one'),
//                 h('div', { key: 2 }, 'two')
//               ])
//             ]
//           : [
//               h(Fragment, { key: 2 }, [
//                 h('div', { key: 2 }, 'two'),
//                 h('div', { key: 1 }, 'one')
//               ]),
//               h('div', { key: 1 }, 'outer')
//             ]
//       }
//     }

//     const root = nodeOps.createElement('div')
//     await render(h(App), root)

//     expect(serialize(root)).toBe(
//       `<div><div>outer</div><div>one</div><div>two</div></div>`
//     )

//     resetOps()
//     state.ok = false
//     await nextTick()
//     expect(serialize(root)).toBe(
//       `<div><div>two</div><div>one</div><div>outer</div></div>`
//     )
//     const ops = dumpOps()
//     // should be moving nodes instead of re-creating them
//     expect(ops.some(op => op.type === NodeOpTypes.CREATE)).toBe(false)
//   })
// })