@livestorm/ui-vue 1.1.1 → 1.1.2

package/src/components/BaseAutocomplete/BaseAutocomplete.spec.js

@@ -0,0 +1,506 @@
+import { mount } from '@vue/test-utils'
+import BaseAutocomplete from './BaseAutocomplete.vue'
+
+const ITEMS = 'Lorem ipsum dolor sit amet consectetur adipiscing elit Integer ne'.split(' ')
+const ITEMS_OBJECT = ITEMS.map(item => {
+  return {
+    text: item,
+    value: `value-${item.toLowerCase()}`,
+  }
+})
+const Selectors = {
+  Tag: '[data-testid="base-tag"]',
+  Input: '[data-testid="base-autocomplete-input"]',
+  Item: '[data-testid="base-autocomplete-item"]',
+  ItemSelected: '.selected',
+  ItemActive: '.active',
+  Clear: '[data-testid="base-autocomplete-clear"]',
+  CreateItem: '[data-testid="base-autocomplete-create-item"]',
+}
+
+const DEFAULT_PROPS = {
+  multiple: false,
+  autofocus: true,
+}
+
+async function createWrapper ({ props, itemsObject, slots } = {}) {
+  const finaleProps = {
+    ...DEFAULT_PROPS,
+    items: itemsObject
+      ? ITEMS_OBJECT
+      : ITEMS,
+    ...(props || null),
+    'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+  }
+  const wrapper = mount(BaseAutocomplete, {
+    props: finaleProps,
+    slots: {
+      ...(slots || null),
+    },
+  })
+
+  if (finaleProps.autofocus) {
+    // Delay to ensure the popper content is present in the DOM
+    await new Promise(resolve => setTimeout(resolve, 150))
+  }
+
+  const popperContent = wrapper.getComponent({ name: 'VPopperContent' })
+
+  return { wrapper, popperContent }
+}
+
+describe('BaseAutocomplete', () => {
+  describe('Behaviors', () => {
+    describe('Common', () => {
+      describe('Open / close items popper', () => {
+        test('it should open the items popper when focus', async () => {
+          const { popperContent } = await createWrapper()
+          ITEMS.forEach(item => expect(popperContent.html()).toContain(item))
+        })
+
+        test('it should close the items popper when an item is clicked', async () => {
+          const { popperContent } = await createWrapper()
+          await popperContent.find(Selectors.Item).trigger('click')
+          await new Promise(resolve => setTimeout(resolve, 150))
+          expect(popperContent.classes()).toContain('v-popper__popper--hidden')
+        })
+      })
+
+      describe('Keyboard navigation', async () => {
+        describe('Items', async () => {
+          test('it should navigate down the items', async () => {
+            const { wrapper, popperContent } = await createWrapper()
+            await wrapper.get(Selectors.Input).trigger('keydown.down')
+            expect(popperContent.findAll(Selectors.Item)[0].classes()).toContain(Selectors.ItemActive.slice(1))
+
+            await wrapper.get(Selectors.Input).trigger('keydown.down')
+            expect(popperContent.findAll(Selectors.Item)[1].classes()).toContain(Selectors.ItemActive.slice(1))
+          })
+
+          test('it should navigate up the items', async () => {
+            const { wrapper, popperContent } = await createWrapper()
+            await wrapper.get(Selectors.Input).trigger('keydown.down')
+            expect(popperContent.findAll(Selectors.Item)[0].classes()).toContain(Selectors.ItemActive.slice(1))
+
+            await wrapper.get(Selectors.Input).trigger('keydown.down')
+            expect(popperContent.findAll(Selectors.Item)[1].classes()).toContain(Selectors.ItemActive.slice(1))
+
+            await wrapper.get(Selectors.Input).trigger('keydown.up')
+            expect(popperContent.findAll(Selectors.Item)[0].classes()).toContain(Selectors.ItemActive.slice(1))
+          })
+
+          test('it should navigate back to the first item after when the last one is bottomed', async () => {
+            const { wrapper, popperContent } = await createWrapper({ props: { items: ITEMS.slice(0, 2) } })
+            await wrapper.get(Selectors.Input).trigger('keydown.down')
+            expect(popperContent.findAll(Selectors.Item)[0].classes()).toContain(Selectors.ItemActive.slice(1))
+
+            await wrapper.get(Selectors.Input).trigger('keydown.down')
+            expect(popperContent.findAll(Selectors.Item)[1].classes()).toContain(Selectors.ItemActive.slice(1))
+
+            await wrapper.get(Selectors.Input).trigger('keydown.down')
+            expect(popperContent.findAll(Selectors.Item)[0].classes()).toContain(Selectors.ItemActive.slice(1))
+          })
+
+          test('it should navigate back to the last item after the last one', async () => {
+            const itemsLength = 5
+            const { wrapper, popperContent } = await createWrapper({ props: { items: ITEMS.slice(0, itemsLength) } })
+            await wrapper.get(Selectors.Input).trigger('keydown.up')
+            expect(popperContent.findAll(Selectors.Item)[itemsLength - 1].classes()).toContain(Selectors.ItemActive.slice(1))
+          })
+
+          test('it should select the item when enters', async () => {
+            const { wrapper, popperContent } = await createWrapper({ props: { items: ITEMS.slice(0, 5) } })
+            await wrapper.get(Selectors.Input).trigger('keydown.down')
+            await wrapper.get(Selectors.Input).trigger('keydown.down')
+            await popperContent.findAll(Selectors.Item)[1].trigger('click')
+            expect(wrapper.get(Selectors.Input).element.value).toBe(ITEMS[1])
+          })
+        })
+        describe('Tags', async () => {
+          test('it should navigate left the tags', async () => {
+            const { wrapper } = await createWrapper({ itemsObject: true, props: { multiple: true, modelValue: ITEMS_OBJECT.map(item => item.value) } })
+            await wrapper.get(Selectors.Input).trigger('keydown.left')
+            expect(wrapper.findAll(Selectors.Tag)[ITEMS_OBJECT.length - 1].classes()).toContain('dark-grey')
+
+            await wrapper.get(Selectors.Input).trigger('keydown.left')
+            expect(wrapper.findAll(Selectors.Tag)[ITEMS_OBJECT.length - 1].classes()).not.toContain('dark-grey')
+            expect(wrapper.findAll(Selectors.Tag)[ITEMS_OBJECT.length - 2].classes()).toContain('dark-grey')
+          })
+
+          test('it should navigate right the tags', async () => {
+            const { wrapper } = await createWrapper({ itemsObject: true, props: { multiple: true, modelValue: ITEMS_OBJECT.map(item => item.value) } })
+            await wrapper.get(Selectors.Input).trigger('keydown.left')
+            await wrapper.get(Selectors.Input).trigger('keydown.left')
+            expect(wrapper.findAll(Selectors.Tag)[ITEMS_OBJECT.length - 2].classes()).toContain('dark-grey')
+
+            await wrapper.get(Selectors.Input).trigger('keydown.right')
+            expect(wrapper.findAll(Selectors.Tag)[ITEMS_OBJECT.length - 2].classes()).not.toContain('dark-grey')
+            expect(wrapper.findAll(Selectors.Tag)[ITEMS_OBJECT.length - 1].classes()).toContain('dark-grey')
+          })
+
+          test('it should navigate back to the first tag after when the last one is bottomed', async () => {
+            const { wrapper } = await createWrapper({ itemsObject: true, props: { multiple: true, modelValue: ITEMS_OBJECT.map(item => item.value) } })
+            await wrapper.get(Selectors.Input).trigger('keydown.left')
+            expect(wrapper.findAll(Selectors.Tag)[ITEMS_OBJECT.length - 1].classes()).toContain('dark-grey')
+
+            await wrapper.get(Selectors.Input).trigger('keydown.right')
+            expect(wrapper.findAll(Selectors.Tag)[ITEMS_OBJECT.length - 1].classes()).not.toContain('dark-grey')
+            expect(wrapper.findAll(Selectors.Tag)[0].classes()).toContain('dark-grey')
+          })
+
+          test('it should navigate back to the last item after the last one', async () => {
+            const itemsLength = 2
+            const { wrapper } = await createWrapper({ itemsObject: true, props: { multiple: true, modelValue: ITEMS_OBJECT.slice(0, itemsLength).map(item => item.value) } })
+            await wrapper.get(Selectors.Input).trigger('keydown.left')
+            await wrapper.get(Selectors.Input).trigger('keydown.left')
+            await wrapper.get(Selectors.Input).trigger('keydown.left')
+            expect(wrapper.findAll(Selectors.Tag)[itemsLength - 1].classes()).toContain('dark-grey')
+          })
+
+          test('it should remove the selected tag when deletes', async () => {
+            const itemsLength = 2
+            const { wrapper } = await createWrapper({ itemsObject: true, props: { multiple: true, modelValue: ITEMS_OBJECT.slice(0, itemsLength).map(item => item.value) } })
+            await wrapper.get(Selectors.Input).trigger('keydown.left')
+            expect(wrapper.findAll(Selectors.Tag)).toHaveLength(itemsLength)
+            expect(wrapper.html()).toContain(ITEMS_OBJECT[itemsLength - 1].text)
+
+            await wrapper.get(Selectors.Input).trigger('keydown.delete')
+            expect(wrapper.findAll(Selectors.Tag)).toHaveLength(itemsLength - 1)
+            expect(wrapper.html()).not.toContain(ITEMS_OBJECT[itemsLength - 1].text)
+          })
+
+          test('it should select the last tag when deletes without selected tag', async () => {
+            const itemsLength = 2
+            const { wrapper } = await createWrapper({ itemsObject: true, props: { multiple: true, modelValue: ITEMS_OBJECT.slice(0, itemsLength).map(item => item.value) } })
+            expect(wrapper.findAll(Selectors.Tag)).toHaveLength(itemsLength)
+
+            await wrapper.get(Selectors.Input).trigger('keydown.delete')
+            expect(wrapper.findAll(Selectors.Tag)).toHaveLength(itemsLength)
+            expect(wrapper.findAll(Selectors.Tag).pop().classes()).toContain('dark-grey')
+          })
+        })
+      })
+    })
+
+    describe('Single value behavior', () => {
+      describe('Set initial item', () => {
+        test('with item string', async () => {
+          const modelValue = ITEMS[0]
+          const { wrapper } = await createWrapper({ props: { autofocus: false, modelValue } })
+          expect(wrapper.get(Selectors.Input).element.value).toBe(modelValue)
+        })
+
+        test('with item object', async () => {
+          const modelValue = ITEMS_OBJECT[0]
+          const { wrapper, popperContent } = await createWrapper({ itemsObject: true, props: { items: ITEMS_OBJECT, modelValue } })
+          expect(popperContent.html()).toContain(ITEMS_OBJECT[0].text)
+          expect(wrapper.get(Selectors.Input).element.value).toBe(ITEMS_OBJECT[0].text)
+        })
+      })
+
+      describe('Select item', () => {
+        test('with item string', async () => {
+          const { wrapper, popperContent } = await createWrapper()
+          await popperContent.findAll(Selectors.Item)[1].trigger('click')
+          expect(wrapper.get(Selectors.Input).element.value).toBe(ITEMS[1])
+        })
+
+        test('with item object', async () => {
+          const modelValue = ITEMS_OBJECT[0].value
+          const { wrapper, popperContent } = await createWrapper({ itemsObject: true, props: { modelValue } })
+          await popperContent.findAll(Selectors.Item)[1].trigger('click')
+          expect(wrapper.get(Selectors.Input).element.value).toBe(ITEMS_OBJECT[1].text)
+        })
+      })
+
+      describe('Unselect item', () => {
+        test('with item string', async () => {
+          const { wrapper, popperContent } = await createWrapper({ props: { modelValue: ITEMS[1] } })
+          expect(wrapper.get(Selectors.Input).element.value).toBe(ITEMS[1])
+          await popperContent.findAll(Selectors.Item)[1].trigger('click')
+          expect(wrapper.get(Selectors.Input).element.value).toBe('')
+        })
+
+        test('with item object', async () => {
+          const { wrapper, popperContent } = await createWrapper({ itemsObject: true, props: { modelValue: ITEMS_OBJECT[1] } })
+          expect(wrapper.get(Selectors.Input).element.value).toBe(ITEMS_OBJECT[1].text)
+          await popperContent.findAll(Selectors.Item)[1].trigger('click')
+          expect(wrapper.get(Selectors.Input).element.value).toBe('')
+        })
+      })
+
+      describe('Filter items', () => {
+        test('with item string', async () => {
+          const { wrapper, popperContent } = await createWrapper()
+          await wrapper.get(Selectors.Input).setValue(ITEMS[2])
+          expect(popperContent.html()).toContain(ITEMS[2])
+          expect(popperContent.html()).not.toContain(ITEMS[1])
+        })
+
+        test('with item object', async () => {
+          const { wrapper, popperContent } = await createWrapper({ itemsObject: true })
+          await wrapper.get(Selectors.Input).setValue(ITEMS_OBJECT[2].text)
+          expect(popperContent.html()).toContain(ITEMS_OBJECT[2].text)
+          expect(popperContent.html()).not.toContain(ITEMS_OBJECT[1].text)
+        })
+      })
+
+      describe('Highlight selected items', () => {
+        describe('Highlight if false', () => {
+          test('with item string', async () => {
+            const modelValue = ITEMS[2]
+            const { popperContent } = await createWrapper({ props: { modelValue } })
+            expect(popperContent.findAll(`${Selectors.Item}${Selectors.ItemSelected}`).length).toBe(1)
+            expect(popperContent.findAll(Selectors.Item)[2].text()).toContain(modelValue)
+          })
+
+          test('with item object', async () => {
+            const modelValue = ITEMS_OBJECT[2].value
+            const { popperContent } = await createWrapper({ itemsObject: true, props: { modelValue } })
+            expect(popperContent.findAll(`${Selectors.Item}${Selectors.ItemSelected}`).length).toBe(1)
+            expect(popperContent.findAll(Selectors.Item)[2].text()).toContain(ITEMS_OBJECT[2].text)
+          })
+        })
+      })
+    })
+
+    describe('Multiple values behavior', () => {
+      describe('Set initial item', () => {
+        test('with item string', async () => {
+          const modelValue = [ITEMS[0]]
+          const { wrapper } = await createWrapper({ props: { multiple: true, modelValue, autofocus: false } })
+          expect(wrapper.get(Selectors.Input).element.value).toBe('')
+          expect(wrapper.findAll(Selectors.Tag).length).toBe(1)
+          expect(wrapper.getComponent(Selectors.Tag).html()).toContain(ITEMS[0])
+        })
+
+        test('with item object', async () => {
+          const modelValue = [ITEMS_OBJECT[0]]
+          const { wrapper } = await createWrapper({ itemsObject: true, props: { multiple: true, modelValue, autofocus: false } })
+          expect(wrapper.getComponent(Selectors.Tag).html()).toContain(ITEMS_OBJECT[0].text)
+          expect(wrapper.get(Selectors.Input).element.value).toBe('')
+          expect(wrapper.vm.selection).toStrictEqual(modelValue)
+        })
+      })
+
+      describe('Add item', () => {
+        test('with item string', async () => {
+          const { wrapper, popperContent } = await createWrapper({ props: { multiple: true } })
+          await popperContent.findAll(Selectors.Item)[0].trigger('click')
+          expect(wrapper.get(Selectors.Input).element.value).toBe('')
+          expect(wrapper.findAll(Selectors.Tag).length).toBe(1)
+          expect(wrapper.getComponent(Selectors.Tag).html()).toContain(ITEMS[0])
+          expect(wrapper.emitted()['update:modelValue'][0][0]).toEqual([ITEMS[0]])
+        })
+
+        test('with item object', async () => {
+          const modelValue = [ITEMS_OBJECT[0]]
+          const { wrapper, popperContent } = await createWrapper({ itemsObject: true, props: { multiple: true, modelValue } })
+          await wrapper.get(Selectors.Input).trigger('focus')
+          await popperContent.findAll(Selectors.Item)[1].trigger('click')
+          expect(wrapper.findAllComponents(Selectors.Tag)[0].html()).toContain(ITEMS_OBJECT[0].text)
+          expect(wrapper.findAllComponents(Selectors.Tag)[1].html()).toContain(ITEMS_OBJECT[1].text)
+          expect(wrapper.emitted()['update:modelValue'][0][0]).toEqual([ITEMS_OBJECT[0].value, ITEMS_OBJECT[1].value])
+        })
+      })
+
+      describe('Unselect item', () => {
+        test('with item string', async () => {
+          const { wrapper, popperContent } = await createWrapper({ props: { multiple: true, modelValue: [ITEMS[1]] } })
+          expect(wrapper.findAll(Selectors.Tag).length).toBe(1)
+
+          await popperContent.findAll(Selectors.Item)[1].trigger('click')
+          expect(wrapper.findAll(Selectors.Tag).length).toBe(0)
+        })
+
+        test('with item object', async () => {
+          const { wrapper, popperContent } = await createWrapper({ itemsObject: true, props: { multiple: true, modelValue: [ITEMS_OBJECT[1].value] } })
+          expect(wrapper.findAll(Selectors.Tag).length).toBe(1)
+
+          await popperContent.findAll(Selectors.Item)[1].trigger('click')
+          expect(wrapper.findAll(Selectors.Tag).length).toBe(0)
+        })
+      })
+
+      describe('Remove a selected item', () => {
+        test('with item string', async () => {
+          const modelValue = [ITEMS[0]]
+          const { wrapper } = await createWrapper({ props: { multiple: true, modelValue, autofocus: false } })
+          expect(wrapper.findAll(Selectors.Tag).length).toBe(1)
+          await wrapper.getComponent(Selectors.Tag).get('.icon-delete').trigger('click')
+          expect(wrapper.findAll(Selectors.Tag).length).toBe(0)
+          expect(wrapper.emitted()['update:modelValue'][0][0]).toEqual([])
+        })
+
+        test('with item object', async () => {
+          const modelValue = [ITEMS_OBJECT[0].value, ITEMS_OBJECT[1].value]
+          const { wrapper } = await createWrapper({ itemsObject: true, props: { multiple: true, modelValue, autofocus: false } })
+          expect(wrapper.findAll(Selectors.Tag).length).toBe(2)
+          await wrapper.getComponent(Selectors.Tag).get('.icon-delete').trigger('click')
+          expect(wrapper.findAll(Selectors.Tag).length).toBe(1)
+          expect(wrapper.emitted()['update:modelValue'][0][0]).toEqual([ITEMS_OBJECT[1].value])
+        })
+      })
+
+      describe('Filter items', () => {
+        test('with item string', async () => {
+          const searchText = ITEMS[2]
+          const { wrapper, popperContent } = await createWrapper({ props: { multiple: true } })
+          await wrapper.get(Selectors.Input).setValue(searchText)
+          expect(popperContent.html()).toContain(searchText)
+          expect(popperContent.html()).not.toContain(ITEMS[0])
+          expect(popperContent.html()).not.toContain(ITEMS[1])
+        })
+
+        test('with item object', async () => {
+          const searchText = ITEMS_OBJECT[2].text
+          const { wrapper, popperContent } = await createWrapper({ itemsObject: true, props: { multiple: true } })
+          await wrapper.get(Selectors.Input).setValue(searchText)
+          expect(popperContent.html()).toContain(searchText)
+          expect(popperContent.html()).not.toContain(ITEMS_OBJECT[0].text)
+          expect(popperContent.html()).not.toContain(ITEMS_OBJECT[1].text)
+        })
+      })
+
+      describe('Highlight selected items', () => {
+        test('with item string', async () => {
+          const modelValue = [ITEMS[2]]
+          const { popperContent } = await createWrapper({ props: { multiple: true, modelValue } })
+          expect(popperContent.findAll(`${Selectors.Item}${Selectors.ItemSelected}`).length).toBe(1)
+          expect(popperContent.findAll(Selectors.Item)[2].text()).toContain(ITEMS[2])
+        })
+
+        test('with item object', async () => {
+          const modelValue = [ITEMS_OBJECT[2].value]
+          const { popperContent } = await createWrapper({ itemsObject: true, props: { multiple: true, modelValue } })
+          expect(popperContent.findAll(`${Selectors.Item}${Selectors.ItemSelected}`).length).toBe(1)
+          expect(popperContent.findAll(Selectors.Item)[2].text()).toContain(ITEMS_OBJECT[2].text)
+        })
+      })
+    })
+  })
+
+  describe('Props', () => {
+    describe('no-filter', () => {
+      test('it should not apply filtering when searching', async () => {
+        const { wrapper, popperContent } = await createWrapper({ props: { noFilter: true } })
+        await wrapper.get(Selectors.Input).setValue(ITEMS[2])
+        expect(popperContent.html()).toContain(ITEMS[2])
+        expect(popperContent.html()).toContain(ITEMS[1])
+      })
+    })
+
+    describe('hide-selected', () => {
+      describe('with single value', () => {
+        test('with item string', async () => {
+          const modelValue = ITEMS[2]
+          const { popperContent } = await createWrapper({ props: { hideSelected: true, modelValue } })
+          expect(popperContent.findAll(`${Selectors.Item}${Selectors.ItemSelected}`).length).toBe(0)
+          expect(popperContent.findAll(Selectors.Item)[2].text()).not.toContain(modelValue)
+        })
+
+        test('with item object', async () => {
+          const modelValue = ITEMS_OBJECT[2].value
+          const { popperContent } = await createWrapper({ itemsObject: true, props: { hideSelected: true, modelValue } })
+          expect(popperContent.findAll(`${Selectors.Item}${Selectors.ItemSelected}`).length).toBe(0)
+          expect(popperContent.findAll(Selectors.Item).length).toBe(ITEMS_OBJECT.length - 1)
+        })
+      })
+
+      describe('with multiple values', () => {
+        test('with item string', async () => {
+          const modelValue = [ITEMS[2]]
+          const { popperContent } = await createWrapper({ props: { hideSelected: true, multiple: true, modelValue } })
+
+          expect(popperContent.findAll(`${Selectors.Item}${Selectors.ItemSelected}`).length).toBe(0)
+          expect(popperContent.findAll(Selectors.Item)[2].text()).not.toContain(ITEMS[2])
+        })
+
+        test('with item object', async () => {
+          const modelValue = [ITEMS_OBJECT[2].value]
+          const { popperContent } = await createWrapper({ itemsObject: true, props: { hideSelected: true, multiple: true, modelValue } })
+          expect(popperContent.findAll(`${Selectors.Item}${Selectors.ItemSelected}`).length).toBe(0)
+          expect(popperContent.findAll(Selectors.Item).length).toBe(ITEMS_OBJECT.length - 1)
+        })
+      })
+    })
+
+    describe('clearable', () => {
+      test('it should display a clear button', async () => {
+        const { wrapper, popperContent } = await createWrapper({ props: { clearable: true } })
+        expect(wrapper.find(Selectors.Clear).exists()).toBeFalsy()
+
+        await popperContent.find(Selectors.Item).trigger('click')
+        expect(wrapper.find(Selectors.Clear).exists()).toBeTruthy()
+      })
+
+      test('it should clear the input when the clear button is clicked', async () => {
+        const { wrapper } = await createWrapper({ props: { clearable: true, modelValue: ITEMS[0] } })
+        expect(wrapper.find(Selectors.Input).element.value).toBe(ITEMS[0])
+
+        await wrapper.find(Selectors.Clear).trigger('click')
+        expect(wrapper.find(Selectors.Input).element.value).toBe('')
+      })
+
+      test('it should clear the tags when the clear button is clicked', async () => {
+        const { wrapper } = await createWrapper({ props: { clearable: true, modelValue: ITEMS, multiple: true } })
+        expect(wrapper.findAll(Selectors.Tag).length).toBe(ITEMS.length)
+
+        await wrapper.find(Selectors.Clear).trigger('click')
+        expect(wrapper.findAll(Selectors.Tag).length).toBe(0)
+      })
+    })
+
+    describe('creatable', () => {
+      test('it should display a button to add a item', async () => {
+        const search = 'added item'
+        const { wrapper, popperContent } = await createWrapper({ props: { multiple: true, creatable: true } })
+        expect(wrapper.find(Selectors.Clear).exists()).toBeFalsy()
+        expect(popperContent.find(Selectors.CreateItem).exists()).toBeFalsy()
+
+        await wrapper.get(Selectors.Input).setValue(search)
+        expect(popperContent.find(Selectors.CreateItem).exists()).toBeTruthy()
+      })
+
+      test('it should create the item from the search input', async () => {
+        const search = 'added item'
+        const { wrapper, popperContent } = await createWrapper({ props: { multiple: true, creatable: true } })
+
+        await wrapper.get(Selectors.Input).setValue(search)
+        await popperContent.find(Selectors.CreateItem).trigger('click')
+        expect(wrapper.findAll(Selectors.Tag).pop().html()).toContain(search)
+      })
+
+      test('it should not display the button if the search text is already in the items list', async () => {
+        const search = 'added item'
+        const modelValue = ITEMS
+        const { wrapper, popperContent } = await createWrapper({ props: { multiple: true, creatable: true, modelValue } })
+
+        await wrapper.get(Selectors.Input).setValue(search)
+        expect(popperContent.find(Selectors.CreateItem).exists()).toBeTruthy()
+
+        await wrapper.get(Selectors.Input).setValue(ITEMS[0])
+        expect(popperContent.find(Selectors.CreateItem).exists()).toBeFalsy()
+      })
+    })
+  })
+
+  describe('Events', () => {
+    test('update:search', async () => {
+      const modelValue = ITEMS[0]
+      const search = ITEMS[1]
+      const { wrapper, popperContent } = await createWrapper({ props: { modelValue } })
+      await popperContent.findAll(Selectors.Item)[1].trigger('click')
+
+      expect(wrapper.emitted()['update:search']).toBeUndefined()
+
+      await wrapper.get(Selectors.Input).setValue(search.substring(0, 1))
+      expect(wrapper.emitted()['update:search']).toHaveLength(1)
+      expect(wrapper.emitted()['update:search'][0]).toEqual([search.substring(0, 1)])
+
+      await wrapper.get(Selectors.Input).setValue(search.substring(0, 2))
+      expect(wrapper.emitted()['update:search']).toHaveLength(2)
+      expect(wrapper.emitted()['update:search'][1]).toEqual([search.substring(0, 2)])
+    })
+  })
+})

package/src/components/BaseAutocomplete/BaseAutocomplete.stories.js

@@ -0,0 +1,184 @@
+import BaseAutocomplete from './BaseAutocomplete.vue'
+
+const ITEMS = 'Lorem ipsum dolor sit amet consectetur adipiscing elit Integer ne'.split(' ')
+const ITEMS_OBJECT = ITEMS.map(item => {
+  return {
+    text: item,
+    value: `value-${item.toLowerCase()}`,
+    avatar: item.substring(0, 2).toLowerCase(),
+  }
+})
+
+export default {
+  title: 'common/vue/components/BaseAutocomplete',
+  component: BaseAutocomplete,
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'small',
+        'medium',
+        'large',
+      ],
+    },
+  },
+  args: {
+    items: ITEMS,
+  },
+}
+const DefaultTemplate = ({ slots, ...args }) => {
+  return {
+    setup: () => ({ args }),
+    template: `
+    <BaseAutocomplete v-bind="args">${slots?.join(' ') || ''}</BaseAutocomplete>
+        `,
+  }
+}
+
+// default
+export const Default = DefaultTemplate.bind({})
+
+// props.placeholder
+export const Placeholder = DefaultTemplate.bind()
+Placeholder.args = {
+  placeholder: 'Search',
+}
+
+// props.size
+export const Small = DefaultTemplate.bind({})
+Small.args = {
+  size: 'small',
+}
+export const Medium = DefaultTemplate.bind({})
+Medium.args = {
+  size: 'medium',
+}
+export const Large = DefaultTemplate.bind({})
+Large.args = {
+  size: 'large',
+}
+
+// props.error
+export const Error = DefaultTemplate.bind({})
+Error.args = {
+  modelValue: ITEMS[1],
+  error: true,
+}
+
+// props.preprendIcon
+export const PrependIcon = DefaultTemplate.bind({})
+PrependIcon.args = {
+  prependIcon: 'i-ls-user',
+}
+
+// props.multiple
+export const SingleValue = DefaultTemplate.bind({})
+SingleValue.args = {
+  modelValue: ITEMS[1],
+}
+
+export const SingleValueObject = DefaultTemplate.bind({})
+SingleValueObject.args = {
+  modelValue: ITEMS_OBJECT[1],
+  items: ITEMS_OBJECT,
+}
+
+export const MultipleValue = DefaultTemplate.bind({})
+MultipleValue.args = {
+  modelValue: ITEMS.slice(0, 4),
+  multiple: true,
+}
+
+export const MultipleSmall = DefaultTemplate.bind({})
+MultipleSmall.args = {
+  modelValue: ITEMS,
+  multiple: true,
+  size: 'small',
+}
+
+export const MultipleMedium = DefaultTemplate.bind({})
+MultipleMedium.args = {
+  modelValue: [ITEMS_OBJECT[0].value],
+  multiple: true,
+  items: ITEMS_OBJECT,
+}
+
+export const MultipleLarge = DefaultTemplate.bind({})
+MultipleLarge.args = {
+  modelValue: ITEMS,
+  multiple: true,
+  size: 'large',
+}
+
+// props.noFilter
+export const NoFilter = DefaultTemplate.bind({})
+NoFilter.args = {
+  modelValue: ITEMS[1],
+  noFilter: true,
+}
+
+// props.clearable
+export const Clearable = DefaultTemplate.bind({})
+Clearable.args = {
+  modelValue: ITEMS,
+  multiple: true,
+  clearable: true,
+}
+
+// props.hideSelected
+export const HideSelected = DefaultTemplate.bind({})
+HideSelected.args = {
+  modelValue: ITEMS.slice(0, ITEMS.length - 2),
+  multiple: true,
+  hideSelected: true,
+}
+
+// props.autofocus
+export const Autofocus = DefaultTemplate.bind({})
+Autofocus.args = {
+  modelValue: ITEMS.slice(0, ITEMS.length - 2),
+  multiple: true,
+  autofocus: true,
+}
+
+// props.hideNoData
+export const HideNoData = DefaultTemplate.bind({})
+HideNoData.args = {
+  modelValue: ITEMS.slice(0, ITEMS.length - 2),
+  multiple: true,
+  hideSelected: true,
+  hideNoData: true,
+}
+
+// props.noDataText
+export const NoDataText = DefaultTemplate.bind({})
+NoDataText.args = {
+  modelValue: ITEMS,
+  multiple: true,
+  hideSelected: true,
+  noDataText: 'No more items available',
+  autoFocus: true,
+}
+// props.creatable
+export const Creatable = DefaultTemplate.bind({})
+Creatable.args = {
+  modelValue: [ITEMS[1]],
+  hideSelected: true,
+  multiple: true,
+  autoFocus: true,
+  creatable: true,
+}
+
+// slot.tag
+export const SlotTag = DefaultTemplate.bind({})
+SlotTag.args = {
+  items: ITEMS_OBJECT,
+  modelValue: ITEMS_OBJECT.slice(0, 3).map(item => item.value),
+  hideSelected: true,
+  multiple: true,
+  slots: [
+    '<template #tag="{item, index}"><span class="inline-flex text-11-regular justify-center w-4 h-4 rounded-full bg-red-400 text-white">{{ item.avatar }}</span> {{ item.text }}</template>',
+  ],
+}