token/index.test.js at master · itsyjs/token · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
import { describe, it, assert, beforeEach } from 'vitest'
import { ref } from 'vue'
import { mount } from '@vue/test-utils'
import { printVNode } from './generate-source.js'

beforeEach(() => { document.body.innerHTML = '' })

const domMount = (str) => {
  const el = document.createElement('div')
  el.innerHTML = str
  document.body.append(el)
  return el
}

describe('printVNode', () => {
  it('replicates DOM nodes', async () => {
    const root = ref(null)
    const template = '<div ref="root" class="foo"><h1>Hello world</h1></div>'
    const Fixture = { template, setup: () => ({ root }) }
    mount(Fixture)
    const resultStr = (await printVNode(root.value.__vnode)).lines
    const expected = domMount(template)
    const result = domMount(resultStr.join(''))
    // whitespace inserted for indented children, so remove to compare
    assert.equal(
      expected.innerHTML.replace(/\s/g, ''),
      result.innerHTML.replace(/\s/g, '')
    )
  })
  it('handles components', async () => {
    const root = ref(null)
    const template = '<div ref="root"><my-component /><h1>BBQ</h1></div>'
    const Comp = {
      name: 'MyComponent',
      template: '<article>OMG</article>'
    }
    const Fixture = {
      template,
      setup: () => ({ root }),
      components: { MyComponent: Comp }
    }
    const wrapper = mount(Fixture)
    const resultStr = (await printVNode(root.value.__vnode)).lines
    const expected = domMount(template)
    const result = domMount(resultStr.join(''))
    assert.ok(wrapper.find('article').exists()) // the component was mounted
    assert.equal(
      expected.innerHTML.replace(/\s/g, ''),
      result.innerHTML.replace(/\s/g, '')
    )
  })
  it('handles class bindings', async () => {
    const root = ref(null)
    const condition = ref(true)
    const template = `<div ref="root" class="foo" :class="{ 'bar': condition, 'baz': !condition }"><h1>Hello world</h1></div>`
    const Fixture = { template, setup: () => ({ root, condition }) }
    mount(Fixture)
    const resultStr = (await printVNode(root.value.__vnode)).lines
    const result = domMount(resultStr.join(''))
    assert.equal(result.querySelector('div').classList, 'foo bar')
    assert.notInclude(resultStr.join(''), ':class')
  })
  it('handles boolean - true - props', async () => {
    const root = ref(null)
    const condition = ref(true)
    const template = `<div ref="root"><my-component :foo="condition" /><h1>Hello world</h1></div>`
    const Comp = {
      name: 'MyComponent',
      template: '<article>OMG</article>',
      props: { foo: Boolean }
    }
    const Fixture = {
      template,
      setup: () => ({ root, condition }),
      components: { MyComponent: Comp }
    }
    mount(Fixture)
    const resultStr = (await printVNode(root.value.__vnode)).lines
    assert.include(resultStr.join(''), '<my-component foo />')
  })
  it('handles boolean - false - props', async () => {
    const root = ref(null)
    const condition = ref(false)
    const template = `<div ref="root"><my-component :foo="condition" /><h1>Hello world</h1></div>`
    const Comp = {
      name: 'MyComponent',
      template: '<article>OMG</article>',
      props: { foo: Boolean }
    }
    const Fixture = {
      template,
      setup: () => ({ root, condition }),
      components: { MyComponent: Comp }
    }
    mount(Fixture)
    const resultStr = (await printVNode(root.value.__vnode)).lines
    assert.include(resultStr.join(''), '<my-component />')
  })
  it('handles v-model', async () => {
    const root = ref(null)
    const model = ref('')
    const template = `<div ref="root"><my-component v-model="model" /><h1>Hello world</h1></div>`
    const Comp = {
      name: 'MyComponent',
      template: '<article>OMG</article>',
      props: { modelValue: null },
      emits: ['update:modelValue']
    }
    const Fixture = {
      template,
      setup: () => ({ root, model }),
      components: { MyComponent: Comp }
    }
    mount(Fixture)
    const resultStr = (await printVNode(root.value.__vnode)).lines
    assert.include(resultStr.join(''), `<my-component v-model="''" />`)
  })
})