@zeedhi/common 1.111.1 → 3.0.0

package/tests/unit/components/zd-grid-editable/data-editor.spec.ts

@@ -0,0 +1,621 @@
+import { IDictionary, InstanceNotFoundError, Loader, Metadata, SimpleControllerBuilder, ViewService } from '@zeedhi/core';
+import {
+  GridEditable,
+  DataEditor,
+  TextInput,
+  GridColumnEditable,
+  Input,
+  IGridEditableProps,
+} from '../../../../src';
+import { mockI18n } from '../../__helpers__/mock-i18n';
+
+mockI18n();
+
+function getGridInstance(props: Partial<IGridEditableProps> = {}) {
+  const instance = new GridEditable({
+    name: 'Grid',
+    component: 'ZdGridEditable',
+    columns: [
+      {
+        name: 'id',
+        label: 'ID',
+      },
+      {
+        name: 'name',
+        label: 'Name',
+        editable: true,
+        componentProps: {
+          name: 'name-input',
+          component: 'ZdTextInput',
+        },
+      },
+      {
+        name: 'salary',
+        label: 'Salary',
+        editable: true,
+        componentProps: {
+          name: 'salary-input',
+          component: 'ZdNumberInput',
+        },
+      },
+    ],
+    datasource: {
+      uniqueKey: 'id',
+      data: [
+        { id: '1', name: 'Employee 1', salary: 1 },
+        { id: '2', name: 'Employee 2', salary: 2 },
+        { id: '3', name: 'Employee 3', salary: 3 },
+      ],
+    },
+    ...props,
+  });
+  instance.onCreated();
+
+  return instance;
+}
+
+function instantiateEditableComps(instance: GridEditable) {
+  instance.columns.forEach((column: GridColumnEditable) => {
+    if (!column.editable) return;
+
+    instance.datasource.data.forEach((row: IDictionary) => {
+      const componentInstance = instance.getEditableComponent(column, row) as any;
+      const component = new TextInput(componentInstance);
+      Metadata.addInstance(component);
+    });
+  });
+}
+
+function clearEditableComps() {
+  (Metadata as any).instances = {};
+}
+
+function mockInputValidation(dataEditor: DataEditor, valid: boolean) {
+  let mockInput: Input = new Input({
+    name: '',
+    component: 'ZdInput',
+  });;
+  const spy = jest.spyOn(dataEditor, 'getComponent').mockImplementation((key: string | number, columnName: string) => {
+    const name = `${columnName}_editable_${key}`;
+    mockInput.name = name;
+    mockInput.validate = jest.fn().mockReturnValue({ length: valid ? 0 : 1});
+    return mockInput;
+  });
+  return { spy, mockInput };
+}
+
+describe('DataEditor', () => {
+  let instance: GridEditable;
+  let dataEditor: DataEditor;
+
+  beforeEach(() => {
+    instance = getGridInstance();
+    instance.editing = true;
+
+    instantiateEditableComps(instance);
+
+    dataEditor = new DataEditor(instance);
+  });
+
+  afterEach(() => {
+    clearEditableComps();
+  });
+
+  beforeAll(() => {
+    Loader.setBuilder(new SimpleControllerBuilder());
+  });
+
+  describe('updateCell', () => {
+    it('should update the defined cell, adding the row to editedRows', () => {
+      dataEditor.updateCell('2', 'name', 'Employee dois');
+
+      const editedRows = dataEditor.getEditedRows();
+      expect(editedRows).toEqual([{ id: '2', name: 'Employee dois', salary: 2 }]);
+    });
+
+    it('should update, even if the row is already in editedRows', () => {
+      // update name
+      dataEditor.updateCell('3', 'name', 'Employee tres');
+
+      let editedRows = dataEditor.getEditedRows();
+      expect(editedRows).toEqual([{ id: '3', name: 'Employee tres', salary: 3 }]);
+
+      // update salary
+      dataEditor.updateCell('3', 'salary', 42);
+
+      editedRows = dataEditor.getEditedRows();
+      expect(editedRows).toEqual([{ id: '3', name: 'Employee tres', salary: 42 }]);
+
+      // get both name and salary back to original value
+      dataEditor.updateCell('3', 'name', 'Employee 3');
+      dataEditor.updateCell('3', 'salary', 3);
+
+      editedRows = dataEditor.getEditedRows();
+      expect(editedRows).toEqual([]);
+    });
+
+    it('should throw when row is not found', () => {
+      const fn = () => dataEditor.updateCell('99', 'name', 'Employee 99');
+
+      expect(fn).toThrow('Row with key 99 not found on grid \'Grid\'');
+    });
+
+    it('should throw when not in edit mode', () => {
+      instance.editing = false;
+      const fn = () => dataEditor.updateCell('3', 'name', 'Employee tres');
+
+      expect(fn).toThrow('updateCell should only be called in edit mode');
+    });
+
+    it('should update non-editable columns', () => {
+      dataEditor.updateCell('2', 'id', '20');
+
+      const editedRows = dataEditor.getEditedRows();
+      expect(editedRows).toEqual([{ id: '20', name: 'Employee 2', salary: 2 }]);
+    });
+
+    it('should update not-visible rows', () => {
+      instance.columns[1].isVisible = false;
+      instance.editing = true;
+
+      instantiateEditableComps(instance);
+      dataEditor.updateCell('2', 'name', 'Employee dois');
+
+      const editedRows = dataEditor.getEditedRows();
+      expect(editedRows).toEqual([{ id: '2', name: 'Employee dois', salary: 2 }]);
+    });
+
+    it('should not throw dataEditorNotFoundError', () => {
+      clearEditableComps();
+
+      dataEditor.updateCell('2', 'name', 'Employee dois');
+
+      const editedRows = dataEditor.getEditedRows();
+      expect(editedRows).toEqual([{ id: '2', name: 'Employee dois', salary: 2 }]);
+    });
+
+    it('should throw other errors', () => {
+      jest.spyOn(dataEditor, 'getComponent').mockImplementation(() => {
+        throw new Error();
+      });
+
+      const toThrow = () => dataEditor.updateCell('2', 'name', 'Employee dois');
+      expect(toThrow).toThrow();
+    });
+
+    it('during update, should also set the component value', () => {
+      dataEditor.updateCell('2', 'name', 'Employee dois');
+
+      const component = dataEditor.getComponent<Input>('2', 'name');
+      expect(component.value).toBe('Employee dois');
+    });
+  });
+
+  describe('updateRow', () => {
+    const spy = jest.spyOn(console, 'warn').mockImplementation(() => true);
+
+    expect(spy).not.toHaveBeenCalled();
+    expect(spy).toHaveBeenCalledTimes(0);
+    spy.mockClear();
+
+    it('should update the defined row, adding it to editedRows', () => {
+      dataEditor.updateRow({ id: '2', name: 'Employee dois', salary: 2 });
+
+      const editedRows = dataEditor.getEditedRows();
+      expect(editedRows).toEqual([{ id: '2', name: 'Employee dois', salary: 2 }]);
+    });
+
+    it('should update multiple columns in the defined row, adding to editedRows', () => {
+      dataEditor.updateRow({ id: '3', name: 'Employee tres', salary: 42 });
+
+      const editedRows = dataEditor.getEditedRows();
+      expect(editedRows).toEqual([{ id: '3', name: 'Employee tres', salary: 42 }]);
+    });
+
+    it('should update, even if the row is already in editedRows', () => {
+      // update name
+      dataEditor.updateRow({ id: '3', name: 'Employee tres', salary: 3 });
+
+      let editedRows = dataEditor.getEditedRows();
+      expect(editedRows).toEqual([{ id: '3', name: 'Employee tres', salary: 3 }]);
+
+      // update salary, get name back to original value
+      dataEditor.updateRow({ id: '3', name: 'Employee 3', salary: 42 });
+
+      editedRows = dataEditor.getEditedRows();
+      expect(editedRows).toEqual([{ id: '3', name: 'Employee 3', salary: 42 }]);
+
+      // update both name and salary
+      dataEditor.updateRow({ id: '3', name: 'Employee 33', salary: 33 });
+
+      editedRows = dataEditor.getEditedRows();
+      expect(editedRows).toEqual([{ id: '3', name: 'Employee 33', salary: 33 }]);
+    });
+
+    it('should throw when row is not found', () => {
+      const fn = () => dataEditor.updateRow({ id: '99', name: 'Employee 99', salary: 99 });
+
+      expect(fn).toThrow('Row with key 99 not found on grid \'Grid\'');
+    });
+
+    it('should throw when not in edit mode', () => {
+      instance.editing = false;
+      const fn = () => dataEditor.updateRow({ id: '3', name: 'Employee tres', salary: 3 });
+
+      expect(fn).toThrow('updateRow should only be called in edit mode');
+    });
+  });
+
+  describe('isGridValid()', () => {
+    it('should return true if the grid is valid', async() => {
+      instance = getGridInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          {
+            name: 'id',
+            editable: true,
+            align: 'right',
+            componentProps: {
+              name: 'column',
+              component: 'ZdTextInput',
+              validations: {
+                required: {},
+              },
+            },
+          },
+        ],
+        datasource: {
+          limit: 1,
+          page: 1,
+          data: [
+            { id: 1 },
+          ],
+        },
+      });
+
+      dataEditor = new DataEditor(instance);
+
+      let { spy } = mockInputValidation(dataEditor, true);
+      await dataEditor.isValid(instance.columns[0] as any, { id: 1 }, true);
+
+      expect(dataEditor.isGridValid()).toBeTruthy();
+
+      spy = mockInputValidation(dataEditor, false).spy;
+      await dataEditor.isValid(instance.columns[0] as any, { id: 1 }, true);
+
+      expect(dataEditor.isGridValid()).toBeFalsy();
+
+      spy.mockClear();
+    });
+
+    it('should call isValid for each cell if revalidate is true', () => {
+      const instance = getGridInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          {
+            name: 'id',
+            editable: true,
+          },
+          {
+            name: 'name',
+            editable: true,
+          },
+          {
+            name: 'non-editable',
+            editable: false,
+          },
+        ],
+        datasource: {
+          limit: 2,
+          page: 1,
+          data: [
+            { id: 1, name: 'row 1' }, { id: 2, name: 'row 2' },
+          ],
+        },
+      });
+
+      dataEditor = new DataEditor(instance);
+      instance.editing = true;
+      dataEditor.isValid = jest.fn().mockReturnValue(true);
+
+      expect(dataEditor.isGridValid(true)).toBeTruthy();
+      expect(dataEditor.isValid).toHaveBeenCalledTimes(4);
+
+      dataEditor.isValid = jest.fn().mockReturnValue(false);
+
+      expect(dataEditor.isGridValid(true)).toBeFalsy();
+      expect(dataEditor.isValid).toHaveBeenCalledTimes(4);
+    });
+
+    it('should call isViewGridValid if grid is not in editing mode', () => {
+      const instance = getGridInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          {
+            name: 'id',
+            editable: true,
+          },
+          {
+            name: 'name',
+            editable: true,
+            componentProps: {
+              name: 'name',
+              component: 'ZdTextInput',
+              validations: {
+                required: {},
+              },
+            },
+          },
+          {
+            name: 'non-editable',
+            editable: false,
+          },
+        ],
+        datasource: {
+          limit: 2,
+          page: 1,
+          data: [
+            { id: 1, name: 'row 1' }, { id: 2 },
+          ],
+        },
+      });
+
+      dataEditor = new DataEditor(instance);
+
+      const inputInstance = new TextInput({
+        name: 'testeInput',
+        component: 'ZdTextInput',
+      });
+
+      ViewService.setViewNextTick((fn: () => void) => {
+        fn();
+        return Promise.resolve();
+      });
+
+      const spy = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => inputInstance);
+
+      expect(dataEditor.isGridValid(true)).toBeFalsy();
+      expect(instance.editing).toBeTruthy();
+
+      spy.mockRestore();
+    });
+  });
+
+  describe('isValid()', () => {
+    it('should return if cell is valid', async () => {
+      const instance = getGridInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          {
+            name: 'id',
+            editable: true,
+            align: 'right',
+            componentProps: {
+              name: 'column',
+              component: 'ZdTextInput',
+              validations: {
+                required: {},
+              },
+            },
+          },
+        ],
+        datasource: {
+          limit: 2,
+          page: 1,
+          data: [
+            { id: 1 },
+          ],
+        },
+      });
+      const dataEditor = new DataEditor(instance);
+
+      let { spy } = mockInputValidation(dataEditor, true);
+
+      await dataEditor.isValid(instance.columns[0] as GridColumnEditable, { id: 1 }, true);
+
+      let valid = await dataEditor.isValid(instance.columns[0] as GridColumnEditable, { id: 1 });
+      expect(valid).toBeTruthy();
+      spy = mockInputValidation(dataEditor, false).spy;
+
+      await dataEditor.isValid(instance.columns[0] as GridColumnEditable, { id: 1 }, true);
+      valid = await dataEditor.isValid(instance.columns[0] as GridColumnEditable, { id: 1 });
+      expect(valid).toBeFalsy();
+
+      spy.mockClear();
+    });
+
+    it('should call input.validate when revalidate is true', () => {
+      const instance = getGridInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          {
+            name: 'id',
+            editable: true,
+            align: 'right',
+            componentProps: {
+              name: 'column',
+              component: 'ZdTextInput',
+              validations: {
+                required: {},
+              },
+            },
+          },
+        ],
+        datasource: {
+          limit: 1,
+          page: 1,
+          data: [
+            { id: 1 },
+          ],
+        },
+      });
+      const dataEditor = new DataEditor(instance);
+
+      let { spy, mockInput } = mockInputValidation(dataEditor, true);
+
+      dataEditor.isValid(instance.columns[0] as any, { id: 1 }, true);
+      expect(mockInput.validate).toHaveBeenCalled();
+      spy.mockClear();
+    });
+
+    it('when validate throws InstanceNotFoundError, should return true', async () => {
+      const instance = getGridInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          {
+            name: 'id',
+            editable: true,
+            align: 'right',
+            componentProps: {
+              name: 'column',
+              component: 'ZdTextInput',
+              validations: {
+                required: {},
+              },
+            },
+          },
+        ],
+        datasource: {
+          limit: 1,
+          page: 1,
+          data: [
+            { id: 1 },
+          ],
+        },
+      });
+      const dataEditor = new DataEditor(instance);
+
+      let spy = jest.spyOn(dataEditor, 'getComponent').mockImplementation(() => {
+        throw new InstanceNotFoundError('id');
+      });
+
+      expect(dataEditor.isValid(instance.columns[0] as any, { id: 1 }, true)).toBeTruthy();
+
+      spy = jest.spyOn(dataEditor, 'getComponent').mockImplementation(() => {
+        throw new Error('error');
+      });
+
+      const fn = async () => {
+        await dataEditor.isValid(instance.columns[0] as any, { id: 1 }, true);
+      };
+
+      await expect(fn()).rejects.toThrow();
+      spy.mockClear();
+    });
+  });
+
+  describe('getEditedRows()', () => {
+    it('should throw when not silent and invalid', () => {
+      const instance = getGridInstance();
+      const dataEditor = new DataEditor(instance);
+      instance.editing = true;
+
+      dataEditor.updateCell('2', 'name', 'New name');
+
+      dataEditor.isGridValid = jest.fn().mockReturnValue(false);
+
+      expect(() => dataEditor.getEditedRows()).toThrow();
+    })
+  });
+
+  describe('cancelEditedRows()', () => {
+    it('should cancel edited rows', async () => {
+      const instance = getGridInstance();
+      const dataEditor = new DataEditor(instance);
+      instance.editing = true;
+
+      dataEditor.updateCell('2', 'name', 'New name');
+
+      expect(dataEditor.getEditedRows()).toEqual([{ id: '2', name: 'New name', salary: 2 }]);
+
+      dataEditor.cancelEditedRows();
+
+      expect(dataEditor.getEditedRows()).toEqual([]);
+    });
+  });
+
+  describe('checkValid', () => {
+    it('should return false if input is invalid', async () => {
+      const instance = getGridInstance();
+      const dataEditor = new DataEditor(instance);
+
+      const { spy } = mockInputValidation(dataEditor, false);
+
+      await dataEditor.isValid(instance.columns[1] as any, { id: 1 }, true);
+
+      const valid = dataEditor.checkValid(instance.columns[1] as any, { id: 1 });
+
+      expect(valid).toBeFalsy();
+
+      spy.mockClear();
+    });
+  });
+
+  describe('getEditedRow', () => {
+    it('should return the edited row', () => {
+      const instance = getGridInstance();
+      const dataEditor = new DataEditor(instance);
+      instance.editing = true;
+
+      dataEditor.updateCell('2', 'name', 'New name');
+
+      expect(dataEditor.getEditedRow({ id: '2' })).toEqual({ id: '2', name: 'New name', salary: 2 });
+    });
+
+    it('should return undefined when edited row not found', () => {
+      const instance = getGridInstance();
+      const dataEditor = new DataEditor(instance);
+
+      expect(dataEditor.getEditedRow({ id: '99' })).toBeUndefined();
+    });
+  });
+
+  describe('canEditRow', () => {
+    it('when using editingNewRows should only allow editing new rows', () => {
+      const canEditRowFn = ({ row }: { row: IDictionary<any>, component: GridEditable }) => row.id === 1;
+      const instance = getGridInstance({ canEditRow: canEditRowFn });
+      const dataEditor = new DataEditor(instance);
+
+      dataEditor.reapplyCanEditRow({ id: '1', '__added_row': true });
+
+      expect(() => dataEditor.getCanEditRow({ id: '1', '__added_row': true })).toBeTruthy();
+    });
+
+    it('should call canEditRow function', () => {
+      const canEditRowFn = ({ row }: { row: IDictionary<any>, component: GridEditable }) => row.id === 1;
+      const instance = getGridInstance({ canEditRow: canEditRowFn });
+
+      instance.reapplyCanEditRow({ id: 1 });
+      instance.reapplyCanEditRow({ id: 2 });
+
+      expect(instance.getCanEditRow({ id: 1 })).toBeTruthy();
+      expect(instance.getCanEditRow({ id: 2 })).toBeFalsy();
+    });
+  });
+
+  describe('saveEditedRows()', () => {
+    it('should save edited rows', async () => {
+      const instance = getGridInstance();
+      const dataEditor = new DataEditor(instance);
+
+      instance.editing = true;
+
+      dataEditor.updateCell('1', 'name', null);
+
+      dataEditor.updateCell('3', 'name', 'New Name 3');
+
+      await dataEditor.saveEditedRows();
+      expect(instance.datasource.data).toEqual([
+        { id: '1', name: null, salary: 1 },
+        { id: '2', name: 'Employee 2', salary: 2 },
+        { id: '3', name: 'New Name 3', salary: 3 },
+      ]);
+    });
+  });
+});

