// @ts-nocheck
import { nextTick } from 'vue'
import { mount } from '@vue/test-utils'
import { afterEach, describe, expect, it } from 'vitest'
import dayjs from 'dayjs'
import customParseFormat from 'dayjs/plugin/customParseFormat.js'
import Select from '@element-plus/components/select'
import { ElFormItem } from '@element-plus/components/form'
import TimeSelect from '../src/time-select.vue'
dayjs.extend(customParseFormat)
const { Option } = Select
const _mount = (template: string, data, otherObj?) =>
mount(
{
components: {
'el-time-select': TimeSelect,
'el-form-item': ElFormItem,
},
template,
data,
...otherObj,
},
{
attachTo: 'body',
}
)
afterEach(() => {
document.documentElement.innerHTML = ''
})
describe('TimeSelect', () => {
it('create', async () => {
const wrapper = _mount(
``,
() => ({
readonly: true,
})
)
const outerInput = wrapper.find('.el-select')
expect(outerInput.classes()).toContain('customClass')
expect(outerInput.attributes().style).toBeDefined()
})
it('set default value', async () => {
const wrapper = _mount(``, () => ({
value: '14:30',
}))
const input = wrapper.find('input')
input.trigger('blur')
input.trigger('focus')
await nextTick()
expect(document.querySelector('.selected')).toBeDefined()
expect(document.querySelector('.selected')?.textContent).toBe('14:30')
})
it('set minTime', async () => {
const wrapper = _mount(``, () => ({}))
const input = wrapper.find('input')
input.trigger('blur')
input.trigger('focus')
await nextTick()
const elms = document.querySelectorAll('.is-disabled')
const elm = elms[elms.length - 1]
expect(elm.textContent).toBe('14:30')
})
it('set maxTime', async () => {
const wrapper = _mount(``, () => ({}))
const input = wrapper.find('input')
input.trigger('blur')
input.trigger('focus')
await nextTick()
const elm = document.querySelector('.is-disabled')
expect(elm?.textContent).toBe('14:30')
})
it('set value update', async () => {
const wrapper = _mount(``, () => ({
value: '10:00',
}))
await nextTick()
const input = wrapper.find('input')
expect(input.exists()).toBe(true)
expect(input.element.value).toBe('10:00')
wrapper.setData({ value: '10:30' })
await nextTick()
expect(wrapper.vm.value).toBe('10:30')
expect(input.element.value).toBe('10:30')
})
it('update value', async () => {
const wrapper = _mount(``, () => ({
value: '10:00',
}))
await nextTick()
const vm = wrapper.vm as any
const input = wrapper.find('input')
expect(vm.value).toBe('10:00')
expect(input.element.value).toBe('10:00')
const option = wrapper
.findAllComponents(Option)
.find((w) => w.text().trim() === '11:00')
expect(option?.exists()).toBe(true)
option?.trigger('click')
await nextTick()
expect(vm.value).toBe('11:00')
expect(input.element.value).toBe('11:00')
})
it('set disabled', async () => {
const wrapper = _mount(
``,
() => ({
value: '10:00',
disabled: false,
})
)
const vm = wrapper.vm as any
const select = wrapper.findComponent({ name: 'ElSelect' })
expect(select.props().disabled).toBe(false)
vm.disabled = true
await nextTick()
expect(select.props().disabled).toBe(true)
})
it('set editable', async () => {
const wrapper = _mount(
``,
() => ({
value: '10:00',
editable: false,
})
)
const vm = wrapper.vm as any
const select = wrapper.findComponent({ name: 'ElSelect' })
expect(select.props().filterable).toBe(false)
vm.editable = true
await nextTick()
expect(select.props().filterable).toBe(true)
})
it('ref focus', async () => {
_mount(``, () => ({}), {
mounted() {
this.$refs.input.focus()
},
})
await nextTick()
await nextTick()
const popperEl = document.querySelector('.el-select__popper')
const attr = popperEl?.getAttribute('aria-hidden')
expect(attr).toEqual('false')
})
it('ref blur', async () => {
_mount(``, () => ({}), {
async mounted() {
this.$refs.input.focus()
await nextTick()
this.$refs.input.blur()
},
})
await nextTick()
await nextTick()
const popperEl = document.querySelector('.el-select__popper')
const attr = popperEl?.getAttribute('aria-hidden')
expect(attr).toEqual('true')
})
it('set format', async () => {
const wrapper = _mount(
`
`,
() => ({ value: '' })
)
const input = wrapper.find('.el-input__inner')
await input.trigger('click')
await nextTick()
const option = document.querySelector('.el-select-dropdown__item')
expect(option?.textContent).toBe('01:00 PM')
})
describe('form item accessibility integration', () => {
it('automatic id attachment', async () => {
const wrapper = _mount(
`
`,
() => ({})
)
await nextTick()
const formItem = wrapper.find('[data-test-ref="item"]')
const formItemLabel = formItem.find('.el-form-item__label')
const timeSelectInput = wrapper.find('.el-input__inner')
expect(formItem.attributes().role).toBeFalsy()
expect(formItemLabel.attributes().for).toBe(
timeSelectInput.attributes().id
)
})
it('specified id attachment', async () => {
const wrapper = _mount(
`
`,
() => ({})
)
await nextTick()
const formItem = wrapper.find('[data-test-ref="item"]')
const formItemLabel = formItem.find('.el-form-item__label')
const timeSelectInput = wrapper.find('.el-input__inner')
expect(formItem.attributes().role).toBeFalsy()
expect(timeSelectInput.attributes().id).toBe('foobar')
expect(formItemLabel.attributes().for).toBe(
timeSelectInput.attributes().id
)
})
it('form item role is group when multiple inputs', async () => {
const wrapper = _mount(
`
`,
() => ({})
)
await nextTick()
const formItem = wrapper.find('[data-test-ref="item"]')
expect(formItem.attributes().role).toBe('group')
})
})
})