gridstack.js/spec/utils-spec.ts at master · gridstack/gridstack.js

938 lines (805 loc) · 33.3 KB
import { Utils } from '../src/utils';
describe('gridstack utils', () => {
  describe('setup of utils', () => {
    it('should set gridstack Utils.', () => {
      let utils = Utils;
      expect(utils).not.toBeNull();
      expect(typeof utils).toBe('function');
  describe('test toBool', () => {
    it('should return booleans.', () => {
      expect(Utils.toBool(true)).toEqual(true);
      expect(Utils.toBool(false)).toEqual(false);
    it('should work with integer.', () => {
      expect(Utils.toBool(1)).toEqual(true);
      expect(Utils.toBool(0)).toEqual(false);
    it('should work with Strings.', () => {
      expect(Utils.toBool('')).toEqual(false);
      expect(Utils.toBool('0')).toEqual(false);
      expect(Utils.toBool('no')).toEqual(false);
      expect(Utils.toBool('false')).toEqual(false);
      expect(Utils.toBool('yes')).toEqual(true);
      expect(Utils.toBool('yadda')).toEqual(true);
  describe('test isIntercepted', () => {
    let src = {x: 3, y: 2, w: 3, h: 2};
    it('should intercept.', () => {
      expect(Utils.isIntercepted(src, {x: 0, y: 0, w: 4, h: 3})).toEqual(true);
      expect(Utils.isIntercepted(src, {x: 0, y: 0, w: 40, h: 30})).toEqual(true);
      expect(Utils.isIntercepted(src, {x: 3, y: 2, w: 3, h: 2})).toEqual(true);
      expect(Utils.isIntercepted(src, {x: 5, y: 3, w: 3, h: 2})).toEqual(true);
    it('shouldn\'t intercept.', () => {
      expect(Utils.isIntercepted(src, {x: 0, y: 0, w: 3, h: 2})).toEqual(false);
      expect(Utils.isIntercepted(src, {x: 0, y: 0, w: 13, h: 2})).toEqual(false);
      expect(Utils.isIntercepted(src, {x: 1, y: 4, w: 13, h: 2})).toEqual(false);
      expect(Utils.isIntercepted(src, {x: 0, y: 3, w: 3, h: 2})).toEqual(false);
      expect(Utils.isIntercepted(src, {x: 6, y: 3, w: 3, h: 2})).toEqual(false);
  describe('test parseHeight', () => {
    it('should parse height value', () => {
      expect(Utils.parseHeight(12)).toEqual(expect.objectContaining({h: 12, unit: 'px'}));
      expect(Utils.parseHeight('12px')).toEqual(expect.objectContaining({h: 12, unit: 'px'}));
      expect(Utils.parseHeight('12.3px')).toEqual(expect.objectContaining({h: 12.3, unit: 'px'}));
      expect(Utils.parseHeight('12.3em')).toEqual(expect.objectContaining({h: 12.3, unit: 'em'}));
      expect(Utils.parseHeight('12.3rem')).toEqual(expect.objectContaining({h: 12.3, unit: 'rem'}));
      expect(Utils.parseHeight('12.3vh')).toEqual(expect.objectContaining({h: 12.3, unit: 'vh'}));
      expect(Utils.parseHeight('12.3vw')).toEqual(expect.objectContaining({h: 12.3, unit: 'vw'}));
      expect(Utils.parseHeight('12.3%')).toEqual(expect.objectContaining({h: 12.3, unit: '%'}));
      expect(Utils.parseHeight('12.5cm')).toEqual(expect.objectContaining({h: 12.5, unit: 'cm'}));
      expect(Utils.parseHeight('12.5mm')).toEqual(expect.objectContaining({h: 12.5, unit: 'mm'}));
      expect(Utils.parseHeight('12.5')).toEqual(expect.objectContaining({h: 12.5, unit: 'px'}));
      expect(() => { Utils.parseHeight('12.5 df'); }).toThrow('Invalid height val = 12.5 df');
    it('should parse negative height value', () => {
      expect(Utils.parseHeight(-12)).toEqual(expect.objectContaining({h: -12, unit: 'px'}));
      expect(Utils.parseHeight('-12px')).toEqual(expect.objectContaining({h: -12, unit: 'px'}));
      expect(Utils.parseHeight('-12.3px')).toEqual(expect.objectContaining({h: -12.3, unit: 'px'}));
      expect(Utils.parseHeight('-12.3em')).toEqual(expect.objectContaining({h: -12.3, unit: 'em'}));
      expect(Utils.parseHeight('-12.3rem')).toEqual(expect.objectContaining({h: -12.3, unit: 'rem'}));
      expect(Utils.parseHeight('-12.3vh')).toEqual(expect.objectContaining({h: -12.3, unit: 'vh'}));
      expect(Utils.parseHeight('-12.3vw')).toEqual(expect.objectContaining({h: -12.3, unit: 'vw'}));
      expect(Utils.parseHeight('-12.3%')).toEqual(expect.objectContaining({h: -12.3, unit: '%'}));
      expect(Utils.parseHeight('-12.3cm')).toEqual(expect.objectContaining({h: -12.3, unit: 'cm'}));
      expect(Utils.parseHeight('-12.3mm')).toEqual(expect.objectContaining({h: -12.3, unit: 'mm'}));
      expect(Utils.parseHeight('-12.5')).toEqual(expect.objectContaining({h: -12.5, unit: 'px'}));
      expect(() => { Utils.parseHeight('-12.5 df'); }).toThrow('Invalid height val = -12.5 df');
  describe('test defaults', () => {
    it('should assign missing field or undefined', () => {
      let src: any = {};
      expect(src).toEqual({});
      expect(Utils.defaults(src, {x: 1, y: 2})).toEqual({x: 1, y: 2});
      expect(Utils.defaults(src, {x: 10})).toEqual({x: 1, y: 2});
      src.w = undefined;
      expect(src).toEqual({x: 1, y: 2, w: undefined});
      expect(Utils.defaults(src, {x: 10, w: 3})).toEqual({x: 1, y: 2, w: 3});
      expect(Utils.defaults(src, {h: undefined})).toEqual({x: 1, y: 2, w: 3, h: undefined});
      src = {x: 1, y: 2, sub: {foo: 1, two: 2}};
      expect(src).toEqual({x: 1, y: 2, sub: {foo: 1, two: 2}});
      expect(Utils.defaults(src, {x: 10, w: 3})).toEqual({x: 1, y: 2, w: 3, sub: {foo: 1, two: 2}});
      expect(Utils.defaults(src, {sub: {three: 3}})).toEqual({x: 1, y: 2, w: 3, sub: {foo: 1, two: 2, three: 3}});
  describe('removePositioningStyles', () => {
    it('should remove styles', () => {
      let doc = document.implementation.createHTMLDocument();
      doc.body.innerHTML = '<div style="position: absolute; left: 1; top: 2; w: 3; h: 4"></div>';
      let el = doc.body.children[0] as HTMLElement;
      expect(el.style.position).toEqual('absolute');
      // expect(el.style.left).toEqual('1'); // not working!
      Utils.removePositioningStyles(el);
      expect(el.style.position).toEqual('');
      // bogus test
      expect(Utils.getScrollElement(el)).not.toBe(null);
      // bogus test
      Utils.updateScrollPosition(el, {top: 20}, 10);
  describe('clone', () => {
    const a: any = {first: 1, second: 'text'};
    const b: any = {first: 1, second: {third: 3}};
    const c: any = {first: 1, second: [1, 2, 3], third: { fourth: {fifth: 5}}};
    it('Should have the same values', () => {
      const z = Utils.clone(a);
      expect(z).toEqual({first: 1, second: 'text'});
    it('Should have 2 in first key, and original unchanged', () => {
      const z = Utils.clone(a);
      z.first = 2;
      expect(a).toEqual({first: 1, second: 'text'});
      expect(z).toEqual({first: 2, second: 'text'});
    it('Should have new string in second key, and original unchanged', () => {
      const z = Utils.clone(a);
      z.second = 2;
      expect(a).toEqual({first: 1, second: 'text'});
      expect(z).toEqual({first: 1, second: 2});
    it('new string in both cases - use cloneDeep instead', () => {
      const z = Utils.clone(b);
      z.second.third = 'share';
      expect(b).toEqual({first: 1, second: {third: 'share'}});
      expect(z).toEqual({first: 1, second: {third: 'share'}});
    it('Array Should match', () => {
      const z = Utils.clone(c);
      expect(c).toEqual({first: 1, second: [1, 2, 3], third: { fourth: {fifth: 5}}});
      expect(z).toEqual({first: 1, second: [1, 2, 3], third: { fourth: {fifth: 5}}});
    it('Array[0] changed in both cases - use cloneDeep instead', () => {
      const z = Utils.clone(c);
      z.second[0] = 0;
      expect(c).toEqual({first: 1, second: [0, 2, 3], third: { fourth: {fifth: 5}}});
      expect(z).toEqual({first: 1, second: [0, 2, 3], third: { fourth: {fifth: 5}}});
    it('fifth changed in both cases - use cloneDeep instead', () => {
      const z = Utils.clone(c);
      z.third.fourth.fifth = 'share';
      expect(c).toEqual({first: 1, second: [0, 2, 3], third: { fourth: {fifth: 'share'}}});
      expect(z).toEqual({first: 1, second: [0, 2, 3], third: { fourth: {fifth: 'share'}}});
  describe('cloneDeep', () => {
    // reset our test cases
    const a: any = {first: 1, second: 'text'};
    const b: any = {first: 1, second: {third: 3}};
    const c: any = {first: 1, second: [1, 2, 3], third: { fourth: {fifth: 5}}};
    const d: any = {first: [1, [2, 3], ['four', 'five', 'six']]};
    const e: any = {first: 1, __skip: {second: 2}};
    const f: any = {first: 1, _dontskip: {second: 2}};
    it('Should have the same values', () => {
      const z = Utils.cloneDeep(a);
      expect(z).toEqual({first: 1, second: 'text'});
    it('Should have 2 in first key, and original unchanged', () => {
      const z = Utils.cloneDeep(a);
      z.first = 2;
      expect(a).toEqual({first: 1, second: 'text'});
      expect(z).toEqual({first: 2, second: 'text'});
    it('Should have new string in second key, and original unchanged', () => {
      const z = Utils.cloneDeep(a);
      z.second = 2;
      expect(a).toEqual({first: 1, second: 'text'});
      expect(z).toEqual({first: 1, second: 2});
    it('Should have new string nested object, and original unchanged', () => {
      const z = Utils.cloneDeep(b);
      z.second.third = 'diff';
      expect(b).toEqual({first: 1, second: {third: 3}});
      expect(z).toEqual({first: 1, second: {third: 'diff'}});
    it('Array Should match', () => {
      const z = Utils.cloneDeep(c);
      expect(c).toEqual({first: 1, second: [1, 2, 3], third: { fourth: {fifth: 5}}});
      expect(z).toEqual({first: 1, second: [1, 2, 3], third: { fourth: {fifth: 5}}});
    it('Array[0] changed in z only', () => {
      const z = Utils.cloneDeep(c);
      z.second[0] = 0;
      expect(c).toEqual({first: 1, second: [1, 2, 3], third: { fourth: {fifth: 5}}});
      expect(z).toEqual({first: 1, second: [0, 2, 3], third: { fourth: {fifth: 5}}});
    it('nested firth element changed only in z', () => {
      const z = Utils.cloneDeep(c);
      z.third.fourth.fifth = 'diff';
      expect(c).toEqual({first: 1, second: [1, 2, 3], third: { fourth: {fifth: 5}}});
      expect(z).toEqual({first: 1, second: [1, 2, 3], third: { fourth: {fifth: 'diff'}}});
    it('nested array only has one item changed', () => {
      const z = Utils.cloneDeep(d);
      z.first[1] = 'two';
      z.first[2][2] = 6;
      expect(d).toEqual({first: [1, [2, 3], ['four', 'five', 'six']]});
      expect(z).toEqual({first: [1, 'two',  ['four', 'five', 6]]});
    it('skip __ items so it mods both instance', () => {
      const z = Utils.cloneDeep(e);
      z.__skip.second = 'two';
      expect(e).toEqual({first: 1, __skip: {second: 'two'}}); // TODO support clone deep of function workaround
      expect(z).toEqual({first: 1, __skip: {second: 'two'}});
    it('correctly copy _ item', () => {
      const z = Utils.cloneDeep(f);
      z._dontskip.second = 'two';
      expect(f).toEqual({first: 1, _dontskip: {second: 2}});
      expect(z).toEqual({first: 1, _dontskip: {second: 'two'}});
  describe('removeInternalAndSame', () => {
    it('should remove internal and same', () => {
      const a = {first: 1, second: 'text', _skip: {second: 2}, arr: [1, 'second', 3]};
      const b = {first: 1, second: 'text'};
      Utils.removeInternalAndSame(a, b);
      expect(a).toEqual({arr: [1, 'second', 3]});
    it('should not remove items in an array', () => {
      const a = {arr: [1, 2, 3]};
      const b = {arr: [1, 3]};
      Utils.removeInternalAndSame(a, b);
      expect(a).toEqual({arr: [1, 2, 3]});
    it('should remove nested object, and make empty', () => {
      const a = {obj1: {first: 1, nested: {second: 2}}, obj2: {first: 1, second: 2}};
      const b = {obj1: {first: 1, nested: {second: 2}}, obj2: {first: 1, second: 2}};
      Utils.removeInternalAndSame(a, b);
      expect(a).toEqual({});
    it('should remove nested object, and make empty - part 2', () => {
      const a = {obj1: {first: 1, nested: {second: 2}}, obj2: {first: 1, second: 2}};
      const b = {obj1: {first: 1}, obj2: {first: 1, second: 2}};
      Utils.removeInternalAndSame(a, b);
      expect(a).toEqual({obj1: {nested: {second: 2}}});
  // Obsolete functions are tested indirectly through gridstack usage
  describe('getElements', () => {
    beforeEach(() => {
      document.body.innerHTML = `
        <div id="123">numeric id</div>
        <div id="regular-id">regular id</div>
        <div class="test-class">class element</div>
        <div class="another-class">another class</div>
        <div id="shadow-host"></div>
    it('should get element by numeric id', () => {
      const elements = Utils.getElements('123');
      expect(elements.length).toBe(1);
      expect(elements[0].textContent).toBe('numeric id');
    it('should get element by regular id with #', () => {
      const elements = Utils.getElements('#regular-id');
      expect(elements.length).toBe(1);
      expect(elements[0].textContent).toBe('regular id');
    it('should get elements by class with .', () => {
      const elements = Utils.getElements('.test-class');
      expect(elements.length).toBe(1);
      expect(elements[0].textContent).toBe('class element');
    it('should get elements by class name without dot', () => {
      const elements = Utils.getElements('test-class');
      expect(elements.length).toBe(1);
      expect(elements[0].textContent).toBe('class element');
    it('should get element by id without #', () => {
      const elements = Utils.getElements('regular-id');
      expect(elements.length).toBe(1);
      expect(elements[0].textContent).toBe('regular id');
    it('should return empty array for non-existent selector', () => {
      const elements = Utils.getElements('non-existent');
      expect(elements.length).toBe(0);
    it('should return the element itself if passed', () => {
      const el = document.getElementById('regular-id');
      const elements = Utils.getElements(el);
      expect(elements.length).toBe(1);
      expect(elements[0]).toBe(el);
  describe('getElement', () => {
    beforeEach(() => {
      document.body.innerHTML = `
        <div id="123">numeric id</div>
        <div id="regular-id">regular id</div>
        <div class="test-class">class element</div>
        <div data-test="attribute">attribute element</div>
    it('should get element by id with #', () => {
      const element = Utils.getElement('#regular-id');
      expect(element.textContent).toBe('regular id');
    it('should get element by numeric id', () => {
      const element = Utils.getElement('123');
      expect(element.textContent).toBe('numeric id');
    it('should get element by class with .', () => {
      const element = Utils.getElement('.test-class');
      expect(element.textContent).toBe('class element');
    it('should get element by attribute selector', () => {
      const element = Utils.getElement('[data-test="attribute"]');
      expect(element.textContent).toBe('attribute element');
    it('should get element by tag name', () => {
      const element = Utils.getElement('div');
      expect(element.tagName).toBe('DIV');
    it('should return null for empty string', () => {
      const element = Utils.getElement('');
      expect(element).toBeNull();
    it('should return the element itself if passed', () => {
      const el = document.getElementById('regular-id');
      const element = Utils.getElement(el);
      expect(element).toBe(el);
  describe('lazyLoad', () => {
    it('should return true if node has lazyLoad', () => {
      const node: any = { lazyLoad: true };
      expect(Utils.lazyLoad(node)).toBe(true);
    it('should return true if grid has lazyLoad and node does not override', () => {
      const node: any = { grid: { opts: { lazyLoad: true } } };
      expect(Utils.lazyLoad(node)).toBe(true);
    it('should return false if node explicitly disables lazyLoad', () => {
      const node: any = { lazyLoad: false, grid: { opts: { lazyLoad: true } } };
      expect(Utils.lazyLoad(node)).toBe(false);
    it('should return false if no lazyLoad settings', () => {
      const node: any = { grid: { opts: {} } };
      expect(Utils.lazyLoad(node)).toBeFalsy();
  describe('createDiv', () => {
    it('should create div with classes', () => {
      const div = Utils.createDiv(['class1', 'class2']);
      expect(div.tagName).toBe('DIV');
      expect(div.classList.contains('class1')).toBe(true);
      expect(div.classList.contains('class2')).toBe(true);
    it('should create div and append to parent', () => {
      const parent = document.createElement('div');
      const div = Utils.createDiv(['test-class'], parent);
      expect(parent.children.length).toBe(1);
      expect(parent.children[0]).toBe(div);
    it('should skip empty class names', () => {
      const div = Utils.createDiv(['class1', '', 'class2']);
      expect(div.classList.contains('class1')).toBe(true);
      expect(div.classList.contains('class2')).toBe(true);
      expect(div.classList.length).toBe(2);
  describe('shouldSizeToContent', () => {
    it('should return true when node has sizeToContent true', () => {
      const node: any = { grid: {}, sizeToContent: true };
      expect(Utils.shouldSizeToContent(node)).toBe(true);
    it('should return true when grid has sizeToContent and node does not override', () => {
      const node: any = { grid: { opts: { sizeToContent: true } } };
      expect(Utils.shouldSizeToContent(node)).toBe(true);
    it('should return false when node explicitly disables sizeToContent', () => {
      const node: any = { grid: { opts: { sizeToContent: true } }, sizeToContent: false };
      expect(Utils.shouldSizeToContent(node)).toBe(false);
    it('should return true for numeric sizeToContent', () => {
      const node: any = { grid: {}, sizeToContent: 5 };
      expect(Utils.shouldSizeToContent(node)).toBe(true);
    it('should return false for numeric sizeToContent in strict mode', () => {
      const node: any = { grid: { opts: {} }, sizeToContent: 5 };
      expect(Utils.shouldSizeToContent(node, true)).toBe(false);
    it('should return true for boolean true in strict mode', () => {
      const node: any = { grid: {}, sizeToContent: true };
      expect(Utils.shouldSizeToContent(node, true)).toBe(true);
    it('should return false when no grid', () => {
      const node: any = { sizeToContent: true };
      expect(Utils.shouldSizeToContent(node)).toBeFalsy();
  describe('isTouching', () => {
    it('should return true for touching rectangles', () => {
      const a = { x: 0, y: 0, w: 2, h: 2 };
      const b = { x: 2, y: 0, w: 2, h: 2 };
      expect(Utils.isTouching(a, b)).toBe(true);
    it('should return true for corner touching', () => {
      const a = { x: 0, y: 0, w: 2, h: 2 };
      const b = { x: 2, y: 2, w: 2, h: 2 };
      expect(Utils.isTouching(a, b)).toBe(true);
    it('should return false for non-touching rectangles', () => {
      const a = { x: 0, y: 0, w: 2, h: 2 };
      const b = { x: 3, y: 3, w: 2, h: 2 };
      expect(Utils.isTouching(a, b)).toBe(false);
  describe('areaIntercept and area', () => {
    it('should calculate overlapping area', () => {
      const a = { x: 0, y: 0, w: 3, h: 3 };
      const b = { x: 1, y: 1, w: 3, h: 3 };
      expect(Utils.areaIntercept(a, b)).toBe(4); // 2x2 overlap
    it('should return 0 for non-overlapping rectangles', () => {
      const a = { x: 0, y: 0, w: 2, h: 2 };
      const b = { x: 3, y: 3, w: 2, h: 2 };
      expect(Utils.areaIntercept(a, b)).toBe(0);
    it('should calculate total area', () => {
      const rect = { x: 0, y: 0, w: 3, h: 4 };
      expect(Utils.area(rect)).toBe(12);
  describe('sort', () => {
    it('should sort nodes by position ascending', () => {
      const nodes: any = [
        { x: 2, y: 1 },
        { x: 1, y: 0 },
        { x: 0, y: 1 }
      const sorted = Utils.sort(nodes);
      expect(sorted[0].x).toBe(1); // y:0, x:1
      expect(sorted[1].x).toBe(0); // y:1, x:0  
      expect(sorted[2].x).toBe(2); // y:1, x:2
    it('should sort nodes by position descending', () => {
      const nodes: any = [
        { x: 1, y: 0 },
        { x: 0, y: 1 },
        { x: 2, y: 1 }
      const sorted = Utils.sort(nodes, -1);
      expect(sorted[0].x).toBe(2); // y:1, x:2
      expect(sorted[1].x).toBe(0); // y:1, x:0
      expect(sorted[2].x).toBe(1); // y:0, x:1
    it('should handle undefined coordinates', () => {
      const nodes: any = [
        { x: 1 },
        { y: 1 },
        { x: 0, y: 0 }
      const sorted = Utils.sort(nodes);
      expect(sorted[0].x).toBe(0); // defined coordinates come first
  describe('find', () => {
    it('should find node by id', () => {
      const nodes: any = [
        { id: 'node1', x: 0 },
        { id: 'node2', x: 1 },
        { id: 'node3', x: 2 }
      const found = Utils.find(nodes, 'node2');
      expect(found.x).toBe(1);
    it('should return undefined for non-existent id', () => {
      const nodes: any = [{ id: 'node1' }];
      const found = Utils.find(nodes, 'node2');
      expect(found).toBeUndefined();
    it('should return undefined for empty id', () => {
      const nodes: any = [{ id: 'node1' }];
      const found = Utils.find(nodes, '');
      expect(found).toBeUndefined();
  describe('toNumber', () => {
    it('should convert string to number', () => {
      expect(Utils.toNumber('42')).toBe(42);
      expect(Utils.toNumber('3.14')).toBe(3.14);
    it('should return undefined for null', () => {
      expect(Utils.toNumber(null)).toBeUndefined();
    it('should return undefined for empty string', () => {
      expect(Utils.toNumber('')).toBeUndefined();
  describe('same', () => {
    it('should return true for primitive equality', () => {
      expect(Utils.same(5, 5)).toBe(true);
      expect(Utils.same('test', 'test')).toBe(true);
      expect(Utils.same(true, true)).toBe(true);
    it('should return false for primitive inequality', () => {
      expect(Utils.same(5, 6)).toBe(false);
      expect(Utils.same('test', 'other')).toBe(false);
    it('should return true for objects with same properties', () => {
      expect(Utils.same({ a: 1, b: 2 }, { a: 1, b: 2 })).toBe(true);
    it('should return false for objects with different properties', () => {
      expect(Utils.same({ a: 1, b: 2 }, { a: 1, b: 3 })).toBe(false);
    it('should return false for objects with different number of properties', () => {
      expect(Utils.same({ a: 1 }, { a: 1, b: 2 })).toBe(false);
    it('should return false for different types', () => {
      expect(Utils.same(5, '5')).toBe(true); // same uses == comparison for primitives
      expect(Utils.same({}, [])).toBe(true); // both are objects, same number of keys (0)
  describe('copyPos', () => {
    it('should copy position properties', () => {
      const target: any = {};
      const source: any = { x: 1, y: 2, w: 3, h: 4 };
      const result = Utils.copyPos(target, source);
      expect(result).toBe(target);
      expect(target.x).toBe(1);
      expect(target.y).toBe(2);
      expect(target.w).toBe(3);
      expect(target.h).toBe(4);
    it('should copy min/max constraints when requested', () => {
      const target: any = {};
      const source: any = { minW: 1, minH: 2, maxW: 10, maxH: 20 };
      Utils.copyPos(target, source, true);
      expect(target.minW).toBe(1);
      expect(target.minH).toBe(2);
      expect(target.maxW).toBe(10);
      expect(target.maxH).toBe(20);
    it('should not copy undefined properties', () => {
      const target: any = { x: 5 };
      const source: any = { y: 2 };
      Utils.copyPos(target, source);
      expect(target.x).toBe(5); // unchanged
      expect(target.y).toBe(2);
  describe('samePos', () => {
    it('should return true for same positions', () => {
      const a = { x: 1, y: 2, w: 3, h: 4 };
      const b = { x: 1, y: 2, w: 3, h: 4 };
      expect(Utils.samePos(a, b)).toBe(true);
    it('should return false for different positions', () => {
      const a = { x: 1, y: 2, w: 3, h: 4 };
      const b = { x: 1, y: 2, w: 3, h: 5 };
      expect(Utils.samePos(a, b)).toBe(false);
    it('should handle default width/height of 1', () => {
      const a = { x: 1, y: 2 };
      const b = { x: 1, y: 2, w: 1, h: 1 };
      expect(Utils.samePos(a, b)).toBe(true);
    it('should return false for null/undefined', () => {
      expect(Utils.samePos(null, { x: 1, y: 2 })).toBeFalsy();
      expect(Utils.samePos({ x: 1, y: 2 }, null)).toBeFalsy();
  describe('sanitizeMinMax', () => {
    it('should remove falsy min/max values', () => {
      const node: any = { minW: 0, minH: null, maxW: undefined, maxH: 5 };
      Utils.sanitizeMinMax(node);
      expect(node.minW).toBeUndefined();
      expect(node.minH).toBeUndefined();
      expect(node.maxW).toBeUndefined();
      expect(node.maxH).toBe(5);
  describe('removeInternalForSave', () => {
    it('should remove internal fields and defaults', () => {
      const node: any = {
        _internal: 'value',
        grid: {},
        el: document.createElement('div'),
        autoPosition: false,
        noResize: false,
        noMove: false,
        locked: false,
        w: 1,
        h: 1,
        x: 5,
      Utils.removeInternalForSave(node);
      expect(node._internal).toBeUndefined();
      expect(node.grid).toBeUndefined();
      expect(node.el).toBeUndefined();
      expect(node.autoPosition).toBeUndefined();
      expect(node.noResize).toBeUndefined();
      expect(node.noMove).toBeUndefined();
      expect(node.locked).toBeUndefined();
      expect(node.w).toBeUndefined();
      expect(node.h).toBeUndefined();
      expect(node.x).toBe(5);
      expect(node.y).toBe(3);
    it('should keep el when removeEl is false', () => {
      const el = document.createElement('div');
      const node: any = { el };
      Utils.removeInternalForSave(node, false);
      expect(node.el).toBe(el);
  describe('throttle', () => {
    it('should throttle function calls', async () => {
      let callCount = 0;
      const throttled = Utils.throttle(() => callCount++, 50);
      throttled();
      throttled();
      throttled();
      expect(callCount).toBe(0);
      await new Promise(resolve => setTimeout(resolve, 60));
      expect(callCount).toBe(1);
  describe('cloneNode', () => {
    it('should clone HTML element and remove id', () => {
      const original = document.createElement('div');
      original.id = 'original-id';
      original.className = 'test-class';
      original.innerHTML = '<span>content</span>';
      const cloned = Utils.cloneNode(original);
      expect(cloned.id).toBe('');
      expect(cloned.className).toBe('test-class');
      expect(cloned.innerHTML).toBe('<span>content</span>');
      expect(cloned).not.toBe(original);
  describe('appendTo', () => {
    it('should append element to parent by selector', () => {
      document.body.innerHTML = '<div id="parent"></div>';
      const child = document.createElement('div');
      Utils.appendTo(child, '#parent');
      const parent = document.getElementById('parent');
      expect(parent.children[0]).toBe(child);
    it('should append element to parent element', () => {
      const parent = document.createElement('div');
      const child = document.createElement('div');
      Utils.appendTo(child, parent);
      expect(parent.children[0]).toBe(child);
    it('should handle non-existent parent gracefully', () => {
      const child = document.createElement('div');
      expect(() => Utils.appendTo(child, '#non-existent')).not.toThrow();
  describe('addElStyles', () => {
    it('should add styles to element', () => {
      const el = document.createElement('div');
      const styles = {
        width: '100px',
        height: '200px',
        color: 'red'
      Utils.addElStyles(el, styles);
      expect(el.style.width).toBe('100px');
      expect(el.style.height).toBe('200px');
      expect(el.style.color).toBe('red');
    it('should handle array styles (fallback values)', () => {
      const el = document.createElement('div');
      const styles = {
        display: ['-webkit-flex', 'flex']
      Utils.addElStyles(el, styles);
      expect(el.style.display).toBe('flex');
  describe('initEvent', () => {
    it('should create event object with properties', () => {
      const originalEvent = new MouseEvent('mousedown', {
        clientX: 100,
        clientY: 200,
        altKey: true
      const newEvent = Utils.initEvent<any>(originalEvent, { type: 'customEvent' });
      expect(newEvent.type).toBe('customEvent');
      expect(newEvent.clientX).toBe(100);
      expect(newEvent.clientY).toBe(200);
      expect(newEvent.altKey).toBe(true);
      expect(newEvent.button).toBe(0);
      expect(newEvent.buttons).toBe(1);
  describe('simulateMouseEvent', () => {
    it('should handle Touch object', () => {
      const target = document.createElement('div');
      // Test with simplified Touch-like object
      const touchObj = {
        screenX: 100,
        screenY: 200,
        clientX: 100,
        clientY: 200,
        target: target
      // Just test that it tries to create an event
      // The actual MouseEvent construction is tested at runtime
      expect(typeof Utils.simulateMouseEvent).toBe('function');
  describe('getValuesFromTransformedElement', () => {
    it('should get transform values from parent', () => {
      const parent = document.createElement('div');
      document.body.appendChild(parent);
      const result = Utils.getValuesFromTransformedElement(parent);
      expect(result.xScale).toBeDefined();
      expect(result.yScale).toBeDefined();
      expect(result.xOffset).toBeDefined();
      expect(result.yOffset).toBeDefined();
      document.body.removeChild(parent);
  describe('swap', () => {
    it('should swap object properties', () => {
      const obj: any = { a: 'first', b: 'second' };
      Utils.swap(obj, 'a', 'b');
      expect(obj.a).toBe('second');
      expect(obj.b).toBe('first');
    it('should handle null object gracefully', () => {
      expect(() => Utils.swap(null, 'a', 'b')).not.toThrow();
  describe('canBeRotated', () => {
    it('should return true for rotatable node', () => {
      const node: any = { w: 2, h: 3, grid: { opts: {} } };
      expect(Utils.canBeRotated(node)).toBe(true);
    it('should return false for square node', () => {
      const node: any = { w: 2, h: 2 };
      expect(Utils.canBeRotated(node)).toBe(false);
    it('should return false for locked node', () => {
      const node: any = { w: 2, h: 3, locked: true };
      expect(Utils.canBeRotated(node)).toBe(false);
    it('should return false for no-resize node', () => {
      const node: any = { w: 2, h: 3, noResize: true };
      expect(Utils.canBeRotated(node)).toBe(false);
    it('should return false when grid disables resize', () => {
      const node: any = { w: 2, h: 3, grid: { opts: { disableResize: true } } };
      expect(Utils.canBeRotated(node)).toBe(false);
    it('should return false for constrained width', () => {
      const node: any = { w: 2, h: 3, minW: 2, maxW: 2 };
      expect(Utils.canBeRotated(node)).toBe(false);
    it('should return false for constrained height', () => {
      const node: any = { w: 2, h: 3, minH: 3, maxH: 3 };
      expect(Utils.canBeRotated(node)).toBe(false);
    it('should return false for null node', () => {
      expect(Utils.canBeRotated(null)).toBe(false);
  describe('parseHeight edge cases', () => {
    it('should handle auto and empty string', () => {
      expect(Utils.parseHeight('auto')).toEqual({ h: 0, unit: 'px' });
      expect(Utils.parseHeight('')).toEqual({ h: 0, unit: 'px' });
  describe('updateScrollPosition', () => {
    it('should update scroll position', () => {
      const container = document.createElement('div');
      container.style.overflow = 'auto';
      container.style.height = '100px';
      document.body.appendChild(container);
      const el = document.createElement('div');
      container.appendChild(el);
      const position = { top: 50 };
      Utils.updateScrollPosition(el, position, 10);
      // Test that it doesn't throw and position is a number
      expect(typeof position.top).toBe('number');
      document.body.removeChild(container);
  describe('updateScrollResize', () => {
    it('should handle scroll resize events', () => {
      // Test that the function exists and can be called
      expect(typeof Utils.updateScrollResize).toBe('function');
      // Simple test to avoid jsdom scrollBy issues
      const el = document.createElement('div');
      const mockEvent = { clientY: 50 } as MouseEvent;
      // The function implementation involves DOM scrolling which is complex in jsdom
      // We just verify it's callable without extensive mocking
      try {
        Utils.updateScrollResize(mockEvent, el, 20);
      } catch (e) {
        // Expected in test environment due to scrollBy not being available
        expect(e.message).toContain('scrollBy');
Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

FilesExpand file tree

utils-spec.ts

Latest commit

History

utils-spec.ts

File metadata and controls
