@zeedhi/common 1.111.1 → 3.0.0

package/tests/unit/components/zd-frame/frame.spec.ts

@@ -0,0 +1,381 @@
+import { Metadata } from '@zeedhi/core';
+import MockDate from 'mockdate';
+import { Frame } from '../../../../src';
+import { flushPromises } from '../../__helpers__/flush-promises-helper';
+
+jest.mock('node-fetch');
+
+const DEFAULT_METADATA = {
+	name: 'metadata',
+	component: 'ZdCard',
+};
+beforeAll(() => {
+	jest.spyOn(Metadata, 'addInstance').mockImplementation(() => 1);
+	jest.spyOn(Metadata, 'get').mockImplementation(async () => ({ ...DEFAULT_METADATA }));
+	jest.spyOn(Metadata, 'post').mockImplementation(async () => ({ ...DEFAULT_METADATA }));
+});
+
+afterAll(() => {
+	jest.restoreAllMocks();
+});
+
+const { Response, Headers } = jest.requireActual('node-fetch');
+
+describe('Frame', () => {
+	describe('constructor()', () => {
+		it('should create new frame with default values', () => {
+			const instance = new Frame({ name: 'frame', component: 'Frame', path: '' });
+			expect(instance.path).toBe('');
+			expect(instance.local).toBeFalsy();
+			expect(instance.override).toEqual({});
+			expect(instance.cache).toBeFalsy();
+			expect(instance.cacheDuration).toBe(2 * 60 * 60 * 1000);
+			expect(instance.height).toBe('auto');
+			expect(instance.minHeight).toBe('auto');
+			expect(instance.maxHeight).toBe('none');
+			expect(instance.fillHeight).toBeFalsy();
+			expect(instance.width).toBe('100%');
+			expect(instance.minWidth).toBe('auto');
+			expect(instance.maxWidth).toBe('none');
+			expect(instance.params).toEqual({});
+			expect(instance.type).toBe('get');
+		});
+
+		it('should create new Frame replacing default values', async () => {
+			const instance = new Frame({
+				name: 'frame',
+				component: 'Frame',
+				path: 'url',
+				local: true,
+				type: 'get',
+				override: { test: 'value' },
+				height: '400px',
+				maxHeight: '500px',
+				minHeight: '500px',
+				width: '400px',
+				maxWidth: '500px',
+				minWidth: '500px',
+				fillHeight: true,
+			});
+			instance.onCreated();
+			await flushPromises();
+			expect(instance.local).toBeTruthy();
+			expect(instance.override).toEqual({ test: 'value' });
+			expect(instance.loading).toBeFalsy();
+			expect(instance.height).toBe('400px');
+			expect(instance.maxHeight).toBe('500px');
+			expect(instance.minHeight).toBe('500px');
+			expect(instance.width).toBe('400px');
+			expect(instance.maxWidth).toBe('500px');
+			expect(instance.minWidth).toBe('500px');
+			expect(instance.fillHeight).toBeTruthy();
+			expect(instance.type).toBe('get');
+		});
+
+		it('should create new Frame using post type', async () => {
+			const instance = new Frame({
+				name: 'frame',
+				component: 'Frame',
+				type: 'post',
+				path: 'url',
+				params: {},
+			});
+			instance.onCreated();
+			await flushPromises();
+			expect(instance.metadata).toEqual(DEFAULT_METADATA);
+			expect(instance.params).toEqual({});
+			expect(instance.type).toBe('post');
+		});
+	});
+
+	describe('frame caching', () => {
+		function mockCache() {
+			const cacheObj: any = {
+				storage: {},
+
+				match(request: string): Promise<any> {
+					return Promise.resolve(this.storage[request]);
+				},
+
+				put(request: string, response: Response) {
+					this.storage[request] = response;
+				},
+			};
+			(global as any).caches = {
+				cache: {},
+
+				open(cacheName: string) {
+					if (!this.cache[cacheName]) {
+						this.cache[cacheName] = cacheObj;
+					}
+
+					return this.cache[cacheName];
+				},
+			};
+			(global as any).Response = jest.fn((body?: BodyInit, init?: ResponseInit) => new Response(body, init));
+			(global as any).Headers = jest.fn((init?: Headers) => new Headers(init));
+		}
+
+		/**
+		 * Mocks cache global objects
+		 */
+		beforeEach(() => {
+			mockCache();
+		});
+
+		it('should store requested metadata in cache', async () => {
+			const instance = new Frame({
+				name: 'frame',
+				component: 'Frame',
+				path: 'url',
+				cache: true,
+			});
+			instance.onCreated();
+			await flushPromises();
+
+			expect(instance.cache).toBeTruthy();
+			expect(instance.metadata).toEqual(DEFAULT_METADATA);
+
+			const cache = await caches.open('zd-frame-cache');
+
+			const cachedResponse = await cache.match('url');
+
+			const json = await cachedResponse?.json();
+
+			expect(json).toEqual({
+				name: 'metadata',
+				component: 'ZdCard',
+			});
+		});
+
+		it('should reload the frame', async () => {
+			const instance = new Frame({
+				name: 'frame',
+				component: 'Frame',
+				path: 'url',
+				cache: true,
+			});
+			instance.onCreated();
+			await flushPromises();
+			instance.reload();
+			expect(instance.metadata).toEqual(DEFAULT_METADATA);
+		});
+
+		it('should get cached metadata instead of fetching from backend', async () => {
+			const instance = new Frame({
+				name: 'frame',
+				component: 'Frame',
+				path: 'url',
+				cache: true,
+			});
+			instance.onCreated();
+			await flushPromises();
+
+			expect(instance.metadata).toEqual(DEFAULT_METADATA);
+
+			const instance2 = new Frame({
+				name: 'frame-2',
+				component: 'Frame',
+				path: 'url',
+				cache: true,
+			});
+			instance2.onCreated();
+			await flushPromises();
+
+			expect(instance2.metadata).toEqual(DEFAULT_METADATA);
+		});
+
+		it('should get fresh metadata from backend when duration expires', async () => {
+			// set current time as 0
+			MockDate.set(0);
+			const instance = new Frame({
+				name: 'frame',
+				component: 'Frame',
+				path: 'url',
+				cache: true,
+				cacheDuration: 1000,
+			});
+			instance.onCreated();
+			await flushPromises();
+
+			// increase time
+			MockDate.set(1001);
+
+			const instance2 = new Frame({
+				name: 'frame-2',
+				component: 'Frame',
+				path: 'url',
+				cache: true,
+				cacheDuration: 1000,
+			});
+			instance2.onCreated();
+			await flushPromises();
+
+			expect(instance.metadata).toEqual(DEFAULT_METADATA);
+			expect(instance2.metadata).toEqual(DEFAULT_METADATA);
+
+			MockDate.reset();
+		});
+
+		it('should fetch from backend when cached response has no header', async () => {
+			const cache = await caches.open('zd-frame-cache');
+
+			const responseObj = new Response('');
+			await cache.put('url', responseObj);
+
+			const instance = new Frame({
+				name: 'frame',
+				component: 'Frame',
+				path: 'url',
+				cache: true,
+			});
+			instance.onCreated();
+			await flushPromises();
+
+			expect(instance.metadata).toEqual(DEFAULT_METADATA);
+		});
+	});
+
+	describe('deleteCache', () => {
+		beforeEach(() => {
+			(global as any).caches = {
+				delete() {
+					return Promise.resolve(true);
+				},
+			};
+		});
+
+		it('should call caches.delete', async () => {
+			const spy = jest.spyOn(caches, 'delete');
+
+			await Frame.deleteCache();
+
+			expect(spy).toHaveBeenCalledTimes(1);
+			spy.mockClear();
+		});
+	});
+
+	describe('event', () => {
+		it('should call onAfterLoad function', async () => {
+			const method = jest.fn();
+			const instance = new Frame({
+				name: 'frame',
+				component: 'Frame',
+				path: 'url',
+				local: true,
+				override: { test: 'value' },
+				events: {
+					onAfterLoad: method,
+				},
+			});
+			instance.onCreated();
+
+			await flushPromises();
+			expect(instance.events.onAfterLoad).toEqual(method);
+			expect(method).toHaveBeenCalled();
+		});
+	});
+
+	describe('requestPage()', () => {
+		it('should call notFoundError function', async () => {
+			const requestPageMock = jest
+				.spyOn(Frame.prototype as any, 'requestPage')
+				.mockImplementation(() => '<html></html>');
+			const notFoundErrorSpy = jest.spyOn(Frame.prototype as any, 'notFoundError');
+			const instance = new Frame({
+				name: 'frame',
+				component: 'Frame',
+				path: 'url',
+				local: true,
+			});
+			instance.onCreated();
+
+			await flushPromises();
+			expect(instance.path).toEqual('url');
+			expect(requestPageMock).toHaveBeenCalled();
+			expect(notFoundErrorSpy).toHaveBeenCalled();
+			requestPageMock.mockClear();
+			notFoundErrorSpy.mockClear();
+		});
+	});
+
+	describe('overrideNamedPropsFunc()', () => {
+		it('should override named props', async () => {
+			const requestPageMock = jest.spyOn(Frame.prototype as any, 'requestPage').mockImplementation(() => ({
+				name: 'name-<<NAME>>',
+				component: 'ZdText',
+			}));
+			const instance = new Frame({
+				name: 'frame',
+				component: 'Frame',
+				path: 'url',
+				local: true,
+				overrideNamedProps: {
+					NAME: 'name-1',
+				},
+			});
+			instance.onCreated();
+
+			await flushPromises();
+			expect(instance.metadata).toEqual({
+				name: 'name-name-1',
+				component: 'ZdText',
+			});
+			expect(requestPageMock).toHaveBeenCalled();
+			requestPageMock.mockClear();
+		});
+	});
+
+	describe('waitLoading', () => {
+		it('should return a promise that resolves when the metadata is loaded', async () => {
+			const requestPageMock = jest.spyOn(Frame.prototype as any, 'requestPage').mockImplementation(() => ({
+				name: 'name',
+				component: 'ZdText',
+			}));
+			const frame = new Frame({
+				name: 'frame',
+				component: 'ZdFrame',
+				local: true,
+				path: 'url',
+			});
+			frame.onCreated();
+
+			const promise = frame.waitLoading();
+
+			expect(frame.loading).toBeTruthy();
+			expect(promise).toBeInstanceOf(Promise);
+
+			await promise;
+
+			expect(frame.loading).toBeFalsy();
+
+			await frame.waitLoading();
+
+			expect(frame.loading).toBeFalsy();
+
+			requestPageMock.mockClear();
+		});
+
+		it('should reject the promise when an error occurs', async () => {
+			const requestPageMock = jest.spyOn(Frame.prototype as any, 'requestPage').mockImplementation(
+				() =>
+					new Promise((_resolve, reject) => {
+						reject('error');
+					}),
+			);
+			const frame = new Frame({
+				name: 'frame',
+				component: 'ZdFrame',
+				local: true,
+				path: 'url',
+			});
+			frame.onCreated();
+
+			const promise = frame.waitLoading();
+
+			await expect(promise).rejects.toBeDefined();
+
+			requestPageMock.mockClear();
+		});
+	});
+});

