fix(input-select): value and modelValue prop type is not correct …

…when it's undefined (#191) (#193) close #191
globalbrain · Jan 18, 2023 · 0ed0bc3 · 0ed0bc3
1 parent f04960a
commit 0ed0bc3
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 12 deletions.
diff --git a/lib/components/SInputSelect.vue b/lib/components/SInputSelect.vue
@@ -15,7 +15,7 @@ export interface Option {
   disabled?: boolean
 }
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   size?: Size
   label?: string
   note?: string
@@ -28,7 +28,10 @@ const props = defineProps<{
   modelValue?: Value
   validation?: Validatable
   hideError?: boolean
-}>()
+}>(), {
+  value: undefined,
+  modelValue: undefined
+})
 
 const emit = defineEmits<{
   (e: 'update:model-value', value: Value): void
@@ -56,14 +59,6 @@ function isSelectedOption(option: Option): boolean {
   return option.value === _value.value
 }
 
-function focus() {
-  isFocused.value = true
-}
-
-function blur() {
-  isFocused.value = false
-}
-
 function emitChange(e: any): void {
   if (!props.disabled) {
     props.validation?.$touch()
@@ -92,8 +87,8 @@ function emitChange(e: any): void {
         class="select"
         :class="{ 'is-not-selected': isNotSelected }"
         :disabled="disabled"
-        @focus="focus"
-        @blur="blur"
+        @focus="isFocused = true"
+        @blur="isFocused = false"
         @change="emitChange"
       >
         <option

diff --git a/tests/components/SInputSelect.spec.ts b/tests/components/SInputSelect.spec.ts
@@ -29,4 +29,47 @@ describe('components/SInputSelect', async () => {
     assertNotEmitted(wrapper, 'update:model-value')
     assertNotEmitted(wrapper, 'change')
   })
+
+  test('it accepts `value` prop', async () => {
+    const wrapper = mount(SInputSelect, {
+      props: {
+        options: [
+          { label: 'Item 001', value: 1 },
+          { label: 'Item 002', value: 2 }
+        ],
+        value: 2
+      }
+    })
+
+    expect(wrapper.find('select').element.value).toBe('1')
+  })
+
+  test('it accepts `modelValue` prop', () => {
+    const wrapper = mount(SInputSelect, {
+      props: {
+        options: [
+          { label: 'Item 001', value: 1 },
+          { label: 'Item 002', value: 2 }
+        ],
+        modelValue: 2
+      }
+    })
+
+    expect(wrapper.find('select').element.value).toBe('1')
+  })
+
+  test('it shows placeholder unless selected', async () => {
+    const wrapper = mount(SInputSelect, {
+      props: {
+        options: [
+          { label: 'Item 001', value: 1 },
+          { label: 'Item 002', value: 2 }
+        ],
+        placeholder: 'Placeholder'
+      }
+    })
+
+    const selectElement = wrapper.find('select').element
+    expect(selectElement.options[selectElement.selectedIndex].text).toBe('Placeholder')
+  })
 })