fix(InputMenu/Select/SelectMenu): improve types (#2471)

This commit is contained in:
Yasser Lahbibi
2024-10-28 18:08:24 +01:00
committed by GitHub
parent 1402436c2b
commit db8111d783
10 changed files with 226 additions and 38 deletions

View File

@@ -5,6 +5,7 @@ import theme from '#build/ui/input'
import { renderForm } from '../utils/form'
import { flushPromises, mount } from '@vue/test-utils'
import type { FormInputEvents } from '~/src/module'
import { expectEmitPayloadType } from '../utils/types'
describe('InputMenu', () => {
const sizes = Object.keys(theme.variants.size) as any
@@ -157,5 +158,66 @@ describe('InputMenu', () => {
await flushPromises()
expect(wrapper.text()).not.toContain('Error message')
})
test('should have the correct types', () => {
// with object item
expectEmitPayloadType('update:modelValue', () => InputMenu({
items: [{ label: 'foo', value: 'bar' }]
})).toEqualTypeOf<[{ label: string, value: string }]>()
// with object item and multiple
expectEmitPayloadType('update:modelValue', () => InputMenu({
items: [{ label: 'foo', value: 1 }],
multiple: true
})).toEqualTypeOf<[{ label: string, value: number }[]]>()
// with object item and valueKey
expectEmitPayloadType('update:modelValue', () => InputMenu({
items: [{ label: 'foo', value: 'bar' }],
valueKey: 'value'
})).toEqualTypeOf<[string]>()
// with object item and multiple and valueKey
expectEmitPayloadType('update:modelValue', () => InputMenu({
items: [{ label: 'foo', value: 1 }],
multiple: true,
valueKey: 'value'
})).toEqualTypeOf<[number[]]>()
// with string item
expectEmitPayloadType('update:modelValue', () => InputMenu({
items: ['foo']
})).toEqualTypeOf<[string]>()
// with string item and multiple
expectEmitPayloadType('update:modelValue', () => InputMenu({
items: ['foo'],
multiple: true
})).toEqualTypeOf<[string[]]>()
// with groups
expectEmitPayloadType('update:modelValue', () => InputMenu({
items: [['foo']]
})).toEqualTypeOf<[string]>()
// with groups and multiple
expectEmitPayloadType('update:modelValue', () => InputMenu({
items: [['foo']],
multiple: true
})).toEqualTypeOf<[string[]]>()
// with groups, multiple and mixed types
expectEmitPayloadType('update:modelValue', () => InputMenu({
items: [['foo', { value: 1 }], [{ value: 'bar' }, 2]],
multiple: true
})).toEqualTypeOf<[(string | number | { value: string } | { value: number })[]]>()
// with groups, multiple, mixed types and valueKey
expectEmitPayloadType('update:modelValue', () => InputMenu({
items: [['foo', { value: 1 }], [{ value: 'bar' }, 2]],
multiple: true,
valueKey: 'value'
})).toEqualTypeOf<[(string | number)[]]>()
})
})
})

View File

@@ -5,6 +5,7 @@ import ComponentRender from '../component-render'
import theme from '#build/ui/input'
import { renderForm } from '../utils/form'
import type { FormInputEvents } from '~/src/module'
import { expectEmitPayloadType } from '../utils/types'
describe('Select', () => {
const sizes = Object.keys(theme.variants.size) as any
@@ -166,5 +167,33 @@ describe('Select', () => {
await flushPromises()
expect(wrapper.text()).not.toContain('Error message')
})
test('should have the correct types', () => {
// with object item
expectEmitPayloadType('update:modelValue', () => Select({
items: [{ label: 'foo', value: 'bar' }]
})).toEqualTypeOf<[string]>()
// with string item
expectEmitPayloadType('update:modelValue', () => Select({
items: ['foo']
})).toEqualTypeOf<[string]>()
// with groups
expectEmitPayloadType('update:modelValue', () => Select({
items: [['foo']]
})).toEqualTypeOf<[string]>()
// with groups and mixed types
expectEmitPayloadType('update:modelValue', () => Select({
items: [['foo', { value: 1 }], [{ value: 'bar' }, 2]]
})).toEqualTypeOf<[string | number]>()
// with groups, mixed types and valueKey = undefined
expectEmitPayloadType('update:modelValue', () => Select({
items: [['foo', { value: 1 }], [{ value: 'bar' }, 2]],
valueKey: undefined
})).toEqualTypeOf<[string | number]>()
})
})
})

View File

@@ -5,6 +5,7 @@ import theme from '#build/ui/input'
import { renderForm } from '../utils/form'
import { flushPromises, mount } from '@vue/test-utils'
import type { FormInputEvents } from '~/src/module'
import { expectEmitPayloadType } from '../utils/types'
describe('SelectMenu', () => {
const sizes = Object.keys(theme.variants.size) as any
@@ -161,5 +162,66 @@ describe('SelectMenu', () => {
await flushPromises()
expect(wrapper.text()).not.toContain('Error message')
})
test('should have the correct types', () => {
// with object item
expectEmitPayloadType('update:modelValue', () => SelectMenu({
items: [{ label: 'foo', value: 'bar' }]
})).toEqualTypeOf<[{ label: string, value: string }]>()
// with object item and multiple
expectEmitPayloadType('update:modelValue', () => SelectMenu({
items: [{ label: 'foo', value: 1 }],
multiple: true
})).toEqualTypeOf<[{ label: string, value: number }[]]>()
// with object item and valueKey
expectEmitPayloadType('update:modelValue', () => SelectMenu({
items: [{ label: 'foo', value: 'bar' }],
valueKey: 'value'
})).toEqualTypeOf<[string]>()
// with object item and multiple and valueKey
expectEmitPayloadType('update:modelValue', () => SelectMenu({
items: [{ label: 'foo', value: 1 }],
multiple: true,
valueKey: 'value'
})).toEqualTypeOf<[number[]]>()
// with string item
expectEmitPayloadType('update:modelValue', () => SelectMenu({
items: ['foo']
})).toEqualTypeOf<[string]>()
// with string item and multiple
expectEmitPayloadType('update:modelValue', () => SelectMenu({
items: ['foo'],
multiple: true
})).toEqualTypeOf<[string[]]>()
// with groups
expectEmitPayloadType('update:modelValue', () => SelectMenu({
items: [['foo']]
})).toEqualTypeOf<[string]>()
// with groups and multiple
expectEmitPayloadType('update:modelValue', () => SelectMenu({
items: [['foo']],
multiple: true
})).toEqualTypeOf<[string[]]>()
// with groups, multiple and mixed types
expectEmitPayloadType('update:modelValue', () => SelectMenu({
items: [['foo', { value: 1 }], [{ value: 'bar' }, 2]],
multiple: true
})).toEqualTypeOf<[(string | number | { value: string } | { value: number })[]]>()
// with groups, multiple, mixed types and valueKey
expectEmitPayloadType('update:modelValue', () => SelectMenu({
items: [['foo', { value: 1 }], [{ value: 'bar' }, 2]],
multiple: true,
valueKey: 'value'
})).toEqualTypeOf<[(string | number)[]]>()
})
})
})