gridstack 12.3.1 → 12.3.3

package/dist/spec/gridstack-spec.js

@@ -0,0 +1,1780 @@
+import { GridStack } from '../src/gridstack';
+import { Utils } from '../src/utils';
+describe('gridstack >', () => {
+    'use strict';
+    let grid;
+    let grids;
+    let find = function (id) {
+        return grid.engine.nodes.find(n => n.id === id);
+    };
+    let findEl = function (id) {
+        return find(id).el;
+    };
+    // grid has 4x2 and 4x4 top-left aligned - used on most test cases
+    let gridHTML = '<div class="grid-stack">' +
+        '  <div class="grid-stack-item" gs-x="0" gs-y="0" gs-w="4" gs-h="2" gs-id="gsItem1" id="item1">' +
+        '    <div class="grid-stack-item-content">item 1 text</div>' +
+        '  </div>' +
+        '  <div class="grid-stack-item" gs-x="4" gs-y="0" gs-w="4" gs-h="4" gs-id="gsItem2" id="item2">' +
+        '    <div class="grid-stack-item-content">item 2 text</div>' +
+        '  </div>' +
+        '</div>';
+    let gridstackHTML = '<div style="width: 800px; height: 600px" id="gs-cont">' + gridHTML + '</div>';
+    let gridstackSmallHTML = '<div style="width: 400px; height: 600px" id="gs-cont">' + gridHTML + '</div>';
+    // empty grid
+    let gridstackEmptyHTML = '<div style="width: 800px; height: 600px" id="gs-cont">' +
+        '  <div class="grid-stack">' +
+        '  </div>' +
+        '</div>';
+    // nested empty grids
+    let gridstackNestedHTML = '<div style="width: 800px; height: 600px" id="gs-cont">' +
+        '  <div class="grid-stack">' +
+        '    <div class="grid-stack-item">' +
+        '      <div class="grid-stack-item-content">item 1</div>' +
+        '      <div class="grid-stack-item-content">' +
+        '         <div class="grid-stack sub1"></div>' +
+        '      </div>' +
+        '    </div>' +
+        '  </div>' +
+        '</div>';
+    // generic widget with no param
+    let widgetHTML = '<div id="item3"><div class="grid-stack-item-content"> hello </div></div>';
+    describe('grid.init() / initAll() >', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('use selector >', () => {
+            grid = GridStack.init(undefined, '.grid-stack');
+            expect(grid).not.toBe(null);
+        });
+        it('use selector no dot >', () => {
+            grid = GridStack.init(null, 'grid-stack');
+            expect(grid).not.toBe(null);
+        });
+        it('use wrong selector >', () => {
+            grid = GridStack.init(null, 'BAD_SELECTOR_TEST');
+            expect(grid).toEqual(null);
+        });
+        it('initAll use selector >', () => {
+            grids = GridStack.initAll(undefined, '.grid-stack');
+            expect(grids.length).toBe(1);
+        });
+        it('initAll use selector no dot >', () => {
+            grids = GridStack.initAll(undefined, 'grid-stack');
+            expect(grids.length).toBe(1);
+        });
+    });
+    describe('grid.setAnimation >', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('should add class grid-stack-animate to the container. >', () => {
+            grid = GridStack.init({ animate: true });
+            expect(grid.el.classList.contains('grid-stack-animate')).toBe(true);
+            grid.el.classList.remove('grid-stack-animate');
+            expect(grid.el.classList.contains('grid-stack-animate')).toBe(false);
+            grid.setAnimation(true);
+            expect(grid.el.classList.contains('grid-stack-animate')).toBe(true);
+        });
+        it('should remove class grid-stack-animate from the container. >', () => {
+            grid = GridStack.init({ animate: true });
+            grid.setAnimation(false);
+            expect(grid.el.classList.contains('grid-stack-animate')).toBe(false);
+        });
+    });
+    describe('grid._setStaticClass >', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('should add class grid-stack-static to the container. >', () => {
+            grid = GridStack.init({ staticGrid: true });
+            expect(grid.el.classList.contains('grid-stack-static')).toBe(true);
+            grid.setStatic(false);
+            expect(grid.el.classList.contains('grid-stack-static')).toBe(false);
+            grid.setStatic(true);
+            expect(grid.el.classList.contains('grid-stack-static')).toBe(true);
+        });
+        it('should remove class grid-stack-static from the container. >', () => {
+            grid = GridStack.init({ staticGrid: false });
+            expect(grid.el.classList.contains('grid-stack-static')).toBe(false);
+            grid.setStatic(true);
+            expect(grid.el.classList.contains('grid-stack-static')).toBe(true);
+        });
+    });
+    // Note: Pixel-accurate coordinate tests moved to E2E tests
+    // where real browser layout engines can provide accurate getBoundingClientRect()
+    // describe('grid.getCellFromPixel >', () => {});
+    // Note: Exact pixel calculation tests moved to E2E tests
+    // where real browser layout engines can provide accurate offsetWidth
+    // describe('grid.cellWidth >', () => {});
+    describe('grid.cellHeight >', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('should set and get cellHeight correctly >', () => {
+            let cellHeight = 80;
+            let margin = 5;
+            let options = {
+                cellHeight,
+                margin,
+                column: 12
+            };
+            grid = GridStack.init(options);
+            let rows = parseInt(grid.el.getAttribute('gs-current-row'));
+            expect(grid.getRow()).toBe(rows);
+            expect(grid.getCellHeight()).toBe(cellHeight);
+            // Note: Exact pixel height calculation tests moved to E2E tests
+            // where real browser layout engines can provide accurate getComputedStyle() values
+            grid.cellHeight(grid.getCellHeight()); // should be no-op
+            expect(grid.getCellHeight()).toBe(cellHeight);
+            cellHeight = 120; // should change
+            grid.cellHeight(cellHeight);
+            expect(grid.getCellHeight()).toBe(cellHeight);
+            cellHeight = 20; // should change
+            grid.cellHeight(cellHeight);
+            expect(grid.getCellHeight()).toBe(cellHeight);
+        });
+        it('should be square >', () => {
+            grid = GridStack.init({ cellHeight: 'auto' });
+            expect(grid.cellWidth()).toBe(grid.getCellHeight());
+        });
+    });
+    describe('grid.column >', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('should have no changes >', () => {
+            grid = GridStack.init();
+            expect(grid.getColumn()).toBe(12);
+            grid.column(12);
+            expect(grid.getColumn()).toBe(12);
+        });
+        it('should set construct CSS class >', () => {
+            grid = GridStack.init({ column: 1 });
+            expect(grid.el.classList.contains('gs-1')).toBe(true);
+            grid.column(2);
+            expect(grid.el.classList.contains('gs-1')).toBe(false);
+            expect(grid.el.classList.contains('gs-2')).toBe(true);
+        });
+        it('should set CSS class >', () => {
+            grid = GridStack.init();
+            expect(grid.el.classList.contains('grid-stack')).toBe(true);
+            grid.column(1);
+            expect(grid.el.classList.contains('gs-1')).toBe(true);
+        });
+        it('should SMALL change column number, no relayout >', () => {
+            let options = {
+                column: 12
+            };
+            grid = GridStack.init(options);
+            let items = Utils.getElements('.grid-stack-item');
+            grid.column(9);
+            expect(grid.getColumn()).toBe(9);
+            items.forEach(el => expect(el.getAttribute('gs-y')).toBe(null));
+            grid.column(12);
+            expect(grid.getColumn()).toBe(12);
+            items.forEach(el => expect(el.getAttribute('gs-y')).toBe(null));
+        });
+        it('no sizing, no moving >', () => {
+            grid = GridStack.init({ column: 12 });
+            let items = Utils.getElements('.grid-stack-item');
+            grid.column(8, 'none');
+            expect(grid.getColumn()).toBe(8);
+            items.forEach(el => {
+                expect(parseInt(el.getAttribute('gs-w'))).toBe(4);
+                expect(el.getAttribute('gs-y')).toBe(null);
+            });
+        });
+        it('no sizing, but moving down >', () => {
+            grid = GridStack.init({ column: 12 });
+            let items = Utils.getElements('.grid-stack-item');
+            grid.column(7, 'move');
+            expect(grid.getColumn()).toBe(7);
+            items.forEach(el => expect(parseInt(el.getAttribute('gs-w'))).toBe(4));
+            expect(items[0].getAttribute('gs-y')).toBe(null);
+            expect(parseInt(items[1].getAttribute('gs-y'))).toBe(2);
+        });
+        it('should change column number and re-layout items >', () => {
+            let options = {
+                column: 12,
+                float: true
+            };
+            grid = GridStack.init(options);
+            let el1 = document.getElementById('item1');
+            let el2 = document.getElementById('item2');
+            // items start at 4x2 and 4x4
+            expect(el1.getAttribute('gs-x')).toBe(null);
+            expect(el1.getAttribute('gs-y')).toBe(null);
+            expect(parseInt(el1.getAttribute('gs-w'))).toBe(4);
+            expect(parseInt(el1.getAttribute('gs-h'))).toBe(2);
+            expect(parseInt(el2.getAttribute('gs-x'))).toBe(4);
+            expect(el2.getAttribute('gs-y')).toBe(null);
+            expect(parseInt(el2.getAttribute('gs-w'))).toBe(4);
+            expect(parseInt(el2.getAttribute('gs-h'))).toBe(4);
+            // 1 column will have item1, item2
+            grid.column(1);
+            expect(grid.getColumn()).toBe(1);
+            expect(el1.getAttribute('gs-x')).toBe(null);
+            expect(el1.getAttribute('gs-y')).toBe(null);
+            expect(el1.getAttribute('gs-w')).toBe(null);
+            expect(parseInt(el1.getAttribute('gs-h'))).toBe(2);
+            expect(el2.getAttribute('gs-x')).toBe(null);
+            expect(parseInt(el2.getAttribute('gs-y'))).toBe(2);
+            expect(el2.getAttribute('gs-w')).toBe(null);
+            expect(parseInt(el2.getAttribute('gs-h'))).toBe(4);
+            // add default 1x1 item to the end (1 column)
+            let el3 = grid.addWidget({ content: 'new' });
+            expect(el3).not.toBe(null);
+            expect(el3.getAttribute('gs-x')).toBe(null);
+            expect(parseInt(el3.getAttribute('gs-y'))).toBe(6);
+            expect(el3.getAttribute('gs-w')).toBe(null);
+            expect(el3.getAttribute('gs-h')).toBe(null);
+            // back to 12 column and initial layout (other than new item3)
+            grid.column(12);
+            expect(grid.getColumn()).toBe(12);
+            expect(el1.getAttribute('gs-x')).toBe(null);
+            expect(el1.getAttribute('gs-y')).toBe(null);
+            expect(parseInt(el1.getAttribute('gs-w'))).toBe(4);
+            expect(parseInt(el1.getAttribute('gs-h'))).toBe(2);
+            expect(parseInt(el2.getAttribute('gs-x'))).toBe(4);
+            expect(el2.getAttribute('gs-y')).toBe(null);
+            expect(parseInt(el2.getAttribute('gs-w'))).toBe(4);
+            expect(parseInt(el2.getAttribute('gs-h'))).toBe(4);
+            // TODO: we don't remembers autoPlacement (cleared multiple places)
+            // expect(parseInt(el3.getAttribute('gs-x'))).toBe(8);
+            // expect(el3.getAttribute('gs-y')).toBe(null);
+            expect(el3.getAttribute('gs-x')).toBe(null);
+            expect(parseInt(el3.getAttribute('gs-y'))).toBe(6);
+            expect(el3.getAttribute('gs-w')).toBe(null);
+            expect(el3.getAttribute('gs-h')).toBe(null);
+            // back to 1 column
+            grid.column(1);
+            expect(grid.getColumn()).toBe(1);
+            expect(el1.getAttribute('gs-x')).toBe(null);
+            expect(el1.getAttribute('gs-y')).toBe(null);
+            expect(el1.getAttribute('gs-w')).toBe(null);
+            expect(parseInt(el1.getAttribute('gs-h'))).toBe(2);
+            expect(el2.getAttribute('gs-x')).toBe(null);
+            expect(parseInt(el2.getAttribute('gs-y'))).toBe(2);
+            expect(el2.getAttribute('gs-w')).toBe(null);
+            expect(parseInt(el2.getAttribute('gs-h'))).toBe(4);
+            expect(el3.getAttribute('gs-x')).toBe(null);
+            expect(parseInt(el3.getAttribute('gs-y'))).toBe(6);
+            expect(el3.getAttribute('gs-w')).toBe(null);
+            expect(el3.getAttribute('gs-h')).toBe(null);
+            // move item2 to beginning to [3][1][2] vertically
+            grid.update(el3, { x: 0, y: 0 });
+            expect(el3.getAttribute('gs-x')).toBe(null);
+            expect(el3.getAttribute('gs-y')).toBe(null);
+            expect(el3.getAttribute('gs-w')).toBe(null);
+            expect(el3.getAttribute('gs-h')).toBe(null);
+            expect(el1.getAttribute('gs-x')).toBe(null);
+            expect(parseInt(el1.getAttribute('gs-y'))).toBe(1);
+            expect(el1.getAttribute('gs-w')).toBe(null);
+            expect(parseInt(el1.getAttribute('gs-h'))).toBe(2);
+            expect(el2.getAttribute('gs-x')).toBe(null);
+            expect(parseInt(el2.getAttribute('gs-y'))).toBe(3);
+            expect(el2.getAttribute('gs-w')).toBe(null);
+            expect(parseInt(el2.getAttribute('gs-h'))).toBe(4);
+            // back to 12 column, el3 to be beginning still, but [1][2] to be in 1 columns still but wide 4x2 and 4x still
+            grid.column(12);
+            expect(grid.getColumn()).toBe(12);
+            expect(el3.getAttribute('gs-x')).toBe(null); // 8 TEST WHY
+            expect(el3.getAttribute('gs-y')).toBe(null);
+            expect(el3.getAttribute('gs-w')).toBe(null);
+            expect(el3.getAttribute('gs-h')).toBe(null);
+            expect(el1.getAttribute('gs-x')).toBe(null);
+            expect(parseInt(el1.getAttribute('gs-y'))).toBe(1);
+            expect(parseInt(el1.getAttribute('gs-w'))).toBe(4);
+            expect(parseInt(el1.getAttribute('gs-h'))).toBe(2);
+            expect(parseInt(el2.getAttribute('gs-x'))).toBe(4);
+            expect(parseInt(el2.getAttribute('gs-y'))).toBe(1);
+            expect(parseInt(el2.getAttribute('gs-w'))).toBe(4);
+            expect(parseInt(el2.getAttribute('gs-h'))).toBe(4);
+            // 2 column will have item1, item2, item3 in 1 column still but half the width
+            grid.column(1); // test convert from small, should use 12 layout still
+            grid.column(2);
+            expect(grid.getColumn()).toBe(2);
+            expect(el3.getAttribute('gs-x')).toBe(null); // 1 TEST WHY
+            expect(el3.getAttribute('gs-y')).toBe(null);
+            expect(el3.getAttribute('gs-w')).toBe(null); // 1 as we scaled from 12 columns
+            expect(el3.getAttribute('gs-h')).toBe(null);
+            expect(el1.getAttribute('gs-x')).toBe(null);
+            expect(parseInt(el1.getAttribute('gs-y'))).toBe(1);
+            expect(el1.getAttribute('gs-w')).toBe(null);
+            expect(parseInt(el1.getAttribute('gs-h'))).toBe(2);
+            expect(parseInt(el2.getAttribute('gs-x'))).toBe(1);
+            expect(parseInt(el2.getAttribute('gs-y'))).toBe(1);
+            expect(el2.getAttribute('gs-w')).toBe(null);
+            expect(parseInt(el2.getAttribute('gs-h'))).toBe(4);
+        });
+    });
+    describe('grid.column larger layout >', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackEmptyHTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('24 layout in 12 column to 1 back 12 then 24 >', () => {
+            const children = [{ x: 0, y: 0, w: 12, h: 1, id: 'left' }, { x: 12, y: 0, w: 12, h: 1, id: 'right' }];
+            children.forEach(c => c.content = c.id);
+            grid = GridStack.init({ children });
+            const left = find('left');
+            const right = find('right');
+            // side-by-side components 12+12 = 24 columns but only have 12!
+            expect(left).toEqual(expect.objectContaining({ x: 0, y: 0, w: 12 }));
+            expect(right).toEqual(expect.objectContaining({ x: 0, y: 1, w: 12 }));
+            // Resize to 1 column
+            grid.column(1);
+            expect(left).toEqual(expect.objectContaining({ x: 0, y: 0, w: 1 }));
+            expect(right).toEqual(expect.objectContaining({ x: 0, y: 1, w: 1 }));
+            // Resize back to 12 column
+            grid.column(12);
+            expect(left).toEqual(expect.objectContaining({ x: 0, y: 0, w: 12 }));
+            expect(right).toEqual(expect.objectContaining({ x: 0, y: 1, w: 12 }));
+            // Resize to 24 column
+            grid.column(24);
+            expect(left).toEqual(expect.objectContaining({ x: 0, y: 0, w: 12 }));
+            expect(right).toEqual(expect.objectContaining({ x: 12, y: 0, w: 12 }));
+        });
+        it('24 column to 12, 1 back 12,24 >', () => {
+            const children = [{ x: 0, y: 0, w: 12, h: 1, id: 'left' }, { x: 12, y: 0, w: 12, h: 1, id: 'right' }];
+            children.forEach(c => c.content = c.id);
+            grid = GridStack.init({ column: 24, children });
+            const left = find('left');
+            const right = find('right');
+            // side-by-side components 12+12 = 24 columns
+            expect(left).toEqual(expect.objectContaining({ x: 0, y: 0, w: 12 }));
+            expect(right).toEqual(expect.objectContaining({ x: 12, y: 0, w: 12 }));
+            // Resize to 12 column
+            grid.column(12);
+            expect(left).toEqual(expect.objectContaining({ x: 0, y: 0, w: 6 }));
+            expect(right).toEqual(expect.objectContaining({ x: 6, y: 0, w: 6 }));
+            // Resize to 1 column
+            grid.column(1);
+            expect(left).toEqual(expect.objectContaining({ x: 0, y: 0, w: 1 }));
+            expect(right).toEqual(expect.objectContaining({ x: 0, y: 1, w: 1 }));
+            // back to 12 column
+            grid.column(12);
+            expect(left).toEqual(expect.objectContaining({ x: 0, y: 0, w: 6 }));
+            expect(right).toEqual(expect.objectContaining({ x: 6, y: 0, w: 6 }));
+            // back to 24 column
+            grid.column(24);
+            expect(left).toEqual(expect.objectContaining({ x: 0, y: 0, w: 12 }));
+            expect(right).toEqual(expect.objectContaining({ x: 12, y: 0, w: 12 }));
+        });
+    });
+    // describe('oneColumnModeDomSort >', () => {
+    //   beforeEach(() => {
+    //     document.body.insertAdjacentHTML('afterbegin', gridstackEmptyHTML);
+    //   });
+    //   afterEach(() => {
+    //     document.body.removeChild(document.getElementById('gs-cont'));
+    //   });
+    //   it('should support default going to 1 column >', () => {
+    //     let options = {
+    //       column: 12,
+    //       float: true
+    //     };
+    //     grid = GridStack.init(options);
+    //     grid.batchUpdate();
+    //     grid.batchUpdate();
+    //     let el1 = grid.addWidget({w:1, h:1});
+    //     let el2 = grid.addWidget({x:2, y:0, w:2, h:1});
+    //     let el3 = grid.addWidget({x:1, y:0, w:1, h:2});
+    //     grid.batchUpdate(false);
+    //     grid.batchUpdate(false);
+    //     // items are item1[1x1], item3[1x1], item2[2x1]
+    //     expect(el1.getAttribute('gs-x')).toBe(null);
+    //     expect(el1.getAttribute('gs-y')).toBe(null);
+    //     expect(el1.getAttribute('gs-w')).toBe(null);
+    //     expect(el1.getAttribute('gs-h')).toBe(null);
+    //     expect(parseInt(el3.getAttribute('gs-x'))).toBe(1);
+    //     expect(el3.getAttribute('gs-y')).toBe(null);
+    //     expect(el3.getAttribute('gs-w')).toBe(null);
+    //     expect(parseInt(el3.getAttribute('gs-h'))).toBe(2);
+    //     expect(parseInt(el2.getAttribute('gs-x'))).toBe(2);
+    //     expect(el2.getAttribute('gs-y')).toBe(null);
+    //     expect(parseInt(el2.getAttribute('gs-w'))).toBe(2);
+    //     expect(el2.getAttribute('gs-h')).toBe(null);
+    //     // items are item1[1x1], item3[1x2], item2[1x1] in 1 column
+    //     grid.column(1);
+    //     expect(el1.getAttribute('gs-x')).toBe(null);
+    //     expect(el1.getAttribute('gs-y')).toBe(null);
+    //     expect(el1.getAttribute('gs-w')).toBe(null);
+    //     expect(el1.getAttribute('gs-h')).toBe(null);
+    //     expect(el3.getAttribute('gs-x')).toBe(null);
+    //     expect(parseInt(el3.getAttribute('gs-y'))).toBe(1);
+    //     expect(el3.getAttribute('gs-w')).toBe(null);
+    //     expect(parseInt(el3.getAttribute('gs-h'))).toBe(2);
+    //     expect(el2.getAttribute('gs-x')).toBe(null);
+    //     expect(parseInt(el2.getAttribute('gs-y'))).toBe(3);
+    //     expect(el2.getAttribute('gs-w')).toBe(null);
+    //     expect(el2.getAttribute('gs-h')).toBe(null);
+    //   });
+    //   it('should support oneColumnModeDomSort ON going to 1 column >', () => {
+    //     let options = {
+    //       column: 12,
+    //       oneColumnModeDomSort: true,
+    //       float: true
+    //     };
+    //     grid = GridStack.init(options);
+    //     let el1 = grid.addWidget({w:1, h:1});
+    //     let el2 = grid.addWidget({x:2, y:0, w:2, h:1});
+    //     let el3 = grid.addWidget({x:1, y:0, w:1, h:2});
+    //     // items are item1[1x1], item3[1x1], item2[2x1]
+    //     expect(el1.getAttribute('gs-x')).toBe(null);
+    //     expect(el1.getAttribute('gs-y')).toBe(null);
+    //     expect(el1.getAttribute('gs-w')).toBe(null);
+    //     expect(el1.getAttribute('gs-h')).toBe(null);
+    //     expect(parseInt(el3.getAttribute('gs-x'))).toBe(1);
+    //     expect(el3.getAttribute('gs-y')).toBe(null);
+    //     expect(el3.getAttribute('gs-w')).toBe(null);
+    //     expect(parseInt(el3.getAttribute('gs-h'))).toBe(2);
+    //     expect(parseInt(el2.getAttribute('gs-x'))).toBe(2);
+    //     expect(el2.getAttribute('gs-y')).toBe(null);
+    //     expect(parseInt(el2.getAttribute('gs-w'))).toBe(2);
+    //     expect(el2.getAttribute('gs-h')).toBe(null);
+    //     // items are item1[1x1], item2[1x1], item3[1x2] in 1 column dom ordered
+    //     grid.column(1);
+    //     expect(el1.getAttribute('gs-x')).toBe(null);
+    //     expect(el1.getAttribute('gs-y')).toBe(null);
+    //     expect(el1.getAttribute('gs-w')).toBe(null);
+    //     expect(el1.getAttribute('gs-h')).toBe(null);
+    //     expect(el2.getAttribute('gs-x')).toBe(null);
+    //     expect(parseInt(el2.getAttribute('gs-y'))).toBe(1);
+    //     expect(el2.getAttribute('gs-w')).toBe(null);
+    //     expect(el2.getAttribute('gs-h')).toBe(null);
+    //     expect(el3.getAttribute('gs-x')).toBe(null);
+    //     expect(parseInt(el3.getAttribute('gs-y'))).toBe(2);
+    //     expect(el3.getAttribute('gs-w')).toBe(null);
+    //     expect(parseInt(el3.getAttribute('gs-h'))).toBe(2);
+    //   });
+    // });
+    // describe('disableOneColumnMode >', () => {
+    //   beforeEach(() => {
+    //     document.body.insertAdjacentHTML('afterbegin', gridstackSmallHTML); // smaller default to 1 column
+    //   });
+    //   afterEach(() => {
+    //     document.body.removeChild(document.getElementById('gs-cont'));
+    //   });
+    //   it('should go to 1 column >', () => {
+    //     grid = GridStack.init();
+    //     expect(grid.getColumn()).toBe(1);
+    //   });
+    //   it('should go to 1 column with large minW >', () => {
+    //     grid = GridStack.init({oneColumnSize: 1000});
+    //     expect(grid.getColumn()).toBe(1);
+    //   });
+    //   it('should stay at 12 with minW >', () => {
+    //     grid = GridStack.init({oneColumnSize: 300});
+    //     expect(grid.getColumn()).toBe(12);
+    //   });
+    //   it('should stay at 12 column >', () => {
+    //     grid = GridStack.init({disableOneColumnMode: true});
+    //     expect(grid.getColumn()).toBe(12);
+    //   });
+    // });
+    describe('grid.minRow >', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('should default to row 0 when empty >', () => {
+            let options = {};
+            grid = GridStack.init(options);
+            expect(grid.getRow()).toBe(4);
+            expect(grid.opts.minRow).toBe(0);
+            expect(grid.opts.maxRow).toBe(0);
+            grid.removeAll();
+            expect(grid.getRow()).toBe(0);
+        });
+        it('should default to row 2 when empty >', () => {
+            let options = { minRow: 2 };
+            grid = GridStack.init(options);
+            expect(grid.getRow()).toBe(4);
+            expect(grid.opts.minRow).toBe(2);
+            expect(grid.opts.maxRow).toBe(0);
+            grid.removeAll();
+            expect(grid.engine.getRow()).toBe(0);
+            expect(grid.getRow()).toBe(2);
+        });
+        it('should set min = max = 3 rows >', () => {
+            let options = { row: 3 };
+            grid = GridStack.init(options);
+            expect(grid.getRow()).toBe(3); // shrink elements to fit maxRow!
+            expect(grid.opts.minRow).toBe(3);
+            expect(grid.opts.maxRow).toBe(3);
+            grid.removeAll();
+            expect(grid.engine.getRow()).toBe(0);
+            expect(grid.getRow()).toBe(3);
+        });
+        it('willItFit() >', () => {
+            // default 4x2 and 4x4 so anything pushing more than 1 will fail
+            grid = GridStack.init({ maxRow: 5 });
+            expect(grid.willItFit({ x: 0, y: 0, w: 1, h: 1 })).toBe(true);
+            expect(grid.willItFit({ x: 0, y: 0, w: 1, h: 3 })).toBe(true);
+            expect(grid.willItFit({ x: 0, y: 0, w: 1, h: 4 })).toBe(false);
+            expect(grid.willItFit({ x: 0, y: 0, w: 12, h: 1 })).toBe(true);
+            expect(grid.willItFit({ x: 0, y: 0, w: 12, h: 2 })).toBe(false);
+        });
+        it('willItFit() not modifying node #1687 >', () => {
+            // default 4x2 and 4x4 so anything pushing more than 1 will fail
+            grid = GridStack.init({ maxRow: 5 });
+            let node = { x: 0, y: 0, w: 1, h: 1, _id: 1, _temporaryRemoved: true };
+            expect(grid.willItFit(node)).toBe(true);
+            expect(node._temporaryRemoved).toBe(true);
+            expect(node._id).toBe(1);
+        });
+    });
+    describe('grid attributes >', () => {
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('should have row attr >', () => {
+            let HTML = '<div style="w: 800px; h: 600px" id="gs-cont">' +
+                '  <div class="grid-stack" gs-row="4" gs-current-height="1"></div>' + // old attr current-height
+                '</div>';
+            document.body.insertAdjacentHTML('afterbegin', HTML);
+            grid = GridStack.init();
+            expect(grid.getRow()).toBe(4);
+            expect(grid.opts.minRow).toBe(4);
+            expect(grid.opts.maxRow).toBe(4);
+            grid.addWidget({ h: 6 });
+            expect(grid.engine.getRow()).toBe(4);
+            expect(grid.getRow()).toBe(4);
+        });
+    });
+    describe('grid.min/max width/height >', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('should set gs-min-w to 2. >', () => {
+            grid = GridStack.init();
+            let items = Utils.getElements('.grid-stack-item');
+            items.forEach(el => grid.update(el, { minW: 2, maxW: 3, minH: 4, maxH: 5 }));
+            items.forEach(el => {
+                expect(el.gridstackNode.minW).toBe(2);
+                expect(el.gridstackNode.maxW).toBe(3);
+                expect(el.gridstackNode.minH).toBe(4);
+                expect(el.gridstackNode.maxH).toBe(5);
+                expect(el.getAttribute('gs-min-w')).toBe(null);
+                expect(el.getAttribute('gs-max-w')).toBe(null);
+                expect(el.getAttribute('gs-min-h')).toBe(null);
+                expect(el.getAttribute('gs-max-h')).toBe(null);
+            });
+            // remove all constrain
+            grid.update('grid-stack-item', { minW: 0, maxW: null, minH: undefined, maxH: 0 });
+            items.forEach(el => {
+                expect(el.gridstackNode.minW).toBe(undefined);
+                expect(el.gridstackNode.maxW).toBe(undefined);
+                expect(el.gridstackNode.minH).toBe(undefined);
+                expect(el.gridstackNode.maxH).toBe(undefined);
+                expect(el.getAttribute('gs-min-w')).toBe(null);
+                expect(el.getAttribute('gs-max-w')).toBe(null);
+                expect(el.getAttribute('gs-min-h')).toBe(null);
+                expect(el.getAttribute('gs-max-h')).toBe(null);
+            });
+        });
+    });
+    describe('grid.isAreaEmpty >', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('should set return false. >', () => {
+            let options = {
+                cellHeight: 80,
+                margin: 5
+            };
+            grid = GridStack.init(options);
+            let shouldBeFalse = grid.isAreaEmpty(1, 1, 1, 1);
+            expect(shouldBeFalse).toBe(false);
+        });
+        it('should set return true. >', () => {
+            let options = {
+                cellHeight: 80,
+                margin: 5
+            };
+            grid = GridStack.init(options);
+            let shouldBeTrue = grid.isAreaEmpty(5, 5, 1, 1);
+            expect(shouldBeTrue).toBe(true);
+        });
+    });
+    describe('grid.removeAll >', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('should remove all children by default >', () => {
+            grid = GridStack.init();
+            grid.removeAll();
+            expect(grid.engine.nodes).toEqual([]);
+            expect(document.getElementById('item1')).toBe(null);
+        });
+        it('should remove all children >', () => {
+            grid = GridStack.init();
+            grid.removeAll(true);
+            expect(grid.engine.nodes).toEqual([]);
+            expect(document.getElementById('item1')).toBe(null);
+        });
+        it('should remove gridstack part, leave DOM behind >', () => {
+            grid = GridStack.init();
+            grid.removeAll(false);
+            expect(grid.engine.nodes).toEqual([]);
+            expect(document.getElementById('item1')).not.toBe(null);
+        });
+    });
+    describe('grid.removeWidget >', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('should remove first item (default), then second (false) >', () => {
+            grid = GridStack.init();
+            expect(grid.engine.nodes.length).toEqual(2);
+            let el1 = document.getElementById('item1');
+            expect(el1).not.toBe(null);
+            grid.removeWidget(el1);
+            expect(grid.engine.nodes.length).toEqual(1);
+            expect(document.getElementById('item1')).toBe(null);
+            expect(document.getElementById('item2')).not.toBe(null);
+            let el2 = document.getElementById('item2');
+            grid.removeWidget(el2, false);
+            expect(grid.engine.nodes.length).toEqual(0);
+            expect(document.getElementById('item2')).not.toBe(null);
+        });
+    });
+    describe('grid method _packNodes with float >', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('should allow same x, y coordinates for widgets. >', () => {
+            let options = {
+                cellHeight: 80,
+                margin: 5,
+                float: true
+            };
+            grid = GridStack.init(options);
+            let items = Utils.getElements('.grid-stack-item');
+            items.forEach(oldEl => {
+                let el = grid.makeWidget(oldEl);
+                expect(oldEl.getAttribute('gs-x')).toBe(el.getAttribute('gs-x'));
+                expect(oldEl.getAttribute('gs-y')).toBe(el.getAttribute('gs-y'));
+            });
+        });
+        it('should not allow same x, y coordinates for widgets. >', () => {
+            let options = {
+                cellHeight: 80,
+                margin: 5
+            };
+            grid = GridStack.init(options);
+            let items = Utils.getElements('.grid-stack-item');
+            items.forEach(oldEl => {
+                let el = oldEl.cloneNode(true);
+                el = grid.makeWidget(el);
+                expect(el.gridstackNode?.x).not.toBe(oldEl.gridstackNode?.x);
+            });
+        });
+    });
+    describe('grid method addWidget with all parameters >', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('should keep all widget options the same (autoPosition off >', () => {
+            grid = GridStack.init({ float: true });
+            ;
+            let w = grid.addWidget({ x: 6, y: 7, w: 2, h: 3, autoPosition: false,
+                minW: 1, maxW: 4, minH: 2, maxH: 5, id: 'coolWidget' });
+            expect(parseInt(w.getAttribute('gs-x'))).toBe(6);
+            expect(parseInt(w.getAttribute('gs-y'))).toBe(7);
+            expect(parseInt(w.getAttribute('gs-w'))).toBe(2);
+            expect(parseInt(w.getAttribute('gs-h'))).toBe(3);
+            expect(w.getAttribute('gs-auto-position')).toBe(null);
+            expect(w.getAttribute('gs-id')).toBe('coolWidget');
+            // should move widget to top with float=false
+            expect(grid.getFloat()).toBe(true);
+            grid.float(false);
+            expect(grid.getFloat()).toBe(false);
+            expect(parseInt(w.getAttribute('gs-x'))).toBe(6);
+            expect(parseInt(w.getAttribute('gs-y'))).toBe(4); // <--- from 7 to 4 below second original widget
+            expect(parseInt(w.getAttribute('gs-w'))).toBe(2);
+            expect(parseInt(w.getAttribute('gs-h'))).toBe(3);
+            expect(w.getAttribute('gs-auto-position')).toBe(null);
+            expect(w.getAttribute('gs-id')).toBe('coolWidget');
+            // should not move again (no-op)
+            grid.float(true);
+            expect(grid.getFloat()).toBe(true);
+            expect(parseInt(w.getAttribute('gs-x'))).toBe(6);
+            expect(parseInt(w.getAttribute('gs-y'))).toBe(4);
+            expect(parseInt(w.getAttribute('gs-w'))).toBe(2);
+            expect(parseInt(w.getAttribute('gs-h'))).toBe(3);
+            expect(w.getAttribute('gs-auto-position')).toBe(null);
+            expect(w.getAttribute('gs-id')).toBe('coolWidget');
+        });
+    });
+    describe('grid method addWidget with autoPosition true >', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('should change x, y coordinates for widgets. >', () => {
+            grid = GridStack.init({ float: true });
+            let w = grid.addWidget({ x: 9, y: 7, w: 2, h: 3, autoPosition: true });
+            expect(parseInt(w.getAttribute('gs-x'), 10)).not.toBe(9);
+            expect(parseInt(w.getAttribute('gs-y'), 10)).not.toBe(7);
+        });
+    });
+    describe('grid method addWidget with widget options >', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('should autoPosition (missing X,Y) >', () => {
+            grid = GridStack.init();
+            let w = grid.addWidget({ h: 2, id: 'optionWidget' });
+            expect(parseInt(w.getAttribute('gs-x'))).toBe(8);
+            expect(w.getAttribute('gs-y')).toBe(null);
+            expect(w.getAttribute('gs-w')).toBe(null);
+            expect(parseInt(w.getAttribute('gs-h'))).toBe(2);
+            // expect(w.getAttribute('gs-auto-position')).toBe('true');
+            expect(w.getAttribute('gs-id')).toBe('optionWidget');
+        });
+        it('should autoPosition (missing X) >', () => {
+            grid = GridStack.init();
+            let w = grid.addWidget({ y: 9, h: 2, id: 'optionWidget' });
+            expect(parseInt(w.getAttribute('gs-x'))).toBe(8);
+            expect(w.getAttribute('gs-y')).toBe(null);
+            expect(w.getAttribute('gs-w')).toBe(null);
+            expect(parseInt(w.getAttribute('gs-h'))).toBe(2);
+            // expect(w.getAttribute('gs-auto-position')).toBe('true');
+            expect(w.getAttribute('gs-id')).toBe('optionWidget');
+        });
+        it('should autoPosition (missing Y) >', () => {
+            grid = GridStack.init();
+            let w = grid.addWidget({ x: 9, h: 2, id: 'optionWidget' });
+            expect(parseInt(w.getAttribute('gs-x'))).toBe(8);
+            expect(w.getAttribute('gs-y')).toBe(null);
+            expect(w.getAttribute('gs-w')).toBe(null);
+            expect(parseInt(w.getAttribute('gs-h'))).toBe(2);
+            // expect(w.getAttribute('gs-auto-position')).toBe('true');
+            expect(w.getAttribute('gs-id')).toBe('optionWidget');
+        });
+        it('should autoPosition (correct X, missing Y) >', () => {
+            grid = GridStack.init();
+            let w = grid.addWidget({ x: 8, h: 2, id: 'optionWidget' });
+            expect(parseInt(w.getAttribute('gs-x'))).toBe(8);
+            expect(w.getAttribute('gs-y')).toBe(null);
+            expect(w.getAttribute('gs-w')).toBe(null);
+            expect(parseInt(w.getAttribute('gs-h'))).toBe(2);
+            // expect(w.getAttribute('gs-auto-position')).toBe('true');
+            expect(w.getAttribute('gs-id')).toBe('optionWidget');
+        });
+        it('should autoPosition (empty options) >', () => {
+            grid = GridStack.init();
+            let w = grid.addWidget({});
+            expect(parseInt(w.getAttribute('gs-x'))).toBe(8);
+            expect(w.getAttribute('gs-y')).toBe(null);
+            expect(w.getAttribute('gs-w')).toBe(null);
+            expect(w.getAttribute('gs-h')).toBe(null);
+            // expect(w.getAttribute('gs-auto-position')).toBe('true');
+        });
+    });
+    describe('addWidget() >', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('bad string options should use default >', () => {
+            grid = GridStack.init();
+            let w = grid.addWidget({ x: 'foo', y: null, w: 'bar', h: '' });
+            expect(parseInt(w.getAttribute('gs-x'))).toBe(8);
+            expect(w.getAttribute('gs-y')).toBe(null);
+            expect(w.getAttribute('gs-w')).toBe(null);
+            expect(w.getAttribute('gs-h')).toBe(null);
+        });
+        it('makeWidget attr should be retained >', () => {
+            grid = GridStack.init({ float: true });
+            const d = document.createElement('div');
+            d.innerHTML = '<div class="grid-stack-item" gs-w="3" gs-max-w="4" gs-id="gsfoo" id="foo"><div class="grid-stack-item-content">foo content</div></div>';
+            grid.el.appendChild(d.firstChild);
+            let w = grid.makeWidget('foo');
+            expect(parseInt(w.getAttribute('gs-x'))).toBe(8);
+            expect(w.getAttribute('gs-y')).toBe(null);
+            expect(parseInt(w.getAttribute('gs-w'))).toBe(3);
+            expect(w.gridstackNode.maxW).toBe(4);
+            expect(w.getAttribute('gs-h')).toBe(null);
+            expect(w.getAttribute('gs-id')).toBe('gsfoo');
+        });
+        it('makeWidget width option override >', () => {
+            grid = GridStack.init({ float: true });
+            const d = document.createElement('div');
+            d.innerHTML = '<div class="grid-stack-item" gs-w="3" gs-max-w="4" gs-id="gsfoo" id="foo"><div class="grid-stack-item-content">foo content</div></div>';
+            grid.el.appendChild(d.firstChild);
+            let w = grid.makeWidget('foo', { x: null, y: null, w: 2 });
+            expect(parseInt(w.getAttribute('gs-x'))).toBe(8);
+            expect(w.getAttribute('gs-y')).toBe(null);
+            expect(parseInt(w.getAttribute('gs-w'))).toBe(2);
+            expect(w.getAttribute('gs-h')).toBe(null);
+        });
+    });
+    describe('makeWidget() >', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackEmptyHTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('passing element >', () => {
+            grid = GridStack.init();
+            let doc = document.implementation.createHTMLDocument();
+            doc.body.innerHTML = '<div><div class="grid-stack-item-content"></div></div>';
+            let el = doc.body.children[0];
+            grid.el.appendChild(el);
+            let w = grid.makeWidget(el);
+            expect(w.getAttribute('gs-x')).toBe(null);
+        });
+        it('passing element float=true >', () => {
+            grid = GridStack.init({ float: true });
+            let doc = document.implementation.createHTMLDocument();
+            doc.body.innerHTML = '<div><div class="grid-stack-item-content"></div></div>';
+            let el = doc.body.children[0];
+            grid.el.appendChild(el);
+            let w = grid.makeWidget(el);
+            expect(w.getAttribute('gs-x')).toBe(null);
+        });
+        it('passing class >', () => {
+            grid = GridStack.init();
+            let doc = document.implementation.createHTMLDocument();
+            doc.body.innerHTML = '<div class="item"><div class="grid-stack-item-content"></div></div>';
+            let el = doc.body.children[0];
+            grid.el.appendChild(el);
+            let w = grid.makeWidget('.item');
+            expect(w.getAttribute('gs-x')).toBe(null);
+        });
+        it('passing class no dot >', () => {
+            grid = GridStack.init();
+            let doc = document.implementation.createHTMLDocument();
+            doc.body.innerHTML = '<div class="item"><div class="grid-stack-item-content"></div></div>';
+            let el = doc.body.children[0];
+            grid.el.appendChild(el);
+            let w = grid.makeWidget('item');
+            expect(w.getAttribute('gs-x')).toBe(null);
+        });
+        it('passing id >', () => {
+            grid = GridStack.init();
+            let doc = document.implementation.createHTMLDocument();
+            doc.body.innerHTML = '<div id="item"><div class="grid-stack-item-content"></div></div>';
+            let el = doc.body.children[0];
+            grid.el.appendChild(el);
+            let w = grid.makeWidget('#item');
+            expect(w.getAttribute('gs-x')).toBe(null);
+        });
+        it('passing id no # >', () => {
+            grid = GridStack.init();
+            let doc = document.implementation.createHTMLDocument();
+            doc.body.innerHTML = '<div id="item"><div class="grid-stack-item-content"></div></div>';
+            let el = doc.body.children[0];
+            grid.el.appendChild(el);
+            let w = grid.makeWidget('item');
+            expect(w.getAttribute('gs-x')).toBe(null);
+        });
+        it('passing id as number >', () => {
+            grid = GridStack.init();
+            let doc = document.implementation.createHTMLDocument();
+            doc.body.innerHTML = '<div id="1"><div class="grid-stack-item-content"></div></div>';
+            let el = doc.body.children[0];
+            grid.el.appendChild(el);
+            let w = grid.makeWidget('1');
+            expect(w.getAttribute('gs-x')).toBe(null);
+        });
+    });
+    describe('method getFloat() >', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('should match true/false only >', () => {
+            grid = GridStack.init({ float: true });
+            expect(grid.getFloat()).toBe(true);
+            grid.float(0);
+            expect(grid.getFloat()).toBe(false);
+            grid.float(null);
+            expect(grid.getFloat()).toBe(false);
+            grid.float(undefined);
+            expect(grid.getFloat()).toBe(false);
+            grid.float(false);
+            expect(grid.getFloat()).toBe(false);
+        });
+    });
+    describe('grid.destroy >', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+        });
+        afterEach(() => {
+            document.getElementById('gs-cont').remove();
+        });
+        it('should cleanup gridstack >', () => {
+            let options = {
+                cellHeight: 80,
+                margin: 5
+            };
+            grid = GridStack.init(options);
+            let gridEl = grid.el;
+            grid.destroy();
+            expect(gridEl.parentElement).toBe(null);
+            expect(grid.el).toBe(undefined);
+            expect(grid.engine).toBe(undefined);
+        });
+        it('should cleanup gridstack but leave elements >', () => {
+            let options = {
+                cellHeight: 80,
+                margin: 5
+            };
+            grid = GridStack.init(options);
+            let gridEl = grid.el;
+            grid.destroy(false);
+            expect(gridEl.parentElement).not.toBe(null);
+            expect(Utils.getElements('.grid-stack-item').length).toBe(2);
+            expect(grid.el).toBe(undefined);
+            expect(grid.engine).toBe(undefined);
+            grid.destroy(); // sanity check for call twice!
+        });
+    });
+    describe('grid.resize >', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('should resize widget >', () => {
+            let options = {
+                cellHeight: 80,
+                margin: 5
+            };
+            grid = GridStack.init(options);
+            let items = Utils.getElements('.grid-stack-item');
+            grid.update(items[0], { w: 5, h: 5 });
+            expect(parseInt(items[0].getAttribute('gs-w'))).toBe(5);
+            expect(parseInt(items[0].getAttribute('gs-h'))).toBe(5);
+        });
+    });
+    describe('grid.move >', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('should move widget >', () => {
+            let options = {
+                cellHeight: 80,
+                margin: 5,
+                float: true
+            };
+            grid = GridStack.init(options);
+            let items = Utils.getElements('.grid-stack-item');
+            grid.update(items[0], { x: 5, y: 5 });
+            expect(parseInt(items[0].getAttribute('gs-x'))).toBe(5);
+            expect(parseInt(items[0].getAttribute('gs-y'))).toBe(5);
+        });
+    });
+    describe('grid.update >', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('should move and resize widget >', () => {
+            grid = GridStack.init({ float: true });
+            let el = Utils.getElements('.grid-stack-item')[1];
+            expect(parseInt(el.getAttribute('gs-w'))).toBe(4);
+            grid.update(el, { x: 5, y: 4, h: 2 });
+            expect(parseInt(el.getAttribute('gs-x'))).toBe(5);
+            expect(parseInt(el.getAttribute('gs-y'))).toBe(4);
+            expect(parseInt(el.getAttribute('gs-w'))).toBe(4);
+            expect(parseInt(el.getAttribute('gs-h'))).toBe(2);
+        });
+        it('should change noMove >', () => {
+            grid = GridStack.init({ float: true });
+            let items = Utils.getElements('.grid-stack-item');
+            let el = items[1];
+            let dd = GridStack.getDD();
+            grid.update(el, { noMove: true, noResize: false });
+            expect(el.getAttribute('gs-no-move')).toBe('true');
+            expect(el.getAttribute('gs-no-resize')).toBe(null); // false is no-op
+            expect(dd.isResizable(el)).toBe(true);
+            expect(dd.isDraggable(el)).toBe(false);
+            expect(dd.isResizable(items[0])).toBe(true);
+            expect(dd.isDraggable(items[0])).toBe(true);
+            expect(parseInt(el.getAttribute('gs-x'))).toBe(4);
+            expect(el.getAttribute('gs-y')).toBe(null);
+            expect(parseInt(el.getAttribute('gs-w'))).toBe(4);
+            expect(parseInt(el.getAttribute('gs-h'))).toBe(4);
+        });
+        it('should change content and id, and move >', () => {
+            grid = GridStack.init({ float: true });
+            let el = findEl('gsItem2');
+            let sub = el.querySelector('.grid-stack-item-content');
+            grid.update(el, { id: 'newID', y: 1, content: 'new content' });
+            expect(el.gridstackNode.id).toBe('newID');
+            expect(el.getAttribute('gs-id')).toBe('newID');
+            expect(sub.innerHTML).toBe('new content');
+            expect(parseInt(el.getAttribute('gs-x'))).toBe(4);
+            expect(parseInt(el.getAttribute('gs-y'))).toBe(1);
+            expect(parseInt(el.getAttribute('gs-w'))).toBe(4);
+            expect(parseInt(el.getAttribute('gs-h'))).toBe(4);
+        });
+        it('should change max and constrain a wanted resize >', () => {
+            grid = GridStack.init({ float: true });
+            let el = findEl('gsItem2');
+            expect(el.getAttribute('gs-max-w')).toBe(null);
+            grid.update(el, { maxW: 2, w: 5 });
+            expect(parseInt(el.getAttribute('gs-x'))).toBe(4);
+            expect(el.getAttribute('gs-y')).toBe(null);
+            expect(parseInt(el.getAttribute('gs-w'))).toBe(2);
+            expect(parseInt(el.getAttribute('gs-h'))).toBe(4);
+            expect(el.gridstackNode.maxW).toBe(2);
+        });
+        it('should change max and constrain existing >', () => {
+            grid = GridStack.init({ float: true });
+            let el = findEl('gsItem2');
+            expect(el.getAttribute('gs-max-w')).toBe(null);
+            grid.update(el, { maxW: 2 });
+            expect(parseInt(el.getAttribute('gs-x'))).toBe(4);
+            expect(el.getAttribute('gs-y')).toBe(null);
+            expect(parseInt(el.getAttribute('gs-w'))).toBe(2);
+            expect(parseInt(el.getAttribute('gs-h'))).toBe(4);
+            expect(el.gridstackNode.maxW).toBe(2);
+        });
+        it('should change all max and move, no inf loop! >', () => {
+            grid = GridStack.init({ float: true });
+            let items = Utils.getElements('.grid-stack-item');
+            items.forEach(item => {
+                expect(item.getAttribute('gs-max-w')).toBe(null);
+                expect(item.getAttribute('gs-max-h')).toBe(null);
+            });
+            grid.update('.grid-stack-item', { maxW: 2, maxH: 2 });
+            expect(items[0].getAttribute('gs-x')).toBe(null);
+            expect(parseInt(items[1].getAttribute('gs-x'))).toBe(4);
+            items.forEach((item) => {
+                expect(item.getAttribute('gs-y')).toBe(null);
+                expect(parseInt(item.getAttribute('gs-h'))).toBe(2);
+                expect(parseInt(item.getAttribute('gs-w'))).toBe(2);
+                expect(item.gridstackNode.maxW).toBe(2);
+                expect(item.gridstackNode.maxH).toBe(2);
+            });
+        });
+    });
+    describe('grid.margin >', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('should return margin >', () => {
+            let options = {
+                cellHeight: 80,
+                margin: 12
+            };
+            grid = GridStack.init(options);
+            expect(grid.getMargin()).toBe(12);
+        });
+        it('should return update margin >', () => {
+            let options = {
+                cellHeight: 80,
+                margin: 5
+            };
+            grid = GridStack.init(options);
+            grid.margin('11rem');
+            expect(grid.getMargin()).toBe(11);
+        });
+        it('should change unit >', () => {
+            let options = {
+                cellHeight: 80,
+                margin: 10,
+            };
+            grid = GridStack.init(options);
+            expect(grid.getMargin()).toBe(10);
+            grid.margin('10rem');
+            expect(grid.getMargin()).toBe(10);
+        });
+        it('should not update css vars, with same value >', () => {
+            let options = {
+                cellHeight: 80,
+                margin: 5
+            };
+            let grid = GridStack.init(options);
+            expect(grid.getMargin()).toBe(5);
+            vi.spyOn(grid, '_initMargin');
+            grid.margin('5px');
+            expect(grid._initMargin).not.toHaveBeenCalled();
+            expect(grid.getMargin()).toBe(5);
+        });
+        it('should set top/bot/left value directly >', () => {
+            let options = {
+                cellHeight: 80,
+                marginTop: 5,
+                marginBottom: 0,
+                marginLeft: 1,
+            };
+            let grid = GridStack.init(options);
+            expect(grid.getMargin()).toBe(undefined);
+            expect(grid.opts.marginTop).toBe(5);
+            expect(grid.opts.marginBottom).toBe(0);
+            expect(grid.opts.marginLeft).toBe(1);
+            expect(grid.opts.marginRight).toBe(10); // default value
+        });
+        it('should set all 4 sides, and overall margin >', () => {
+            let options = {
+                cellHeight: 80,
+                marginTop: 5,
+                marginBottom: 5,
+                marginLeft: 5,
+                marginRight: 5,
+            };
+            let grid = GridStack.init(options);
+            expect(grid.getMargin()).toBe(5);
+            expect(grid.opts.marginTop).toBe(5);
+            expect(grid.opts.marginBottom).toBe(5);
+            expect(grid.opts.marginLeft).toBe(5);
+            expect(grid.opts.marginRight).toBe(5);
+        });
+        it('init 2 values >', () => {
+            let options = {
+                cellHeight: 80,
+                margin: '5px 10'
+            };
+            let grid = GridStack.init(options);
+            expect(grid.getMargin()).toBe(undefined);
+            expect(grid.opts.marginTop).toBe(5);
+            expect(grid.opts.marginBottom).toBe(5);
+            expect(grid.opts.marginLeft).toBe(10);
+            expect(grid.opts.marginRight).toBe(10);
+        });
+        it('init 4 values >', () => {
+            let options = {
+                cellHeight: 80,
+                margin: '1 2 0em 3'
+            };
+            let grid = GridStack.init(options);
+            expect(grid.getMargin()).toBe(undefined);
+            expect(grid.opts.marginTop).toBe(1);
+            expect(grid.opts.marginRight).toBe(2);
+            expect(grid.opts.marginBottom).toBe(0);
+            expect(grid.opts.marginLeft).toBe(3);
+        });
+        it('set 2 values, should update css vars >', () => {
+            let options = {
+                cellHeight: 80,
+                margin: 5
+            };
+            let grid = GridStack.init(options);
+            expect(grid.getMargin()).toBe(5);
+            grid.margin('1px 0');
+            expect(grid.getMargin()).toBe(undefined);
+            expect(grid.opts.marginTop).toBe(1);
+            expect(grid.opts.marginBottom).toBe(1);
+            expect(grid.opts.marginLeft).toBe(0);
+            expect(grid.opts.marginRight).toBe(0);
+        });
+    });
+    describe('grid.opts.rtl >', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('should add grid-stack-rtl class >', () => {
+            let options = {
+                cellHeight: 80,
+                margin: 5,
+                rtl: true
+            };
+            grid = GridStack.init(options);
+            expect(grid.el.classList.contains('grid-stack-rtl')).toBe(true);
+        });
+        it('should not add grid-stack-rtl class >', () => {
+            let options = {
+                cellHeight: 80,
+                margin: 5
+            };
+            grid = GridStack.init(options);
+            expect(grid.el.classList.contains('grid-stack-rtl')).toBe(false);
+        });
+    });
+    describe('grid.enableMove', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('should enable move for future also', () => {
+            let options = {
+                cellHeight: 80,
+                margin: 5,
+                disableDrag: true
+            };
+            grid = GridStack.init(options);
+            let items = Utils.getElements('.grid-stack-item');
+            items.forEach(el => expect(el.classList.contains('ui-draggable-disabled')).toBe(true));
+            expect(grid.opts.disableDrag).toBe(true);
+            grid.enableMove(true);
+            items.forEach(el => expect(el.classList.contains('ui-draggable-disabled')).toBe(false));
+            expect(grid.opts.disableDrag).not.toBe(true);
+        });
+        it('should disable move for existing only >', () => {
+            let options = {
+                cellHeight: 80,
+                margin: 5
+            };
+            grid = GridStack.init(options);
+            let items = Utils.getElements('.grid-stack-item');
+            items.forEach(el => expect(el.classList.contains('ui-draggable-disabled')).toBe(false));
+            expect(grid.opts.disableDrag).toBeFalsy();
+            grid.enableMove(false);
+            items.forEach(el => expect(el.classList.contains('ui-draggable-disabled')).toBe(true));
+            expect(grid.opts.disableDrag).toBe(true);
+        });
+    });
+    describe('grid.enableResize >', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('should enable resize >', () => {
+            let options = {
+                cellHeight: 80,
+                margin: 5,
+                disableResize: true
+            };
+            grid = GridStack.init(options);
+            expect(grid.opts.disableResize).toBe(true);
+            let items = Utils.getElements('.grid-stack-item');
+            let dd = GridStack.getDD();
+            expect(dd).not.toBe(null); // sanity test to verify type
+            items.forEach(el => {
+                expect(dd.isResizable(el)).toBe(false);
+                expect(dd.isDraggable(el)).toBe(true);
+            });
+            grid.enableResize(true);
+            expect(grid.opts.disableResize).not.toBe(true);
+            items.forEach(el => {
+                expect(dd.isResizable(el)).toBe(true);
+                expect(dd.isDraggable(el)).toBe(true);
+            });
+        });
+        it('should disable resize >', () => {
+            let options = {
+                cellHeight: 80,
+                margin: 5
+            };
+            grid = GridStack.init(options);
+            expect(grid.opts.disableResize).toBeFalsy();
+            let items = Utils.getElements('.grid-stack-item');
+            let dd = GridStack.getDD();
+            items.forEach(el => expect(dd.isResizable(el)).toBe(true));
+            grid.enableResize(false);
+            expect(grid.opts.disableResize).toBe(true);
+            items.forEach(el => {
+                expect(dd.isResizable(el)).toBe(false);
+                expect(dd.isDraggable(el)).toBe(true);
+            });
+        });
+    });
+    describe('grid.enable >', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('should enable movable and resizable >', () => {
+            let options = {
+                cellHeight: 80,
+                margin: 5
+            };
+            grid = GridStack.init(options);
+            let items = Utils.getElements('.grid-stack-item');
+            let dd = GridStack.getDD();
+            grid.enableResize(false);
+            grid.enableMove(false);
+            items.forEach(el => {
+                expect(el.classList.contains('ui-draggable-disabled')).toBe(true);
+                expect(dd.isResizable(el)).toBe(false);
+                expect(dd.isDraggable(el)).toBe(false);
+            });
+            grid.enable();
+            items.forEach(el => {
+                expect(el.classList.contains('ui-draggable-disabled')).toBe(false);
+                expect(dd.isResizable(el)).toBe(true);
+                expect(dd.isDraggable(el)).toBe(true);
+            });
+        });
+    });
+    describe('grid.enable >', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('should lock widgets >', () => {
+            let options = {
+                cellHeight: 80,
+                margin: 5
+            };
+            grid = GridStack.init(options);
+            grid.update('.grid-stack-item', { locked: true });
+            Utils.getElements('.grid-stack-item').forEach(item => {
+                expect(item.getAttribute('gs-locked')).toBe('true');
+            });
+        });
+        it('should unlock widgets >', () => {
+            let options = {
+                cellHeight: 80,
+                margin: 5
+            };
+            grid = GridStack.init(options);
+            grid.update('.grid-stack-item', { locked: false });
+            Utils.getElements('.grid-stack-item').forEach(item => {
+                expect(item.getAttribute('gs-locked')).toBe(null);
+            });
+        });
+    });
+    describe('custom grid placement #1054 >', () => {
+        let HTML = '<div style="w: 800px; h: 600px" id="gs-cont">' +
+            '  <div class="grid-stack">' +
+            '    <div class="grid-stack-item" gs-x="0" gs-y="0" gs-w="12" gs-h="9">' +
+            '      <div class="grid-stack-item-content"></div>' +
+            '    </div>' +
+            '    <div class="grid-stack-item" gs-x="0" gs-y="9" gs-w="12" gs-h="5">' +
+            '      <div class="grid-stack-item-content"></div>' +
+            '    </div>' +
+            '    <div class="grid-stack-item" gs-x="0" gs-y="14" gs-w="7" gs-h="6">' +
+            '      <div class="grid-stack-item-content"></div>' +
+            '    </div>' +
+            '    <div class="grid-stack-item" gs-x="7" gs-y="14" gs-w="5" gs-h="6">' +
+            '      <div class="grid-stack-item-content"></div>' +
+            '    </div>' +
+            '  </div>' +
+            '</div>';
+        let pos = [{ x: 0, y: 0, w: 12, h: 9 }, { x: 0, y: 9, w: 12, h: 5 }, { x: 0, y: 14, w: 7, h: 6 }, { x: 7, y: 14, w: 5, h: 6 }];
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', HTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('should have correct position >', () => {
+            let items = Utils.getElements('.grid-stack-item');
+            items.forEach((el, i) => {
+                expect(parseInt(el.getAttribute('gs-x'))).toBe(pos[i].x);
+                expect(parseInt(el.getAttribute('gs-y'))).toBe(pos[i].y);
+                expect(parseInt(el.getAttribute('gs-w'))).toBe(pos[i].w);
+                expect(parseInt(el.getAttribute('gs-h'))).toBe(pos[i].h);
+            });
+        });
+    });
+    describe('grid.compact >', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('should move all 3 items to top-left with no space >', () => {
+            grid = GridStack.init({ float: true });
+            let el3 = grid.addWidget({ x: 3, y: 5 });
+            expect(parseInt(el3.getAttribute('gs-x'))).toBe(3);
+            expect(parseInt(el3.getAttribute('gs-y'))).toBe(5);
+            grid.compact();
+            expect(parseInt(el3.getAttribute('gs-x'))).toBe(8);
+            expect(el3.getAttribute('gs-y')).toBe(null);
+        });
+        it('not move locked item >', () => {
+            grid = GridStack.init({ float: true });
+            let el3 = grid.addWidget({ x: 3, y: 5, locked: true, noMove: true });
+            expect(parseInt(el3.getAttribute('gs-x'))).toBe(3);
+            expect(parseInt(el3.getAttribute('gs-y'))).toBe(5);
+            grid.compact();
+            expect(parseInt(el3.getAttribute('gs-x'))).toBe(3);
+            expect(parseInt(el3.getAttribute('gs-y'))).toBe(5);
+        });
+    });
+    describe('gridOption locked #1181 >', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackEmptyHTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('not move locked item, size down added one >', () => {
+            grid = GridStack.init();
+            let el1 = grid.addWidget({ x: 0, y: 1, w: 12, locked: true });
+            expect(el1.getAttribute('gs-x')).toBe(null);
+            expect(parseInt(el1.getAttribute('gs-y'))).toBe(1);
+            let el2 = grid.addWidget({ x: 2, y: 0, h: 3 });
+            expect(el1.getAttribute('gs-x')).toBe(null);
+            expect(parseInt(el1.getAttribute('gs-y'))).toBe(1);
+            expect(parseInt(el2.getAttribute('gs-x'))).toBe(2);
+            expect(parseInt(el2.getAttribute('gs-y'))).toBe(2);
+            expect(parseInt(el2.getAttribute('gs-h'))).toBe(3);
+        });
+    });
+    describe('nested grids >', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackNestedHTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('should both init, second with nested class >', () => {
+            grids = GridStack.initAll();
+            expect(grids.length).toBe(2);
+            expect(grids[0].el.classList.contains('grid-stack-nested')).toBe(false);
+            expect(grids[1].el.classList.contains('grid-stack-nested')).toBe(true);
+        });
+    });
+    describe('two grids >', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridHTML);
+            document.body.insertAdjacentHTML('afterbegin', gridHTML);
+        });
+        afterEach(() => {
+            let els = document.body.querySelectorAll('.grid-stack');
+            expect(els.length).toBe(2);
+            els.forEach(g => g.remove());
+        });
+        it('should not remove incorrect child >', () => {
+            grids = GridStack.initAll();
+            expect(grids.length).toBe(2);
+            expect(grids[0].engine.nodes.length).toBe(2);
+            expect(grids[1].engine.nodes.length).toBe(2);
+            // should do nothing
+            grids[0].removeWidget(grids[1].engine.nodes[0].el);
+            expect(grids[0].engine.nodes.length).toBe(2);
+            expect(grids[0].el.children.length).toBe(2);
+            expect(grids[1].engine.nodes.length).toBe(2);
+            expect(grids[1].el.children.length).toBe(2);
+            // should empty with no errors
+            grids[1].removeAll();
+            expect(grids[0].engine.nodes.length).toBe(2);
+            expect(grids[0].el.children.length).toBe(2);
+            expect(grids[1].engine.nodes.length).toBe(0);
+            expect(grids[1].el.children.length).toBe(0);
+        });
+        it('should remove 1 child >', () => {
+            grids = GridStack.initAll();
+            grids[1].removeWidget(grids[1].engine.nodes[0].el);
+            expect(grids[0].engine.nodes.length).toBe(2);
+            expect(grids[0].el.children.length).toBe(2);
+            expect(grids[1].engine.nodes.length).toBe(1);
+            expect(grids[1].el.children.length).toBe(1);
+        });
+    });
+    describe('grid.on events >', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('add 3 single events >', () => {
+            grid = GridStack.init();
+            let fcn = (event) => { };
+            grid.on('added', fcn).on('enable', fcn).on('dragstart', fcn);
+            expect(grid._gsEventHandler.enable).not.toBe(undefined);
+            grid.off('added').off('enable').off('dragstart');
+            expect(grid._gsEventHandler.enable).toBe(undefined);
+        });
+        it('add 3 events >', () => {
+            let grid = GridStack.init(); // prevent TS check for string combine...
+            let fcn = (event) => { };
+            grid.on('added enable dragstart', fcn);
+            expect(grid._gsEventHandler.enable).not.toBe(undefined);
+            grid.off('added enable dragstart');
+            expect(grid._gsEventHandler.enable).toBe(undefined);
+        });
+    });
+    describe('save & load >', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('save layout >', () => {
+            grid = GridStack.init({ maxRow: 10 });
+            let layout = grid.save(false);
+            expect(layout).toEqual([{ x: 0, y: 0, w: 4, h: 2, id: 'gsItem1' }, { x: 4, y: 0, w: 4, h: 4, id: 'gsItem2' }]);
+            layout = grid.save();
+            expect(layout).toEqual([{ x: 0, y: 0, w: 4, h: 2, id: 'gsItem1', content: 'item 1 text' }, { x: 4, y: 0, w: 4, h: 4, id: 'gsItem2', content: 'item 2 text' }]);
+            layout = grid.save(true);
+            expect(layout).toEqual([{ x: 0, y: 0, w: 4, h: 2, id: 'gsItem1', content: 'item 1 text' }, { x: 4, y: 0, w: 4, h: 4, id: 'gsItem2', content: 'item 2 text' }]);
+        });
+        it('save layout full >', () => {
+            grid = GridStack.init({ maxRow: 10, _foo: 'bar' }); // using bogus 'internal' field (stripped)
+            let layout = grid.save(false, true);
+            expect(layout).toEqual({ maxRow: 10, children: [{ x: 0, y: 0, w: 4, h: 2, id: 'gsItem1' }, { x: 4, y: 0, w: 4, h: 4, id: 'gsItem2' }] });
+            layout = grid.save(true, true);
+            expect(layout).toEqual({ maxRow: 10, children: [{ x: 0, y: 0, w: 4, h: 2, id: 'gsItem1', content: 'item 1 text' }, { x: 4, y: 0, w: 4, h: 4, id: 'gsItem2', content: 'item 2 text' }] });
+        });
+        it('load move 1 item, delete others >', () => {
+            grid = GridStack.init();
+            grid.load([{ x: 2, h: 1, id: 'gsItem2' }]);
+            let layout = grid.save(false);
+            expect(layout).toEqual([{ x: 0, y: 0, id: 'gsItem2' }]);
+        });
+        it('load add new, delete others >', () => {
+            grid = GridStack.init();
+            grid.load([{ w: 2, y: 0, h: 1, id: 'gsItem3' }], true);
+            let layout = grid.save(false);
+            expect(layout).toEqual([{ x: 0, y: 0, w: 2, id: 'gsItem3' }]);
+        });
+        it('load 1 item only, no remove >', () => {
+            grid = GridStack.init();
+            grid.load([{ h: 3, id: 'gsItem1' }], false);
+            let layout = grid.save(false);
+            expect(layout).toEqual([{ x: 0, y: 0, h: 3, id: 'gsItem1' }, { x: 4, y: 0, w: 4, h: 4, id: 'gsItem2' }]);
+        });
+        it('load 1 item only with callback >', () => {
+            grid = GridStack.init();
+            grid.load([{ h: 3, id: 'gsItem1' }], () => null);
+            let layout = grid.save(false);
+            expect(layout).toEqual([{ x: 0, y: 0, h: 3, id: 'gsItem1' }]);
+        });
+    });
+    describe('load >', () => {
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('after init #1693 >', () => {
+            grid = GridStack.init();
+            grid.load([{ id: 'gsItem1', x: 0, y: 0, w: 5, h: 1 }, { id: 'gsItem2', x: 6, y: 0, w: 2, h: 2 }]);
+            let el1 = document.getElementById('item1');
+            expect(el1.getAttribute('gs-x')).toBe(null);
+            expect(el1.getAttribute('gs-y')).toBe(null);
+            expect(parseInt(el1.getAttribute('gs-w'))).toBe(5);
+            expect(el1.getAttribute('gs-h')).toBe(null);
+            let el2 = document.getElementById('item2');
+            expect(parseInt(el2.getAttribute('gs-x'))).toBe(6);
+            expect(el2.getAttribute('gs-y')).toBe(null);
+            expect(parseInt(el2.getAttribute('gs-w'))).toBe(2);
+            expect(parseInt(el2.getAttribute('gs-h'))).toBe(2);
+        });
+        it('after init replace nodes >', () => {
+            grid = GridStack.init();
+            expect(document.getElementById('item1')).not.toBe(null);
+            expect(document.getElementById('item2')).not.toBe(null);
+            // this will replace with 2 new nodes
+            grid.load([{ id: 'new1', x: 0, y: 0, w: 5, h: 1 }, { id: 'new2', x: 6, y: 0, w: 2, h: 2 }]);
+            expect(grid.engine.nodes.length).toBe(2);
+            expect(document.getElementById('item1')).toBe(null);
+            let el1 = grid.engine.nodes.find(n => n.id === 'new1').el;
+            expect(el1.getAttribute('gs-x')).toBe(null);
+            expect(el1.getAttribute('gs-y')).toBe(null);
+            expect(parseInt(el1.getAttribute('gs-w'))).toBe(5);
+            expect(el1.getAttribute('gs-h')).toBe(null);
+            expect(document.getElementById('item2')).toBe(null);
+            let el2 = grid.engine.nodes.find(n => n.id === 'new2').el;
+            expect(parseInt(el2.getAttribute('gs-x'))).toBe(6);
+            expect(el2.getAttribute('gs-y')).toBe(null);
+            expect(parseInt(el2.getAttribute('gs-w'))).toBe(2);
+            expect(parseInt(el2.getAttribute('gs-h'))).toBe(2);
+        });
+    });
+    describe('load empty >', () => {
+        let items;
+        let grid;
+        const test = () => {
+            items.forEach(item => {
+                const n = grid.engine.nodes.find(n => n.id === item.id);
+                if (item.y)
+                    expect(parseInt(n.el.getAttribute('gs-y'))).toBe(item.y);
+                else
+                    expect(n.el.getAttribute('gs-y')).toBe(null);
+            });
+        };
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackEmptyHTML);
+            items = [
+                { id: '0', x: 0, y: 0 },
+                { id: '1', x: 0, y: 1 },
+                { id: '2', x: 0, y: 2 },
+                { id: '3', x: 0, y: 3 },
+            ];
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('update collision >', () => {
+            grid = GridStack.init({ children: items });
+            const n = grid.engine.nodes[0];
+            test();
+            grid.update(n.el, { h: 5 });
+            items[1].y = 5;
+            items[2].y = 6;
+            items[3].y = 7;
+            test();
+            grid.update(n.el, { h: 1 });
+            items[1].y = 1;
+            items[2].y = 2;
+            items[3].y = 3;
+            test();
+        });
+        it('load collision 2208 >', () => {
+            grid = GridStack.init({ children: items });
+            test();
+            items[0].h = 5;
+            grid.load(items);
+            items[1].y = 5;
+            items[2].y = 6;
+            items[3].y = 7;
+            test();
+            items[0].h = 1;
+            grid.load(items);
+            items[1].y = 1;
+            items[2].y = 2;
+            items[3].y = 3;
+            test();
+        });
+        it('load full collision 2208 >', () => {
+            grid = GridStack.init({ children: items });
+            test();
+            items[0].h = 5;
+            grid.load(grid.engine.nodes.map((n, index) => {
+                if (index === 0)
+                    return { ...n, h: 5 };
+                return n;
+            }));
+            items[1].y = 5;
+            items[2].y = 6;
+            items[3].y = 7;
+            test();
+            items[0].h = 1;
+            grid.load(grid.engine.nodes.map((n, index) => {
+                if (index === 0)
+                    return { ...n, h: 1 };
+                return n;
+            }));
+            items[1].y = 1;
+            items[2].y = 2;
+            items[3].y = 3;
+            test();
+        });
+    });
+    // ..and finally track log warnings at the end, instead of displaying them....
+    describe('obsolete warnings >', () => {
+        console.warn = vi.fn(); // track warnings instead of displaying them
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('willItFit() legacy >', () => {
+            grid = GridStack.init({ maxRow: 5 });
+            expect(grid.willItFit(0, 0, 1, 3, false)).toBe(true);
+            expect(grid.willItFit(0, 0, 1, 4, false)).toBe(false);
+        });
+        it('warning if OLD commit() is called >', () => {
+            grid = GridStack.init();
+            grid.batchUpdate(true);
+            expect(grid.engine.batchMode).toBe(true);
+            grid.commit(); // old API
+            expect(grid.engine.batchMode).toBe(false);
+            // expect(console.warn).toHaveBeenCalledWith('gridstack.js: Function `setGridWidth` is deprecated in v0.5.3 and has been replaced with `column`. It will be **completely** removed in v1.0');
+        });
+        /* saving as example
+        it('warning if OLD setGridWidth is called >', () => {
+          let grid: any = GridStack.init();
+          grid.setGridWidth(11); // old 0.5.2 API
+          expect(grid.getColumn()).toBe(11);
+          expect(console.warn).toHaveBeenCalledWith('gridstack.js: Function `setGridWidth` is deprecated in v0.5.3 and has been replaced with `column`. It will be **completely** removed in v1.0');
+        });
+        */
+    });
+    // Note: Stylesheet tests moved to E2E tests
+    // where real browser CSS engines can provide accurate getComputedStyle() values
+    // describe('stylesheet', () => {});
+    describe('updateOptions()', () => {
+        let grid;
+        beforeEach(() => {
+            document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+            grid = GridStack.init({ cellHeight: 30 });
+        });
+        afterEach(() => {
+            document.body.removeChild(document.getElementById('gs-cont'));
+        });
+        it('update all values supported', () => {
+            grid.updateOptions({
+                cellHeight: '40px',
+                margin: 8,
+                column: 11,
+                float: true,
+                row: 10,
+            });
+            expect(grid.getCellHeight(true)).toBe(40);
+            expect(grid.getMargin()).toBe(8);
+            expect(grid.opts.marginTop).toBe(8);
+            expect(grid.getColumn()).toBe(11);
+            expect(grid.getFloat()).toBe(true);
+            expect(grid.opts.row).toBe(10);
+            expect(grid.opts.minRow).toBe(10);
+            expect(grid.opts.maxRow).toBe(10);
+        });
+    });
+});
+//# sourceMappingURL=gridstack-spec.js.map