@sankhyalabs/core 5.20.0-dev.7 → 5.20.0-dev.70

package/test/util/ElementUtils.spec.ts

@@ -0,0 +1,34 @@
+import { calcMarginSize } from '../../src/utils/ElementUtils';
+import { OverflowDirection } from '../../src';
+
+describe('calcMarginSize', () => {
+  it('should calculate correctly the size of horizontal margin', () => {
+    const element = document.createElement('div');
+    element.style.marginLeft = '10px';
+    element.style.marginRight = '15px';
+    document.body.appendChild(element);
+
+    const size = calcMarginSize(element, OverflowDirection.HORIZONTAL);
+    expect(size).toBe(25);
+  });
+
+  it('should calculate correctly the size of vertical margin', () => {
+    const element = document.createElement('div');
+    element.style.marginTop = '5px';
+    element.style.marginBottom = '20px';
+    document.body.appendChild(element);
+
+    const size = calcMarginSize(element, OverflowDirection.VERTICAL);
+    expect(size).toBe(25);
+  });
+
+  it('should threat values defined as zero', () => {
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+
+    const horizontalSize = calcMarginSize(element, OverflowDirection.HORIZONTAL);
+    const verticalSize = calcMarginSize(element, OverflowDirection.VERTICAL);
+    expect(horizontalSize).toBe(0);
+    expect(verticalSize).toBe(0);
+  });
+});

package/test/util/OverflowWatcher.spec.ts

