@livestorm/ui-vue 1.1.3 → 2.0.0

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

@@ -1,506 +0,0 @@
-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

@@ -1,184 +0,0 @@
-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>',
-  ],
-}