@zeedhi/common 1.115.0 → 3.0.1

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

@@ -0,0 +1,554 @@
+import { IDictionary, KeyMap, Loader, Metadata, init } from '@zeedhi/core';
+import { Component, IComponent } from '../../../../src';
+import { ComponentWithPropTest } from './ComponentMock';
+
+describe('Component', () => {
+	describe('constructor()', () => {
+		it('should create new component with default values', () => {
+			const instance = new Component({ name: 'component' });
+			expect(instance.name).toBe('component');
+			expect(instance.parent).toBeUndefined();
+			expect(instance.events).toEqual({});
+			expect(instance.theme).toBeUndefined();
+			expect(instance.cssClass).toBe('');
+			expect(instance.cssStyle).toBe('');
+			expect(instance.isVisible).toBeTruthy();
+			expect(instance.tabStop).toBeTruthy();
+			expect(instance.children).toEqual([]);
+			expect(instance.keyMap).toEqual({});
+			expect(instance.userProperties).toEqual({});
+		});
+
+		it('should create new component replacing default values', () => {
+			const method = () => undefined;
+			const instance = new Component({
+				name: 'component',
+				component: 'component',
+				parent: new Component({ name: 'parent' }),
+				events: {
+					onCreated: method,
+				},
+				directives: {
+					touch: {
+						up: method,
+					},
+					teste: undefined,
+				},
+				cssClass: 'class1 class2',
+				cssStyle: 'color: red',
+				isVisible: false,
+				theme: 'dark',
+				tabStop: false,
+				children: [
+					{
+						name: 'child',
+						component: 'child',
+					},
+				],
+				keyMap: {
+					a: {
+						event: method,
+					},
+				},
+				userProperties: {
+					prop1: 'example',
+				},
+			});
+			expect(instance.name).toBe('component');
+			expect(instance.parent).toBeInstanceOf(Component);
+			expect(instance.events).toEqual({ onCreated: method });
+			expect(instance.directives).toEqual({ touch: { up: method }, teste: {} });
+			expect(instance.cssClass).toBe('class1 class2');
+			expect(instance.cssStyle).toBe('color: red');
+			expect(instance.isVisible).toBeFalsy();
+			expect(instance.theme).toBe('dark');
+			expect(instance.tabStop).toBeFalsy();
+			expect(instance.children).toEqual([{ name: 'child', component: 'child' }]);
+			expect(instance.keyMap).toEqual({ a: { event: method } });
+			expect(instance.userProperties).toEqual({ prop1: 'example' });
+		});
+
+		describe('accessors', () => {
+			beforeEach(() => {
+				init({
+					controllers: {
+						AppController: class AppController {
+							public cssClassValue = 'class1';
+
+							public isVisible = false;
+
+							public propTest = 'test1';
+
+							private propTestValue = 'test1';
+
+							public chart = 'bar';
+
+							public color = 'black';
+
+							public text = 'Chart Title';
+
+							get cssClass() {
+								return this.cssClassValue.toUpperCase();
+							}
+
+							set cssClass(value: string) {
+								this.cssClassValue = value.toLowerCase();
+							}
+
+							get propTest2() {
+								return this.propTestValue;
+							}
+
+							set propTest2(value: string) {
+								this.propTestValue = value;
+							}
+
+							public onInit() {
+								return true;
+							}
+						},
+					},
+				});
+			});
+
+			it('should create new component with accessors', () => {
+				const instance = new Component({
+					name: 'component1',
+					isVisible: '{{AppController.isVisible}}',
+				});
+				instance.onCreated();
+				const controller = Loader.getInstance('AppController');
+				expect(instance.name).toBe('component1');
+				expect(instance.isVisible).toBeFalsy();
+				controller.isVisible = true;
+				expect(instance.isVisible).toBeTruthy();
+			});
+
+			it('should create new component with getter/setter accessors', () => {
+				const instance = new Component({
+					name: 'component2',
+					cssClass: '{{AppController.cssClass}}',
+				});
+				instance.onCreated();
+				const controller = Loader.getInstance('AppController');
+				expect(controller.cssClassValue).toBe('class1');
+				expect(controller.cssClass).toBe('CLASS1');
+				expect(instance.cssClass).toBe('CLASS1');
+
+				instance.cssClass = 'CLASS2';
+				expect(controller.cssClass).toBe('CLASS2');
+				expect(controller.cssClassValue).toBe('class2');
+
+				controller.cssClassValue = 'class3';
+				expect(instance.cssClass).toBe('CLASS3');
+				expect(controller.cssClass).toBe('CLASS3');
+
+				controller.cssClass = 'CLASS4';
+				expect(instance.cssClass).toBe('CLASS4');
+				expect(controller.cssClassValue).toBe('class4');
+			});
+
+			it('should create new component with accessor over getter/setter property', () => {
+				const instance = new ComponentWithPropTest({
+					name: 'component3',
+					propTest: '{{AppController.propTest}}',
+				});
+				instance.onCreated();
+				const controller = Loader.getInstance('AppController');
+				expect(instance.propTestValue).toBe('test1');
+				expect(instance.propTest).toBe('test1');
+				expect(controller.propTest).toBe('test1');
+
+				instance.propTest = 'test2';
+				expect(controller.propTest).toBe('test2');
+				expect(instance.propTestValue).toBe('test2');
+
+				controller.propTest = 'test3';
+				expect(instance.propTest).toBe('test3');
+				expect(instance.propTestValue).toBe('test3');
+
+				instance.propTestValue = 'test4';
+				expect(instance.propTest).toBe('test4');
+				expect(controller.propTest).toBe('test4');
+			});
+
+			it('when accessor already exists, constructor should not override it', () => {
+				class ExampleComponent extends Component {
+					constructor(props: IComponent) {
+						super(props);
+						this.createAccessors();
+						this.isVisible = this.getInitValue('isVisible', props.isVisible, false);
+					}
+				}
+
+				const instance = new ExampleComponent({
+					name: 'component1',
+					isVisible: '{{AppController.isVisible}}',
+				});
+				instance.onCreated();
+				const controller = Loader.getInstance('AppController');
+				expect(instance.name).toBe('component1');
+				expect(instance.isVisible).toBeFalsy();
+				controller.isVisible = true;
+				expect(instance.isVisible).toBeTruthy();
+			});
+
+			it('when using createObjAccessors, should create deep accessors inside an object', () => {
+				class ChartComponent extends Component {
+					public optionsObj: IDictionary = {};
+
+					constructor(props: IComponent) {
+						super(props);
+						this.optionsObj = this.getInitValue('optionsObj', props.optionsObj, this.optionsObj);
+						this.createObjAccessors(this.optionsObj, 'optionsObj');
+					}
+				}
+
+				const instance = new ChartComponent({
+					name: 'component1',
+					optionsObj: {
+						chart: '{{AppController.chart}}',
+						axisOptions: {
+							color: '{{AppController.color}}',
+						},
+						titleOptions: {
+							text: '{{AppController.text}}',
+						},
+					},
+				});
+				instance.onCreated();
+				const controller = Loader.getInstance('AppController');
+				expect(instance.optionsObj.chart).toBe('bar');
+				expect(instance.optionsObj.axisOptions.color).toBe('black');
+				expect(instance.optionsObj.titleOptions.text).toBe('Chart Title');
+				controller.text = 'Title';
+				expect(instance.optionsObj.titleOptions.text).toBe('Title');
+			});
+		});
+	});
+
+	describe('addChild()', () => {
+		it('should add new child', () => {
+			const instance = new Component({ name: 'component' });
+			expect(instance.children.length).toBe(0);
+			instance.addChild({ name: 'child' });
+			expect(instance.children.length).toBe(1);
+		});
+	});
+
+	describe('removeChild()', () => {
+		it('should remove child', () => {
+			const instance = new Component({ name: 'component', children: [{ name: 'child' }] });
+			expect(instance.children.length).toBe(1);
+			instance.removeChild('child');
+			expect(instance.children.length).toBe(0);
+		});
+
+		it('should not remove an inexistent child', () => {
+			const instance = new Component({ name: 'component', children: [{ name: 'child' }] });
+			expect(instance.children.length).toBe(1);
+			instance.removeChild('child2');
+			expect(instance.children.length).toBe(1);
+		});
+	});
+
+	describe('getChild()', () => {
+		it('should retrieve a child', () => {
+			const parent = new Component({ name: 'parent' });
+			const instance = new Component({ parent, name: 'component' });
+			const spy = jest.spyOn(console, 'warn').mockImplementation(() => true);
+			instance.onCreated();
+			const child = parent.getChildInstance<Component>('component');
+			expect(child.name).toBe('component');
+			expect(spy).not.toHaveBeenCalled();
+			expect(spy).toHaveBeenCalledTimes(0);
+			spy.mockClear();
+		});
+
+		it('should throw when child not exists', () => {
+			const parent = new Component({ name: 'parent' });
+			const instance = new Component({ parent, name: 'component' });
+			instance.onCreated();
+			expect(() => {
+				parent.getChildInstance<Component>('otherChild');
+			}).toThrow();
+		});
+	});
+
+	describe('onCreated()', () => {
+		it('should only add instance to Metadata', () => {
+			const instance = new Component({ name: 'component' });
+			const spy = jest.spyOn(Metadata, 'addInstance');
+			const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => true);
+			instance.onCreated();
+			expect(spy).toHaveBeenCalledWith(instance, false);
+			expect(consoleSpy).toHaveBeenCalled();
+			consoleSpy.mockClear();
+			spy.mockClear();
+		});
+
+		it('should call parent addChildInstance method', () => {
+			const parent = new Component({ name: 'parent' });
+			const instance = new Component({ parent, name: 'component' });
+			instance.onCreated();
+			expect(instance.parent).toBeDefined();
+			expect((instance.parent as Component).childrenInstances.length).toBe(1);
+		});
+
+		it('should call event', () => {
+			const method = () => undefined;
+			const instance = new Component({ name: 'component', events: { onCreated: method } });
+			const spy = jest.spyOn(instance.events as any, 'onCreated');
+			instance.onCreated();
+			expect(spy).toHaveBeenCalledWith({ component: instance });
+			spy.mockClear();
+		});
+	});
+
+	describe('onBeforeMount()', () => {
+		it('should call event', () => {
+			const method = () => undefined;
+			const instance = new Component({ name: 'component', events: { onBeforeMount: method } });
+			const spy = jest.spyOn(instance.events as any, 'onBeforeMount');
+			instance.onBeforeMount();
+			expect(spy).toHaveBeenCalledWith({ component: instance });
+			spy.mockClear();
+		});
+
+		it('should not throw when event is undefined', () => {
+			const instance = new Component({ name: 'component' });
+			expect(() => {
+				instance.onBeforeMount();
+			}).not.toThrow();
+		});
+	});
+
+	describe('onMounted()', () => {
+		it('should call event', () => {
+			const method = () => undefined;
+			const instance = new Component({ name: 'component', events: { onMounted: method } });
+			const spy = jest.spyOn(instance.events as any, 'onMounted');
+			instance.onMounted({});
+			expect(spy).toHaveBeenCalledWith({ component: instance, element: {} });
+			spy.mockClear();
+		});
+
+		it('should not throw when event is undefined', () => {
+			const instance = new Component({ name: 'component' });
+			expect(() => {
+				instance.onMounted({});
+			}).not.toThrow();
+		});
+	});
+
+	describe('onBeforeDestroy()', () => {
+		it('should call event', () => {
+			const method = () => undefined;
+			const instance = new Component({ name: 'component', events: { onBeforeDestroy: method } });
+			const spy = jest.spyOn(instance.events as any, 'onBeforeDestroy');
+			instance.onBeforeDestroy();
+			expect(spy).toHaveBeenCalledWith({ component: instance });
+			spy.mockClear();
+		});
+
+		it('should not throw when event is undefined', () => {
+			const instance = new Component({ name: 'component' });
+			expect(() => {
+				instance.onBeforeDestroy();
+			}).not.toThrow();
+		});
+	});
+
+	describe('onDestroyed()', () => {
+		it('should call event', () => {
+			const method = () => undefined;
+			const instance = new Component({ name: 'component', events: { onDestroyed: method } });
+			const spy = jest.spyOn(instance.events as any, 'onDestroyed');
+			instance.onDestroyed();
+			expect(spy).toHaveBeenCalledWith({ component: instance });
+			spy.mockClear();
+		});
+
+		it('should not throw when event is undefined', () => {
+			const instance = new Component({ name: 'component' });
+			expect(() => {
+				instance.onDestroyed();
+			}).not.toThrow();
+		});
+	});
+
+	describe('click()', () => {
+		it('should call event', () => {
+			const method = () => undefined;
+			const instance = new Component({ name: 'component', events: { click: method } });
+			const spy = jest.spyOn(instance.events as any, 'click');
+			instance.click({} as Event, {});
+			expect(spy).toHaveBeenCalledWith({ component: instance, event: {}, element: {} });
+			spy.mockClear();
+			instance.click();
+			expect(spy).toHaveBeenCalled();
+			spy.mockClear();
+		});
+
+		it('should not throw when event is undefined', () => {
+			const instance = new Component({ name: 'component' });
+			expect(() => {
+				instance.click({} as Event, {});
+			}).not.toThrow();
+		});
+	});
+
+	describe('focus()', () => {
+		it('should call event', () => {
+			const method = () => undefined;
+			const instance = new Component({ name: 'component', events: { focus: method } });
+			const spy = jest.spyOn(instance.events as any, 'focus');
+			instance.focus({} as Event, {});
+			expect(spy).toHaveBeenCalledWith({ component: instance, event: {}, element: {} });
+			spy.mockClear();
+		});
+
+		it('should not throw when event is undefined', () => {
+			const instance = new Component({ name: 'component' });
+			expect(() => {
+				instance.focus({} as Event, {});
+			}).not.toThrow();
+		});
+	});
+
+	describe('blur()', () => {
+		it('should call event', () => {
+			const method = () => undefined;
+			const instance = new Component({ name: 'component', events: { blur: method } });
+			const spy = jest.spyOn(instance.events as any, 'blur');
+			instance.blur({} as Event, {});
+			expect(spy).toHaveBeenCalledWith({ component: instance, event: {}, element: {} });
+			spy.mockClear();
+		});
+
+		it('should not throw when event is undefined', () => {
+			const instance = new Component({ name: 'component' });
+			expect(() => {
+				instance.blur({} as Event, {});
+			}).not.toThrow();
+		});
+	});
+
+	describe('mouseenter()', () => {
+		it('should call event', () => {
+			const spy = jest.fn();
+			const instance = new Component({ name: 'component', events: { mouseenter: spy } });
+
+			instance.mouseenter({} as Event, {});
+			expect(spy).toHaveBeenCalledWith({ component: instance, event: {}, element: {} });
+			instance.mouseenter();
+			expect(spy).toHaveBeenCalledTimes(2);
+			spy.mockClear();
+		});
+	});
+
+	describe('mouseleave()', () => {
+		it('should call event', () => {
+			const spy = jest.fn();
+			const instance = new Component({ name: 'component', events: { mouseleave: spy } });
+
+			instance.mouseleave({} as Event, {});
+			expect(spy).toHaveBeenCalledWith({ component: instance, event: {}, element: {} });
+			instance.mouseleave();
+			expect(spy).toHaveBeenCalledTimes(2);
+			spy.mockClear();
+		});
+	});
+
+	describe('mouseout', () => {
+		it('should call mouseout event', () => {
+			const spy = jest.fn();
+			const instance = new Component({ name: 'component', events: { mouseout: spy } });
+
+			instance.mouseout({} as Event, {});
+			expect(spy).toHaveBeenCalledWith({ component: instance, event: {}, element: {} });
+			instance.mouseout();
+			expect(spy).toHaveBeenCalledTimes(2);
+			spy.mockClear();
+		});
+	});
+
+	describe('mouseover', () => {
+		it('should call mouseover event', () => {
+			const spy = jest.fn();
+			const instance = new Component({ name: 'component', events: { mouseover: spy } });
+
+			instance.mouseover({} as Event, {});
+			expect(spy).toHaveBeenCalledWith({ component: instance, event: {}, element: {} });
+			instance.mouseover();
+			expect(spy).toHaveBeenCalledTimes(2);
+			spy.mockClear();
+		});
+	});
+
+	describe('callEvent', () => {
+		it('when using array of events, should call all of the events', () => {
+			const spy1 = jest.fn();
+			const spy2 = jest.fn();
+			const instance = new Component({
+				name: 'component',
+				events: {
+					click: [spy1, spy2],
+				},
+			});
+
+			instance.callEvent('click', {});
+
+			expect(spy1).toHaveBeenCalledTimes(1);
+			expect(spy2).toHaveBeenCalledTimes(1);
+			spy1.mockClear();
+			spy2.mockClear();
+		});
+	});
+
+	describe('keyMap', () => {
+		it('should call KeyMap.bind and unbind', () => {
+			const method = () => undefined;
+			const instance = new Component({
+				name: 'component',
+				keyMap: {
+					a: {
+						event: method,
+					},
+				},
+			});
+			const spyBind = jest.spyOn(KeyMap, 'bind');
+			const spyUnbind = jest.spyOn(KeyMap, 'unbind');
+			instance.onMounted({});
+			expect(spyBind).toHaveBeenCalledWith(instance.keyMap, instance, {});
+			instance.onBeforeDestroy();
+			expect(spyUnbind).toHaveBeenCalledWith(instance.keyMap, instance);
+			spyBind.mockClear();
+			spyUnbind.mockClear();
+		});
+	});
+
+	describe('setFocus()', () => {
+		it('should call viewFocus method', () => {
+			let called = false;
+			const viewFocus = () => {
+				called = true;
+			};
+			const instance = new Component({
+				name: 'component',
+			});
+			instance.setViewFocus(viewFocus);
+			instance.setFocus();
+			expect(called).toBeTruthy();
+		});
+
+		it('should throw when viewFocus is not set', () => {
+			const instance = new Component({
+				name: 'component',
+			});
+			expect(() => {
+				instance.setFocus();
+			}).toThrow();
+		});
+	});
+});

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

