change code structure

tests/components/Splitpanes/Splitpanes.spec.js

@@ -0,0 +1,220 @@
+import { expect } from 'chai'
+import { shallowMount } from '@vue/test-utils'
+import Splitpanes from '@/components/Splitpanes'
+
+describe('Splitpanes.vue', () => {
+  it('renders correctly - vertical', () => {
+    // mount the component
+    const wrapper = shallowMount(Splitpanes, {
+      slots: {
+        leftPane: '<div />',
+        rightPane: '<div />'
+      },
+      propsData: {
+        before: { size: 60, max: 100 },
+        after: { size: 40, max: 100 }
+      }
+    })
+
+    expect(wrapper.findAll('.splitpanes-pane')).to.have.lengthOf(2)
+    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('60%')
+    expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('40%')
+  })
+
+  it('renders correctly - horizontal', () => {
+    // mount the component
+    const wrapper = shallowMount(Splitpanes, {
+      slots: {
+        leftPane: '<div />',
+        rightPane: '<div />'
+      },
+      propsData: {
+        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').at(0).element.style.height).to.equal('60%')
+    expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.height).to.equal('40%')
+  })
+
+  it('toggles correctly', async () => {
+    // mount the component
+    const wrapper = shallowMount(Splitpanes, {
+      slots: {
+        leftPane: '<div />',
+        rightPane: '<div />'
+      },
+      propsData: {
+        before: { size: 60, max: 100 },
+        after: { size: 40, max: 100 }
+      }
+    })
+
+    await wrapper.find('.toggle-btn').trigger('click')
+    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('0%')
+    expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('100%')
+
+    await wrapper.find('.toggle-btn').trigger('click')
+    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('60%')
+    expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('40%')
+
+    await wrapper.findAll('.toggle-btn').at(1).trigger('click')
+    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('100%')
+    expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('0%')
+
+    await wrapper.find('.toggle-btn').trigger('click')
+    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('60%')
+    expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('40%')
+  })
+
+  it('drag - vertical', async () => {
+    const root = document.createElement('div')
+    const place = document.createElement('div')
+    root.style.width = '600px'
+    root.style.height = '500px'
+    root.appendChild(place)
+    document.body.appendChild(root)
+
+    // mount the component
+    const wrapper = shallowMount(Splitpanes, {
+      attachTo: place,
+      slots: {
+        leftPane: '<div />',
+        rightPane: '<div />'
+      },
+      propsData: {
+        before: { size: 60, max: 100 },
+        after: { size: 40, max: 100 }
+      }
+    })
+
+    await wrapper.find('.splitpanes-splitter').trigger('mousedown')
+    document.dispatchEvent(new MouseEvent('mousemove', {
+      clientX: 300,
+      clientY: 80
+    }))
+    document.dispatchEvent(new MouseEvent('mouseup'))
+    await wrapper.vm.$nextTick()
+    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('50%')
+    wrapper.destroy()
+    root.remove()
+  })
+
+  it('drag - horizontal', async () => {
+    const root = document.createElement('div')
+    const place = document.createElement('div')
+    root.style.width = '600px'
+    root.style.height = '500px'
+    root.appendChild(place)
+    document.body.appendChild(root)
+
+    // mount the component
+    const wrapper = shallowMount(Splitpanes, {
+      attachTo: place,
+      slots: {
+        leftPane: '<div />',
+        rightPane: '<div />'
+      },
+      propsData: {
+        before: { size: 10, max: 100 },
+        after: { size: 90, max: 100 },
+        horizontal: true
+      }
+    })
+
+    await wrapper.find('.splitpanes-splitter').trigger('mousedown')
+    document.dispatchEvent(new MouseEvent('mousemove', {
+      clientX: 10,
+      clientY: 250
+    }))
+    document.dispatchEvent(new MouseEvent('mouseup'))
+    await wrapper.vm.$nextTick()
+    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.height).to.equal('50%')
+    wrapper.destroy()
+    root.remove()
+  })
+
+  it('drag - horizontal - touch', async () => {
+    const root = document.createElement('div')
+    const place = document.createElement('div')
+    root.style.width = '600px'
+    root.style.height = '500px'
+    root.appendChild(place)
+    document.body.appendChild(root)
+
+    // mount the component
+    const wrapper = shallowMount(Splitpanes, {
+      attachTo: place,
+      slots: {
+        leftPane: '<div />',
+        rightPane: '<div />'
+      },
+      propsData: {
+        before: { size: 10, max: 100 },
+        after: { size: 90, max: 100 },
+        horizontal: true
+      }
+    })
+
+    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 wrapper.vm.$nextTick()
+    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.height).to.equal('50%')
+    wrapper.destroy()
+    root.remove()
+    delete window.ontouchstart
+  })
+
+  it('drag - vertical - touch', async () => {
+    const root = document.createElement('div')
+    const place = document.createElement('div')
+    root.style.width = '600px'
+    root.style.height = '500px'
+    root.appendChild(place)
+    document.body.appendChild(root)
+
+    // mount the component
+    const wrapper = shallowMount(Splitpanes, {
+      attachTo: place,
+      slots: {
+        leftPane: '<div />',
+        rightPane: '<div />'
+      },
+      propsData: {
+        before: { size: 60, max: 100 },
+        after: { size: 40, max: 100 }
+      }
+    })
+    window.ontouchstart = null
+
+    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 wrapper.vm.$nextTick()
+    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('50%')
+    wrapper.destroy()
+    root.remove()
+    delete window.ontouchstart
+  })
+})

tests/components/Splitpanes/splitter.spec.js

@@ -0,0 +1,108 @@
+import { expect } from 'chai'
+import sinon from 'sinon'
+import splitter from '@/components/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)
+  })
+})