select fixes

mdl95r · Sep 25, 2023 · f579a7b · f579a7b
1 parent 31c16ae
commit f579a7b
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 31 deletions.
diff --git a/src/components/Select/Select.vue b/src/components/Select/Select.vue
@@ -164,8 +164,8 @@ import { vOnClickOutside } from '@vueuse/components';
 		data() {
 			return {
 				isOpen: false,
-				selection: this.multiselect ? [] : null,
-        selectionName: '',
+				selection: this.multiselect ? [] : this.modelValue || null,
+        selectionName: !this.multiselect && this.modelValue?.name ? this.modelValue.name : '',
         innerSearchable: this.multiselect && this.searchable && false,
 			}
 		},
@@ -197,13 +197,7 @@ import { vOnClickOutside } from '@vueuse/components';
 				}
 			},
 		},
-
-    mounted() {
-      this.selectionName = this.modelValue?.name;
-
-      this.selection = this.modelValue;
-    },
-
+  
 		methods: {
 			onOptionSelect(item) {
 				if (!this.multiselect) {

diff --git a/stories/Select.stories.js b/stories/Select.stories.js
@@ -7,17 +7,19 @@ const socials = [
   { id: 3, name: 'linkedin', icon: 'linkedin' },
 ];
 
+const options = [
+  { id: 1, name: 'text-1' },
+  { id: 2, name: 'text-2' },
+  { id: 3, name: 'text-3' },
+]
+
 export default {
   title: 'Elements/Select',
   component: UiSelect,
   tags: ['autodocs'],
 
   args: {
-    options: [
-      { id: 1, name: 'text-1' },
-      { id: 2, name: 'text-2' },
-      { id: 3, name: 'text-3' },
-    ],
+    options,
     placeholder: 'Placeholder',
   },
 };
@@ -56,6 +58,7 @@ export const SelectWithSearch = {
   args: {
     searchable: true,
     label: 'Это label',
+    options,
   },
 
   render: (args) => ({
@@ -65,7 +68,7 @@ export const SelectWithSearch = {
     },
     data() {
       return {
-        selected: '',
+        selected: { id: 2, name: 'text-2' },
       };
     },
     template: '<UiSelect v-bind="args" v-model="selected" />',
@@ -77,6 +80,19 @@ export const SelectRightAndLeftIcon = {
     iconLeft: 'heart-fill',
     iconRight: 'heart-fill',
   },
+
+  render: (args) => ({
+    components: { UiSelect },
+    setup() {
+      return { args };
+    },
+    data() {
+      return {
+        selected: {},
+      };
+    },
+    template: '<UiSelect v-bind="args" v-model="selected" />',
+  }),
 };
 
 export const SelectWithCustomOptions = {

diff --git a/tests/Select.test.js b/tests/Select.test.js
@@ -4,6 +4,7 @@ import Select from '../src/components/Select';
 const selectOptions = [
   { id: 1, name: 'text-1' },
   { id: 2, name: 'text-2' },
+  { id: 3, name: 'text-3' },
 ];
 
 describe('Select', () => {
@@ -94,25 +95,17 @@ describe('Select', () => {
   });
 
   it('search fields', async () => {
-    await wrapper.setProps({
-      seachable: true,
-      modelValue: '',
-      options: selectOptions,
-      'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+    const wrapper = mount(Select, {
+      props: {
+        searchable: true,
+        modelValue: { id: 2, name: 'text-2' },
+        options: selectOptions,
+        'onUpdate:model-value': (e) => wrapper.setProps({ modelValue: e }),
+      },
     });
 
-    await wrapper.trigger('click');
-
-    await wrapper.find('[data-testid="input"]').setValue('text-2');
-
     const option = wrapper.find('[data-testid="option"]');
 
-    console.log(option.html());
-
-    await option.trigger('click');
-
-    expect(wrapper.props().modelValue).toEqual({ id: 2, name: 'text-2' });
+    expect(option.text()).toBe('text-2');
   });
-
-  it.todo('disabled searhable (inner) in multiselect, even if prop searchable - true');
 });