@@ -0,0 +1,43 @@
+import { Container } from '../../../../src';
+
+describe('Container', () => {
+	describe('constructor()', () => {
+		it('should create new container with default values', () => {
+			const instance = new Container({ name: 'container', component: 'Container' });
+			expect(instance.fillHeight).toBeFalsy();
+			expect(instance.scrollView).toBeFalsy();
+			expect(instance.fluid).toBeTruthy();
+			expect(instance.height).toBe('auto');
+			expect(instance.minHeight).toBe('auto');
+			expect(instance.maxHeight).toBe('none');
+			expect(instance.width).toBe('100%');
+			expect(instance.minWidth).toBe('auto');
+			expect(instance.maxWidth).toBe('none');
+		});
+
+		it('should create new container replacing default values', () => {
+			const instance = new Container({
+				name: 'container',
+				component: 'Container',
+				fillHeight: true,
+				fluid: false,
+				scrollView: true,
+				height: '400px',
+				minHeight: '300px',
+				maxHeight: '500px',
+				width: '400px',
+				minWidth: '300px',
+				maxWidth: '500px',
+			});
+			expect(instance.fillHeight).toBeTruthy();
+			expect(instance.scrollView).toBeTruthy();
+			expect(instance.fluid).toBeFalsy();
+			expect(instance.height).toBe('400px');
+			expect(instance.minHeight).toBe('300px');
+			expect(instance.maxHeight).toBe('500px');
+			expect(instance.width).toBe('400px');
+			expect(instance.minWidth).toBe('300px');
+			expect(instance.maxWidth).toBe('500px');
+		});
+	});
+});

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