package/tests/unit/components/zd-frame-page/frame-page.spec.ts

@@ -0,0 +1,58 @@
+import { Loader, Metadata, Router } from '@zeedhi/core';
+import { FramePage } from '../../../../src';
+import { flushPromises } from '../../__helpers__/flush-promises-helper';
+
+describe('FramePage', () => {
+	describe('onBeforeDestroy', () => {
+		it('should clear Loader instances when destroyed', () => {
+			const spy = jest.spyOn(Loader, 'clearInstances');
+
+			const instance = new FramePage({ name: 'frame-page', component: 'ZdFramePage', path: 'url' });
+
+			instance.onBeforeDestroy();
+
+			expect(spy).toHaveBeenCalledTimes(1);
+			spy.mockClear();
+		});
+	});
+
+	describe('constructor()', () => {
+		it('should create new frame-page with default values', () => {
+			const spy = jest.spyOn(Metadata, 'get').mockImplementation(async () => ({}));
+			const instance = new FramePage({ name: 'frame-page', component: 'ZdFramePage', path: 'url' });
+			expect(instance.notFoundRoute).toBe('/notfound');
+			spy.mockClear();
+		});
+
+		it('should create new frame-page replacing default values', () => {
+			const spy = jest.spyOn(Metadata, 'get').mockImplementation(async () => ({}));
+			const instance = new FramePage({
+				name: 'frame-page',
+				component: 'ZdFramePage',
+				path: 'url',
+				notFoundRoute: '/not-found',
+			});
+			expect(instance.notFoundRoute).toBe('/not-found');
+			spy.mockClear();
+		});
+	});
+
+	describe('goToNotFoundRoute()', () => {
+		it('should change route if path not found', async () => {
+			const spy = jest.spyOn(Metadata, 'get').mockImplementation(async () => {
+				throw new Error('notfound 404');
+			});
+			const routerSpy = jest.spyOn(Router, 'replace').mockImplementation(() => true);
+
+			const instance = new FramePage({ name: 'frame-page', component: 'ZdFramePage', path: 'url' });
+			instance.onCreated();
+			await flushPromises();
+
+			expect(instance.metadata).toEqual({});
+			expect(routerSpy).toHaveBeenCalledWith('/notfound');
+
+			routerSpy.mockClear();
+			spy.mockClear();
+		});
+	});
+});

