davidwindham.com
forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
1import { describe, expect, it } from 'vitest'
2import { mountSuspended } from '@nuxt/test-utils/runtime'
3import SelectBase from '~/components/Select/Base.vue'
4
5describe('SelectBase', () => {
6 describe('rendering', () => {
7 it('renders native select with slot options', async () => {
8 const component = await mountSuspended(SelectBase, {
9 slots: {
10 default:
11 '<option value="option1">option 1</option><option value="option2">option 2</option>',
12 },
13 })
14 const select = component.find('select')
15 expect(select.exists()).toBe(true)
16 expect(component.findAll('option')).toHaveLength(2)
17 })
18
19 it('renders with initial modelValue', async () => {
20 const component = await mountSuspended(SelectBase, {
21 props: { modelValue: 'option2' },
22 slots: {
23 default:
24 '<option value="option1">option 1</option><option value="option2">option 2</option>',
25 },
26 })
27 const select = component.find('select').element
28 expect(select.value).toBe('option2')
29 })
30
31 it('renders without disabled attribute when disabled is false', async () => {
32 const component = await mountSuspended(SelectBase, {
33 props: { disabled: false },
34 slots: { default: '<option value="option1">option 1</option>' },
35 })
36 const select = component.find('select')
37 expect(select.attributes('disabled')).toBeUndefined()
38 })
39
40 it('renders disabled when disabled is true', async () => {
41 const component = await mountSuspended(SelectBase, {
42 props: { disabled: true },
43 slots: { default: '<option value="option1">option 1</option>' },
44 })
45 const select = component.find('select').element
46 expect(select.disabled).toBe(true)
47 })
48 })
49
50 describe('v-model', () => {
51 it('emits update:modelValue when selection changes', async () => {
52 const component = await mountSuspended(SelectBase, {
53 props: { modelValue: 'option1' },
54 slots: {
55 default:
56 '<option value="option1">option 1</option><option value="option2">option 2</option>',
57 },
58 })
59 const select = component.find('select')
60 await select.setValue('option2')
61 expect(component.emitted('update:modelValue')).toBeTruthy()
62 expect(component.emitted('update:modelValue')?.at(-1)).toEqual(['option2'])
63 })
64
65 it('reflects modelValue prop changes', async () => {
66 const component = await mountSuspended(SelectBase, {
67 props: { modelValue: 'option1' },
68 slots: {
69 default:
70 '<option value="option1">option 1</option><option value="option2">option 2</option>',
71 },
72 })
73 await component.setProps({ modelValue: 'option2' })
74 const select = component.find('select').element
75 expect(select.value).toBe('option2')
76 })
77 })
78})