test: add tests for selects

Author: alexdln

test/nuxt/components/Select/Base.spec.ts

@@ -0,0 +1,78 @@
+import { describe, expect, it } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import SelectBase from '~/components/Select/Base.vue'
+
+describe('SelectBase', () => {
+  describe('rendering', () => {
+    it('renders native select with slot options', async () => {
+      const component = await mountSuspended(SelectBase, {
+        slots: {
+          default:
+            '<option value="option1">option 1</option><option value="option2">option 2</option>',
+        },
+      })
+      const select = component.find('select')
+      expect(select.exists()).toBe(true)
+      expect(component.findAll('option')).toHaveLength(2)
+    })
+
+    it('renders with initial modelValue', async () => {
+      const component = await mountSuspended(SelectBase, {
+        props: { modelValue: 'option2' },
+        slots: {
+          default:
+            '<option value="option1">option 1</option><option value="option2">option 2</option>',
+        },
+      })
+      const select = component.find('select').element
+      expect(select.value).toBe('option2')
+    })
+
+    it('renders without disabled attribute when disabled is false', async () => {
+      const component = await mountSuspended(SelectBase, {
+        props: { disabled: false },
+        slots: { default: '<option value="option1">option 1</option>' },
+      })
+      const select = component.find('select')
+      expect(select.attributes('disabled')).toBeUndefined()
+    })
+
+    it('renders disabled when disabled is true', async () => {
+      const component = await mountSuspended(SelectBase, {
+        props: { disabled: true },
+        slots: { default: '<option value="option1">option 1</option>' },
+      })
+      const select = component.find('select').element
+      expect(select.disabled).toBe(true)
+    })
+  })
+
+  describe('v-model', () => {
+    it('emits update:modelValue when selection changes', async () => {
+      const component = await mountSuspended(SelectBase, {
+        props: { modelValue: 'option1' },
+        slots: {
+          default:
+            '<option value="option1">option 1</option><option value="option2">option 2</option>',
+        },
+      })
+      const select = component.find('select')
+      await select.setValue('option2')
+      expect(component.emitted('update:modelValue')).toBeTruthy()
+      expect(component.emitted('update:modelValue')?.at(-1)).toEqual(['option2'])
+    })
+
+    it('reflects modelValue prop changes', async () => {
+      const component = await mountSuspended(SelectBase, {
+        props: { modelValue: 'option1' },
+        slots: {
+          default:
+            '<option value="option1">option 1</option><option value="option2">option 2</option>',
+        },
+      })
+      await component.setProps({ modelValue: 'option2' })
+      const select = component.find('select').element
+      expect(select.value).toBe('option2')
+    })
+  })
+})

test/nuxt/components/Select/Field.spec.ts

@@ -0,0 +1,124 @@
+import { describe, expect, it } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import SelectField from '~/components/Select/Field.vue'
+
+const defaultItems = [
+  { label: 'Option 1', value: 'option1' },
+  { label: 'Option 2', value: 'option2' },
+]
+
+describe('SelectField', () => {
+  describe('rendering', () => {
+    it('renders options from items prop', async () => {
+      const component = await mountSuspended(SelectField, {
+        props: { id: 'select', items: defaultItems },
+      })
+      const options = component.findAll('option')
+      expect(options).toHaveLength(2)
+      expect(options[0]?.text()).toBe('Option 1')
+      expect(options[1]?.text()).toBe('Option 2')
+      expect(options[0]?.attributes('value')).toBe('option1')
+      expect(options[1]?.attributes('value')).toBe('option2')
+    })
+
+    it('renders label when provided', async () => {
+      const component = await mountSuspended(SelectField, {
+        props: { id: 'select', items: defaultItems, label: 'Choose one' },
+      })
+      const label = component.find('label')
+      expect(label.exists()).toBe(true)
+      expect(label.text()).toBe('Choose one')
+      expect(label.attributes('for')).toBe('select')
+    })
+
+    it('renders disabled option when item.disabled is true', async () => {
+      const component = await mountSuspended(SelectField, {
+        props: {
+          id: 'select',
+          items: [
+            { label: 'Enabled', value: 'on' },
+            { label: 'Disabled', value: 'off', disabled: true },
+          ],
+        },
+      })
+      const options = component.findAll('option')
+      expect(options[1]?.element?.disabled).toBe(true)
+    })
+
+    it('applies block class when block is true', async () => {
+      const component = await mountSuspended(SelectField, {
+        props: { id: 'select', items: defaultItems, block: true },
+      })
+      const wrapper = component.find('.relative')
+      expect(wrapper.classes()).toContain('w-full')
+      const select = component.find('select')
+      expect(select.classes()).toContain('w-full')
+    })
+  })
+
+  describe('v-model', () => {
+    it('emits update:modelValue when option is selected', async () => {
+      const component = await mountSuspended(SelectField, {
+        props: { id: 'select', items: defaultItems, modelValue: 'option1' },
+      })
+      const select = component.find('select')
+      await select.setValue('option2')
+      expect(component.emitted('update:modelValue')).toBeTruthy()
+      expect(component.emitted('update:modelValue')?.at(-1)).toEqual(['option2'])
+    })
+
+    it('reflects modelValue prop changes', async () => {
+      const component = await mountSuspended(SelectField, {
+        props: { id: 'select', items: defaultItems, modelValue: 'option1' },
+      })
+      await component.setProps({ modelValue: 'option2' })
+      const select = component.find('select').element
+      expect(select.value).toBe('option2')
+    })
+  })
+
+  describe('disabled', () => {
+    it('passes disabled to SelectBase', async () => {
+      const component = await mountSuspended(SelectField, {
+        props: { id: 'select', items: defaultItems, disabled: true },
+      })
+      const select = component.find('select').element
+      expect(select.disabled).toBe(true)
+    })
+  })
+
+  describe('accessibility', () => {
+    it('chevron has aria-hidden', async () => {
+      const component = await mountSuspended(SelectField, {
+        props: { id: 'select', items: defaultItems },
+      })
+      const chevron = component.find('span[aria-hidden="true"]')
+      expect(chevron.exists()).toBe(true)
+    })
+
+    it('render sr-only label when hiddenLabel is true', async () => {
+      const component = await mountSuspended(SelectField, {
+        props: {
+          id: 'select',
+          items: defaultItems,
+          label: 'Hidden',
+          hiddenLabel: true,
+        },
+      })
+      const label = component.find('label')
+      expect(label.exists()).toBe(true)
+      expect(label.classes()).toContain('sr-only')
+      expect(label.text()).toBe('Hidden')
+    })
+
+    it('associates select with id', async () => {
+      const component = await mountSuspended(SelectField, {
+        props: { id: 'my-select', items: defaultItems, label: 'My Select' },
+      })
+      const select = component.find('select')
+      expect(select.attributes('id')).toBe('my-select')
+      const label = component.find('label')
+      expect(label.attributes('for')).toBe('my-select')
+    })
+  })
+})