buefy 1.0.0 → 1.0.2

package/src/components/index.ts

@@ -0,0 +1,179 @@
+/* eslint-disable import/first */
+import Autocomplete from './autocomplete'
+export * from './autocomplete'
+import Breadcrumb from './breadcrumb'
+export * from './breadcrumb'
+import Button from './button'
+export * from './button'
+import Carousel from './carousel'
+export * from './carousel'
+import Checkbox from './checkbox'
+export * from './checkbox'
+import Collapse from './collapse'
+export * from './collapse'
+import Clockpicker from './clockpicker'
+export * from './clockpicker'
+import Colorpicker from './colorpicker'
+export * from './colorpicker'
+import Datepicker from './datepicker'
+export * from './datepicker'
+import Datetimepicker from './datetimepicker'
+export * from './datetimepicker'
+import Dialog from './dialog'
+export * from './dialog'
+import Dropdown from './dropdown'
+export * from './dropdown'
+import Field from './field'
+export * from './field'
+import Icon from './icon'
+export * from './icon'
+import Image from './image'
+export * from './image'
+import Input from './input'
+export * from './input'
+import Loading from './loading'
+export * from './loading'
+import Menu from './menu'
+export * from './menu'
+import Message from './message'
+export * from './message'
+import Modal from './modal'
+export * from './modal'
+import Notification from './notification'
+export * from './notification'
+import Navbar from './navbar'
+export * from './navbar'
+import Numberinput from './numberinput'
+export * from './numberinput'
+import Pagination from './pagination'
+export * from './pagination'
+import Progress from './progress'
+export * from './progress'
+import Radio from './radio'
+export * from './radio'
+import Rate from './rate'
+export * from './rate'
+import Select from './select'
+export * from './select'
+import Skeleton from './skeleton'
+export * from './skeleton'
+import Sidebar from './sidebar'
+export * from './sidebar'
+import Slider from './slider'
+export * from './slider'
+import Snackbar from './snackbar'
+export * from './snackbar'
+import Steps from './steps'
+export * from './steps'
+import Switch from './switch'
+export * from './switch'
+import Table from './table'
+export * from './table'
+import Tabs from './tabs'
+export * from './tabs'
+import Tag from './tag'
+export * from './tag'
+import Taginput from './taginput'
+export * from './taginput'
+import Timepicker from './timepicker'
+export * from './timepicker'
+import Toast from './toast'
+export * from './toast'
+import Tooltip from './tooltip'
+export * from './tooltip'
+import Upload from './upload'
+export * from './upload'
+/* eslint-enable import/first */
+
+// exports plugins of individual components for separate install
+export {
+    Autocomplete,
+    Breadcrumb,
+    Button,
+    Carousel,
+    Checkbox,
+    Clockpicker,
+    Collapse,
+    Colorpicker,
+    Datepicker,
+    Datetimepicker,
+    Dialog,
+    Dropdown,
+    Field,
+    Icon,
+    Image,
+    Input,
+    Loading,
+    Menu,
+    Message,
+    Modal,
+    Navbar,
+    Notification,
+    Numberinput,
+    Pagination,
+    Progress,
+    Radio,
+    Rate,
+    Select,
+    Skeleton,
+    Sidebar,
+    Slider,
+    Snackbar,
+    Steps,
+    Switch,
+    Table,
+    Tabs,
+    Tag,
+    Taginput,
+    Timepicker,
+    Toast,
+    Tooltip,
+    Upload
+}
+
+// exports an array of all the component plugins for batch install
+const allComponents = [
+    Autocomplete,
+    Breadcrumb,
+    Button,
+    Carousel,
+    Checkbox,
+    Clockpicker,
+    Collapse,
+    Colorpicker,
+    Datepicker,
+    Datetimepicker,
+    Dialog,
+    Dropdown,
+    Field,
+    Icon,
+    Image,
+    Input,
+    Loading,
+    Menu,
+    Message,
+    Modal,
+    Navbar,
+    Notification,
+    Numberinput,
+    Pagination,
+    Progress,
+    Radio,
+    Rate,
+    Select,
+    Skeleton,
+    Sidebar,
+    Slider,
+    Snackbar,
+    Steps,
+    Switch,
+    Table,
+    Tabs,
+    Tag,
+    Taginput,
+    Timepicker,
+    Toast,
+    Tooltip,
+    Upload
+] as const
+export default allComponents

package/src/components/input/Input.spec.ts