@@ -0,0 +1,152 @@
+import OverflowWatcher, { OverFlowWatcherParams, OverflowDirection, OVERFLOWED_CLASS_NAME } from '../../src/utils/OverflowWatcher';
+
+describe('OverflowWatcher', () => {
+  let mockElement: HTMLElement;
+  let mockCallback: jest.Mock;
+  let watcherInstance: OverflowWatcher;
+
+  beforeEach(() => {
+    mockElement = document.createElement('div');
+    Object.defineProperty(mockElement, 'clientWidth', { value: 90, configurable: true });
+    document.body.appendChild(mockElement);
+    mockCallback = jest.fn();
+
+    const params: OverFlowWatcherParams = {
+      element: mockElement,
+      callback: mockCallback,
+      overFlowDirection: OverflowDirection.HORIZONTAL,
+      debounce: 1,
+      deltaSize: 1,
+      notOverFlow: ['testId'],
+    };
+
+    watcherInstance = new OverflowWatcher(params);
+    mockElement.getBoundingClientRect = jest.fn().mockReturnValue(getMockedRectClientValue(200));
+    setPrivateField(watcherInstance, '_lastContainerSize', 100);
+    setPrivateField(watcherInstance, '_lastContainerInstance', mockElement);
+  });
+
+  afterEach(() => {
+    watcherInstance.destroy();
+  });
+
+  it('should initialize with provided parameters', () => {
+    expect(watcherInstance).toBeDefined();
+  });
+
+  it('should disconect  ResizeObserver when destroy is called', () => {
+    const disconnectSpy = jest.spyOn(ResizeObserver.prototype, 'disconnect');
+    watcherInstance.destroy();
+    expect(disconnectSpy).toHaveBeenCalled();
+  });
+
+  it('Should call callback on forceUpdate', () => {
+    appendMockedChildren(mockElement);
+    watcherInstance.forceUpdate();
+    expect(mockCallback).toHaveBeenCalled();
+  });
+
+  it('Should call callback on forceUpdate with childSpan', () => {
+    appendMockedChildren(mockElement);
+    watcherInstance.forceUpdate();
+
+    const childSpan = mockElement.children[1];
+    expect(mockCallback).toHaveBeenCalledWith(expect.arrayContaining([childSpan]));
+  });
+
+  it('Should call callback on forceUpdate with childSpan when notOverFlow is empty', () => {
+    appendMockedChildren(mockElement);
+
+    const params: OverFlowWatcherParams = {
+      element: mockElement,
+      callback: mockCallback,
+      overFlowDirection: OverflowDirection.HORIZONTAL,
+      debounce: 1,
+      deltaSize: 1,
+    };
+
+    const withNoOverFlow = new OverflowWatcher(params);
+    setPrivateField(withNoOverFlow, '_lastContainerSize', 100);
+    setPrivateField(withNoOverFlow, '_lastContainerInstance', mockElement);
+
+    withNoOverFlow.forceUpdate();
+
+    const childSpan = mockElement.children[1];
+    expect(mockCallback).toHaveBeenCalledWith(expect.arrayContaining([childSpan]));
+  });
+
+  it('Should call callback on forceUpdate with childSpan considering overflowed elements', () => {
+    appendMockedChildren(mockElement);
+    const childButton = mockElement.children[0];
+    const childSpan = mockElement.children[1];
+    childSpan.classList.add(OVERFLOWED_CLASS_NAME);
+
+    const hiddemItemsMock: Map<Element, {size: number, margin: number}> = new Map();
+    hiddemItemsMock.set(childSpan, {size: 50, margin: 0});
+    hiddemItemsMock.set(childButton, {size: 0, margin: 50});
+    setPrivateField(watcherInstance, '_hiddenItemsProps', hiddemItemsMock);
+
+    watcherInstance.forceUpdate();
+
+    expect(mockCallback).toHaveBeenCalledWith(expect.arrayContaining([childSpan]));
+  });
+
+  it('Should call callback on forceUpdate with empty list', () => {
+    appendMockedChildren(mockElement);
+    setPrivateField(watcherInstance, '_lastContainerSize', 200);
+    watcherInstance.forceUpdate();
+    const childButton =  mockElement.children[0];
+    const childSpan = mockElement.children[1];
+
+    expect(mockCallback).not.toHaveBeenCalledWith(expect.arrayContaining([childButton, childSpan]));
+  });
+
+  it('should ignore elements that can not overflow', () => {
+    appendMockedChildren(mockElement);
+
+    const notOverflowElement = document.createElement('div');
+    notOverflowElement.setAttribute('data-element-id', 'testId') ;
+    notOverflowElement.getBoundingClientRect = jest.fn().mockReturnValue(getMockedRectClientValue(50));
+
+    const notOverflowElement2 = document.createElement('div');
+    notOverflowElement2.setAttribute('data-element-id', 'testId2') ;
+    notOverflowElement2.getBoundingClientRect = jest.fn().mockReturnValue(getMockedRectClientValue(50));
+
+    mockElement.appendChild(notOverflowElement);
+    mockElement.appendChild(notOverflowElement2);
+
+    watcherInstance.addNotOverFlowElement('testId');
+    watcherInstance.addNotOverFlowElement('testId2');
+
+    watcherInstance.forceUpdate();
+
+    expect(mockCallback).not.toHaveBeenCalledWith(expect.arrayContaining([notOverflowElement]));
+  });
+
+  it('Should not call callback on forceUpdate', () => {
+    watcherInstance.forceUpdate();
+    expect(mockCallback).not.toHaveBeenCalled();
+  });
+
+});
+
+function appendMockedChildren(mockElement: HTMLElement) {
+  const chilldButton = document.createElement('button');
+  const childSpan = document.createElement('span');
+
+  chilldButton.getBoundingClientRect = jest.fn().mockReturnValue(getMockedRectClientValue(50));
+  childSpan.getBoundingClientRect = jest.fn().mockReturnValue(getMockedRectClientValue(50));
+
+  mockElement.appendChild(chilldButton);
+  mockElement.appendChild(childSpan);
+}
+
+function getMockedRectClientValue(size: number) {
+  return {
+    x: 0, y: 0, width: size, height: 10, top: 0, right: 0, bottom: 0, left: 0, toJSON: () => {}
+  };
+}
+
+function setPrivateField<T>(instance: T, fieldName: string, value: any): void {
+  (instance as any)[fieldName] = value;
+}