vuejs/vue-vapor

[Bug] runtime-vapor/vModel

FireBushtree opened this issue · 1 comments

i am trying to do the test for the module

import { ref } from '@vue/reactivity'
import { children, on, template, vModelDynamic, withDirectives } from '../src'
import { makeRender } from './_utils'
import { nextTick } from '@vue/runtime-dom'

const define = makeRender()

const triggerEvent = (type: string, el: Element) => {
  const event = new Event(type)
  el.dispatchEvent(event)
}

describe('directive: v-show', () => {
  it('should work with text input', async () => {
    const spy = vi.fn()

    const data = ref<string | null>(null)
    const { host } = define(() => {
      const t0 = template('<input />')
      const n0 = t0()
      const n1 = children(n0, 0) as HTMLInputElement
      withDirectives(n1, [[vModelDynamic, () => data.value]])
      on(n1, 'update:modelValue', val => (data.value = val))
      on(n1, 'input', () => () => spy(data.value))
      return n0
    }).render()

    const input = host.querySelector('input')!

    expect(input.value).toEqual('')

    input.value = 'foo'
    triggerEvent('input', input)
    await nextTick()
    expect(data.value).toEqual('foo')
    expect(spy).toHaveBeenCalledWith('foo')
  })
})

the last expect expect(spy).toHaveBeenCalledWith('foo') got error. Because the event 'input', () => () => spy(data.value) added before v-model 's input event. I think custom input event should add after v-model ' s input event. Maybe cache these custom event, after add v-model 's input event, add them all.