Repository: element-plus/element-plus
File: packages/components/time-picker/__tests__/time-picker.test.tsx (TypeScript)

Code before:
    const value = ref('')
    const wrapper = mount(() => <TimePicker v-model={value.value} />)

    const input = wrapper.find('input')
    input.trigger('blur')
    input.trigger('focus')
    await nextTick()
    ;(document.querySelector('.el-time-panel__btn.cancel') as any).click()

    expect(value.value).toBe('')
    input.trigger('blur')
    input.trigger('focus')
    await nextTick()
    ;(document.querySelector('.el-time-panel__btn.confirm') as any).click()

    expect(value.value).toBeInstanceOf(Date)
  })

  it('should correctly cancel value after opened twice', async () => {
    const value = ref()
    const wrapper = mount(() => <TimePicker v-model={value.value} />)

    const input = wrapper.find('input')
    await input.trigger('blur')
    await input.trigger('focus')
    document
      .querySelector<HTMLButtonElement>('.el-time-panel__btn.cancel')
      .click()
    await nextTick()
    expect(value.value).toBeUndefined()

    await input.trigger('blur')
    await input.trigger('focus')
    document
      .querySelector<HTMLButtonElement>('.el-time-panel__btn.cancel')
      .click()
    await nextTick()
    expect(value.value).toBeUndefined()
  })

  it('should update oldValue when visible change', async () => {
    const value = ref(new Date(2016, 9, 10, 18, 40))
    const wrapper = mount(() => <TimePicker v-model={value.value} />)

    // show picker panel
    const input = wrapper.find('input')
    input.trigger('blur')
    input.trigger('focus')
    await nextTick()

    // select time

Review comment (suggestion):
```suggestion
    wrapper.find('.el-time-panel__btn.cancel')
```
Perhaps it would be more accurate to query inside the component to avoid possible conflicts with component content rendered by other test cases.

Code after:
  it('click confirm / cancel button', async () => {
    const value = ref('')
    const wrapper = mount(() => <TimePicker v-model={value.value} />)

    const input = wrapper.find('input')
    input.trigger('blur')
    input.trigger('focus')
    await nextTick()
    ;(document.querySelector('.el-time-panel__btn.cancel') as any).click()

    expect(value.value).toBe('')
    input.trigger('blur')
    input.trigger('focus')
    await nextTick()
    ;(document.querySelector('.el-time-panel__btn.confirm') as any).click()

    expect(value.value).toBeInstanceOf(Date)
  })

  it('should correctly cancel value after opened twice', async () => {
    const value = ref()
    const wrapper = mount(() => <TimePicker v-model={value.value} />)
    const picker = wrapper.findComponent(PanelTimePick)

    const input = wrapper.find('input')
    await input.trigger('blur')
    await input.trigger('focus')
    await picker.find('.el-time-panel__btn.cancel').trigger('click')
    expect(value.value).toBeUndefined()

    await input.trigger('blur')
    await input.trigger('focus')
    await picker.find('.el-time-panel__btn.cancel').trigger('click')
    expect(value.value).toBeUndefined()
  })

  it('should update oldValue when visible change', async () => {
    const value = ref(new Date(2016, 9, 10, 18, 40))
    const wrapper = mount(() => <TimePicker v-model={value.value} />)

    // show picker panel
    const input = wrapper.find('input')
    input.trigger('blur')
    input.trigger('focus')
    await nextTick()

    // select time
    const list = document.querySelectorAll('.el-time-spinner__list')
    const hoursEl = list[0]
    const minutesEl = list[1]
    const secondsEl = list[2]