@@ -0,0 +1,396 @@
+import { defineComponent } from 'vue'
+import { shallowMount, mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import type { MockInstance } from 'vitest'
+import BInput from '@components/input/Input.vue'
+import BIcon from '@components/icon/Icon.vue'
+import FormElementMixin from '@utils/FormElementMixin'
+import type { ExtractComponentData } from '@utils/helpers'
+
+type BInputInstance = InstanceType<typeof BInput>
+type FormElementMixinInstance = InstanceType<typeof FormElementMixin>
+
+type BInputData = ExtractComponentData<typeof BInput>
+
+let wrapper: VueWrapper<BInputInstance>
+
+describe('BInput', () => {
+    beforeEach(() => {
+        wrapper = shallowMount(BInput)
+    })
+
+    it('render correctly', () => {
+        expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('is vue instance', () => {
+        expect(wrapper.vm).toBeTruthy()
+        expect(wrapper.vm.$options.name).toBe('BInput')
+    })
+
+    it('renders input element by default', () => {
+        expect(wrapper.find('input').exists()).toBeTruthy()
+        expect(wrapper.classes()).toContain('control')
+    })
+
+    it('render textarea element when type is textarea', async () => {
+        await wrapper.setProps({ type: 'textarea' })
+        const target = wrapper.find('textarea')
+
+        expect(target.exists()).toBeTruthy()
+        expect(target.classes()).toContain('textarea')
+    })
+
+    it('displays the icon when the icon property is true', async () => {
+        await wrapper.setProps({ icon: 'magnify' })
+        const target = wrapper.findComponent(BIcon)
+
+        expect(target.exists()).toBeTruthy()
+    })
+
+    it('display counter when the maxlength property is passed', async () => {
+        await wrapper.setProps({
+            modelValue: 'foo',
+            maxlength: 100
+        })
+        const counter = wrapper.find('small.counter')
+
+        expect(counter.exists()).toBeTruthy()
+        expect(counter.text()).toBe('3 / 100')
+
+        await wrapper.setProps({
+            modelValue: 1234
+        })
+        expect(counter.text()).toBe('4 / 100')
+    })
+
+    it('display correct input value length when value contains some emoji', async () => {
+        await wrapper.setProps({
+            modelValue: '😀2',
+            maxlength: 5
+        })
+        const counter = wrapper.find('small.counter')
+
+        expect(counter.exists()).toBeTruthy()
+        expect(counter.text()).toBe('2 / 5')
+    })
+
+    it('no display counter when hasCounter property set for false', async () => {
+        await wrapper.setProps({ maxlength: 100 })
+        expect(wrapper.find('small.counter').exists()).toBeTruthy()
+
+        await wrapper.setProps({ hasCounter: false })
+        expect(wrapper.find('small.counter').exists()).toBeFalsy()
+    })
+
+    it('render field password when the type property is password', () => {
+        const wrapper = shallowMount(BInput, {
+            propsData: {
+                type: 'password',
+                passwordReveal: true
+            }
+        })
+
+        const target = wrapper.find('input')
+        expect(target.exists()).toBeTruthy()
+        expect(target.attributes().type).toBe('password')
+    })
+
+    it('toggles the visibility of the password to true when the togglePasswordVisibility method is called', async () => {
+        const wrapper = mount(BInput, {
+            props: {
+                modelValue: 'foo',
+                type: 'password',
+                passwordReveal: true
+            }
+        })
+
+        await wrapper.setProps({ modelValue: 'bar' })
+
+        expect(wrapper.find('input').exists()).toBeTruthy()
+        expect(wrapper.vm.newType).toBe('password')
+        expect(wrapper.vm.isPasswordVisible).toBeFalsy()
+        expect(wrapper.find('input').attributes().type).toBe('password')
+
+        const visibilityIcon = wrapper.find('.icon.is-clickable')
+        expect(visibilityIcon.exists()).toBeTruthy()
+        visibilityIcon.trigger('click')
+        await wrapper.setProps({ passwordReveal: false })
+        expect(wrapper.vm.newType).toBe('text')
+        expect(wrapper.vm.isPasswordVisible).toBeTruthy()
+        expect(wrapper.find('input').attributes().type).toBe('text')
+    })
+
+    it('render the placeholder and readonly attribute when passed', () => {
+        const wrapper = shallowMount(BInput, {
+            attrs: { placeholder: 'Awesome!', readonly: true }
+        })
+        const target = wrapper.find('input')
+
+        expect(target.element.getAttribute('placeholder')).toBe('Awesome!')
+        expect(target.element.getAttribute('readonly')).toBe('')
+    })
+
+    it('expands input when expanded property is passed', async () => {
+        await wrapper.setProps({ expanded: true })
+
+        expect(wrapper.classes()).toContain('is-expanded')
+    })
+
+    it('display loading icon when loading property passed', async () => {
+        await wrapper.setProps({
+            loading: true,
+            icon: 'magnify'
+        })
+
+        expect(wrapper.classes()).toContain('is-loading')
+    })
+
+    it('keep its value on blur', async () => {
+        const wrapper = mount(BInput, {
+            props: {
+                modelValue: 'foo',
+                // overriding the method `checkHtml5Validity` won't work
+                // because `mount` no longer accepts `methods` option on
+                // @vue/test-utils V2
+                //
+                // kikuomax: I decided to disable validation instead.
+                // I do not think it matters to the outcome anyway.
+                useHtml5Validation: false
+            }
+        })
+
+        const input = wrapper.find('input')
+
+        input.element.value = 'bar'
+        input.trigger('input')
+        input.trigger('blur')
+
+        expect(input.element.value).toBe('bar')
+    })
+
+    it('change status icon when statusType updated', async () => {
+        const parent = {
+            data: () => ({
+                newType: 'is-success',
+                // the following internal property is required
+                // so that a child Input can locate the parent (this component)
+                // and fetch `newType` from it.
+                // see `FormElementMixin` for more details
+                _isField: true
+            }),
+            components: { BInput },
+            template: '<b-input />'
+        }
+        const wrapper = mount(parent)
+
+        const input = wrapper.findComponent(BInput)
+        expect(input.vm.statusTypeIcon).toBe('check')
+        await wrapper.setData({ newType: 'is-danger' })
+        expect(input.vm.statusTypeIcon).toBe('alert-circle')
+        await wrapper.setData({ newType: 'is-info' })
+        expect(input.vm.statusTypeIcon).toBe('information')
+        await wrapper.setData({ newType: 'is-warning' })
+        expect(input.vm.statusTypeIcon).toBe('alert')
+    })
+
+    it('manage the click on icon', async () => {
+        const wrapper = mount(BInput, {
+            propsData: {
+                icon: 'magnify',
+                iconClickable: true
+            }
+        })
+
+        expect(wrapper.find('input').exists()).toBeTruthy()
+
+        const visibilityIcon = wrapper.find('.icon.is-clickable')
+        expect(visibilityIcon.exists()).toBeTruthy()
+        visibilityIcon.trigger('click')
+
+        await wrapper.vm.$nextTick()
+        expect(wrapper.emitted()['icon-click']).toBeTruthy()
+    })
+
+    describe('validation', () => {
+        let spyOnCheckHtml5Validity: MockInstance
+
+        beforeEach(() => {
+            spyOnCheckHtml5Validity = vi
+                .spyOn(FormElementMixin.methods as FormElementMixinInstance, 'checkHtml5Validity')
+                .mockImplementation(function () {
+                    this.isValid = false
+                    return false
+                } as (this: FormElementMixinInstance) => boolean)
+        })
+
+        afterEach(() => {
+            spyOnCheckHtml5Validity.mockReset()
+        })
+
+        it('should validate value at input event', async () => {
+            const wrapper = shallowMount(BInput, {
+                data: () => ({ isValid: false } as BInputData)
+            })
+
+            const inputElement = wrapper.get('input')
+
+            await inputElement.element.focus()
+            expect(spyOnCheckHtml5Validity).toHaveBeenCalledTimes(0)
+
+            await inputElement.trigger('input')
+            expect(spyOnCheckHtml5Validity).toHaveBeenCalledTimes(1)
+
+            await inputElement.trigger('change')
+            expect(spyOnCheckHtml5Validity).toHaveBeenCalledTimes(1)
+        })
+
+        it('should validate value at change event if lazy', async () => {
+            const wrapper = shallowMount(BInput, {
+                props: { lazy: true },
+                data: () => ({ isValid: false } as BInputData)
+            })
+
+            const inputElement = wrapper.get('input')
+
+            await inputElement.element.focus()
+            expect(spyOnCheckHtml5Validity).toHaveBeenCalledTimes(0)
+
+            await inputElement.trigger('input')
+            expect(spyOnCheckHtml5Validity).toHaveBeenCalledTimes(0)
+
+            await inputElement.trigger('change')
+            expect(spyOnCheckHtml5Validity).toHaveBeenCalledTimes(1)
+        })
+
+        it('should validate value when programmatically updated', async () => {
+            const wrapper = shallowMount(BInput, {
+                data: () => ({ isValid: false } as BInputData)
+            })
+            await wrapper.setProps({ modelValue: 'foo' })
+            await wrapper.vm.$nextTick()
+            expect(spyOnCheckHtml5Validity).toHaveBeenCalledTimes(1)
+        })
+
+        describe('via v-model', () => {
+            const rootComponent = defineComponent({
+                components: { 'b-input': BInput },
+                data: () => ({
+                    value: '',
+                    lazy: false
+                }),
+                template: '<b-input v-model="value" :lazy="lazy" />'
+            })
+
+            let root: VueWrapper<InstanceType<typeof rootComponent>>
+            let wrapper: VueWrapper<BInputInstance>
+
+            beforeEach(async () => {
+                root = mount(rootComponent)
+                wrapper = root.findComponent(BInput)
+                // triggers validation and invalidates
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                wrapper.vm.onBlur({} as any)
+                await wrapper.vm.$nextTick()
+                spyOnCheckHtml5Validity.mockClear()
+            })
+
+            it('should update and validate value at input event', async () => {
+                const inputElement = wrapper.get('input')
+
+                inputElement.element.value = 'foo'
+
+                await inputElement.trigger('input')
+                expect(root.vm.value).toBe('foo')
+                expect(spyOnCheckHtml5Validity).toHaveBeenCalledTimes(1)
+
+                await inputElement.trigger('change')
+                expect(spyOnCheckHtml5Validity).toHaveBeenCalledTimes(1)
+            })
+
+            it('should update and validate value at change event if lazy', async () => {
+                await root.setData({ lazy: true })
+                // input element must be queried after changing `lazy`
+                const inputElement = root.get('input')
+
+                inputElement.element.value = 'foo'
+
+                await inputElement.trigger('input')
+                expect(root.vm.value).toBe('')
+                expect(spyOnCheckHtml5Validity).toHaveBeenCalledTimes(0)
+
+                await inputElement.trigger('change')
+                expect(root.vm.value).toBe('foo')
+                expect(spyOnCheckHtml5Validity).toHaveBeenCalledTimes(1)
+            })
+
+            it('should validate value once when programmatically updated', async () => {
+                await root.setData({ value: 'foo' })
+                await wrapper.vm.$nextTick()
+                expect(spyOnCheckHtml5Validity).toHaveBeenCalledTimes(1)
+            })
+        })
+    })
+
+    describe('with fallthrough attributes', () => {
+        const attrs = {
+            class: 'fallthrough-class',
+            style: 'font-size: 2rem;',
+            id: 'fallthrough-id'
+        }
+
+        it('should bind class, style, and id to the root div if compatFallthrough is true (default)', () => {
+            const wrapper = shallowMount(BInput, { attrs })
+
+            const root = wrapper.find('div.control')
+            expect(root.classes(attrs.class)).toBe(true)
+            expect(root.attributes('style')).toBe(attrs.style)
+            expect(root.attributes('id')).toBe(attrs.id)
+
+            const input = wrapper.find('input')
+            expect(input.classes(attrs.class)).toBe(false)
+            expect(input.attributes('style')).toBeUndefined()
+            expect(input.attributes('id')).toBeUndefined()
+        })
+
+        it('should bind class, style, and id to the input element if compatFallthrough is false', () => {
+            const wrapper = shallowMount(BInput, {
+                attrs,
+                props: {
+                    compatFallthrough: false
+                }
+            })
+
+            const input = wrapper.find('input')
+            expect(input.classes(attrs.class)).toBe(true)
+            expect(input.attributes('style')).toBe(attrs.style)
+            expect(input.attributes('id')).toBe(attrs.id)
+
+            const root = wrapper.find('div.control')
+            expect(root.classes(attrs.class)).toBe(false)
+            expect(root.attributes('style')).toBeUndefined()
+            expect(root.attributes('id')).toBeUndefined()
+        })
+
+        it('should bind class, style, and id to the textarea element if compatFallthrough is false', () => {
+            const wrapper = shallowMount(BInput, {
+                attrs,
+                props: {
+                    compatFallthrough: false,
+                    type: 'textarea'
+                }
+            })
+
+            const textarea = wrapper.find('textarea')
+            expect(textarea.classes(attrs.class)).toBe(true)
+            expect(textarea.attributes('style')).toBe(attrs.style)
+            expect(textarea.attributes('id')).toBe(attrs.id)
+
+            const root = wrapper.find('div.control')
+            expect(root.classes(attrs.class)).toBe(false)
+            expect(root.attributes('style')).toBeUndefined()
+            expect(root.attributes('id')).toBeUndefined()
+        })
+    })
+})