How to use @vue/runtime-dom - 10 common examples

test('isRef', () => {
    expect(isRef(ref(1))).toBe(true)
    expect(isRef(computed(() => 1))).toBe(true)

    expect(isRef(0)).toBe(false)
    expect(isRef(1)).toBe(false)
    // an object that looks like a ref isn't necessarily a ref
    expect(isRef({ value: 0 })).toBe(false)
  })

test('it should support key modifiers and system modifiers', () => {
    const el = document.createElement('div')
    const fn = jest.fn()
    // <div>
    const nextValue = withKeys(withModifiers(fn, ['ctrl']), [
      'esc',
      'arrow-left'
    ])
    patchEvent(el, 'keyup', null, nextValue, null)

    triggerEvent(el, 'keyup', e =&gt; (e.key = 'a'))
    expect(fn).not.toBeCalled()

    triggerEvent(el, 'keyup', e =&gt; {
      e.ctrlKey = false
      e.key = 'esc'
    })
    expect(fn).not.toBeCalled()

    triggerEvent(el, 'keyup', e =&gt; {
      e.ctrlKey = true</div>

test('it should support "exact" modifier', () => {
    const el = document.createElement('div')
    // Case 1: <div>
    const fn1 = jest.fn()
    const next1 = withModifiers(fn1, ['exact'])
    patchEvent(el, 'keyup', null, next1, null)
    triggerEvent(el, 'keyup')
    expect(fn1.mock.calls.length).toBe(1)
    triggerEvent(el, 'keyup', e =&gt; (e.ctrlKey = true))
    expect(fn1.mock.calls.length).toBe(1)
    // Case 2: <div>
    const fn2 = jest.fn()
    const next2 = withKeys(withModifiers(fn2, ['ctrl', 'exact']), ['a'])
    patchEvent(el, 'keyup', null, next2, null)
    triggerEvent(el, 'keyup', e =&gt; (e.key = 'a'))
    expect(fn2).not.toBeCalled()
    triggerEvent(el, 'keyup', e =&gt; {
      e.key = 'a'
      e.ctrlKey = true
    })
    expect(fn2.mock.calls.length).toBe(1)</div></div>

test('it should support "exact" modifier', () => {
    const el = document.createElement('div')
    // Case 1: <div>
    const fn1 = jest.fn()
    const next1 = withModifiers(fn1, ['exact'])
    patchEvent(el, 'keyup', null, next1, null)
    triggerEvent(el, 'keyup')
    expect(fn1.mock.calls.length).toBe(1)
    triggerEvent(el, 'keyup', e =&gt; (e.ctrlKey = true))
    expect(fn1.mock.calls.length).toBe(1)
    // Case 2: <div>
    const fn2 = jest.fn()
    const next2 = withKeys(withModifiers(fn2, ['ctrl', 'exact']), ['a'])
    patchEvent(el, 'keyup', null, next2, null)
    triggerEvent(el, 'keyup', e =&gt; (e.key = 'a'))
    expect(fn2).not.toBeCalled()
    triggerEvent(el, 'keyup', e =&gt; {
      e.key = 'a'
      e.ctrlKey = true
    })
    expect(fn2.mock.calls.length).toBe(1)
    triggerEvent(el, 'keyup', e =&gt; {
      // should not trigger if has other system modifiers
      e.key = 'a'
      e.ctrlKey = true
      e.altKey = true
    })
    expect(fn2.mock.calls.length).toBe(1)
  })</div></div>

onUpdated(grandChildUpdated)
        return () =>
          h(
            'div',
            {
              class: 'c2',
              style: { fontWeight: 'bold' }
            },
            props.foo
          )
      }
    })

    const root = document.createElement('div')
    document.body.appendChild(root)
    render(h(Hello), root)

    const node = root.children[0] as HTMLElement

    // with declared props, any parent attr that isn't a prop falls through
    expect(node.getAttribute('id')).toBe('test')
    expect(node.getAttribute('class')).toBe('c2 c0')
    expect(node.style.color).toBe('green')
    expect(node.style.fontWeight).toBe('bold')
    node.dispatchEvent(new CustomEvent('click'))
    expect(click).toHaveBeenCalled()

    // ...while declared ones remain props
    expect(node.hasAttribute('foo')).toBe(false)

    await nextTick()
    expect(childUpdated).toHaveBeenCalled()

`@${__COMMIT__}`
      ),
      h('div', { id: 'options' }, [
        // mode selection
        h('span', { class: 'options-group' }, [
          h('span', { class: 'label' }, 'Mode:'),
          h('input', {
            type: 'radio',
            id: 'mode-module',
            name: 'mode',
            checked: compilerOptions.mode === 'module',
            onChange() {
              compilerOptions.mode = 'module'
            }
          }),
          h('label', { for: 'mode-module' }, 'module'),
          h('input', {
            type: 'radio',
            id: 'mode-function',
            name: 'mode',
            checked: compilerOptions.mode === 'function',
            onChange() {
              compilerOptions.mode = 'function'
            }
          }),
          h('label', { for: 'mode-function' }, 'function')
        ]),

        // toggle prefixIdentifiers
        h('input', {
          type: 'checkbox',
          id: 'prefix',

return () => [
      h('h1', `Vue 3 Template Explorer`),
      h(
        'a',
        {
          href: `https://github.com/vuejs/vue-next/tree/${__COMMIT__}`,
          target: `_blank`
        },
        `@${__COMMIT__}`
      ),
      h('div', { id: 'options' }, [
        // mode selection
        h('span', { class: 'options-group' }, [
          h('span', { class: 'label' }, 'Mode:'),
          h('input', {
            type: 'radio',
            id: 'mode-module',
            name: 'mode',
            checked: compilerOptions.mode === 'module',
            onChange() {
              compilerOptions.mode = 'module'
            }
          }),
          h('label', { for: 'mode-module' }, 'module'),
          h('input', {
            type: 'radio',
            id: 'mode-function',
            name: 'mode',
            checked: compilerOptions.mode === 'function',
            onChange() {

return () => [
      h('h1', `Vue 3 Template Explorer`),
      h(
        'a',
        {
          href: `https://github.com/vuejs/vue-next/tree/${__COMMIT__}`,
          target: `_blank`
        },
        `@${__COMMIT__}`
      ),
      h('div', { id: 'options' }, [
        // mode selection
        h('span', { class: 'options-group' }, [
          h('span', { class: 'label' }, 'Mode:'),
          h('input', {
            type: 'radio',
            id: 'mode-module',
            name: 'mode',

test('it should support "stop" and "prevent"', () => {
    const parent = document.createElement('div')
    const child = document.createElement('input')
    parent.appendChild(child)
    const childNextValue = withModifiers(jest.fn(), ['prevent', 'stop'])
    patchEvent(child, 'click', null, childNextValue, null)
    const parentNextValue = jest.fn()
    patchEvent(parent, 'click', null, parentNextValue, null)
    expect(triggerEvent(child, 'click').defaultPrevented).toBe(true)
    expect(parentNextValue).not.toBeCalled()
  })

test('it should support "self"', () => {
    const parent = document.createElement('div')
    const child = document.createElement('input')
    parent.appendChild(child)
    const fn = jest.fn()
    const handler = withModifiers(fn, ['self'])
    patchEvent(parent, 'click', null, handler, null)
    triggerEvent(child, 'click')
    expect(fn).not.toBeCalled()
  })