package/tests/unit/components/zd-grid/grid-column.spec.ts

@@ -0,0 +1,251 @@
+import { init } from '@zeedhi/core';
+import { GridColumn } from '../../../../src';
+import { IDictionary } from 'packages/core/dist/types';
+
+class SelectMultipleMock {
+  datasource = {
+    currentRow: { id: 1, name: 'value 1', department: 1 },
+  }
+  value = [
+    { id: 2, name: 'value 2', department: 2 },
+    { id: 3, name: 'value 3', department: 3 },
+    { id: 4, name: 'value 4', department: 4 },
+  ];
+  selectedValue = [
+    { id: 2, name: 'value 2', department: 2 },
+    { id: 3, name: 'value 3', department: 3 },
+    { id: 4, name: 'value 4', department: 4 },
+  ]
+}
+
+const getSelectMultipleMock = () => {
+  return new SelectMultipleMock();
+}
+
+describe('GridColumn', () => {
+  describe('constructor()', () => {
+    it('should create new grid column with default values', () => {
+      const instance = new GridColumn({ name: 'GridColumn' });
+      expect(instance.children).toEqual([]);
+    });
+
+    it('should create new Grid replacing default values', () => {
+      const instance = new GridColumn({
+        name: 'grid',
+        children: [
+          {
+            name: 'button',
+            component: 'ZdButton',
+            conditions: {
+              isVisible: '{{Controller.function}}',
+            },
+          },
+        ],
+      });
+      expect(instance.children).toEqual([{
+        name: 'button',
+        component: 'ZdButton',
+        conditions: { isVisible: '{{Controller.function}}' },
+      }]);
+    });
+
+    it('should set ZdTextInput as component default', () => {
+      let instance = new GridColumn({ name: 'GridColumn' });
+      expect(instance.componentProps.component).toEqual('ZdTextInput');
+      instance = new GridColumn({
+        name: 'GridColumn',
+        componentProps: {
+          name: 'select',
+          component: 'ZdSelect',
+        },
+      });
+      expect(instance.componentProps.component).toEqual('ZdSelect');
+    });
+
+    it('should maintain mask when create componentProps', () => {
+      let instance = new GridColumn({ name: 'GridColumn', mask: '#.#.#' });
+      expect(instance.componentProps.component).toEqual('ZdTextInput');
+      expect(instance.componentProps.mask).toEqual('#.#.#');
+      instance = new GridColumn({
+        name: 'GridColumn',
+        mask: '#.#',
+        componentProps: {
+          name: 'select',
+          mask: '#.#.#.#',
+          component: 'ZdSelect',
+        },
+      });
+      expect(instance.componentProps.component).toEqual('ZdSelect');
+      expect(instance.componentProps.mask).toEqual('#.#.#.#');
+    });
+  });
+
+  describe('childrenProps', () => {
+    it('should get children without grid system', () => {
+      const instance = new GridColumn({
+        name: 'grid',
+        children: [
+          {
+            name: 'button',
+            component: 'ZdButton',
+            conditions: {
+              isVisible: '{{Controller.function}}',
+            },
+          },
+        ],
+      });
+      expect(instance.childrenProps).toEqual([{ name: 'button', component: 'ZdButton' }]);
+    });
+  });
+
+  describe('getColumnWithoutConditions', () => {
+    it('should get the Column without the conditions object', () => {
+      const instance = new GridColumn({
+        name: 'grid',
+        children: [
+          {
+            name: 'button',
+            component: 'ZdButton',
+            conditions: {
+              isVisible: '{{Controller.function}}',
+            },
+          },
+        ],
+      });
+      expect(instance.getColumnWithoutConditions(instance.children[0])).toEqual({
+        name: 'button',
+        component: 'ZdButton',
+        conditions: undefined,
+      });
+    });
+  });
+
+  describe('formatter', () => {
+    init({
+      controllers: {
+        AppController: class AppController {
+          public getDynamicMask(value: string) {
+            return value.length <= 11 ? '###.###.###-##' : '##.###.###/####-##';
+          }
+        },
+      },
+    });
+
+    it('should add values to column lookupData when using formatterDataText', () => {
+      const instance1 = new GridColumn({
+        name: 'code',
+        componentProps: {
+          component: 'ZdSelect',
+          name: 'column',
+          dataText: [{ name: 'id' }, 'name'],
+          formatterDataText: [{ name: 'code' }, 'name'],
+          dataValue: 'id',
+          datasource: {},
+        },
+      });
+      instance1.formatterByRow({ code: '1', name: 'value' });
+      expect(instance1.lookupData).toEqual({ 1: { id: '1', name: 'value' } });
+
+      instance1.formatterByRow({});
+      expect(instance1.lookupData).toEqual({ 1: { id: '1', name: 'value' } });
+
+      const instance2 = new GridColumn({
+        name: 'code',
+        componentProps: {
+          component: 'ZdSelect',
+          name: 'column',
+          dataText: 'id',
+          formatterDataText: 'code',
+          dataValue: 'id',
+          datasource: {},
+        },
+      });
+      instance2.formatterByRow({ code: '1' });
+      expect(instance2.lookupData).toEqual({ 1: { id: '1' } });
+    });
+
+    it('should format select column using dynamic mask', () => {
+      const instance = new GridColumn({
+        name: 'cpf_cnpj',
+        componentProps: {
+          name: 'cpf_cnpj',
+          component: 'ZdSelect',
+          dataText: [
+            { name: 'cpf_cnpj', mask: '{{AppController.getDynamicMask}}' },
+            'name',
+          ],
+          formatterDataText: [
+            { name: 'cpf_cnpj', mask: '{{AppController.getDynamicMask}}' },
+            'name',
+          ],
+          dataValue: 'value',
+          datasource: {
+            data: [
+              { name: 'person', cpf_cnpj: '11111111111' },
+              { name: 'company', cpf_cnpj: '22222222222222' },
+            ],
+          },
+        },
+      });
+      let formatted = instance.formatterByRow({ name: 'person', cpf_cnpj: '11111111111' });
+      expect(formatted).toBe('111.111.111-11 | person');
+
+      formatted = instance.formatterByRow({ name: 'company', cpf_cnpj: '22222222222222' });
+      expect(formatted).toBe('22.222.222/2222-22 | company');
+    });
+
+    it('should format text input column using dynamic mask', () => {
+      const instance = new GridColumn({
+        name: 'cpf_cnpj',
+        componentProps: {
+          name: 'cpf_cnpj',
+          component: 'ZdTextInput',
+          mask: '{{AppController.getDynamicMask}}',
+        },
+      });
+      let formatted = instance.formatterByRow({ name: 'person', cpf_cnpj: '11111111111' });
+      expect(formatted).toBe('111.111.111-11');
+
+      formatted = instance.formatterByRow({ name: 'company', cpf_cnpj: '22222222222222' });
+      expect(formatted).toBe('22.222.222/2222-22');
+    });
+  });
+
+  describe('checkOutValues', () => {
+    it('should add edits to a row based on dataValueOut', () => {
+      const instance = new GridColumn({
+        name: 'name',
+        componentProps: {
+          name: 'name',
+          dataValueOut: [
+            {
+              column: 'name',
+              columnOnGrid: 'name',
+            },
+            {
+              column: 'department',
+              columnOnGrid: 'department',
+            },
+          ],
+        },
+      });
+
+      const selectMock = getSelectMultipleMock();
+      const row: IDictionary = {};
+      const editedRow: IDictionary = { originalRow: { department: [1], name: ['value 1'] }, name: ['value 1'], department: [1] };
+
+      instance.checkOutValues(selectMock, row, editedRow);
+
+      expect(editedRow).toEqual(
+        {
+          department_original: [1],
+          name_original: ['value 1'],
+          name: ['value 2', 'value 3', 'value 4'],
+          department: [2, 3, 4],
+          originalRow: { department: [1], name: ['value 1'] },
+        },
+      );
+      expect(row.department).toEqual([2, 3, 4]);
+    });
+  });
+});