@zeedhi/common 1.111.1 → 3.0.0

package/tests/unit/components/zd-button-group/button-group.spec.ts

@@ -0,0 +1,95 @@
+import { ButtonGroup } from '../../../../src';
+
+describe('ButtonGroup', () => {
+  describe('constructor()', () => {
+    it('should create new button with default values', () => {
+      const instance = new ButtonGroup({ name: 'buttonGroup', component: 'ButtonGroup' });
+      expect(instance.backgroundColor).toBe('');
+      expect(instance.borderless).toBeFalsy();
+      expect(instance.color).toBe('primary');
+      expect(instance.dark).toBeFalsy();
+      expect(instance.dense).toBeFalsy();
+      expect(instance.light).toBeFalsy();
+      expect(instance.mandatory).toBeFalsy();
+      expect(instance.multiple).toBeFalsy();
+      expect(instance.rounded).toBeFalsy();
+      expect(instance.shaped).toBeFalsy();
+      expect(instance.tag).toBe('div');
+      expect(instance.tile).toBeFalsy();
+      expect(instance.selectedButtons).toBeNull();
+    });
+
+    it('should create new button replacing default values', () => {
+      const instance = new ButtonGroup({
+        name: 'buttonGroup',
+        component: 'ButtonGroup',
+        backgroundColor: 'secondary',
+        borderless: true,
+        color: 'secondary',
+        dark: true,
+        dense: true,
+        light: true,
+        mandatory: true,
+        multiple: true,
+        rounded: true,
+        shaped: true,
+        tag: 'div',
+        tile: true,
+        selectedButtons: [],
+        events: { change: () => true },
+      });
+
+      expect(instance.backgroundColor).toBeTruthy();
+      expect(instance.borderless).toBeTruthy();
+      expect(instance.color).toBe('secondary');
+      expect(instance.dark).toBeTruthy();
+      expect(instance.dense).toBeTruthy();
+      expect(instance.light).toBeTruthy();
+      expect(instance.mandatory).toBeTruthy();
+      expect(instance.multiple).toBeTruthy();
+      expect(instance.rounded).toBeTruthy();
+      expect(instance.shaped).toBeTruthy();
+      expect(instance.tag).toBe('div');
+      expect(instance.tile).toBeTruthy();
+      expect(instance.selectedButtons).toEqual([]);
+      expect(instance.events.change).toBeInstanceOf(Function);
+    });
+
+    it('should create new button with multiple values equal true', () => {
+      const instance = new ButtonGroup({
+        name: 'buttonGroup',
+        component: 'ButtonGroup',
+        multiple: true,
+      });
+
+      expect(instance.multiple).toBeTruthy();
+      expect(instance.selectedButtons).toEqual([]);
+    });
+
+    it('should create new button with selectedButtons is an array', () => {
+      const instance = new ButtonGroup({
+        name: 'buttonGroup',
+        component: 'ButtonGroup',
+        selectedButtons: [0, 1],
+      });
+
+      expect(instance.multiple).toBeTruthy();
+      expect(instance.selectedButtons).toEqual([0, 1]);
+    });
+  });
+
+  describe('Events', () => {
+    it('should call all events', () => {
+      const changeFn = jest.fn();
+      const instance = new ButtonGroup({ name: 'buttonGroup', component: 'ButtonGroup' });
+      expect(() => { instance.change(); }).not.toThrow();
+      expect(changeFn).not.toHaveBeenCalled();
+
+      instance.events = {
+        change: changeFn,
+      };
+      instance.change();
+      expect(changeFn).toHaveBeenCalled();
+    });
+  });
+});

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