@@ -0,0 +1,110 @@
+import {
+  init, FormatterParserProvider, Config, Loader,
+} from '@zeedhi/core';
+import { Currency } from '../../../../src';
+
+describe('Container', () => {
+  init({
+    controllers: {
+      AppController: class AppController {
+        public maskFunc() {
+          return {
+            currencySymbol: 'R$ ',
+          };
+        }
+      },
+    },
+  });
+  let instance: Currency;
+
+  beforeEach(() => {
+    instance = new Currency({ name: 'currency', component: 'ZdCurrency' });
+  });
+
+  describe('constructor()', () => {
+    it('should create new number input with default values', () => {
+      expect(instance.align).toBe('right');
+    });
+    it('should create new number input replacing default values', () => {
+      instance = new Currency({
+        component: 'ZdCurrency',
+        name: 'currency',
+        align: 'left',
+      });
+      expect(instance.align).toBe('left');
+    });
+  });
+
+  describe('formatter()', () => {
+    it('should return value with default mask', () => {
+      expect(instance.formatter(1)).toBe('$1.00');
+    });
+
+    it('should return formatted value', () => {
+      instance.mask = {
+        decimalCharacter: ',',
+        decimalCharacterAlternative: '.',
+        digitGroupSeparator: '.',
+        decimalPlaces: 1,
+        currencySymbol: 'R$',
+      };
+      expect(instance.formatter(1)).toBe('R$1,0');
+    });
+
+    it('should return empty value', () => {
+      expect(instance.formatter(null)).toBe('');
+    });
+
+    it('should get accessor func', () => {
+      const formatterFn = FormatterParserProvider.getFormatter('ZdCurrency');
+      const controller = Loader.getInstance('AppController');
+      expect(formatterFn(9123, { mask: '{{AppController.maskFunc}}' })).toBe('R$ 9,123.00');
+      expect(controller.maskFunc()).toEqual({ currencySymbol: 'R$ ' });
+    });
+  });
+
+  describe('parser()', () => {
+    it('should return same value', () => {
+      expect(instance.parser('1.00')).toBe('1.00');
+    });
+
+    it('should return empty value', () => {
+      expect(instance.parser('')).toBeNull();
+    });
+
+    it('should return unformatted value', () => {
+      instance.mask = {
+        currencySymbol: 'R$',
+        decimalCharacter: ',',
+        decimalCharacterAlternative: '.',
+        digitGroupSeparator: '.',
+      };
+      expect(instance.parser('R$1,00')).toBe('1.00');
+    });
+    it('should get accessor func', () => {
+      const parserFn = FormatterParserProvider.getParser('ZdCurrency');
+      const controller = Loader.getInstance('AppController');
+      expect(parserFn(9123, { mask: '{{AppController.maskFunc}}' })).toBe(9123);
+      expect(controller.maskFunc()).toEqual({ currencySymbol: 'R$ ' });
+    });
+  });
+
+  it('formatter and parser should use Config by default', () => {
+    const formatterFn = FormatterParserProvider.getFormatter('ZdCurrency');
+    const parserFn = FormatterParserProvider.getParser('ZdCurrency');
+    Config.set({
+      masks: {
+        currencyMask: {
+          currencySymbol: 'R$ ',
+          decimalCharacter: ',',
+          decimalCharacterAlternative: '.',
+          digitGroupSeparator: '.',
+          decimalPlaces: 3,
+        },
+      },
+    });
+
+    expect(formatterFn(12.123456)).toBe('R$ 12,123');
+    expect(parserFn('R$ 12,123')).toBe('12.123');
+  });
+});