@zeedhi/common 1.115.0 → 3.0.1

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

@@ -0,0 +1,145 @@
+import { KeyMap, Metadata } from '@zeedhi/core';
+import { Dialog, DialogService, Button } from '../../../../src';
+
+jest.useFakeTimers();
+
+describe('Dialog', () => {
+  describe('constructor()', () => {
+    it('should create new dialog with default values', () => {
+      const instance = new Dialog({ name: 'dialog' });
+      expect(instance.buttons).toMatchObject([{ name: 'dialogButton', label: 'OK', component: 'ZdButton' }]);
+      expect(instance.maxWidth).toBe(560);
+      expect(instance.persistent).toBeTruthy();
+      expect(instance.text).toBe('');
+      expect(instance.title).toBe('');
+      expect(instance.type).toBe('normal');
+    });
+
+    it('should create new dialog replacing default values', () => {
+      const instance = new Dialog({
+        name: 'dialog2',
+        buttons: [{ name: 'button', component: 'ZdButton' }],
+        maxWidth: 200,
+        persistent: false,
+        text: 'text',
+        title: 'title',
+        type: 'error',
+      });
+      expect(instance.buttons).toEqual([{ name: 'button', component: 'ZdButton' }]);
+      expect(instance.maxWidth).toBe(200);
+      expect(instance.persistent).toBeFalsy();
+      expect(instance.text).toBe('text');
+      expect(instance.title).toBe('title');
+      expect(instance.type).toBe('error');
+    });
+  });
+
+  describe('show and hide', () => {
+    it('should change the dialog visibility', () => {
+      const instance = new Dialog({ name: 'dialog', isVisible: false });
+      expect(instance.isVisible).toBeFalsy();
+      instance.show();
+      expect(instance.isVisible).toBeTruthy();
+      instance.hide();
+      expect(instance.isVisible).toBeFalsy();
+    });
+  });
+
+  describe('default button', () => {
+    describe('should close dialog', () => {
+      const instance = new Dialog({ name: 'dialog' });
+      expect(instance.isVisible).toBeFalsy();
+      instance.show();
+      expect(instance.isVisible).toBeTruthy();
+      if (instance.buttons[0].events
+        && instance.buttons[0].events.click
+        && typeof instance.buttons[0].events.click === 'function') {
+        instance.buttons[0].events.click({ component: new Button(instance.buttons[0]) });
+        expect(instance.isVisible).toBeFalsy();
+      }
+    });
+  });
+
+  describe('keydown mapping', () => {
+    const dispatchEvent = (key: string, modifiers: any) => {
+      const event = new KeyboardEvent('keydown', modifiers);
+      delete (event as any).key;
+      Object.defineProperty(event, 'key', { value: key });
+      delete (event as any).code;
+      Object.defineProperty(event, 'code', { value: key });
+      document.dispatchEvent(event);
+    };
+
+    it('should click in denyButton and comfirmButton using keys', async () => {
+      const { instance } = DialogService;
+      const elem = document.createElement('DIV');
+
+      (KeyMap as any).isElementActive = () => true;
+      (KeyMap as any).isElementFocus = () => true;
+
+      instance.onCreated();
+      instance.onMounted(elem);
+
+      instance.show();
+
+      const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => ({
+        name: 'dialogButton',
+        label: 'OK',
+        component: 'ZdButton',
+        events: { click: () => instance.hide() },
+      }));
+    
+      dispatchEvent('enter', { enterKey: true });
+      jest.runAllTimers()
+    
+      expect(instance.isVisible).toBeFalsy();
+    
+      instance.show();
+      dispatchEvent('escape', {}); 
+      jest.runAllTimers()
+    
+      expect(instance.isVisible).toBeFalsy();
+    
+      DialogService.show({
+        name: 'dialog-instance',
+        title: 'Dialog Title',
+        text: 'A basic dialog!',
+        denyButton: 'dialogButton',
+      });
+      dispatchEvent('escape', {});
+      jest.runAllTimers()
+    
+      expect(instance.isVisible).toBeFalsy();
+    
+      spyMetadata.mockClear();
+    });
+  });
+});
+
+describe('Dialog Service', () => {
+  it('should change the dialog service instance visibility', () => {
+    const { instance } = DialogService;
+    expect(instance.name).toBe('dialog-instance');
+    expect(instance.isVisible).toBeFalsy();
+    DialogService.show({ name: 'new-dialog' });
+    expect(instance.name).toBe('new-dialog');
+    expect(instance.isVisible).toBeTruthy();
+    DialogService.hide();
+    expect(instance.isVisible).toBeFalsy();
+  });
+
+  it('should close previous dialog and open a new one', () => {
+    const { instance } = DialogService;
+    DialogService.show({ name: 'dialog1' });
+    expect(instance.name).toBe('dialog1');
+    expect(instance.isVisible).toBeTruthy();
+    DialogService.show({ name: 'dialog2' });
+    expect(instance.name).toBe('dialog1');
+    expect(instance.isVisible).toBeFalsy();
+
+    jest.runAllTimers();
+
+    expect(instance.name).toBe('dialog2');
+    expect(instance.isVisible).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,31 @@
+import { Divider } from '../../../../src';
+
+describe('Divider', () => {
+  describe('constructor()', () => {
+    it('should create new divider with default values', () => {
+      const instance = new Divider({
+        name: 'divider',
+        component: 'Divider',
+      });
+      expect(instance.dark).toBeFalsy();
+      expect(instance.inset).toBeFalsy();
+      expect(instance.light).toBeFalsy();
+      expect(instance.vertical).toBeFalsy();
+    });
+
+    it('should create new divider replacing default values', () => {
+      const instance = new Divider({
+        dark: true,
+        inset: true,
+        light: true,
+        vertical: true,
+        component: 'Divider',
+        name: 'divider',
+      });
+      expect(instance.dark).toBeTruthy();
+      expect(instance.inset).toBeTruthy();
+      expect(instance.light).toBeTruthy();
+      expect(instance.vertical).toBeTruthy();
+    });
+  });
+});

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

@@ -0,0 +1,68 @@
+import { Dropdown } from '../../../../src';
+
+describe('Dropdown', () => {
+  describe('constructor()', () => {
+    it('should create new dropdown menu with default values', () => {
+      const instance = new Dropdown({
+        name: 'dropdown',
+        component: 'Dropdown',
+        activator: { name: 'button', component: 'Button' },
+      });
+      expect(instance.absolute).toBeFalsy();
+      expect(instance.activator).toEqual({ name: 'button', component: 'Button' });
+      expect(instance.cursor).toBe('');
+      expect(instance.disabled).toBeFalsy();
+      expect(instance.closeOnContentClick).toBeTruthy();
+      expect(instance.hover).toBeFalsy();
+      expect(instance.maxHeight).toBe('none');
+      expect(instance.maxWidth).toBe('none');
+      expect(instance.minHeight).toBe('auto');
+      expect(instance.minWidth).toBe('auto');
+      expect(instance.offsetX).toBeFalsy();
+      expect(instance.offsetY).toBeFalsy();
+      expect(instance.openOnClick).toBeTruthy();
+      expect(instance.openOnHover).toBeFalsy();
+      expect(instance.value).toBeUndefined();
+      expect(instance.height).toBe('auto');
+    });
+
+    it('should create new dropdown menu replacing default values', () => {
+      const instance = new Dropdown({
+        absolute: true,
+        activator: { name: 'button', component: 'Button' },
+        closeOnContentClick: false,
+        cursor: 'pointer',
+        disabled: true,
+        hover: true,
+        maxHeight: 'auto',
+        maxWidth: 'auto',
+        minHeight: 'auto',
+        minWidth: 'auto',
+        offsetX: true,
+        offsetY: true,
+        openOnClick: false,
+        openOnHover: true,
+        value: 'auto',
+        component: 'Dropdown',
+        name: 'dropdown',
+        height: '500px',
+      });
+      expect(instance.absolute).toBeTruthy();
+      expect(instance.activator).toEqual({ name: 'button', component: 'Button' });
+      expect(instance.cursor).toBe('pointer');
+      expect(instance.disabled).toBeTruthy();
+      expect(instance.closeOnContentClick).toBeFalsy();
+      expect(instance.hover).toBeTruthy();
+      expect(instance.maxHeight).toBe('auto');
+      expect(instance.maxWidth).toBe('auto');
+      expect(instance.minHeight).toBe('auto');
+      expect(instance.minWidth).toBe('auto');
+      expect(instance.offsetX).toBeTruthy();
+      expect(instance.offsetY).toBeTruthy();
+      expect(instance.openOnClick).toBeFalsy();
+      expect(instance.openOnHover).toBeTruthy();
+      expect(instance.value).toBe('auto');
+      expect(instance.height).toBe('500px');
+    });
+  });
+});

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

@@ -0,0 +1,69 @@
+import { Footer } from '../../../../src';
+
+describe('Footer', () => {
+  describe('constructor()', () => {
+    it('should create new footer with default values', () => {
+      const instance = new Footer({ name: 'Footer', component: 'footer' });
+      expect(instance.absolute).toBeFalsy();
+      expect(instance.app).toBeFalsy();
+      expect(instance.centerSlot.length).toBe(0);
+      expect(instance.color).toBe('primary');
+      expect(instance.dark).toBeFalsy();
+      expect(instance.fixed).toBeFalsy();
+      expect(instance.height).toBe('auto');
+      expect(instance.inset).toBeFalsy();
+      expect(instance.leftSlot.length).toBe(0);
+      expect(instance.light).toBeFalsy();
+      expect(instance.maxHeight).toBeUndefined();
+      expect(instance.maxWidth).toBeUndefined();
+      expect(instance.minHeight).toBeUndefined();
+      expect(instance.minWidth).toBeUndefined();
+      expect(instance.padless).toBeFalsy();
+      expect(instance.rightSlot.length).toBe(0);
+      expect(instance.width).toBeUndefined();
+      expect(instance.namedSlotsIsVisible).toBeFalsy();
+    });
+
+    it('should create new Footer replacing default values', () => {
+      const instance = new Footer({
+        name: 'footer',
+        component: 'footer',
+        absolute: true,
+        app: true,
+        centerSlot: [{ name: 'center', component: 'slot' }],
+        color: 'secondary',
+        dark: true,
+        fixed: true,
+        height: 50,
+        inset: true,
+        leftSlot: [{ name: 'left', component: 'slot' }],
+        light: true,
+        maxHeight: 'auto',
+        maxWidth: 'auto',
+        minHeight: 'auto',
+        minWidth: 'auto',
+        padless: true,
+        rightSlot: [{ name: 'right', component: 'slot' }],
+        width: 'auto',
+      });
+      expect(instance.absolute).toBeTruthy();
+      expect(instance.app).toBeTruthy();
+      expect(instance.centerSlot.length).toBe(1);
+      expect(instance.color).toBe('secondary');
+      expect(instance.dark).toBeTruthy();
+      expect(instance.fixed).toBeTruthy();
+      expect(instance.height).toBe(50);
+      expect(instance.inset).toBeTruthy();
+      expect(instance.leftSlot.length).toBe(1);
+      expect(instance.light).toBeTruthy();
+      expect(instance.maxHeight).toBe('auto');
+      expect(instance.maxWidth).toBe('auto');
+      expect(instance.minHeight).toBe('auto');
+      expect(instance.minWidth).toBe('auto');
+      expect(instance.padless).toBeTruthy();
+      expect(instance.rightSlot.length).toBe(1);
+      expect(instance.width).toBe('auto');
+      expect(instance.namedSlotsIsVisible).toBeTruthy();
+    });
+  });
+});

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

@@ -0,0 +1,281 @@
+import { Form, Input } from '../../../../src';
+
+describe('Form', () => {
+	describe('constructor()', () => {
+		it('should create new form with default values', () => {
+			const instance = new Form({ name: 'form', component: 'ZdForm' });
+			expect(instance.align).toBeUndefined();
+			expect(instance.justify).toBeUndefined();
+			expect(instance.children).toEqual([]);
+			expect(instance.events).toEqual({});
+			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');
+		});
+
+		it('should create new form replacing default values', () => {
+			const instance = new Form({
+				name: 'form',
+				component: 'ZdForm',
+				align: 'center',
+				justify: 'center',
+				height: '400px',
+				maxHeight: '500px',
+				minHeight: '500px',
+				width: '400px',
+				maxWidth: '500px',
+				minWidth: '500px',
+				fillHeight: true,
+				children: [{ name: 'button', component: 'ZdButton' }],
+				events: {
+					submit: () => false,
+				},
+			});
+			expect(instance.align).toBe('center');
+			expect(instance.justify).toBe('center');
+			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.children).toEqual([{ name: 'button', component: 'ZdButton' }]);
+			expect(instance.events.submit).toBeInstanceOf(Function);
+		});
+	});
+
+	describe('registerInput()', () => {
+		it('should register inputs into form', () => {
+			const instance = new Form({
+				name: 'form',
+				component: 'ZdForm',
+				children: [{ name: 'text', component: 'ZdInput' }],
+			});
+			const input = new Input(instance.children[0]);
+			instance.registerInput(input);
+			instance.value = { text: 'Test', another: 'Another' };
+			expect(input.value).toBe('Test');
+			expect(instance.value.text).toBe('Test');
+			expect(instance.value).toEqual({ text: 'Test', another: 'Another' });
+			instance.value.text = 'value';
+			expect(input.value).toBe('value');
+		});
+	});
+
+	describe('childrenProps', () => {
+		it('should return children without grid', () => {
+			const instance = new Form({
+				name: 'form',
+				component: 'ZdForm',
+				children: [
+					{
+						name: 'text',
+						component: 'ZdInput',
+						grid: {
+							lg: '6',
+							sm: '12',
+						},
+					},
+				],
+			});
+			expect(instance.childrenProps).toEqual([{ name: 'text', component: 'ZdInput' }]);
+		});
+	});
+
+	describe('childrenGrid', () => {
+		it('should return children grid', () => {
+			const instance = new Form({
+				name: 'form',
+				component: 'ZdForm',
+				children: [
+					{
+						name: 'text',
+						component: 'input',
+						grid: {
+							lg: '6',
+							sm: '12',
+						},
+					},
+					{
+						name: 'text2',
+						component: 'input',
+					},
+				],
+			});
+			expect(instance.childrenGrid).toEqual({ text: { cols: '3', lg: '6', sm: '12' }, text2: { cols: '3' } });
+		});
+
+		it('should return children grid from cssClasses', () => {
+			const instance = new Form({
+				name: 'form',
+				component: 'ZdForm',
+				children: [
+					{
+						name: 'text',
+						component: 'input',
+						cssClass: 'zd-other-class zd-col-6 zd-col-sm-12 zd-offset-auto zd-offset-md-4'
+					}
+				],
+			});
+			expect(instance.childrenGrid.text).toEqual({ cols: '6', sm: '12', offset: 'auto', 'offset-md': '4' });
+		});
+
+		it('should do nothing when class is in incorrect format', () => {
+			const instance = new Form({
+				name: 'form',
+				component: 'ZdForm',
+				children: [
+					{
+						name: 'text',
+						component: 'input',
+						cssClass: 'zd-col-wrong zd-offset-wrong'
+					}
+				],
+			});
+			expect(instance.childrenGrid.text).toEqual({ cols: '3' });
+		});
+	});
+
+	describe('validate', () => {
+		it('should validate the form using viewValidate', async () => {
+			const instance = new Form({
+				name: 'form',
+				component: 'ZdForm',
+			});
+			instance.setViewValidate(() => Promise.resolve({ valid: false, errors: [] }));
+			let validateResponse = await instance.validate();
+			expect(validateResponse.valid).toBeFalsy();
+			instance.setViewValidate(() => Promise.resolve({ valid: true, errors: [] }));
+			validateResponse = await instance.validate();
+			expect(validateResponse.valid).toBeTruthy();
+		});
+
+		it('should validate the form using inputs validation', async () => {
+			const instance = new Form({
+				name: 'form',
+				component: 'ZdForm',
+				children: [
+					{
+						name: 'text',
+						component: 'ZdInput',
+						validations: {
+							required: true,
+						},
+					},
+				],
+			});
+			const input = new Input(instance.children[0]);
+			instance.registerInput(input);
+			input.isValid = () => false;
+			let validateResponse = await instance.validate();
+			expect(validateResponse.valid).toBeFalsy();
+			input.isValid = () => true;
+			validateResponse = await instance.validate();
+			expect(validateResponse.valid).toBeTruthy();
+		});
+	});
+
+	describe('submit', () => {
+		it('should call submit event', () => {
+			const submitFn = jest.fn();
+			const instance = new Form({
+				name: 'form',
+				component: 'ZdForm',
+			});
+			expect(() => {
+				instance.callSubmitEvent(new Event('submit'), document.createElement('div'));
+			}).not.toThrow();
+			expect(submitFn).not.toHaveBeenCalled();
+			instance.events = {
+				submit: submitFn,
+			};
+			instance.callSubmitEvent(new Event('submit'), document.createElement('div'));
+			expect(submitFn).toHaveBeenCalled();
+		});
+
+		it('should call submit method', () => {
+			const submitFn = jest.fn();
+			const instance = new Form({
+				name: 'form',
+				component: 'ZdForm',
+			});
+
+			instance.events = {
+				submit: submitFn,
+			};
+
+			expect(instance.submitFunction).toBe(undefined);
+			instance.submit();
+			const element = document.createElement('form');
+			element.requestSubmit = () => {};
+			instance.onMounted(element as HTMLFormElement);
+			instance.submit();
+			expect(instance.submitFunction).not.toBe(undefined);
+		});
+	});
+
+	describe('value', () => {
+		it('should set and get value from internalValue', () => {
+			const instance = new Form({
+				name: 'form',
+				component: 'ZdForm',
+				value: { field2: '3' },
+			});
+			instance.value = { field1: '1', field2: '2' };
+			expect(instance.value).toEqual({ field1: '1', field2: '2' });
+		});
+
+		it('should set and get value from inputs', () => {
+			const instance = new Form({
+				name: 'form',
+				component: 'ZdForm',
+				value: { field3: '3' },
+				children: [{ name: 'field1', component: 'ZdInput' }],
+			});
+			const input = new Input(instance.children[0]);
+			instance.registerInput(input);
+			instance.value = { field1: '1', field2: '2' };
+			expect(instance.value).toEqual({ field1: '1', field2: '2', field3: '3' });
+		});
+	});
+
+	describe('resetValidation', () => {
+		it('should call form viewResetValidation', () => {
+			const instance = new Form({
+				name: 'form',
+				component: 'ZdForm',
+			});
+			const viewResetValidation = jest.fn();
+			instance.setViewResetValidation(viewResetValidation);
+			instance.resetValidation();
+			expect(viewResetValidation).toHaveBeenCalled();
+		});
+
+		it('should throw when viewResetValidation is not assigned', () => {
+			const instance = new Form({
+				name: 'form',
+				component: 'ZdForm',
+			});
+			expect(() => instance.resetValidation()).toThrowError();
+		});
+	});
+
+	describe('clearForm', () => {
+		it('should clear all form inputs', () => {
+			const instance = new Form({
+				name: 'form',
+				component: 'ZdForm',
+				value: { field1: '3', field2: true },
+			});
+
+			instance.clearForm();
+			expect(instance.value.field1).toBe(null);
+			expect(instance.value.field2).toBe(null);
+		});
+	});
+});