Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Sortable class and conversion to ES6 #397

Closed
wants to merge 3 commits into from
Closed

[WIP] Sortable class and conversion to ES6 #397

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0dcfde6
beginning of conversion of sortable to a class
Mar 24, 2018
721834f
WIP - turn sortable into a class
Mar 25, 2018
31106dc
WIP - turn sortable into a class
Mar 25, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 23 additions & 22 deletions __tests__/api.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
/* global describe,expect,test,beforeEach,beforeAll */
import sortable from '../src/html5sortable'
import Sortable from '../src/html5sortable'
import store from '../src/store'
/* eslint-env jest */
/* eslint-disable no-new */

describe('Testing api', () => {
document.body.innerHTML = `<!doctype html><html><body><div id="root"></div></body></html>`
Expand All @@ -22,7 +23,7 @@ describe('Testing api', () => {
secondLi = ul.querySelector('.item-second')
thirdLi = ul.querySelector('.item-second')

sortable(ul, {
new Sortable(ul, {
'items': 'li',
'connectWith': '.test',
placeholderClass: 'test-placeholder',
Expand All @@ -31,11 +32,11 @@ describe('Testing api', () => {
})

test('should have a data-opts object', () => {
expect(typeof sortable.__testing._data(ul, 'opts')).toBe('object')
expect(typeof Sortable.__testing._data(ul, 'opts')).toBe('object')
})

test('should have correct options set on options object', () => {
let opts = sortable.__testing._data(ul, 'opts')
let opts = Sortable.__testing._data(ul, 'opts')
expect(opts.items).toEqual('li')
expect(opts.connectWith).toEqual('.test')
expect(opts.placeholderClass).toEqual('test-placeholder')
Expand All @@ -47,11 +48,11 @@ describe('Testing api', () => {
})

test('should have a data-items object', () => {
expect(typeof sortable.__testing._data(ul, 'items')).toBe('string')
expect(typeof Sortable.__testing._data(ul, 'items')).toBe('string')
})

test('should have a h5s.connectWith object', () => {
expect(typeof sortable.__testing._data(ul, 'connectWith')).toBe('string')
expect(typeof Sortable.__testing._data(ul, 'connectWith')).toBe('string')
})

test('should have aria-grabbed attributes', () => {
Expand Down Expand Up @@ -80,7 +81,7 @@ describe('Testing api', () => {
})

test('string placehodler', () => {
sortable(ul, {
new Sortable(ul, {
'items': 'li',
'connectWith': '.test',
placeholderClass: 'test-placeholder',
Expand All @@ -92,27 +93,27 @@ describe('Testing api', () => {

describe('Destroy', () => {
beforeEach(() => {
sortable(ul, {
new Sortable(ul, {
'items': 'li',
'connectWith': '.test'
})
sortable(ul, 'destroy')
new Sortable(ul, 'destroy')
})

test('should not have a data-opts object', () => {
expect(typeof sortable.__testing._data(ul, 'opts')).toBe('undefined')
expect(typeof Sortable.__testing._data(ul, 'opts')).toBe('undefined')
})

test('should not have a aria-dropeffect attribute', () => {
expect(ul.getAttribute('aria-dropeffect')).toBeNull()
})

test('should not have a data-items object', () => {
expect(sortable.__testing._data(ul, 'items')).not.toBeDefined()
expect(Sortable.__testing._data(ul, 'items')).not.toBeDefined()
})

test('should not have a h5s.connectWith object', () => {
expect(sortable.__testing._data(ul, 'connectWith')).not.toBeDefined()
expect(Sortable.__testing._data(ul, 'connectWith')).not.toBeDefined()
})

test('should not have an aria-grabbed attribute', () => {
Expand All @@ -130,40 +131,40 @@ describe('Testing api', () => {

describe('Reload', () => {
beforeAll(function () {
sortable(ul, {
new Sortable(ul, {
'items': 'li:not(.disabled)',
'connectWith': '.test',
placeholderClass: 'test-placeholder'
})
sortable(ul, 'reload')
new Sortable(ul, 'reload')
})

test('should keep the options of the sortable', () => {
let opts = sortable.__testing._data(ul, 'opts')
let opts = Sortable.__testing._data(ul, 'opts')
expect(opts.items).toEqual('li:not(.disabled)')
expect(opts.connectWith).toEqual('.test')
expect(opts.placeholderClass).toEqual('test-placeholder')
})

test('should keep items attribute of the sortable', () => {
let items = sortable.__testing._data(ul, 'items')
let items = Sortable.__testing._data(ul, 'items')
expect(items).toEqual('li:not(.disabled)')
})

test('should keep connectWith attribute of the sortable', () => {
let connectWith = sortable.__testing._data(ul, 'connectWith')
let connectWith = Sortable.__testing._data(ul, 'connectWith')
expect(connectWith).toEqual('.test')
})
})

describe('Disable', () => {
beforeAll(function () {
sortable(ul, {
new Sortable(ul, {
'items': 'li:not(.disabled)',
'connectWith': '.test',
placeholderClass: 'test-placeholder'
})
sortable(ul, 'disable')
new Sortable(ul, 'disable')
})

test('should remove attributes from sortable', () => {
Expand All @@ -186,13 +187,13 @@ describe('Testing api', () => {

describe('Enable', () => {
beforeAll(function () {
sortable(ul, {
new Sortable(ul, {
'items': 'li:not(.disabled)',
'connectWith': '.test',
placeholderClass: 'test-placeholder'
})
sortable(ul, 'disable')
sortable(ul, 'enable')
new Sortable(ul, 'disable')
new Sortable(ul, 'enable')
})

test('should readd attributes to sortable', () => {
Expand Down
33 changes: 17 additions & 16 deletions __tests__/events.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/* global describe,test,expect,beforeEach,CustomEvent */
import sortable from '../src/html5sortable'
import Sortable from '../src/html5sortable'
/* eslint-env jest */
/* eslint-disable no-new */

describe('Testing events', () => {
let body = document.querySelector('body')
Expand Down Expand Up @@ -81,11 +82,11 @@ describe('Testing events', () => {
})

function addEventListener (ul) {
sortable(ul, null)[0].addEventListener('sortstart', function (e) {
new Sortable(ul, null)[0].addEventListener('sortstart', function (e) {
startEventOriginItem = e.detail.item
startEventOriginContainer = e.detail.origin.container
})
sortable(ul, null)[0].addEventListener('sortupdate', function (e) {
new Sortable(ul, null)[0].addEventListener('sortupdate', function (e) {
sortupdateitem = e.detail.item
sortupdateitemEndIndex = e.detail.endSortableIndex
sortupdateitemStartIndex = e.detail.startSortableIndex
Expand All @@ -97,14 +98,14 @@ describe('Testing events', () => {
sortupdateitemNewStartList = e.detail.newStartList
sortupdateitemOldStartList = e.detail.oldStartList
})
sortable(ul, null)[0].addEventListener('sortstop', function (e) {
new Sortable(ul, null)[0].addEventListener('sortstop', function (e) {
sortstopitem = e.detail.item
sortstopStartparent = e.detail.startParent
})
}

test('should correctly run dragstart event', () => {
sortable(ul, {
new Sortable(ul, {
items: 'li',
connectWith: '.test',
placeholderClass: 'test-placeholder',
Expand All @@ -129,7 +130,7 @@ describe('Testing events', () => {
test(
'should correctly copy element on run dragstart/dragover event',
() => {
sortable(ul, {
new Sortable(ul, {
items: 'li',
copy: true,
connectWith: '.test',
Expand Down Expand Up @@ -157,7 +158,7 @@ describe('Testing events', () => {
)

test('dragstart/dragover event with maxitems', () => {
sortable(ul, {
new Sortable(ul, {
items: 'li',
maxItems: 1,
connectWith: '.test',
Expand All @@ -178,7 +179,7 @@ describe('Testing events', () => {
})

test('should not add class on hover event', () => {
sortable(ul, {
new Sortable(ul, {
items: 'li',
hoverClass: false
})
Expand All @@ -188,7 +189,7 @@ describe('Testing events', () => {
expect(li.classList.contains('sortable-over')).toBe(false)
})
test('should correctly add class on hover event', () => {
sortable(ul, {
new Sortable(ul, {
'items': 'li',
hoverClass: 'sortable-item-over'
})
Expand All @@ -203,7 +204,7 @@ describe('Testing events', () => {
test(
'should correctly add and remove both classes on hover event',
() => {
sortable(ul, {
new Sortable(ul, {
'items': 'li',
hoverClass: 'sortable-item-over sortable-item-over-second'
})
Expand All @@ -219,7 +220,7 @@ describe('Testing events', () => {
)

test.skip('should correctly place moved item into correct index', () => {
sortable(ul, {
new Sortable(ul, {
items: 'li',
placeholderClass: 'test-placeholder'
})
Expand Down Expand Up @@ -265,13 +266,13 @@ describe('Testing events', () => {
test.skip(
'should correctly place moved item into correct index using acceptFrom',
() => {
sortable(ul, {
new Sortable(ul, {
items: 'li',
acceptFrom: false,
placeholderClass: 'test-placeholder'
})

sortable(ul2, {
new Sortable(ul2, {
items: 'li',
acceptFrom: '.sortable',
placeholderClass: 'test-placeholder2'
Expand Down Expand Up @@ -303,7 +304,7 @@ describe('Testing events', () => {
)

test.skip('should correctly place non-moved item into correct index', () => {
sortable(ul, {
new Sortable(ul, {
items: 'li',
placeholderClass: 'test-placeholder'
})
Expand Down Expand Up @@ -335,7 +336,7 @@ describe('Testing events', () => {
test(
'should revert item into correct index when dropped outside',
() => {
sortable(ul, {
new Sortable(ul, {
'items': 'li',
placeholderClass: 'test-placeholder'
})
Expand Down Expand Up @@ -364,7 +365,7 @@ describe('Testing events', () => {

test('should find sortable child dragover event', () => {
var item4 = ul.querySelector('.item4')
sortable(ul, {
new Sortable(ul, {
items: 'li',
placeholderClass: 'test-placeholder',
draggingClass: 'test-dragging'
Expand Down
10 changes: 5 additions & 5 deletions __tests__/options.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
/* global describe,test,expect */
/* eslint-env jest */

import sortable from '../src/html5sortable'
import Sortable from '../src/html5sortable'

describe('Test options from sortable', () => {
test('options: undefined', () => {
let div = window.document.createElement('div')
// init sortable & get first one
let sortableElement = sortable(div, undefined)[0]
let sortableElement = new Sortable(div, undefined)[0]
// test a default value to check if they stay the same
expect(sortableElement.h5s.data.opts).toEqual({
connectWith: false,
Expand All @@ -29,8 +29,8 @@ describe('Test options from sortable', () => {
test('options: method string', () => {
let div = window.document.createElement('div')
// init sortable & get first one
let sortableElement = sortable(div, null)
sortableElement = sortable(div, 'enable')[0]
let sortableElement = new Sortable(div, null)
sortableElement = new Sortable(div, 'enable')[0]
// test a default value to check if they stay the same
expect(sortableElement.h5s.data.opts.draggingClass).toEqual('sortable-dragging')
})
Expand All @@ -39,7 +39,7 @@ describe('Test options from sortable', () => {
// fake sortable
let div = window.document.createElement('div')
// init sortable & get first one
let sortableElement = sortable(div, {
let sortableElement = new Sortable(div, {
maxItems: 5
})[0]
// assert
Expand Down
16 changes: 8 additions & 8 deletions __tests__/serialize.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
/* eslint-env jest */

import serialize from '../src/serialize'
import sortable from '../src/html5sortable'
import Sortable from '../src/html5sortable'

describe('Testing serialize', () => {
test('serialize: sortableContainer is not an element', () => {
Expand All @@ -18,7 +18,7 @@ describe('Testing serialize', () => {

test('serialize: element that is not part of the DOM', () => {
// setup
let isASortable = sortable(window.document.createElement('div'), {})[0]
let isASortable = new Sortable(window.document.createElement('div'), {})[0]
// assert
expect(serialize(isASortable)).toEqual(expect.objectContaining({
items: expect.any(Array),
Expand All @@ -28,7 +28,7 @@ describe('Testing serialize', () => {

test('serialize: empty sortableContainer', () => {
// setup
let isASortable = sortable(window.document.createElement('div'), {})[0]
let isASortable = new Sortable(window.document.createElement('div'), {})[0]
// assert
expect(serialize(isASortable)).toEqual(expect.objectContaining({
items: expect.arrayContaining([]),
Expand All @@ -41,7 +41,7 @@ describe('Testing serialize', () => {

test('serialize: with elements', () => {
// setup
let isASortable = sortable(window.document.createElement('div'), {
let isASortable = new Sortable(window.document.createElement('div'), {
items: 'div'
})[0]
isASortable.innerHTML = '<div id="itemOne">Item1</div><div id="itemTwo">Item2</div>'
Expand Down Expand Up @@ -72,7 +72,7 @@ describe('Testing serialize', () => {

test('serialize: with elements that are not items sortable', () => {
// setup
let isASortable = sortable(window.document.createElement('div'), {
let isASortable = new Sortable(window.document.createElement('div'), {
items: 'div'
})[0]
isASortable.innerHTML = '<span>Title</span><div id="itemOne">Item1</div><div id="itemTwo">Item2</div>'
Expand Down Expand Up @@ -103,21 +103,21 @@ describe('Testing serialize', () => {

test('serialize: with invalid customItemSerializer', () => {
// setup
let isASortable = sortable(window.document.createElement('div'), {})[0]
let isASortable = new Sortable(window.document.createElement('div'), {})[0]
// assert
expect(() => { serialize(isASortable, 'fake') }).toThrow('You need to provide a valid serializer for items and the container.')
})

test('serialize: with invalid customContainerSerializer', () => {
// setup
let isASortable = sortable(window.document.createElement('div'), {})[0]
let isASortable = new Sortable(window.document.createElement('div'), {})[0]
// assert
expect(() => { serialize(isASortable, () => {}, 'fake') }).toThrow('You need to provide a valid serializer for items and the container.')
})

test('serialize: with custom serializer', () => {
// setup
let isASortable = sortable(window.document.createElement('div'), {
let isASortable = new Sortable(window.document.createElement('div'), {
items: 'div'
})[0]
isASortable.innerHTML = '<div id="itemOne">Item1</div><div id="itemTwo">Item2</div>'
Expand Down
Loading