WIP - turn sortable into a class

lukasoppermann · Mar 25, 2018 · 721834f · 721834f
1 parent 0dcfde6
commit 721834f
Show file tree

Hide file tree

Showing 10 changed files with 412 additions and 416 deletions.
diff --git a/__tests__/api.test.ts b/__tests__/api.test.ts
@@ -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>`
@@ -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',
@@ -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')
@@ -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', () => {
@@ -80,7 +81,7 @@ describe('Testing api', () => {
     })
 
     test('string placehodler', () => {
-      sortable(ul, {
+      new Sortable(ul, {
         'items': 'li',
         'connectWith': '.test',
         placeholderClass: 'test-placeholder',
@@ -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', () => {
@@ -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', () => {
@@ -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', () => {

diff --git a/__tests__/events.test.ts b/__tests__/events.test.ts
@@ -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')
@@ -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
@@ -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',
@@ -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',
@@ -157,7 +158,7 @@ describe('Testing events', () => {
   )
 
   test('dragstart/dragover event with maxitems', () => {
-    sortable(ul, {
+    new Sortable(ul, {
       items: 'li',
       maxItems: 1,
       connectWith: '.test',
@@ -178,7 +179,7 @@ describe('Testing events', () => {
   })
 
   test('should not add class on hover event', () => {
-    sortable(ul, {
+    new Sortable(ul, {
       items: 'li',
       hoverClass: false
     })
@@ -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'
     })
@@ -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'
       })
@@ -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'
     })
@@ -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'
@@ -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'
     })
@@ -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'
       })
@@ -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'

diff --git a/__tests__/options.test.ts b/__tests__/options.test.ts
@@ -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,
@@ -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')
   })
@@ -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

diff --git a/__tests__/serialize.test.ts b/__tests__/serialize.test.ts
@@ -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', () => {
@@ -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),
@@ -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([]),
@@ -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>'
@@ -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>'
@@ -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>'