vuetify
Version:
Vue Material Component Framework
358 lines (294 loc) • 8.78 kB
text/typescript
// Components
import VWindow from '../VWindow'
import VWindowItem from '../VWindowItem'
// Utilities
import {
mount,
MountOptions,
Wrapper,
} from '@vue/test-utils'
import { touch } from '../../../../test'
describe('VWindow.ts', () => {
type Instance = InstanceType<typeof VWindow>
let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
beforeEach(() => {
mountFunction = (options = {}) => {
return mount(VWindow, {
...options,
mocks: {
$vuetify: {
lang: {
t: str => str,
},
rtl: false,
},
},
})
}
})
it('should return the correct transition', async () => {
const wrapper = mountFunction()
// Force booted
wrapper.setData({ isBooted: true })
expect(wrapper.vm.computedTransition).toBe('v-window-x-transition')
wrapper.setData({ isReverse: true })
expect(wrapper.vm.computedTransition).toBe('v-window-x-reverse-transition')
wrapper.setProps({ vertical: true })
expect(wrapper.vm.computedTransition).toBe('v-window-y-reverse-transition')
wrapper.setData({ isReverse: false })
expect(wrapper.vm.computedTransition).toBe('v-window-y-transition')
})
it('should set reverse', async () => {
const wrapper = mountFunction({
propsData: {
value: 0,
},
slots: {
default: [
VWindowItem,
VWindowItem,
],
},
})
// Reverse implicitly set by changed index
wrapper.setProps({ value: 1 })
await wrapper.vm.$nextTick()
expect(wrapper.vm.internalReverse).toBeFalsy()
// Reverse implicitly set by changed index
wrapper.setProps({ value: 0 })
await wrapper.vm.$nextTick()
expect(wrapper.vm.internalReverse).toBeTruthy()
// Reverse explicit prop override
wrapper.setProps({ reverse: false })
expect(wrapper.vm.internalReverse).toBeTruthy()
// Reverse explicit prop override
wrapper.setProps({ reverse: true })
expect(wrapper.vm.internalReverse).toBeFalsy()
// Reverts back to local isReverse
wrapper.setProps({ reverse: undefined })
expect(wrapper.vm.internalReverse).toBeTruthy()
})
it('should increment and decrement current value', async () => {
const wrapper = mountFunction({
slots: {
default: [
VWindowItem,
VWindowItem,
VWindowItem,
],
},
})
await wrapper.vm.$nextTick()
expect(wrapper.vm.internalIndex).toBe(0)
wrapper.vm.next()
expect(wrapper.vm.internalIndex).toBe(1)
wrapper.vm.next()
expect(wrapper.vm.internalIndex).toBe(2)
// changed all following indices
// due to: https://github.com/vuetifyjs/vuetify/issues/7728
wrapper.vm.next()
expect(wrapper.vm.internalIndex).toBe(2)
wrapper.vm.prev()
expect(wrapper.vm.internalIndex).toBe(1)
wrapper.vm.prev()
expect(wrapper.vm.internalIndex).toBe(0)
wrapper.vm.prev()
expect(wrapper.vm.internalIndex).toBe(0)
})
it('should update model when internal index is greater than item count', async () => {
const wrapper = mountFunction({
propsData: {
value: 2,
},
slots: {
default: [
VWindowItem,
VWindowItem,
VWindowItem,
],
},
})
await wrapper.vm.$nextTick()
expect(wrapper.vm.internalIndex).toBe(2)
const [item1, item2, item3] = wrapper.findAll(VWindowItem).wrappers
item3.destroy()
expect(wrapper.vm.internalIndex).toBe(1)
item2.destroy()
expect(wrapper.vm.internalIndex).toBe(0)
item1.destroy()
expect(wrapper.vm.internalIndex).toBe(-1)
})
it('should react to touch', async () => {
const wrapper = mountFunction({
propsData: { value: 1 },
slots: {
default: [
VWindowItem,
VWindowItem,
VWindowItem,
VWindowItem,
VWindowItem,
],
},
})
await wrapper.vm.$nextTick()
expect(wrapper.vm.internalIndex).toBe(1)
touch(wrapper).start(0, 0).end(200, 0)
expect(wrapper.vm.internalIndex).toBe(0)
// changed expected indices due to:
// https://github.com/vuetifyjs/vuetify/issues/7728
touch(wrapper).start(0, 0).end(200, 0)
expect(wrapper.vm.internalIndex).toBe(0)
touch(wrapper).start(200, 0).end(0, 0)
expect(wrapper.vm.internalIndex).toBe(1)
wrapper.setProps({ value: 4 })
touch(wrapper).start(200, 0).end(0, 0)
expect(wrapper.vm.internalIndex).toBe(4)
wrapper.setProps({ value: 0 })
touch(wrapper).start(0, 0).end(200, 0)
expect(wrapper.vm.internalIndex).toBe(0)
})
it('should accept a custom touch object', async () => {
const left = jest.fn()
const right = jest.fn()
const fns = { left, right }
const wrapper = mountFunction({
propsData: {
touch: fns,
value: 1,
},
slots: {
default: [
VWindowItem,
VWindowItem,
VWindowItem,
VWindowItem,
VWindowItem,
],
},
})
await wrapper.vm.$nextTick()
touch(wrapper).start(200, 0).end(0, 0)
touch(wrapper).start(0, 0).end(200, 0)
expect(left).toHaveBeenCalled()
expect(right).toHaveBeenCalled()
})
// https://github.com/vuetifyjs/vuetify/issues/5000
it('should change to the next available index when using touch swipe', () => {
const wrapper = mountFunction({
slots: {
default: [
{
extends: VWindowItem,
props: {
disabled: {
type: Boolean,
default: true,
},
},
},
VWindowItem,
VWindowItem,
],
},
})
expect(wrapper.vm.internalIndex).toBe(1)
touch(wrapper).start(0, 0).end(200, 0)
expect(wrapper.vm.internalIndex).toBe(2)
touch(wrapper).start(0, 0).end(200, 0)
expect(wrapper.vm.internalIndex).toBe(1)
})
it('should generate and show arrows', async () => {
const wrapper = mountFunction({
propsData: {
showArrows: true,
},
slots: {
default: [
{ extends: VWindowItem },
{ extends: VWindowItem },
{ extends: VWindowItem },
{ extends: VWindowItem },
],
},
})
const next = wrapper.find('.v-window__next .v-btn')
expect(wrapper.vm.hasNext).toBe(true)
expect(wrapper.vm.hasPrev).toBe(false)
next.trigger('click')
await wrapper.vm.$nextTick()
expect(wrapper.vm.hasNext).toBe(true)
expect(wrapper.vm.hasPrev).toBe(true)
next.trigger('click')
next.trigger('click')
await wrapper.vm.$nextTick()
expect(wrapper.vm.hasNext).toBe(false)
expect(wrapper.vm.hasPrev).toBe(true)
wrapper.setProps({ continuous: true })
expect(wrapper.vm.hasNext).toBe(true)
expect(wrapper.vm.hasPrev).toBe(true)
})
it('should skip disabled items and go to the next available', () => {
const props = {
disabled: {
type: Boolean,
default: true,
},
}
const wrapper = mountFunction({
slots: {
default: [
{ extends: VWindowItem },
{ extends: VWindowItem, props },
{ extends: VWindowItem, props },
{ extends: VWindowItem },
],
},
})
expect(wrapper.vm.internalIndex).toBe(0)
wrapper.vm.next()
expect(wrapper.vm.internalIndex).toBe(3)
})
it('should ignore touch events', () => {
const wrapper = mountFunction({
propsData: { touchless: true },
slots: {
default: [
{ extends: VWindowItem },
{ extends: VWindowItem },
],
},
})
expect(wrapper.vm.internalIndex).toBe(0)
touch(wrapper).start(0, 0).end(200, 0)
expect(wrapper.vm.internalIndex).toBe(0)
})
// https://github.com/vuetifyjs/vuetify/issues/7728
it('should not "wrap around" when continuous === false', () => {
const wrapper = mountFunction({
propsData: {
continuous: false,
},
slots: {
default: [
{ extends: VWindowItem },
{ extends: VWindowItem },
{ extends: VWindowItem },
],
},
})
// by default we expect the internalIndex to be 0
expect(wrapper.vm.internalIndex).toBe(0)
// now call the prev() function
wrapper.vm.prev()
expect(wrapper.vm.internalIndex).toBe(0)
// now advance to the end
wrapper.vm.next()
expect(wrapper.vm.internalIndex).toBe(1)
wrapper.vm.next()
expect(wrapper.vm.internalIndex).toBe(2)
// it should not be able to advance past the end
wrapper.vm.next()
expect(wrapper.vm.internalIndex).toBe(2)
})
})