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 SelectField from '~/components/Select/Field.vue'
4
5const defaultItems = [
6 { label: 'Option 1', value: 'option1' },
7 { label: 'Option 2', value: 'option2' },
8]
9
10describe('SelectField', () => {
11 describe('rendering', () => {
12 it('renders options from items prop', async () => {
13 const component = await mountSuspended(SelectField, {
14 props: { id: 'select', items: defaultItems },
15 })
16 const options = component.findAll('option')
17 expect(options).toHaveLength(2)
18 expect(options[0]?.text()).toBe('Option 1')
19 expect(options[1]?.text()).toBe('Option 2')
20 expect(options[0]?.attributes('value')).toBe('option1')
21 expect(options[1]?.attributes('value')).toBe('option2')
22 })
23
24 it('renders label when provided', async () => {
25 const component = await mountSuspended(SelectField, {
26 props: { id: 'select', items: defaultItems, label: 'Choose one' },
27 })
28 const label = component.find('label')
29 expect(label.exists()).toBe(true)
30 expect(label.text()).toBe('Choose one')
31 expect(label.attributes('for')).toBe('select')
32 })
33
34 it('renders disabled option when item.disabled is true', async () => {
35 const component = await mountSuspended(SelectField, {
36 props: {
37 id: 'select',
38 items: [
39 { label: 'Enabled', value: 'on' },
40 { label: 'Disabled', value: 'off', disabled: true },
41 ],
42 },
43 })
44 const options = component.findAll('option')
45 expect(options[1]?.element?.disabled).toBe(true)
46 })
47
48 it('applies block class when block is true', async () => {
49 const component = await mountSuspended(SelectField, {
50 props: { id: 'select', items: defaultItems, block: true },
51 })
52 const wrapper = component.find('.relative')
53 expect(wrapper.classes()).toContain('w-full')
54 const select = component.find('select')
55 expect(select.classes()).toContain('w-full')
56 })
57 })
58
59 describe('v-model', () => {
60 it('emits update:modelValue when option is selected', async () => {
61 const component = await mountSuspended(SelectField, {
62 props: { id: 'select', items: defaultItems, modelValue: 'option1' },
63 })
64 const select = component.find('select')
65 await select.setValue('option2')
66 expect(component.emitted('update:modelValue')).toBeTruthy()
67 expect(component.emitted('update:modelValue')?.at(-1)).toEqual(['option2'])
68 })
69
70 it('reflects modelValue prop changes', async () => {
71 const component = await mountSuspended(SelectField, {
72 props: { id: 'select', items: defaultItems, modelValue: 'option1' },
73 })
74 await component.setProps({ modelValue: 'option2' })
75 const select = component.find('select').element
76 expect(select.value).toBe('option2')
77 })
78 })
79
80 describe('disabled', () => {
81 it('passes disabled to SelectBase', async () => {
82 const component = await mountSuspended(SelectField, {
83 props: { id: 'select', items: defaultItems, disabled: true },
84 })
85 const select = component.find('select').element
86 expect(select.disabled).toBe(true)
87 })
88 })
89
90 describe('accessibility', () => {
91 it('chevron has aria-hidden', async () => {
92 const component = await mountSuspended(SelectField, {
93 props: { id: 'select', items: defaultItems },
94 })
95 const chevron = component.find('span[aria-hidden="true"]')
96 expect(chevron.exists()).toBe(true)
97 })
98
99 it('render sr-only label when hiddenLabel is true', async () => {
100 const component = await mountSuspended(SelectField, {
101 props: {
102 id: 'select',
103 items: defaultItems,
104 label: 'Hidden',
105 hiddenLabel: true,
106 },
107 })
108 const label = component.find('label')
109 expect(label.exists()).toBe(true)
110 expect(label.classes()).toContain('sr-only')
111 expect(label.text()).toBe('Hidden')
112 })
113
114 it('associates select with id', async () => {
115 const component = await mountSuspended(SelectField, {
116 props: { id: 'my-select', items: defaultItems, label: 'My Select' },
117 })
118 const select = component.find('select')
119 expect(select.attributes('id')).toBe('my-select')
120 const label = component.find('label')
121 expect(label.attributes('for')).toBe('my-select')
122 })
123 })
124})