@@ -0,0 +1,82 @@
+import { Card } from '../../../../src';
+
+describe('Card', () => {
+	describe('constructor()', () => {
+		it('should create new card with default values', () => {
+			const instance = new Card({ name: 'card', component: 'Card' });
+			expect(instance.activeClass).toBe('');
+			expect(instance.append).toBeFalsy();
+			expect(instance.color).toBe('');
+			expect(instance.disabled).toBeFalsy();
+			expect(instance.elevation).toBeUndefined();
+			expect(instance.flat).toBeFalsy();
+			expect(instance.height).toBeUndefined();
+			expect(instance.hover).toBeFalsy();
+			expect(instance.href).toBeUndefined();
+			expect(instance.img).toBe('');
+			expect(instance.link).toBeFalsy();
+			expect(instance.maxHeight).toBe('none');
+			expect(instance.maxWidth).toBe('none');
+			expect(instance.minHeight).toBe('auto');
+			expect(instance.minWidth).toBe('auto');
+			expect(instance.fillHeight).toBeFalsy();
+			expect(instance.outlined).toBeFalsy();
+			expect(instance.raised).toBeFalsy();
+			expect(instance.ripple).toBeFalsy();
+			expect(instance.tile).toBeFalsy();
+			expect(instance.to).toBeUndefined();
+			expect(instance.width).toBeUndefined();
+		});
+
+		it('should create new card replacing default values', () => {
+			const instance = new Card({
+				activeClass: 'card',
+				append: true,
+				color: 'primary',
+				elevation: 'auto',
+				disabled: true,
+				flat: true,
+				height: 'auto',
+				hover: true,
+				href: 'auto',
+				img: 'card',
+				link: true,
+				maxHeight: '100px',
+				maxWidth: '100px',
+				minHeight: '100px',
+				minWidth: '100px',
+				fillHeight: true,
+				outlined: true,
+				raised: true,
+				ripple: true,
+				tile: true,
+				to: '/',
+				width: 'auto',
+				component: 'Card',
+				name: 'card',
+			});
+			expect(instance.activeClass).toBe('card');
+			expect(instance.append).toBeTruthy();
+			expect(instance.color).toBe('primary');
+			expect(instance.disabled).toBeTruthy();
+			expect(instance.elevation).toBe('auto');
+			expect(instance.flat).toBeTruthy();
+			expect(instance.height).toBe('auto');
+			expect(instance.hover).toBeTruthy();
+			expect(instance.href).toBe('auto');
+			expect(instance.img).toBe('card');
+			expect(instance.link).toBeTruthy();
+			expect(instance.maxHeight).toBe('100px');
+			expect(instance.maxWidth).toBe('100px');
+			expect(instance.minHeight).toBe('100px');
+			expect(instance.minWidth).toBe('100px');
+			expect(instance.fillHeight).toBeTruthy();
+			expect(instance.outlined).toBeTruthy();
+			expect(instance.raised).toBeTruthy();
+			expect(instance.ripple).toBeTruthy();
+			expect(instance.tile).toBeTruthy();
+			expect(instance.to).toBe('/');
+			expect(instance.width).toBe('auto');
+		});
+	});
+});

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

