@zeedhi/teknisa-components-common 1.88.0 → 1.90.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/teknisa-components-common",
-  "version": "1.88.0",
+  "version": "1.90.0",
   "description": "Teknisa Components Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -18,6 +18,7 @@
     "watch": "npm run build -- -w"
   },
   "dependencies": {
+    "@zeedhi/zd-drag-grid-common": "*",
     "@zeedhi/zd-user-info-common": "*",
     "lodash.debounce": "4.0.*",
     "lodash.get": "4.4.*",
@@ -31,5 +32,5 @@
   "peerDependencies": {
     "@zeedhi/core": "*"
   },
-  "gitHead": "a1c73be520b15a08069998ea866a092204ef74b2"
+  "gitHead": "85a8108906ad118d851958914b4fb8d3719e9051"
 }

package/tests/unit/components/tek-drag-grid/tek-drag-grid.spec.ts

@@ -0,0 +1,112 @@
+import { IDictionary } from '@zeedhi/core';
+import { TekDragGrid } from '../../../../src/components/tek-drag-grid/tek-drag-grid';
+
+const dragFromXToY = (from: number, to: number, data: IDictionary[]) => {
+  const row = data[from];
+  data.splice(from, 1);
+  data.splice(to, 0, row);
+  const event = {
+    oldIndex: from,
+    newIndex: to,
+  } as any;
+  const element = {} as HTMLElement;
+
+  return { event, element, row };
+};
+
+describe('DragGrid', () => {
+  describe('constructor()', () => {
+    it('create instance', () => {
+      const instance = new TekDragGrid({
+        name: 'DragGrid',
+        component: 'DragGrid',
+        orderColumnName: 'order',
+      });
+
+      expect(instance.orderColumnName).toBe('order');
+      expect(instance.orderMode).toBe('asc');
+
+      instance.orderColumnName = 'newOrder';
+      instance.orderMode = 'desc';
+
+      expect(instance.orderColumnName).toBe('newOrder');
+      expect(instance.orderMode).toBe('desc');
+    });
+  });
+
+  describe('onDragMove', () => {
+    it('should call onDragMove event', () => {
+      const onDragMove = jest.fn();
+
+      const instance = new TekDragGrid({
+        name: 'DragGrid',
+        component: 'DragGrid',
+        orderColumnName: 'order',
+        events: {
+          onDragMove,
+        },
+      });
+
+      const event = {} as Event;
+      const row = {};
+      const element = {} as HTMLElement;
+
+      instance.onDragMove(event, row, element);
+
+      expect(onDragMove).toHaveBeenCalled();
+    });
+  });
+
+  describe('onDragStart', () => {
+    it('should call onDragStart event', () => {
+      const onDragStart = jest.fn();
+
+      const instance = new TekDragGrid({
+        name: 'DragGrid',
+        component: 'DragGrid',
+        orderColumnName: 'order',
+        events: {
+          onDragStart,
+        },
+      });
+
+      const event = {} as Event;
+      const row = {};
+      const element = {} as HTMLElement;
+
+      instance.onDragStart(event, row, element);
+
+      expect(onDragStart).toHaveBeenCalled();
+    });
+  });
+
+  describe('onDragEnd()', () => {
+    it('when called, should change order columns of the rows', () => {
+      const instance = new TekDragGrid({
+        name: 'DragGrid',
+        component: 'DragGrid',
+        orderColumnName: 'order',
+        datasource: {
+          uniqueKey: 'id',
+          data: [
+            { id: 1, name: 'a', order: 0 },
+            { id: 2, name: 'b', order: 1 },
+            { id: 3, name: 'c', order: 2 },
+            { id: 4, name: 'd', order: 3 },
+          ],
+        },
+      });
+
+      const { event, row, element } = dragFromXToY(0, 1, instance.datasource.data);
+      instance.onDragEnd(event, row, element);
+
+      const editedrows = instance.getEditedRows();
+      expect(editedrows).toEqual(
+        expect.arrayContaining([
+          { id: 1, name: 'a', order: 1 },
+          { id: 2, name: 'b', order: 0 },
+        ]),
+      );
+    });
+  });
+});