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

Code before:
    await nextTick()

    const cursorStyles = wrapper
      .find('.el-tooltip__trigger')
      .attributes('style')

    expect(cursorStyles).toContain('left: 125px')
    expect(cursorStyles).toContain('top: 108px')

    vi.restoreAllMocks()
  })

  test('should select first non-disabled option when pressing enter', async () => {
    const props = { value: 'id', label: 'name', disabled: 'unable' }

    const wrapper = mount(Mention, {
      attachTo: document.body,
      props: {
        modelValue: '',
        options: optionsWithDisabled,
        props,
        'onUpdate:modelValue': (val: string) => {
          wrapper.setProps({ modelValue: val })
        },
      },
    })

    const inputEl = wrapper.find('input')
    inputEl.element.focus()
    await inputEl.setValue('@')

    vi.advanceTimersByTime(150)
    await nextTick()

    expect(document.querySelector('.el-mention-dropdown')).not.toEqual(null)

    await inputEl.trigger('keydown', {
      code: EVENT_CODE.enter,
      key: EVENT_CODE.enter,
    })
    await nextTick()

    expect(inputEl.element.value).toBe('@kooriookami ')
  })

  test('should not select disabled option when pressing enter', async () => {
    const props = { value: 'id', label: 'name', disabled: 'unable' }

    const wrapper = mount(Mention, {
      attachTo: document.body,
      props: {

Review comment (suggestion):
```suggestion
    const model = ref('')
    const wrapper = mount(
      () => <Mention v-model={model.value} options={optionsWithDisabled} />,
      { attachTo: document.body }
    )
```

Code after:

    const inputEl = wrapper.find('input')
    inputEl.element.focus()
    await inputEl.setValue('@')

    vi.advanceTimersByTime(150)
    await nextTick()

    expect(document.querySelector('.el-mention-dropdown')).not.toEqual(null)

    const dropdown = wrapper.findComponent({ name: 'ElMentionDropdown' })
    const dropdownVm = dropdown.vm as any
    expect(dropdownVm.hoveringIndex).toBe(1)

    await inputEl.trigger('keydown', {
      code: EVENT_CODE.enter,
      key: EVENT_CODE.enter,
    })
    await nextTick()

    expect(inputEl.element.value).toBe('@kooriookami ')
    expect(model.value).toBe('@kooriookami ')
  })

  test('should not select disabled option when pressing enter', async () => {
    const model = ref('')
    const wrapper = mount(
      () => <Mention v-model={model.value} options={optionsWithDisabled} />,
      { attachTo: document.body }
    )

    const inputEl = wrapper.find('input')
    inputEl.element.focus()
    await inputEl.setValue('@')

    vi.advanceTimersByTime(150)
    await nextTick()

    expect(document.querySelector('.el-mention-dropdown')).not.toEqual(null)

    const dropdown = wrapper.findComponent({ name: 'ElMentionDropdown' })
    const dropdownVm = dropdown.vm as any
    dropdownVm.hoveringIndex = 0

    await nextTick()

    const dropdownItems = document.querySelectorAll(
      '.el-mention-dropdown__item'
    )
    expect(dropdownItems[0].classList.contains('is-hovering')).toBe(true)
    expect(dropdownItems[0].classList.contains('is-disabled')).toBe(true)