@@ -0,0 +1,304 @@
+import { Carousel, ISlideData, ICarousel } from '../../../../src';
+
+describe('Carousel', () => {
+  describe('constructor', () => {
+    it('should create a new carousel with the default values', () => {
+      const carousel = new Carousel({ name: 'carousel', component: 'ZdCarousel' });
+
+      expect(carousel.autoPlay).toBeFalsy();
+      expect(carousel.buttonsOutside).toBeTruthy();
+      expect(carousel.center).toBeFalsy();
+      expect(carousel.currentSlide).toBe(0);
+      expect(carousel.dark).toBeFalsy();
+      expect(carousel.fractionPagination).toBeFalsy();
+      expect(carousel.height).toBe('auto');
+      expect(carousel.maxHeight).toBe('none');
+      expect(carousel.minHeight).toBe('auto');
+      expect(carousel.fillHeight).toBeFalsy();
+      expect(carousel.infiniteScroll).toBeTruthy();
+      expect(carousel.initialSlide).toBe(0);
+      expect(carousel.interval).toBe(4000);
+      expect(carousel.keysControl).toBeTruthy();
+      expect(carousel.light).toBeFalsy();
+      expect(carousel.dark).toBeFalsy();
+      expect(carousel.mouseControl).toBeFalsy();
+      expect(carousel.paginationBackground).toBeTruthy();
+      expect(carousel.pauseOnHover).toBeTruthy();
+      expect(carousel.showArrows).toBeTruthy();
+      expect(carousel.showArrowsOnHover).toBeFalsy();
+      expect(carousel.showPagination).toBeFalsy();
+      expect(carousel.showProgress).toBeFalsy();
+      expect(carousel.slideCssClass).toBe('zd-pa-4');
+      expect(carousel.slidesPerView).toBe(1);
+      expect(carousel.slidesToSlide).toBe(1);
+      expect(carousel.touchControl).toBeTruthy();
+      expect(carousel.transitionDuration).toBe(300);
+      expect(carousel.wheelControl).toBeFalsy();
+      expect(carousel.nextButton).toStrictEqual({
+        name: 'carousel_nextButton',
+        component: 'ZdButton',
+        iconName: 'next',
+        icon: true,
+      });
+      expect(carousel.prevButton).toStrictEqual({
+        name: 'carousel_prevButton',
+        component: 'ZdButton',
+        iconName: 'prev',
+        icon: true,
+      });
+    });
+
+    it('should create a new carousel with the defined values', () => {
+      const carousel = new Carousel(
+        {
+          name: 'carousel',
+          component: 'ZdCarousel',
+          autoPlay: true,
+          buttonsOutside: false,
+          center: true,
+          currentSlide: 1,
+          dark: true,
+          fractionPagination: true,
+          height: '400px',
+          minHeight: '300px',
+          maxHeight: '500px',
+          fillHeight: true,
+          infiniteScroll: false,
+          initialSlide: 2,
+          interval: 2000,
+          keysControl: false,
+          light: false,
+          mouseControl: true,
+          paginationBackground: false,
+          pauseOnHover: false,
+          showArrows: false,
+          showArrowsOnHover: true,
+          showPagination: true,
+          showProgress: true,
+          slideCssClass: 'class',
+          slidesPerView: 2,
+          slidesToSlide: 2,
+          touchControl: false,
+          transitionDuration: 200,
+          wheelControl: true,
+          nextButton: {
+            name: 'nButton',
+            component: 'ZdButton',
+          },
+          prevButton: {
+            name: 'pButton',
+            component: 'ZdButton',
+          },
+        },
+      );
+
+      expect(carousel.autoPlay).toBeTruthy();
+      expect(carousel.buttonsOutside).toBeFalsy();
+      expect(carousel.center).toBeTruthy();
+      expect(carousel.currentSlide).toBe(1);
+      expect(carousel.dark).toBeTruthy();
+      expect(carousel.fractionPagination).toBeTruthy();
+      expect(carousel.height).toBe('400px');
+      expect(carousel.minHeight).toBe('300px');
+      expect(carousel.maxHeight).toBe('500px');
+      expect(carousel.fillHeight).toBeTruthy();
+      expect(carousel.infiniteScroll).toBeFalsy();
+      expect(carousel.initialSlide).toBe(2);
+      expect(carousel.interval).toBe(2000);
+      expect(carousel.keysControl).toBeFalsy();
+      expect(carousel.light).toBeFalsy();
+      expect(carousel.mouseControl).toBeTruthy();
+      expect(carousel.paginationBackground).toBeFalsy();
+      expect(carousel.pauseOnHover).toBeFalsy();
+      expect(carousel.showArrows).toBeFalsy();
+      expect(carousel.showArrowsOnHover).toBeTruthy();
+      expect(carousel.showPagination).toBeTruthy();
+      expect(carousel.showProgress).toBeTruthy();
+      expect(carousel.slideCssClass).toBe('class');
+      expect(carousel.slidesPerView).toBe(2);
+      expect(carousel.slidesToSlide).toBe(2);
+      expect(carousel.touchControl).toBeFalsy();
+      expect(carousel.transitionDuration).toBe(200);
+      expect(carousel.wheelControl).toBeTruthy();
+      expect(carousel.nextButton).toStrictEqual({
+        name: 'nButton',
+        component: 'ZdButton',
+      });
+      expect(carousel.prevButton).toStrictEqual({
+        name: 'pButton',
+        component: 'ZdButton',
+      });
+    });
+  });
+
+  describe('slide methods', () => {
+    let baseCarousel: ICarousel;
+    let carousel: Carousel;
+
+    beforeEach(() => {
+      baseCarousel = {
+        name: 'carousel',
+        component: 'ZdCarousel',
+        children: [
+          {
+            name: 'dummyChildren0',
+            component: 'ZdComponent',
+          },
+          {
+            name: 'dummyChildren1',
+            component: 'ZdComponent',
+          },
+          {
+            name: 'dummyChildren2',
+            component: 'ZdComponent',
+          },
+          {
+            name: 'dummyChildren3',
+            component: 'ZdComponent',
+          },
+        ],
+      };
+      carousel = new Carousel(baseCarousel);
+    });
+
+    describe('slideTo method', () => {
+      it('should slide to the defined index', () => {
+        carousel.slideTo(1);
+        expect(carousel.currentSlide).toBe(1);
+      });
+
+      it('when the index is out of array upper bounds, should normalize it', () => {
+        carousel.slideTo(6);
+        expect(carousel.currentSlide).toBe(2);
+      });
+
+      it('when the index is negative, should normalize it', () => {
+        carousel.slideTo(-3);
+        expect(carousel.currentSlide).toBe(1);
+      });
+
+      it('when isSliding is true, should do nothing', () => {
+        carousel.slideTo(1);
+        carousel.slideTo(2);
+        expect(carousel.currentSlide).toBe(2);
+      });
+    });
+
+    describe('slideNext method', () => {
+      it('should slide to the next index', () => {
+        carousel.slideNext();
+        expect(carousel.currentSlide).toBe(1);
+      });
+
+      it('if in infinite scroll and currentSlide is the last one, should slide to the first slide', () => {
+        carousel = new Carousel({
+          ...baseCarousel,
+          infiniteScroll: true,
+          initialSlide: 3,
+        });
+        carousel.slideNext();
+
+        expect(carousel.currentSlide).toBe(0);
+      });
+
+      it('if not in infinite scroll and index is the last one, should not change currentSlide value', () => {
+        carousel = new Carousel({
+          ...baseCarousel,
+          infiniteScroll: false,
+          initialSlide: 3,
+        });
+        carousel.slideNext();
+
+        expect(carousel.currentSlide).toBe(3);
+      });
+    });
+
+    describe('slidePrev method', () => {
+      it('should slide to the previous index', () => {
+        carousel = new Carousel({
+          ...baseCarousel,
+          initialSlide: 1,
+        });
+        carousel.slidePrev();
+
+        expect(carousel.currentSlide).toBe(0);
+      });
+
+      it('if in infinite scroll and currentSlide is the first one, should slide to the last slide', () => {
+        carousel = new Carousel({
+          ...baseCarousel,
+          infiniteScroll: true,
+        });
+        carousel.slidePrev();
+
+        expect(carousel.currentSlide).toBe(3);
+      });
+
+      it('if not in infinite scroll and index is the first one, should not change currentSlide value', () => {
+        carousel = new Carousel({
+          ...baseCarousel,
+          infiniteScroll: false,
+        });
+        carousel.slidePrev();
+
+        expect(carousel.currentSlide).toBe(0);
+      });
+    });
+  });
+
+  describe('event methods', () => {
+    let baseCarousel: ICarousel;
+    beforeEach(() => {
+      baseCarousel = {
+        name: 'carousel',
+        component: 'ZdCarousel',
+      };
+    });
+
+    describe('beforeSlide event', () => {
+      it('should call beforeSlide event', () => {
+        const carousel = new Carousel({
+          ...baseCarousel,
+          events: {
+            beforeSlide: () => undefined,
+          },
+        });
+        const spy = jest.spyOn((carousel.events as any), 'beforeSlide');
+        carousel.beforeSlide({}, {} as ISlideData, {} as Event);
+
+        expect(spy).toHaveBeenCalledWith({
+          component: carousel, element: {}, slideData: {}, event: {},
+        });
+        spy.mockClear();
+      });
+
+      it('should do nothing when event is not defined', () => {
+        const carousel = new Carousel(baseCarousel);
+        expect(() => { carousel.beforeSlide({}, {} as ISlideData, {} as Event); }).not.toThrow();
+      });
+    });
+
+    describe('slide event', () => {
+      it('should call slide event', () => {
+        const carousel = new Carousel({
+          ...baseCarousel,
+          events: {
+            slide: () => undefined,
+          },
+        });
+        const spy = jest.spyOn((carousel.events as any), 'slide');
+        carousel.slide({}, {} as ISlideData, {} as Event);
+
+        expect(spy).toHaveBeenCalledWith({
+          component: carousel, element: {}, slideData: {}, event: {},
+        });
+        spy.mockClear();
+      });
+
+      it('should do nothing when event is not defined', () => {
+        const carousel = new Carousel(baseCarousel);
+        expect(() => { carousel.slide({}, {} as ISlideData, {} as Event); }).not.toThrow();
+      });
+    });
+  });
+});

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

