mirror of
https://github.com/lana-k/sqliteviz.git
synced 2026-03-24 15:06:17 +08:00
change repo structure
This commit is contained in:
lana-k
62
tests/components/Common/CheckBox.spec.js
Normal file
62
tests/components/Common/CheckBox.spec.js
Normal file
@@ -0,0 +1,62 @@
|
||||
import { expect } from 'chai'
|
||||
import { shallowMount } from '@vue/test-utils'
|
||||
import CheckBox from '@/components/Common/CheckBox'
|
||||
|
||||
describe('CheckBox', () => {
|
||||
it('unchecked by default', () => {
|
||||
const wrapper = shallowMount(CheckBox, {
|
||||
props: { init: false },
|
||||
attachTo: document.body
|
||||
})
|
||||
expect(wrapper.find('img').isVisible()).to.equal(false)
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('gets init state according to passed props', () => {
|
||||
const wrapperChecked = shallowMount(CheckBox, {
|
||||
props: { init: true },
|
||||
attachTo: document.body
|
||||
})
|
||||
expect(wrapperChecked.find('img.checked').isVisible()).to.equal(true)
|
||||
wrapperChecked.unmount()
|
||||
|
||||
const wrapperUnchecked = shallowMount(CheckBox, {
|
||||
props: { init: false },
|
||||
attachTo: document.body
|
||||
})
|
||||
expect(wrapperUnchecked.find('img').isVisible()).to.equal(false)
|
||||
wrapperUnchecked.unmount()
|
||||
})
|
||||
|
||||
it('checked on click', async () => {
|
||||
const wrapper = shallowMount(CheckBox, { attachTo: document.body })
|
||||
await wrapper.trigger('click')
|
||||
expect(wrapper.find('img.checked').isVisible()).to.equal(true)
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('emits event on click', async () => {
|
||||
const wrapper = shallowMount(CheckBox)
|
||||
await wrapper.trigger('click')
|
||||
expect(wrapper.emitted().click).to.have.lengthOf(1)
|
||||
expect(wrapper.emitted().click[0]).to.eql([true])
|
||||
await wrapper.trigger('click')
|
||||
expect(wrapper.emitted().click).to.have.lengthOf(2)
|
||||
expect(wrapper.emitted().click[1]).to.eql([false])
|
||||
})
|
||||
|
||||
it('disabled', async () => {
|
||||
const wrapper = shallowMount(CheckBox, {
|
||||
props: { disabled: true }
|
||||
})
|
||||
expect(wrapper.find('.checkbox-container').classes()).to.include('disabled')
|
||||
expect(wrapper.find('.checkbox-container').classes()).to.not.include(
|
||||
'checked'
|
||||
)
|
||||
await wrapper.trigger('click')
|
||||
expect(wrapper.emitted().click).to.equal(undefined)
|
||||
expect(wrapper.find('.checkbox-container').classes()).to.not.include(
|
||||
'checked'
|
||||
)
|
||||
})
|
||||
})
|
||||
26
tests/components/Common/LoadingIndicator.spec.js
Normal file
26
tests/components/Common/LoadingIndicator.spec.js
Normal file
@@ -0,0 +1,26 @@
|
||||
import { expect } from 'chai'
|
||||
import { shallowMount } from '@vue/test-utils'
|
||||
import LoadingIndicator from '@/components/Common/LoadingIndicator'
|
||||
|
||||
describe('LoadingIndicator.vue', () => {
|
||||
it('Calculates animation class', async () => {
|
||||
const wrapper = shallowMount(LoadingIndicator, {
|
||||
props: { progress: 0 }
|
||||
})
|
||||
expect(wrapper.find('svg').classes()).to.contain('progress')
|
||||
await wrapper.setProps({ progress: undefined })
|
||||
expect(wrapper.find('svg').classes()).to.not.contain('progress')
|
||||
expect(wrapper.find('svg').classes()).to.contain('loading')
|
||||
})
|
||||
|
||||
it('Calculates arc', async () => {
|
||||
const wrapper = shallowMount(LoadingIndicator, {
|
||||
props: { progress: 50 }
|
||||
})
|
||||
// The lendth of circle in the component is 50.24. If progress is 50% then resulting arc
|
||||
// should be 25.12
|
||||
expect(
|
||||
wrapper.find('.loader-svg.front').element.style.strokeDasharray
|
||||
).to.equal('25.12px, 25.12px')
|
||||
})
|
||||
})
|
||||
86
tests/components/Common/Logs.spec.js
Normal file
86
tests/components/Common/Logs.spec.js
Normal file
@@ -0,0 +1,86 @@
|
||||
import { expect } from 'chai'
|
||||
import { shallowMount } from '@vue/test-utils'
|
||||
import Logs from '@/components/Common/Logs'
|
||||
import { nextTick } from 'vue'
|
||||
|
||||
let place
|
||||
describe('Logs.vue', () => {
|
||||
beforeEach(() => {
|
||||
place = document.createElement('div')
|
||||
document.body.appendChild(place)
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
place.remove()
|
||||
})
|
||||
|
||||
it('Scrolled to bottom on mounted', async () => {
|
||||
const messages = [
|
||||
{ type: 'error', message: 'msg 1' },
|
||||
{ type: 'error', message: 'msg 2' },
|
||||
{ type: 'error', message: 'msg 3' },
|
||||
{ type: 'error', message: 'msg 4' }
|
||||
]
|
||||
|
||||
const containerHeight = 160
|
||||
const borderWidth = 1
|
||||
const viewHeight = containerHeight - 2 * borderWidth
|
||||
const wrapper = shallowMount(Logs, {
|
||||
attachTo: place,
|
||||
props: { messages, style: `height: ${containerHeight}px` }
|
||||
})
|
||||
await nextTick()
|
||||
const height = wrapper.find('.logs-container').element.scrollHeight
|
||||
expect(wrapper.find('.logs-container').element.scrollTop).to.equal(
|
||||
height - viewHeight
|
||||
)
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('Scrolled to bottom when a message added', async () => {
|
||||
const messages = [
|
||||
{ type: 'error', message: 'msg 1' },
|
||||
{ type: 'error', message: 'msg 2' },
|
||||
{ type: 'error', message: 'msg 3' },
|
||||
{ type: 'error', message: 'msg 4' }
|
||||
]
|
||||
|
||||
const containerHeight = 160
|
||||
const borderWidth = 1
|
||||
const viewHeight = containerHeight - 2 * borderWidth
|
||||
const wrapper = shallowMount(Logs, {
|
||||
attachTo: place,
|
||||
props: { messages, style: `height: ${containerHeight}px` }
|
||||
})
|
||||
|
||||
await nextTick()
|
||||
messages.push({ type: 'error', message: 'msg 5' })
|
||||
|
||||
await nextTick()
|
||||
await nextTick()
|
||||
const height = wrapper.find('.logs-container').element.scrollHeight
|
||||
expect(wrapper.find('.logs-container').element.scrollTop).to.equal(
|
||||
height - viewHeight
|
||||
)
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('Serializes messages', async () => {
|
||||
const messages = [
|
||||
{ type: 'error', message: 'msg 1.', row: 0, hint: 'Try again later.' },
|
||||
{ type: 'error', message: 'msg 2!', row: 2, hint: undefined },
|
||||
{ type: 'error', message: 'msg 3?', hint: 'Be happy!' },
|
||||
{ type: 'error', message: 'msg 4' }
|
||||
]
|
||||
|
||||
const wrapper = shallowMount(Logs, {
|
||||
props: { messages }
|
||||
})
|
||||
|
||||
const logs = wrapper.findAll('.msg')
|
||||
expect(logs[0].text()).to.equal('Error in row 0. msg 1. Try again later.')
|
||||
expect(logs[1].text()).to.equal('Error in row 2. msg 2!')
|
||||
expect(logs[2].text()).to.equal('msg 3? Be happy!')
|
||||
expect(logs[3].text()).to.equal('msg 4.')
|
||||
})
|
||||
})
|
||||
27
tests/components/Common/Pager.spec.js
Normal file
27
tests/components/Common/Pager.spec.js
Normal file
@@ -0,0 +1,27 @@
|
||||
import { expect } from 'chai'
|
||||
import sinon from 'sinon'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import Pager from '@/components/Common/Pager'
|
||||
|
||||
describe('Pager.vue', () => {
|
||||
afterEach(() => {
|
||||
sinon.restore()
|
||||
})
|
||||
|
||||
it('emits update:modelValue event with a page', async () => {
|
||||
const wrapper = mount(Pager, {
|
||||
props: {
|
||||
pageCount: 5,
|
||||
'onUpdate:modelValue': e => wrapper.setProps({ modelValue: e })
|
||||
}
|
||||
})
|
||||
|
||||
// click on 'next page' link
|
||||
await wrapper.find('.paginator-next').trigger('click')
|
||||
expect(wrapper.props('modelValue')).to.eql(2)
|
||||
|
||||
// click on the link to page 3 (it has index 2)
|
||||
await wrapper.findAll('.paginator-page-link')[2].trigger('click')
|
||||
expect(wrapper.props('modelValue')).to.eql(3)
|
||||
})
|
||||
})
|
||||
354
tests/components/Common/Splitpanes/Splitpanes.spec.js
Normal file
354
tests/components/Common/Splitpanes/Splitpanes.spec.js
Normal file
@@ -0,0 +1,354 @@
|
||||
import { expect } from 'chai'
|
||||
import { shallowMount } from '@vue/test-utils'
|
||||
import Splitpanes from '@/components/Common/Splitpanes'
|
||||
import { nextTick } from 'vue'
|
||||
|
||||
describe('Splitpanes.vue', () => {
|
||||
it('renders correctly - vertical', () => {
|
||||
// mount the component
|
||||
const wrapper = shallowMount(Splitpanes, {
|
||||
slots: {
|
||||
'left-pane': '<div />',
|
||||
'right-pane': '<div />'
|
||||
},
|
||||
props: {
|
||||
before: { size: 60, max: 100 },
|
||||
after: { size: 40, max: 100 }
|
||||
}
|
||||
})
|
||||
|
||||
expect(wrapper.findAll('.splitpanes-pane')).to.have.lengthOf(2)
|
||||
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal(
|
||||
'60%'
|
||||
)
|
||||
expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal(
|
||||
'40%'
|
||||
)
|
||||
})
|
||||
|
||||
it('renders correctly - horizontal', () => {
|
||||
// mount the component
|
||||
const wrapper = shallowMount(Splitpanes, {
|
||||
slots: {
|
||||
leftPane: '<div />',
|
||||
rightPane: '<div />'
|
||||
},
|
||||
props: {
|
||||
before: { size: 60, max: 100 },
|
||||
after: { size: 40, max: 100 },
|
||||
horizontal: true
|
||||
}
|
||||
})
|
||||
|
||||
expect(wrapper.findAll('.splitpanes-pane')).to.have.lengthOf(2)
|
||||
expect(
|
||||
wrapper.findAll('.splitpanes-pane')[0].element.style.height
|
||||
).to.equal('60%')
|
||||
expect(
|
||||
wrapper.findAll('.splitpanes-pane')[1].element.style.height
|
||||
).to.equal('40%')
|
||||
})
|
||||
|
||||
it('toggles correctly - no maximized initially', async () => {
|
||||
// mount the component
|
||||
const wrapper = shallowMount(Splitpanes, {
|
||||
slots: {
|
||||
'left-pane': '<div />',
|
||||
'right-pane': '<div />'
|
||||
},
|
||||
props: {
|
||||
before: { size: 60, max: 100 },
|
||||
after: { size: 40, max: 100 }
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.find('.toggle-btn').trigger('click')
|
||||
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal(
|
||||
'0%'
|
||||
)
|
||||
expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal(
|
||||
'100%'
|
||||
)
|
||||
|
||||
await wrapper.find('.toggle-btn').trigger('click')
|
||||
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal(
|
||||
'60%'
|
||||
)
|
||||
expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal(
|
||||
'40%'
|
||||
)
|
||||
|
||||
await wrapper.findAll('.toggle-btn')[1].trigger('click')
|
||||
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal(
|
||||
'100%'
|
||||
)
|
||||
expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal(
|
||||
'0%'
|
||||
)
|
||||
|
||||
await wrapper.find('.toggle-btn').trigger('click')
|
||||
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal(
|
||||
'60%'
|
||||
)
|
||||
expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal(
|
||||
'40%'
|
||||
)
|
||||
})
|
||||
|
||||
it('toggles correctly - with maximized initially', async () => {
|
||||
// mount the component
|
||||
let wrapper = shallowMount(Splitpanes, {
|
||||
slots: {
|
||||
'left-pane': '<div />',
|
||||
'right-pane': '<div />'
|
||||
},
|
||||
props: {
|
||||
before: { size: 0, max: 100 },
|
||||
after: { size: 100, max: 100 },
|
||||
default: { before: 20, after: 80 }
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.find('.toggle-btn').trigger('click')
|
||||
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal(
|
||||
'20%'
|
||||
)
|
||||
expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal(
|
||||
'80%'
|
||||
)
|
||||
|
||||
await wrapper.findAll('.toggle-btn')[0].trigger('click')
|
||||
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal(
|
||||
'0%'
|
||||
)
|
||||
expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal(
|
||||
'100%'
|
||||
)
|
||||
|
||||
await wrapper.find('.toggle-btn').trigger('click')
|
||||
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal(
|
||||
'20%'
|
||||
)
|
||||
expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal(
|
||||
'80%'
|
||||
)
|
||||
|
||||
await wrapper.findAll('.toggle-btn')[1].trigger('click')
|
||||
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal(
|
||||
'100%'
|
||||
)
|
||||
expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal(
|
||||
'0%'
|
||||
)
|
||||
|
||||
wrapper = shallowMount(Splitpanes, {
|
||||
slots: {
|
||||
leftPane: '<div />',
|
||||
rightPane: '<div />'
|
||||
},
|
||||
props: {
|
||||
before: { size: 100, max: 100 },
|
||||
after: { size: 0, max: 100 }
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.find('.toggle-btn').trigger('click')
|
||||
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal(
|
||||
'50%'
|
||||
)
|
||||
expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal(
|
||||
'50%'
|
||||
)
|
||||
|
||||
await wrapper.findAll('.toggle-btn')[0].trigger('click')
|
||||
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal(
|
||||
'0%'
|
||||
)
|
||||
expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal(
|
||||
'100%'
|
||||
)
|
||||
|
||||
await wrapper.find('.toggle-btn').trigger('click')
|
||||
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal(
|
||||
'50%'
|
||||
)
|
||||
expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal(
|
||||
'50%'
|
||||
)
|
||||
|
||||
await wrapper.findAll('.toggle-btn')[1].trigger('click')
|
||||
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal(
|
||||
'100%'
|
||||
)
|
||||
expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal(
|
||||
'0%'
|
||||
)
|
||||
})
|
||||
|
||||
it('drag - vertical', async () => {
|
||||
const root = document.createElement('div')
|
||||
document.body.appendChild(root)
|
||||
document.body.style.margin = 0
|
||||
|
||||
// mount the component
|
||||
const wrapper = shallowMount(Splitpanes, {
|
||||
attachTo: root,
|
||||
slots: {
|
||||
'left-pane': '<div />',
|
||||
'right-pane': '<div />'
|
||||
},
|
||||
props: {
|
||||
before: { size: 60, max: 100 },
|
||||
after: { size: 40, max: 100 }
|
||||
}
|
||||
})
|
||||
const parent = root.querySelector('[data-v-app=""]')
|
||||
parent.style.width = '600px'
|
||||
parent.style.height = '500px'
|
||||
|
||||
await wrapper.find('.splitpanes-splitter').trigger('mousedown')
|
||||
document.dispatchEvent(
|
||||
new MouseEvent('mousemove', {
|
||||
clientX: 300,
|
||||
clientY: 80
|
||||
})
|
||||
)
|
||||
document.dispatchEvent(new MouseEvent('mouseup'))
|
||||
await nextTick()
|
||||
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal(
|
||||
'50%'
|
||||
)
|
||||
wrapper.unmount()
|
||||
root.remove()
|
||||
})
|
||||
|
||||
it('drag - horizontal', async () => {
|
||||
const root = document.createElement('div')
|
||||
document.body.appendChild(root)
|
||||
document.body.style.margin = 0
|
||||
|
||||
// mount the component
|
||||
const wrapper = shallowMount(Splitpanes, {
|
||||
attachTo: root,
|
||||
slots: {
|
||||
'left-pane': '<div />',
|
||||
'right-pane': '<div />'
|
||||
},
|
||||
props: {
|
||||
before: { size: 10, max: 100 },
|
||||
after: { size: 90, max: 100 },
|
||||
horizontal: true
|
||||
}
|
||||
})
|
||||
|
||||
const parent = root.querySelector('[data-v-app=""]')
|
||||
parent.style.width = '600px'
|
||||
parent.style.height = '500px'
|
||||
|
||||
await wrapper.find('.splitpanes-splitter').trigger('mousedown')
|
||||
document.dispatchEvent(
|
||||
new MouseEvent('mousemove', {
|
||||
clientX: 10,
|
||||
clientY: 250
|
||||
})
|
||||
)
|
||||
document.dispatchEvent(new MouseEvent('mouseup'))
|
||||
await nextTick()
|
||||
await nextTick()
|
||||
expect(
|
||||
wrapper.findAll('.splitpanes-pane')[0].element.style.height
|
||||
).to.equal('50%')
|
||||
wrapper.unmount()
|
||||
root.remove()
|
||||
})
|
||||
|
||||
it('drag - horizontal - touch', async () => {
|
||||
const root = document.createElement('div')
|
||||
document.body.appendChild(root)
|
||||
document.body.style.margin = 0
|
||||
|
||||
// mount the component
|
||||
const wrapper = shallowMount(Splitpanes, {
|
||||
attachTo: root,
|
||||
slots: {
|
||||
'left-pane': '<div />',
|
||||
'right-pane': '<div />'
|
||||
},
|
||||
props: {
|
||||
before: { size: 10, max: 100 },
|
||||
after: { size: 90, max: 100 },
|
||||
horizontal: true
|
||||
}
|
||||
})
|
||||
|
||||
const parent = root.querySelector('[data-v-app=""]')
|
||||
parent.style.width = '600px'
|
||||
parent.style.height = '500px'
|
||||
|
||||
window.ontouchstart = null
|
||||
await wrapper.find('.splitpanes-splitter').trigger('touchstart')
|
||||
const event = new TouchEvent('touchmove')
|
||||
Object.defineProperty(event, 'touches', {
|
||||
value: [
|
||||
{
|
||||
clientX: 10,
|
||||
clientY: 250
|
||||
}
|
||||
],
|
||||
writable: true
|
||||
})
|
||||
document.dispatchEvent(event)
|
||||
document.dispatchEvent(new MouseEvent('touchend'))
|
||||
await nextTick()
|
||||
expect(
|
||||
wrapper.findAll('.splitpanes-pane')[0].element.style.height
|
||||
).to.equal('50%')
|
||||
wrapper.unmount()
|
||||
root.remove()
|
||||
delete window.ontouchstart
|
||||
})
|
||||
|
||||
it('drag - vertical - touch', async () => {
|
||||
const root = document.createElement('div')
|
||||
document.body.appendChild(root)
|
||||
document.body.style.margin = 0
|
||||
|
||||
// mount the component
|
||||
const wrapper = shallowMount(Splitpanes, {
|
||||
attachTo: root,
|
||||
slots: {
|
||||
'left-pane': '<div />',
|
||||
'right-pane': '<div />'
|
||||
},
|
||||
props: {
|
||||
before: { size: 60, max: 100 },
|
||||
after: { size: 40, max: 100 }
|
||||
}
|
||||
})
|
||||
window.ontouchstart = null
|
||||
const parent = root.querySelector('[data-v-app=""]')
|
||||
parent.style.width = '600px'
|
||||
parent.style.height = '500px'
|
||||
|
||||
await wrapper.find('.splitpanes-splitter').trigger('touchstart')
|
||||
const event = new TouchEvent('touchmove')
|
||||
Object.defineProperty(event, 'touches', {
|
||||
value: [
|
||||
{
|
||||
clientX: 300,
|
||||
clientY: 80
|
||||
}
|
||||
],
|
||||
writable: true
|
||||
})
|
||||
document.dispatchEvent(event)
|
||||
document.dispatchEvent(new MouseEvent('touchend'))
|
||||
await nextTick()
|
||||
expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal(
|
||||
'50%'
|
||||
)
|
||||
wrapper.unmount()
|
||||
root.remove()
|
||||
delete window.ontouchstart
|
||||
})
|
||||
})
|
||||
116
tests/components/Common/Splitpanes/splitter.spec.js
Normal file
116
tests/components/Common/Splitpanes/splitter.spec.js
Normal file
@@ -0,0 +1,116 @@
|
||||
import { expect } from 'chai'
|
||||
import sinon from 'sinon'
|
||||
import splitter from '@/components/Common/Splitpanes/splitter'
|
||||
|
||||
describe('splitter.js', () => {
|
||||
afterEach(() => {
|
||||
sinon.restore()
|
||||
})
|
||||
|
||||
it('getCurrentMouseDrag', () => {
|
||||
const container = document.createElement('div')
|
||||
container.style.width = '100px'
|
||||
container.style.height = '100px'
|
||||
container.style.position = 'fixed'
|
||||
container.style.top = '10px'
|
||||
container.style.left = '20px'
|
||||
|
||||
document.body.appendChild(container)
|
||||
|
||||
const event = new MouseEvent('mousemove', {
|
||||
clientX: 70,
|
||||
clientY: 80
|
||||
})
|
||||
|
||||
const mouseDrag = splitter.getCurrentMouseDrag(event, container)
|
||||
expect(mouseDrag.x).to.equal(50)
|
||||
expect(mouseDrag.y).to.equal(70)
|
||||
})
|
||||
|
||||
it('getCurrentDragPercentage - horisontal', () => {
|
||||
sinon.stub(splitter, 'getCurrentMouseDrag').returns({ x: 50, y: 70 })
|
||||
|
||||
const event = {}
|
||||
const isHorisontal = true
|
||||
const container = document.createElement('div')
|
||||
container.style.width = '200px'
|
||||
container.style.height = '140px'
|
||||
|
||||
document.body.appendChild(container)
|
||||
|
||||
const dragPercentage = splitter.getCurrentDragPercentage(
|
||||
event,
|
||||
container,
|
||||
isHorisontal
|
||||
)
|
||||
expect(dragPercentage).to.equal(50)
|
||||
})
|
||||
|
||||
it('getCurrentDragPercentage - vertical', () => {
|
||||
sinon.stub(splitter, 'getCurrentMouseDrag').returns({ x: 50, y: 70 })
|
||||
|
||||
const event = {}
|
||||
const isHorisontal = false
|
||||
const container = document.createElement('div')
|
||||
container.style.width = '200px'
|
||||
container.style.height = '140px'
|
||||
|
||||
document.body.appendChild(container)
|
||||
|
||||
const dragPercentage = splitter.getCurrentDragPercentage(
|
||||
event,
|
||||
container,
|
||||
isHorisontal
|
||||
)
|
||||
expect(dragPercentage).to.equal(25)
|
||||
})
|
||||
|
||||
it('calculateOffset', () => {
|
||||
sinon.stub(splitter, 'getCurrentDragPercentage').returns(25)
|
||||
|
||||
const event = {}
|
||||
const container = {}
|
||||
|
||||
const splitterInfo = {
|
||||
container,
|
||||
paneBeforeMax: 70,
|
||||
paneAfterMax: 80,
|
||||
isHorisontal: true
|
||||
}
|
||||
const offset = splitter.calculateOffset(event, splitterInfo)
|
||||
|
||||
expect(offset).to.equal(25)
|
||||
})
|
||||
|
||||
it('calculateOffset prevents dragging beyond paneBefore max', () => {
|
||||
sinon.stub(splitter, 'getCurrentDragPercentage').returns(75)
|
||||
|
||||
const event = {}
|
||||
const container = {}
|
||||
const splitterInfo = {
|
||||
container,
|
||||
paneBeforeMax: 70,
|
||||
paneAfterMax: 80,
|
||||
isHorisontal: true
|
||||
}
|
||||
const offset = splitter.calculateOffset(event, splitterInfo)
|
||||
|
||||
expect(offset).to.equal(70)
|
||||
})
|
||||
|
||||
it('calculateOffset prevents dragging beyond paneAfter max', () => {
|
||||
sinon.stub(splitter, 'getCurrentDragPercentage').returns(10)
|
||||
|
||||
const event = {}
|
||||
const container = {}
|
||||
const splitterInfo = {
|
||||
container,
|
||||
paneBeforeMax: 70,
|
||||
paneAfterMax: 80,
|
||||
isHorisontal: true
|
||||
}
|
||||
const offset = splitter.calculateOffset(event, splitterInfo)
|
||||
|
||||
expect(offset).to.equal(20)
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user