feat(select): add handling for string options (#401)

* feat(select): add handling for string options * feat(select): updated dropdown styles Co-authored-by: nandi95 <[email protected]> Co-authored-by: Nandor Kraszlan <[email protected]> Co-authored-by: nandi95 <[email protected]>
karnama · Feb 5, 2022 · 8a28218 · 8a28218
1 parent daa82c5
commit 8a28218
Show file tree

Hide file tree

Showing 6 changed files with 192 additions and 64 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@karnama/vueish",
-    "version": "0.11.0",
+    "version": "0.12.0",
     "files": [
         "dist",
         "types"

diff --git a/src/components/select/Demo.vue b/src/components/select/Demo.vue
@@ -8,41 +8,74 @@
             {{ error ? 'Remove' : 'Set' }} Error state
         </UIButton>
     </div>
-    <UISelect v-model="selected"
-              :options="options"
-              clearable
-              :error="error"
-              :large="large"
-              label="Clearable select"
-              name="select-1" />
+    <div class="space-y-10">
+        <UISelect v-model="selected"
+                  :options="options"
+                  clearable
+                  :error="error"
+                  :large="large"
+                  label="Clearable select"
+                  name="select-1" />
+        <span class="text-sm text-gray-400">
+            Bound: {{ selected }}
+        </span>
 
-    <UISelect v-model="multiSelected"
-              multi
-              class="my-12"
-              :options="options"
-              :error="error"
-              disabled
-              :large="large"
-              label="Disabled multi select"
-              name="select-2" />
+        <UISelect v-model="multiSelected"
+                  multi
+                  :options="options"
+                  :error="error"
+                  disabled
+                  :large="large"
+                  label="Disabled multi select"
+                  name="select-2" />
+        <span class="text-sm text-gray-400">
+            Bound: {{ multiSelected }}
+        </span>
 
-    <UISelect v-model="multiSelected"
-              multi
-              class="my-12"
-              :options="options"
-              label="Multi select"
-              :error="error"
-              :large="large"
-              name="select-2" />
+        <UISelect v-model="multiSelected"
+                  multi
+                  :options="options"
+                  label="Multi select"
+                  :error="error"
+                  :large="large"
+                  name="select-2" />
+        <span class="text-sm text-gray-400">
+            Bound: {{ multiSelected }}
+        </span>
 
-    <UISelect v-model="multiSelected"
-              multi
-              clearable
-              label="Clearable multi select"
-              name="select-3"
-              :error="error"
-              :large="large"
-              :options="options" />
+        <UISelect v-model="multiSelected"
+                  multi
+                  clearable
+                  label="Clearable multi select"
+                  name="select-3"
+                  :error="error"
+                  :large="large"
+                  :options="options" />
+        <span class="text-sm text-gray-400">
+            Bound: {{ multiSelected }}
+        </span>
+
+        <UISelect v-model="selectedSimple"
+                  :options="['Foo', 'Bar', 'Baz']"
+                  clearable
+                  :large="large"
+                  label="Array of strings as select"
+                  name="select-4" />
+        <span class="text-sm text-gray-400">
+            Bound: {{ selectedSimple }}
+        </span>
+
+        <UISelect v-model="multiSelectedSimple"
+                  :options="['Foo', 'Bar', 'Baz']"
+                  multi
+                  clearable
+                  :large="large"
+                  label="Array of strings as multi-select"
+                  name="select-4" />
+        <span class="text-sm text-gray-400">
+            Bound: {{ multiSelectedSimple }}
+        </span>
+    </div>
 </template>
 
 <script lang="ts">
@@ -73,12 +106,16 @@ export default defineComponent({
     setup() {
         const selected = ref(null);
         const multiSelected = ref(null);
+        const selectedSimple = ref('Foo');
+        const multiSelectedSimple = ref(['Foo', 'Bar']);
         const large = ref(false);
         const error = ref('');
 
         return {
             selected,
             multiSelected,
+            selectedSimple,
+            multiSelectedSimple,
             options,
             large,
             error

diff --git a/src/components/select/UISelect.test.ts b/src/components/select/UISelect.test.ts
@@ -21,6 +21,12 @@ const options = [
     }
 ] as const;
 
+const stringOptions = [
+    'Foo',
+    'Bar',
+    'Baz'
+] as const;
+
 const getList = (): DOMWrapper<HTMLDivElement> | null => {
     const element = document.querySelector<HTMLDivElement>(selectorMap.list);
 
@@ -71,6 +77,23 @@ describe('UISelect', () => {
             wrapper.unmount();
         });
 
+        it('should display the given string options when open', async () => {
+            const wrapper  = mount(UISelect, {
+                props: {
+                    options: stringOptions,
+                    name: 'select',
+                    modelValue: null
+                }
+            });
+
+            expect(getList()).toBeNull();
+            await wrapper.get(selectorMap.currentSelection).trigger('click');
+            const htmlOptions = getList()!.findAll(selectorMap.options);
+            expect(htmlOptions).toHaveLength(stringOptions.length);
+            expect(htmlOptions[0].html()).toContain(stringOptions[0]);
+            wrapper.unmount();
+        });
+
         it('should display the given placeholder', () => {
             const wrapper = mount(UISelect, {
                 props: {
@@ -139,6 +162,29 @@ describe('UISelect', () => {
         wrapper.unmount();
     });
 
+    it('should bind the selected string option to v-model', async () => {
+        const wrapper = mount(UISelect, {
+            props: {
+                options: stringOptions,
+                modelValue: null,
+                name: 'select',
+                'onUpdate:modelValue': async (modelValue: any) => await wrapper.setProps({ modelValue })
+            }
+        });
+
+        await wrapper.get(selectorMap.currentSelection).trigger('click');
+        await getList()!.get(selectorMap.options).trigger('click');
+        expect(wrapper.lastEventValue()).toStrictEqual([stringOptions[0]]);
+
+        await wrapper.get(selectorMap.currentSelection).trigger('click');
+        const selected = getList()!.findAll(selectorMap.options)
+            .filter(option => option.attributes()['aria-selected'] === 'true');
+
+        expect(selected).toHaveLength(1);
+        expect(selected[0].text()).toContain(stringOptions[0]);
+        wrapper.unmount();
+    });
+
     it('should close the list on selection on single select an option', async () => {
         const wrapper = mount(UISelect, {
             props: {
@@ -406,6 +452,28 @@ describe('UISelect', () => {
         wrapper.unmount();
     });
 
+    it('should display the string options when the input is closed', async () => {
+        const wrapper = mount(UISelect, {
+            props: {
+                options: stringOptions,
+                modelValue: [],
+                name: 'select',
+                'onUpdate:modelValue': async (modelValue: any) => await wrapper.setProps({ modelValue }),
+                multi: true
+            }
+        });
+
+        await wrapper.get(selectorMap.currentSelection).trigger('click');
+        const htmlOptions = getList()!.findAll(selectorMap.options);
+
+        for await (const option of htmlOptions) {
+            await option.trigger('click');
+        }
+
+        expect(wrapper.html()).toContain(stringOptions.join(', '));
+        wrapper.unmount();
+    });
+
     describe('keyboard events', () => {
         it('should open the list on space down when focused', async () => {
             const wrapper = mount(UISelect, {