@@ -0,0 +1,26 @@
+import { Checkbox } from '../../../../src';
+
+describe('Checkbox', () => {
+	describe('constructor()', () => {
+		it('should create new checkbox with default values', () => {
+			const instance = new Checkbox({ name: 'checkbox', component: 'Checkbox' });
+			expect(instance.color).toBe('primary');
+			expect(instance.falseValue).toBeFalsy();
+			expect(instance.trueValue).toBeTruthy();
+			expect(instance.showHelper).toBeFalsy();
+		});
+
+		it('should create new checkbox replacing default values', () => {
+			const instance = new Checkbox({
+				component: 'Checkbox',
+				color: 'secondary',
+				name: 'checkbox',
+				falseValue: 'F',
+				trueValue: 'T',
+			});
+			expect(instance.color).toBe('secondary');
+			expect(instance.falseValue).toBe('F');
+			expect(instance.trueValue).toBe('T');
+		});
+	});
+});

package/tests/unit/components/zd-checkbox-multiple/checkbox-multiple.spec.ts

@@ -0,0 +1,107 @@
+import { CheckboxMultiple } from '../../../../src';
+import { DatasourceFactory, Datasource } from '@zeedhi/core';
+
+class MockDatasource extends Datasource {
+  constructor(config: any) { super(config); }
+  get() { return Promise.resolve(); }
+  post() { return Promise.resolve(); }
+  put() { return Promise.resolve(); }
+  delete() { return Promise.resolve(); }
+  updateData() { return Promise.resolve(); }
+  getLoadedData() { return []; }
+}
+
+beforeAll(() => {
+  DatasourceFactory.register('complex', MockDatasource);
+  DatasourceFactory.register('simple', MockDatasource);
+});
+
+describe('CheckboxMultiple', () => {
+  describe('constructor()', () => {
+    it('should create new checkbox multiple with default values', () => {
+      const instance = new CheckboxMultiple({
+        name: 'checkbox-multiple',
+        component: 'CheckboxMultiple',
+        datasource: { type: 'complex', initialize: () => {}, destroy: () => {} } as any,
+      });
+      expect(instance.color).toBe('primary');
+      expect(instance.columns).toBe(4);
+      expect(instance.dataLabel).toBe('');
+      expect(instance.dataValue).toBe('');
+      expect(instance.returnObject).toBeFalsy();
+    });
+
+    it('should create new checkbox multiple replacing default values', () => {
+      const instance = new CheckboxMultiple({
+        name: 'checkbox-multiple',
+        component: 'CheckboxMultiple',
+        color: 'secondary',
+        columns: 2,
+        dataLabel: 'label',
+        dataValue: 'value',
+        returnObject: true,
+        datasource: { type: 'complex', initialize: () => {}, destroy: () => {} } as any,
+      });
+      expect(instance.color).toBe('secondary');
+      expect(instance.columns).toBe(2);
+      expect(instance.dataLabel).toBe('label');
+      expect(instance.dataValue).toBe('value');
+      expect(instance.returnObject).toBeTruthy();
+    });
+
+    it('should set default dataLabel and dataValue when datasource.type is simple', () => {
+      const instance = new CheckboxMultiple({
+        name: 'checkbox-multiple',
+        component: 'CheckboxMultiple',
+        datasource: {
+          type: 'simple',
+          initialize: () => {},
+          destroy: () => {},
+        } as any,
+      });
+      expect(instance.dataLabel).toBe('value');
+      expect(instance.dataValue).toBe('value');
+    });
+  });
+
+  describe('onBeforeDestroy()', () => {
+    it('should destroy the component', () => {
+      const method = jest.fn();
+      const destroy = jest.fn();
+      const instance = new CheckboxMultiple({
+        name: 'checkbox-multiple',
+        component: 'CheckboxMultiple',
+        items: ['item 1', 'item 2', 'item 3'],
+        translate: true,
+        events: { onBeforeDestroy: method },
+        datasource: {
+          type: 'complex',
+          destroy: () => {},
+          initialize: () => {},
+        } as any,
+      });
+      instance.datasource.destroy = destroy;
+      instance.onBeforeDestroy();
+      expect(method).toHaveBeenCalled();
+      expect(destroy).toHaveBeenCalled();
+    });
+  });
+
+  describe('onCreated()', () => {
+    it('should call datasource.initialize if datasource exists', () => {
+      const initialize = jest.fn();
+      const instance = new CheckboxMultiple({
+        name: 'checkbox-multiple',
+        component: 'CheckboxMultiple',
+        datasource: {
+          type: 'complex',
+          initialize: () => {},
+          destroy: () => {},
+        } as any,
+      });
+      instance.datasource.initialize = initialize;
+      instance.onCreated();
+      expect(initialize).toHaveBeenCalled();
+    });
+  });
+});

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

