buefy 1.0.0 → 1.0.2

package/src/components/numberinput/Numberinput.spec.ts

@@ -0,0 +1,445 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { shallowMount, mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import BNumberinput from '@components/numberinput/Numberinput.vue'
+
+let wrapper: VueWrapper<InstanceType<typeof BNumberinput>>
+
+describe('BNumberinput', () => {
+    describe('Rendered', () => {
+        beforeEach(() => {
+            wrapper = mount(BNumberinput)
+        })
+
+        afterEach(() => {
+            vi.useRealTimers()
+        })
+
+        it('is called', () => {
+            expect(wrapper.vm).toBeTruthy()
+            expect(wrapper.vm.$options.name).toBe('BNumberinput')
+        })
+
+        it('renders by default', () => {
+            expect(wrapper.find('input').exists()).toBeTruthy()
+            expect(wrapper.find('button').exists()).toBeTruthy()
+            expect(wrapper.classes()).toContain('is-grouped')
+        })
+
+        it('set controls position', async () => {
+            await wrapper.setProps({
+                controlsPosition: 'compact'
+            })
+
+            expect(wrapper.find('input').exists()).toBeTruthy()
+            expect(wrapper.find('button').exists()).toBeTruthy()
+            expect(wrapper.classes()).toContain('has-addons')
+        })
+
+        it('increments/decrements on long pressing exponentially', async () => {
+            // we should not depend on a real timer
+            // otherwise the results will depend on the machine
+            vi.useFakeTimers()
+
+            await wrapper.setProps({ exponential: true, modelValue: 1, step: 1 })
+
+            wrapper.find('.control.plus button').trigger('mousedown')
+            expect(wrapper.vm.computedValue).toBe(2)
+
+            for (let n = 1; n <= 10; ++n) {
+                // while Jest's fake setTimeout truncates the delay to an exact
+                // ms when it schedules the callback,
+                // vi.advanceTimersByTime floors the value
+                // and accumulates the remainder.
+                // so should be floored to prevent the accumulated remainder
+                // from triggering an extra callback
+                vi.advanceTimersByTime(Math.floor(250 / n))
+                expect(wrapper.vm.computedValue).toBe(n + 2)
+            }
+
+            wrapper.find('.control.plus').trigger('mouseup')
+            vi.runAllTimers()
+            await wrapper.vm.$nextTick()
+            expect(wrapper.vm.computedValue).toBe(12)
+
+            await wrapper.setProps({ exponential: 3, modelValue: 0, step: 1 })
+
+            wrapper.find('.control.plus button').trigger('mousedown')
+            expect(wrapper.vm.computedValue).toBe(1)
+
+            for (let n = 1; n <= 20; ++n) {
+                // while Jest's fake setTimeout truncates the delay to an exact
+                // ms when it schedules the callback,
+                // vi.advanceTimersByTime floors the value
+                // and accumulates the remainder.
+                // so should be floored to prevent the accumulated remainder
+                // from triggering an extra callback
+                vi.advanceTimersByTime(Math.floor(250 / (n * 3)))
+                expect(wrapper.vm.computedValue).toBe(n + 1)
+            }
+
+            wrapper.find('.control.plus').trigger('mouseup')
+            vi.runAllTimers()
+            await wrapper.vm.$nextTick()
+            expect(wrapper.vm.computedValue).toBe(21)
+        })
+
+        it('increments/decrements on long pressing', async () => {
+            vi.useFakeTimers()
+
+            let val = 0
+
+            // Increment
+            wrapper.find('.control.plus button').trigger('mousedown')
+            val++
+
+            // await wait(2000)
+            vi.runOnlyPendingTimers()
+            vi.runOnlyPendingTimers()
+            vi.runOnlyPendingTimers()
+            val += 3
+
+            wrapper.find('.control.plus').trigger('mouseup')
+            expect(wrapper.vm.computedValue).toBe(val)
+
+            // Decrement
+            wrapper.find('.control.minus button').trigger('mousedown')
+            val--
+
+            vi.runOnlyPendingTimers()
+            vi.runOnlyPendingTimers()
+            val -= 2
+
+            wrapper.find('.control.minus button').trigger('mouseup')
+            // Trigger it another time to check for unexpected browser behavior
+            wrapper.find('.control.minus button').trigger('mouseup')
+
+            expect(wrapper.vm.computedValue).toBe(val)
+        })
+
+        it('does not increment/decrement on long pressing when feature is disabled', async () => {
+            await wrapper.setProps({
+                longPress: false
+            })
+            vi.useFakeTimers()
+            wrapper.vm.computedValue = 0
+
+            // Increment
+            wrapper.find('.control.plus button').trigger('mousedown')
+
+            // await wait(2000)
+            vi.runOnlyPendingTimers()
+            vi.runOnlyPendingTimers()
+            vi.runOnlyPendingTimers()
+
+            wrapper.find('.control.plus').trigger('mouseup')
+            expect(wrapper.vm.computedValue).toBe(1)
+
+            // Decrement
+            wrapper.find('.control.minus button').trigger('mousedown')
+
+            vi.runOnlyPendingTimers()
+            vi.runOnlyPendingTimers()
+
+            wrapper.find('.control.minus button').trigger('mouseup')
+            // Trigger it another time to check for unexpected browser behavior
+            wrapper.find('.control.minus button').trigger('mouseup')
+
+            expect(wrapper.vm.computedValue).toBe(0)
+        })
+
+        it('increments/decrements after manually set value on input', async () => {
+            await wrapper.setProps({ exponential: true, modelValue: 1, step: 1 })
+            const BASE_VALUE = Math.floor(Math.random() * 10 + 1)
+            wrapper.find('input').setValue(BASE_VALUE)
+            wrapper.find('.control.plus button').trigger('click')
+            wrapper.find('.control.minus button').trigger('click')
+
+            expect(wrapper.vm.computedValue).toEqual(BASE_VALUE)
+        })
+
+        it('is invalid when step / minStep decimals and value decimals lengths are different', async () => {
+            await wrapper.setProps({ step: 1, modelValue: 1.15 })
+            expect(wrapper.find('input').element.checkValidity()).toEqual(false)
+            await wrapper.setProps({ step: 1.15, modelValue: 1.154 })
+            expect(wrapper.find('input').element.checkValidity()).toEqual(false)
+            await wrapper.setProps({ step: 1.15, modelValue: 1.11541, minStep: 0.0001 })
+            expect(wrapper.find('input').element.checkValidity()).toEqual(false)
+        })
+
+        it('is valid when step is "any"', async () => {
+            await wrapper.setProps({ step: 'any', modelValue: 1.15 })
+            expect(wrapper.find('input').element.checkValidity()).toEqual(true)
+            await wrapper.setProps({ step: 'any', modelValue: 1.054878 })
+            expect(wrapper.find('input').element.checkValidity()).toEqual(true)
+            await wrapper.setProps({ step: 'any', modelValue: 1 })
+            expect(wrapper.find('input').element.checkValidity()).toEqual(true)
+            await wrapper.setProps({ step: 'any', modelValue: null })
+            expect(wrapper.find('input').element.checkValidity()).toEqual(true)
+        })
+    })
+
+    describe('Rendered (shallow)', () => {
+        beforeEach(() => {
+            wrapper = shallowMount(BNumberinput, {
+                global: {
+                    stubs: {
+                        'b-input': {
+                            template: '<div></div>',
+                            emits: ['focus', 'blur'], // suppresses warning
+                            methods: {
+                                checkHtml5Validity: () => true
+                            }
+                        }
+                    }
+                }
+            })
+        })
+
+        it('manage prop types (number / string)', async () => {
+            const min = 5
+            const max = 15
+            const step = 5
+            const stepDec = 1.5
+            const minStep = 0.05
+
+            await wrapper.setProps({ min })
+            expect(wrapper.vm.minNumber).toBe(min)
+            await wrapper.setProps({ min: `${min}` })
+            expect(wrapper.vm.minNumber).toBe(min)
+
+            await wrapper.setProps({ max })
+            expect(wrapper.vm.maxNumber).toBe(max)
+            await wrapper.setProps({ max: `${max}` })
+            expect(wrapper.vm.maxNumber).toBe(max)
+
+            await wrapper.setData({ newStep: step })
+            expect(wrapper.vm.stepNumber).toBe(step)
+            expect(wrapper.vm.minStepNumber).toBe(step)
+            await wrapper.setData({ newStep: `${step}` })
+            expect(wrapper.vm.stepNumber).toBe(step)
+            expect(wrapper.vm.minStepNumber).toBe(step)
+
+            await wrapper.setData({ newStep: step })
+            expect(wrapper.vm.stepDecimals).toBe(0)
+            await wrapper.setData({ newStep: stepDec })
+            expect(wrapper.vm.stepDecimals).toBe(1)
+
+            await wrapper.setData({
+                newStep: step,
+                newMinStep: minStep
+            })
+            expect(wrapper.vm.stepDecimals).toBe(2)
+            expect(wrapper.vm.minStepNumber).toBe(minStep)
+            await wrapper.setData({ newStep: stepDec })
+            expect(wrapper.vm.stepDecimals).toBe(2)
+            expect(wrapper.vm.minStepNumber).toBe(minStep)
+        })
+
+        it('manage prop value', async () => {
+            const value = 5
+
+            await wrapper.setProps({ modelValue: value })
+            expect(wrapper.vm.newValue).toBe(value)
+        })
+
+        it('allows a placeholder', async () => {
+            const placeholder = 90
+            const value = 10
+
+            await wrapper.setProps({ placeholder })
+            expect(wrapper.vm.placeholder).toBe(placeholder)
+
+            // Only user input should set value, i.e. placeholder shouldn't set value
+            await wrapper.setProps({ modelValue: value })
+            expect(wrapper.vm.newValue).toBe(value)
+        })
+
+        it('expects placeholder to not override v-model value', async () => {
+            const placeholder = 90
+            const value = 10
+            const newValue = 20
+
+            await wrapper.setProps({ placeholder, modelValue: value })
+            expect(wrapper.vm.placeholder).toBe(placeholder)
+            await wrapper.setProps({ modelValue: newValue })
+
+            // Only user input should set value, i.e. placeholder shouldn't set value
+            expect(wrapper.vm.newValue).toBe(newValue)
+        })
+
+        it('allows a string placeholder value', async () => {
+            const placeholder = '90'
+            const newValue = 20
+
+            await wrapper.setProps({ placeholder })
+            expect(wrapper.vm.placeholder).toBe(placeholder)
+            await wrapper.setProps({ modelValue: newValue })
+            expect(wrapper.vm.modelValue).toBe(20)
+            expect(wrapper.vm.computedValue).toBe(20)
+            wrapper.vm.increment()
+            expect(wrapper.vm.computedValue).toBe(21)
+        })
+
+        it('can increment / decrement', async () => {
+            const min = 5
+            const max = 6
+            wrapper.vm.computedValue = max
+
+            await wrapper.setProps({ min })
+            wrapper.vm.decrement()
+            expect(wrapper.vm.computedValue).toBe(min)
+            wrapper.vm.decrement()
+            expect(wrapper.vm.computedValue).toBe(min)
+
+            await wrapper.setProps({ max })
+            wrapper.vm.increment()
+            expect(wrapper.vm.computedValue).toBe(max)
+            wrapper.vm.increment()
+            expect(wrapper.vm.computedValue).toBe(max)
+        })
+
+        it('can increment / decrement with a step', async () => {
+            const start = 5
+            const step = 3.5
+            const min = -5
+            wrapper.vm.computedValue = start
+            await wrapper.setProps({ step, min })
+            wrapper.vm.decrement()
+            expect(wrapper.vm.computedValue).toBe(start - step)
+            wrapper.vm.decrement()
+            expect(wrapper.vm.computedValue).toBe(start - (step * 2))
+        })
+
+        it('can increment / decrement with a "any" step', async () => {
+            const start = 5
+            const step = 'any'
+            const min = -5
+            wrapper.vm.computedValue = start
+            await wrapper.setProps({ step, min })
+            wrapper.vm.decrement()
+            expect(wrapper.vm.computedValue).toBe(start - 1)
+            wrapper.vm.decrement()
+            expect(wrapper.vm.computedValue).toBe(start - (1 * 2))
+
+            const decimalStart = 5.15
+            wrapper.vm.computedValue = decimalStart
+            await wrapper.setProps({ step, min })
+            wrapper.vm.decrement()
+            expect(wrapper.vm.computedValue).toBe(start - 1)
+            wrapper.vm.decrement()
+            expect(wrapper.vm.computedValue).toBe(start - (1 * 2))
+        })
+
+        it('can increment / decrement with minStep', async () => {
+            const start = 5.51
+            const step = 0.2
+            const minStep = 0.01
+            const min = -5
+            wrapper.vm.computedValue = start
+            await wrapper.setProps({ step, min, minStep })
+            wrapper.vm.decrement()
+            expect(wrapper.vm.computedValue).toBe(5.31)
+            wrapper.vm.decrement()
+            expect(wrapper.vm.computedValue).toBe(5.11)
+            wrapper.vm.increment()
+            expect(wrapper.vm.computedValue).toBe(5.31)
+            wrapper.vm.increment()
+            expect(wrapper.vm.computedValue).toBe(5.51)
+
+            const newMinStep = 0.1
+            await wrapper.setProps({ minStep: newMinStep })
+            wrapper.vm.decrement()
+            expect(wrapper.vm.computedValue).toBe(5.3)
+        })
+
+        it('can increment / decrement with minStep and "any" as step', async () => {
+            const start = 5.51
+            const step = 'any'
+            const minStep = 0.01
+            const min = -5
+            wrapper.vm.computedValue = start
+            await wrapper.setProps({ step, min, minStep })
+            wrapper.vm.decrement()
+            expect(wrapper.vm.computedValue).toBe(4.51)
+            wrapper.vm.decrement()
+            expect(wrapper.vm.computedValue).toBe(3.51)
+            wrapper.vm.increment()
+            expect(wrapper.vm.computedValue).toBe(4.51)
+            wrapper.vm.increment()
+            expect(wrapper.vm.computedValue).toBe(5.51)
+
+            const newMinStep = 0.1
+            await wrapper.setProps({ minStep: newMinStep })
+            wrapper.vm.decrement()
+            expect(wrapper.vm.computedValue).toBe(4.5)
+        })
+
+        it('manages empty value', async () => {
+            wrapper.vm.computedValue = ''
+            expect(wrapper.vm.computedValue).toBeNull()
+
+            const min = 5
+            await wrapper.setProps({ min })
+            wrapper.vm.computedValue = ''
+            expect(wrapper.vm.computedValue).toBeNull()
+        })
+
+        it('increments/decrements on click', async () => {
+            await wrapper.setProps({ modelValue: 5, step: 1 })
+
+            wrapper.find('.control.plus button').trigger('click')
+
+            await wrapper.vm.$nextTick()
+
+            expect(wrapper.vm.computedValue).toBe(6)
+
+            wrapper.find('.control.minus button').trigger('click')
+
+            await wrapper.vm.$nextTick()
+
+            expect(wrapper.vm.computedValue).toBe(5)
+        })
+    })
+
+    describe('with fallthrough attributes', () => {
+        const attrs = {
+            class: 'fallthrough-class',
+            style: 'font-size: 2rem;',
+            id: 'fallthrough-id'
+        }
+
+        it('should apply class, style, and id to the root <div> element if compatFallthrough is true (default)', () => {
+            const wrapper = shallowMount(BNumberinput, { attrs })
+
+            const root = wrapper.find('div.b-numberinput')
+            expect(root.classes(attrs.class)).toBe(true)
+            expect(root.attributes('style')).toBe(attrs.style)
+            expect(root.attributes('id')).toBe(attrs.id)
+
+            const input = wrapper.findComponent({ ref: 'input' })
+            expect(input.classes(attrs.class)).toBe(false)
+            expect(input.attributes('style')).toBeUndefined()
+            expect(input.attributes('id')).toBeUndefined()
+        })
+
+        it('should apply class, style and id to the underlying <b-input> if compatFallthrough is false', () => {
+            const wrapper = shallowMount(BNumberinput, {
+                attrs,
+                props: {
+                    compatFallthrough: false
+                }
+            })
+
+            const root = wrapper.find('div.b-numberinput')
+            expect(root.classes(attrs.class)).toBe(false)
+            expect(root.attributes('style')).toBeUndefined()
+            expect(root.attributes('id')).toBeUndefined()
+
+            const input = wrapper.findComponent({ ref: 'input' })
+            expect(input.classes(attrs.class)).toBe(true)
+            expect(input.attributes('style')).toBe(attrs.style)
+            expect(input.attributes('id')).toBe(attrs.id)
+        })
+    })
+})