Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor(components): [time-select] use JSX in Unit test #9101

Merged
merged 1 commit into from
Jul 30, 2022
Merged

refactor(components): [time-select] use JSX in Unit test #9101

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
171 changes: 75 additions & 96 deletions ...time-select/__tests__/time-select.test.ts → ...ime-select/__tests__/time-select.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// @ts-nocheck
import { nextTick } from 'vue'
import { nextTick, ref } from 'vue'
import { mount } from '@vue/test-utils'
import { afterEach, describe, expect, it } from 'vitest'
import dayjs from 'dayjs'
Expand All @@ -11,43 +11,25 @@ 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(
`<el-time-select :style="{color:'red'}" class="customClass" />`,
() => ({
readonly: true,
})
)
const wrapper = mount(() => (
<TimeSelect style={{ color: 'red' }} class="customClass" />
))

const outerInput = wrapper.find('.el-select')
expect(outerInput.classes()).toContain('customClass')
expect(outerInput.attributes().style).toBeDefined()
})

it('set default value', async () => {
const wrapper = _mount(`<el-time-select v-model="value" />`, () => ({
value: '14:30',
}))
const value = ref('14:30')
const wrapper = mount(() => <TimeSelect v-model={value.value} />)

const input = wrapper.find('input')
input.trigger('blur')
input.trigger('focus')
Expand All @@ -57,7 +39,8 @@ describe('TimeSelect', () => {
})

it('set minTime', async () => {
const wrapper = _mount(`<el-time-select minTime="14:30" />`, () => ({}))
const wrapper = mount(() => <TimeSelect minTime="14:30" />)

const input = wrapper.find('input')
input.trigger('blur')
input.trigger('focus')
Expand All @@ -68,7 +51,8 @@ describe('TimeSelect', () => {
})

it('set maxTime', async () => {
const wrapper = _mount(`<el-time-select maxTime="14:30" />`, () => ({}))
const wrapper = mount(() => <TimeSelect maxTime="14:30" />)

const input = wrapper.find('input')
input.trigger('blur')
input.trigger('focus')
Expand All @@ -78,28 +62,28 @@ describe('TimeSelect', () => {
})

it('set value update', async () => {
const wrapper = _mount(`<el-time-select v-model="value" />`, () => ({
value: '10:00',
}))
await nextTick()
const value = ref('10:00')
const wrapper = mount(() => <TimeSelect v-model={value.value} />)

await nextTick()
const input = wrapper.find('input')

expect(input.exists()).toBe(true)
expect(input.element.value).toBe('10:00')

wrapper.setData({ value: '10:30' })
value.value = '10:30'
await nextTick()
expect(wrapper.vm.value).toBe('10:30')

expect(wrapper.findComponent(TimeSelect).vm.value).toBe('10:30')
expect(input.element.value).toBe('10:30')
})

it('update value', async () => {
const wrapper = _mount(`<el-time-select v-model="value" />`, () => ({
value: '10:00',
}))
const value = ref('10:00')
const wrapper = mount(() => <TimeSelect v-model={value.value} />)

await nextTick()
const vm = wrapper.vm as any
const vm = wrapper.findComponent(TimeSelect).vm
const input = wrapper.find('input')
expect(vm.value).toBe('10:00')
expect(input.element.value).toBe('10:00')
Expand All @@ -116,45 +100,42 @@ describe('TimeSelect', () => {
})

it('set disabled', async () => {
const wrapper = _mount(
`<el-time-select v-model="value" :disabled="disabled" />`,
() => ({
value: '10:00',
disabled: false,
})
)
const vm = wrapper.vm as any
const value = ref('10:00')
const disabled = ref(false)
const wrapper = mount(() => (
<TimeSelect v-model={value.value} disabled={disabled.value} />
))

const select = wrapper.findComponent({ name: 'ElSelect' })
expect(select.props().disabled).toBe(false)

vm.disabled = true
disabled.value = true
await nextTick()
expect(select.props().disabled).toBe(true)
})

it('set editable', async () => {
const wrapper = _mount(
`<el-time-select v-model="value" :editable="editable" />`,
() => ({
value: '10:00',
editable: false,
})
)
const vm = wrapper.vm as any
const value = ref('10:00')
const editable = ref(false)
const wrapper = mount(() => (
<TimeSelect v-model={value.value} editable={editable.value} />
))

const select = wrapper.findComponent({ name: 'ElSelect' })
expect(select.props().filterable).toBe(false)

vm.editable = true
editable.value = true
await nextTick()
expect(select.props().filterable).toBe(true)
})

it('ref focus', async () => {
_mount(`<el-time-select ref="input" />`, () => ({}), {
mounted() {
this.$refs.input.focus()
},
const wrapper = mount(() => <TimeSelect />, {
attachTo: document.body,
})

wrapper.findComponent(TimeSelect).vm.$.exposed.focus()

await nextTick()
await nextTick()

Expand All @@ -164,13 +145,14 @@ describe('TimeSelect', () => {
})

it('ref blur', async () => {
_mount(`<el-time-select ref="input" />`, () => ({}), {
async mounted() {
this.$refs.input.focus()
await nextTick()
this.$refs.input.blur()
},
const wrapper = mount(() => <TimeSelect />, {
attachTo: document.body,
})

wrapper.findComponent(TimeSelect).vm.$.exposed.focus()
await nextTick()
wrapper.findComponent(TimeSelect).vm.$.exposed.blur()

await nextTick()
await nextTick()

Expand All @@ -180,17 +162,17 @@ describe('TimeSelect', () => {
})

it('set format', async () => {
const wrapper = _mount(
`<el-time-select
v-model="value"
start="13:00"
step="00:30"
end="13:30"
format="hh:mm A"
>
</el-time-select>`,
() => ({ value: '' })
)
const value = ref('')
const wrapper = mount(() => (
<TimeSelect
v-model={value.value}
start="13:00"
step="00:30"
end="13:30"
format="hh:mm A"
/>
))

const input = wrapper.find('.el-input__inner')
await input.trigger('click')
await nextTick()
Expand All @@ -200,12 +182,11 @@ describe('TimeSelect', () => {

describe('form item accessibility integration', () => {
it('automatic id attachment', async () => {
const wrapper = _mount(
`<el-form-item label="Foobar" data-test-ref="item">
<el-time-select />
</el-form-item>`,
() => ({})
)
const wrapper = mount(() => (
<ElFormItem label="Foobar" data-test-ref="item">
<TimeSelect />
</ElFormItem>
))

await nextTick()
const formItem = wrapper.find('[data-test-ref="item"]')
Expand All @@ -218,12 +199,11 @@ describe('TimeSelect', () => {
})

it('specified id attachment', async () => {
const wrapper = _mount(
`<el-form-item label="Foobar" data-test-ref="item">
<el-time-select id="foobar" />
</el-form-item>`,
() => ({})
)
const wrapper = mount(() => (
<ElFormItem label="Foobar" data-test-ref="item">
<TimeSelect id="foobar" />
</ElFormItem>
))

await nextTick()
const formItem = wrapper.find('[data-test-ref="item"]')
Expand All @@ -237,13 +217,12 @@ describe('TimeSelect', () => {
})

it('form item role is group when multiple inputs', async () => {
const wrapper = _mount(
`<el-form-item label="Foobar" data-test-ref="item">
<el-time-select />
<el-time-select />
</el-form-item>`,
() => ({})
)
const wrapper = mount(() => (
<ElFormItem label="Foobar" data-test-ref="item">
<TimeSelect />
<TimeSelect />
</ElFormItem>
))

await nextTick()
const formItem = wrapper.find('[data-test-ref="item"]')
Expand Down