@@ -0,0 +1,53 @@
+import { Chip } from '../../../../src';
+
+describe('Chip', () => {
+  describe('constructor()', () => {
+    it('should create new chip with default values', () => {
+      const instance = new Chip({ name: 'chip', component: 'Chip' });
+      expect(instance.active).toBeTruthy();
+      expect(instance.activeClass).toBe('');
+      expect(instance.closable).toBeFalsy();
+      expect(instance.closeIcon).toBe('delete');
+      expect(instance.draggable).toBeFalsy();
+      expect(instance.link).toBeFalsy();
+      expect(instance.outlined).toBeFalsy();
+      expect(instance.ripple).toBeTruthy();
+      expect(instance.round).toBeTruthy();
+      expect(instance.value).toBeFalsy();
+      expect(instance.xLarge).toBeFalsy();
+      expect(instance.xSmall).toBeFalsy();
+    });
+
+    it('should create new chip replacing default values', () => {
+      const instance = new Chip({
+        active: false,
+        activeClass: 'router-link-active',
+        closable: true,
+        closeIcon: 'delete',
+        component: 'Chip',
+        draggable: true,
+        link: true,
+        name: 'chip',
+        outlined: true,
+        ripple: false,
+        round: false,
+        textColor: 'primary',
+        value: true,
+        xLarge: true,
+        xSmall: true,
+      });
+      expect(instance.active).toBeFalsy();
+      expect(instance.activeClass).toBe('router-link-active');
+      expect(instance.closable).toBeTruthy();
+      expect(instance.closeIcon).toBe('delete');
+      expect(instance.draggable).toBeTruthy();
+      expect(instance.link).toBeTruthy();
+      expect(instance.outlined).toBeTruthy();
+      expect(instance.ripple).toBeFalsy();
+      expect(instance.round).toBeFalsy();
+      expect(instance.value).toBeTruthy();
+      expect(instance.xLarge).toBeTruthy();
+      expect(instance.xSmall).toBeTruthy();
+    });
+  });
+});