package/tests/unit/components/zd-grid-editable/grid-editable-controller.spec.ts

@@ -0,0 +1,53 @@
+import { GridEditable, GridEditableController } from '../../../../src';
+
+describe('GridEditableController', () => {
+  let gridEditableMock!: jest.Mocked<GridEditable>;
+  let controller!: GridEditableController;
+
+  beforeEach(() => {
+    // Create a mock instance of GridEditable
+    gridEditableMock = {
+      getAddedRows: jest.fn(),
+      isAdded: jest.fn(),
+    } as unknown as jest.Mocked<GridEditable>;
+
+    // Create an instance of GridEditableController with the mocked GridEditable
+    controller = new GridEditableController(gridEditableMock);
+  });
+
+  describe('hasAddedRows', () => {
+    it('should return true if there are added rows', () => {
+      gridEditableMock.getAddedRows = jest.fn().mockReturnValue([{}, {}]);
+
+      expect(controller.hasAddedRows).toBe(true);
+      expect(gridEditableMock.getAddedRows).toHaveBeenCalledTimes(1);
+    });
+
+    it('should return false if there are no added rows', () => {
+      gridEditableMock.getAddedRows = jest.fn().mockReturnValue([]);
+
+      expect(controller.hasAddedRows).toBe(false);
+      expect(gridEditableMock.getAddedRows).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('isAddedRow', () => {
+    it('should return true if the row is added', () => {
+      const rowMock = { id: 1 };
+      gridEditableMock.isAdded = jest.fn().mockReturnValue(true);
+
+      expect(controller.isAddedRow({ row: rowMock })).toBe(true);
+      expect(gridEditableMock.isAdded).toHaveBeenCalledWith(rowMock);
+      expect(gridEditableMock.isAdded).toHaveBeenCalledTimes(1);
+    });
+
+    it('should return false if the row is not added', () => {
+      const rowMock = { id: 2 };
+      gridEditableMock.isAdded = jest.fn().mockReturnValue(false);
+
+      expect(controller.isAddedRow({ row: rowMock })).toBe(false);
+      expect(gridEditableMock.isAdded).toHaveBeenCalledWith(rowMock);
+      expect(gridEditableMock.isAdded).toHaveBeenCalledTimes(1);
+    });
+  });
+});