test(unittest): add unit tests

Author: nivekcode

projects/ng-sortgrid/src/lib/ngsg-class.service.spec.ts

@@ -0,0 +1,66 @@
+import {NgsgClassService} from './ngsg-class.service';
+import createSpy = jasmine.createSpy;
+
+describe('NgsgClassService', () => {
+
+  let sut: NgsgClassService;
+
+  beforeEach(() => sut = new NgsgClassService());
+
+  it('should add the placeholder class', () => {
+    const addClassSpy = createSpy();
+    const element = {classList: {add: addClassSpy}} as any;
+    sut.addPlaceHolderClass(element);
+    expect(addClassSpy).toHaveBeenCalledWith('ng-sg-placeholder');
+  });
+
+  it('should remove the placeholder class', () => {
+    const removeClassSpy = createSpy();
+    const element = {classList: {remove: removeClassSpy}} as any;
+    sut.removePlaceHolderClass(element);
+    expect(removeClassSpy).toHaveBeenCalledWith('ng-sg-placeholder');
+  });
+
+  it('should add the dropped class', () => {
+    const addClassSpy = createSpy();
+    const element = {classList: {add: addClassSpy}} as any;
+    sut.addDroppedClass(element);
+    expect(addClassSpy).toHaveBeenCalledWith('ng-sg-dropped');
+  });
+
+  it('should remove the placeholder class', () => {
+    const removeClassSpy = createSpy();
+    const element = {classList: {remove: removeClassSpy}} as any;
+    sut.removeDroppedClass(element);
+    expect(removeClassSpy).toHaveBeenCalledWith('ng-sg-dropped');
+  });
+
+  it('should add the dropped class', () => {
+    const addClassSpy = createSpy();
+    const element = {classList: {add: addClassSpy}} as any;
+    sut.addSelectedClass(element);
+    expect(addClassSpy).toHaveBeenCalledWith('ng-sg-selected');
+  });
+
+  it('should remove the placeholder class', () => {
+    const removeClassSpy = createSpy();
+    const element = {classList: {remove: removeClassSpy}} as any;
+    sut.removeSelectedClass(element);
+    expect(removeClassSpy).toHaveBeenCalledWith('ng-sg-selected');
+  });
+
+  it('should add the dropped class', () => {
+    const addClassSpy = createSpy();
+    const element = {classList: {add: addClassSpy}} as any;
+    sut.addActiveClass(element);
+    expect(addClassSpy).toHaveBeenCalledWith('ng-sg-active');
+  });
+
+  it('should remove the placeholder class', () => {
+    const removeClassSpy = createSpy();
+    const element = {classList: {remove: removeClassSpy}} as any;
+    sut.removeActiveClass(element);
+    expect(removeClassSpy).toHaveBeenCalledWith('ng-sg-active');
+  });
+
+});

projects/ng-sortgrid/src/lib/ngsg-elements.helper.spec.ts

@@ -0,0 +1,59 @@
+import {NgsgElementsHelper} from './ngsg-elements.helper';
+
+describe('NgsgElementsHelper', () => {
+
+  it('must return the correct index of the element', () => {
+    const elementOne = {name: 'child one'} as any;
+    const elementTwo = {name: 'child two'} as any;
+    const elementThree = {name: 'chil three'} as any;
+    const elementFour = {name: 'chil four'} as any;
+
+    const children = [elementOne, elementTwo, elementThree, elementFour];
+    elementOne.parentNode = {children};
+    elementTwo.parentNode = {children};
+    elementThree.parentNode = {children};
+    elementFour.parentNode = {children};
+
+    const index = NgsgElementsHelper.findIndex(elementThree);
+    expect(index).toBe(2);
+  });
+
+  it('must find the element that matches the selector', () => {
+    const selector = 'sample-selector';
+    const result = {
+      matches: (s) => s === selector,
+      name: 'parentElement'
+    };
+    const element = {
+      parentElement: {
+        matches: () => false,
+        parentElement: result
+      }
+    } as any;
+    const findHostSpy = spyOn(NgsgElementsHelper, 'findHost');
+    findHostSpy.and.callThrough();
+
+    NgsgElementsHelper.findHost(element, selector);
+    expect(findHostSpy).toHaveBeenCalledTimes(2);
+  });
+
+  it('must retunr the element that matches the selector', () => {
+    const selector = 'sample-selector';
+    const result = {
+      matches: (s) => s === selector,
+      name: 'parentElement'
+    };
+    const element = {
+      parentElement: {
+        matches: () => false,
+        parentElement: result
+      }
+    } as any;
+    const findHostSpy = spyOn(NgsgElementsHelper, 'findHost');
+    findHostSpy.and.callThrough();
+
+    const actual = NgsgElementsHelper.findHost(element, selector);
+    expect((actual as any)).toEqual(result);
+  });
+
+});

projects/ng-sortgrid/src/lib/ngsg-elements.helper.ts

@@ -1,4 +1,5 @@
 export class NgsgElementsHelper {
+
   public static findIndex(element: Element): number {
     const allElements = element.parentNode.children;
     return Array.prototype.indexOf.call(allElements, element);

projects/ng-sortgrid/src/lib/ngsg-item.directive.spec.ts

@@ -0,0 +1,189 @@
+import {NgsgItemDirective} from './ngsg-item.directive';
+import createSpyObj = jasmine.createSpyObj;
+
+import {NgsgSortService} from './ngsg-sort.service';
+import {NgsgSelectionService} from './ngsg-selection.service';
+import {NgsgReflectService} from './ngsg-reflect.service';
+import {NgsgStoreService} from './ngsg-store.service';
+import {NgsgEventsService} from './ngsg-events.service';
+import createSpy = jasmine.createSpy;
+import {NgsgElementsHelper} from './ngsg-elements.helper';
+
+describe('NgsgItemDirective', () => {
+
+  let sut: NgsgItemDirective;
+
+  const elementRef = {nativeElement: {}};
+  const ngsgSortService = createSpyObj<NgsgSortService>('ngsgSortService', ['initSort', 'sort', 'endSort']);
+  const ngsgSelectionService = createSpyObj<NgsgSelectionService>('ngsgSelectionService',
+    ['selectElementIfNoSelection', 'updateSelectedDragItem']);
+  const ngsgReflectService = createSpyObj<NgsgReflectService>('ngsgReflectService', ['reflectChanges']);
+  const ngsgStore = createSpyObj<NgsgStoreService>('ngsgStore',
+    ['initState', 'hasSelectedItems', 'resetSelectedItems']);
+  const ngsgEventService = new NgsgEventsService();
+
+  beforeEach(() => {
+    sut = new NgsgItemDirective(elementRef, ngsgSortService, ngsgSelectionService,
+      ngsgReflectService, ngsgStore, ngsgEventService);
+  });
+
+  it('should log a warning if we do not pass in sort grid items', () => {
+    const consoleWarnSpy = spyOn(global.console, 'warn');
+    sut.ngOnInit();
+    expect(consoleWarnSpy).toHaveBeenCalledWith(
+      `Ng-sortgrid: No items provided - please use [sortGridItems] to pass in an array of items -
+      otherwhise the ordered items will not be emitted in the (sorted) event`);
+  });
+
+  it('should init the store with the sortGridGroup, the ngSortGridItems and the classes', () => {
+    const sortGridGroup = 'sortgridgroup';
+    const sortGridItems = ['item one', 'item two', 'item three'] as any;
+    sut.ngSortGridItems = sortGridItems;
+    sut.ngSortGridGroup = sortGridGroup;
+
+    sut.ngOnInit();
+    expect(ngsgStore.initState).toHaveBeenCalledWith(sortGridGroup, sortGridItems, {});
+  });
+
+  it('should set the draggable attribute on the elment', () => {
+    sut.ngAfterViewInit();
+    expect((elementRef.nativeElement as any).draggable).toBeTruthy();
+  });
+
+  it('should not set selectedElements if the event did not occur on the host', () => {
+    const event = {
+      target: {
+        matches: () => false
+      }
+    };
+    sut.dragStart(event);
+    expect(ngsgSelectionService.selectElementIfNoSelection).not.toHaveBeenCalled();
+  });
+
+  it('should call selectionService selectElementIfNoSelection if the event occured on the host', () => {
+    const sortGroup = 'test-group';
+    sut.ngSortGridGroup = sortGroup;
+    const event = {
+      target: {
+        matches: () => true
+      }
+    };
+    sut.dragStart(event);
+    expect(ngsgSelectionService.selectElementIfNoSelection).toHaveBeenCalledWith(sortGroup, event.target);
+  });
+
+  it('should init the sort for the current group', () => {
+    const sortGroup = 'test-group';
+    sut.ngSortGridGroup = sortGroup;
+    const event = {
+      target: {
+        matches: () => true
+      }
+    };
+    sut.dragStart(event);
+    expect(ngsgSortService.initSort).toHaveBeenCalledWith(sortGroup);
+  });
+
+  it('should not sort the items if the event did not occured in the group', () => {
+    ngsgStore.hasSelectedItems.and.returnValue(false);
+    const event = {};
+    sut.dragEnter(event);
+    expect(ngsgSortService.sort).not.toHaveBeenCalled();
+  });
+
+  it('should not sort the items if the event did not occured on the host', () => {
+    ngsgStore.hasSelectedItems.and.returnValue(false);
+    const event = {
+      target: {
+        matches: () => false
+      }
+    };
+    sut.dragEnter(event);
+    expect(ngsgSortService.sort).not.toHaveBeenCalled();
+  });
+
+  it('should sort the items if the event occured on the host and on the correct group', () => {
+    ngsgStore.hasSelectedItems.and.returnValue(true);
+    const event = {
+      target: {
+        matches: () => true
+      }
+    };
+    sut.dragEnter(event);
+    expect(ngsgSortService.sort).toHaveBeenCalledWith(event.target);
+  });
+
+  it('must call event preventDefault', () => {
+    const preventDefaultSpy = createSpy();
+    const event = {preventDefault: preventDefaultSpy};
+    sut.dragOver(event);
+    expect(preventDefaultSpy).toHaveBeenCalled();
+  });
+
+  it('must return false on dragOver', () => {
+    const actual = sut.dragOver({});
+    expect(actual).toBeFalsy();
+  });
+
+  it('should not call endSort if the group does not contain selectedItems', () => {
+    ngsgStore.hasSelectedItems.and.returnValue(false);
+    sut.drop({});
+    expect(ngsgSortService.endSort).not.toHaveBeenCalled();
+  });
+
+  it('should sort if the group contains selectedItems', () => {
+    ngsgStore.hasSelectedItems.and.returnValue(true);
+    sut.drop({});
+    expect(ngsgSortService.endSort).toHaveBeenCalled();
+  });
+
+  it('should get the reflected changes from the reflection service and emit them', done => {
+    const group = 'test-group';
+    const event = {target: 'some target'};
+    const reflectedChanges = ['item two', 'item one', 'item three'];
+
+    ngsgStore.hasSelectedItems.and.returnValue(true);
+    ngsgReflectService.reflectChanges.and.returnValue(reflectedChanges);
+    sut.ngSortGridGroup = group;
+
+    sut.sorted.subscribe(changes => {
+      expect(reflectedChanges).toEqual(changes);
+      done();
+    });
+    sut.drop(event);
+    expect(ngsgReflectService.reflectChanges).toHaveBeenCalledWith(group, event.target);
+  });
+
+  it('should reset the selected items on drop', () => {
+    const event = {target: 'some target'};
+    sut.drop(event);
+    expect(ngsgStore.resetSelectedItems).toHaveBeenCalled();
+  });
+
+  it('should stream the dropped event on the eventservice', done => {
+    const event = {target: 'some target'};
+    ngsgEventService.dropped$.subscribe(() => done());
+    sut.drop(event);
+  });
+
+  it('should call the selctionservice with the host if the event occured on the host', () => {
+    const group = 'test-group';
+    const event = {target: {matches: () => true}};
+    sut.ngSortGridGroup = group;
+
+    sut.clicked(event);
+    expect(ngsgSelectionService.updateSelectedDragItem).toHaveBeenCalledWith(group, event.target, true);
+  });
+
+  it('should call the selctionservice with the host, even if the event did not occure on it', () => {
+    const group = 'test-group';
+    const event = {target: {matches: () => false}};
+    const host = 'Some element' as any;
+    NgsgElementsHelper.findHost = () => host;
+    sut.ngSortGridGroup = group;
+
+    sut.clicked(event);
+    expect(ngsgSelectionService.updateSelectedDragItem).toHaveBeenCalledWith(group, host, true);
+  });
+
+});

projects/ng-sortgrid/src/lib/ngsg-item.directive.ts

@@ -24,7 +24,7 @@ const selector = '[ngSortgridItem]';
 
 @Directive({selector})
 export class NgsgItemDirective implements OnInit, AfterViewInit, OnDestroy {
-  @Input() private ngSortGridGroup = 'defaultGroup';
+  @Input() ngSortGridGroup = 'defaultGroup';
   @Input() ngSortGridItems;
 
   @Output() sorted = new EventEmitter<any>();
@@ -37,15 +37,14 @@ export class NgsgItemDirective implements OnInit, AfterViewInit, OnDestroy {
     private sortService: NgsgSortService,
     private selectionService: NgsgSelectionService,
     private reflectService: NgsgReflectService,
-    private classService: NgsgClassService,
     private ngsgStore: NgsgStoreService,
     private ngsgEventService: NgsgEventsService
   ) {
   }
 
   ngOnInit(): void {
     if (!this.ngSortGridItems) {
-      console.error(`Ng-sortgrid: No items provided - please use [sortGridItems] to pass in an array of items -
+      console.warn(`Ng-sortgrid: No items provided - please use [sortGridItems] to pass in an array of items -
       otherwhise the ordered items will not be emitted in the (sorted) event`);
     }
     this.ngsgStore.initState(this.ngSortGridGroup, this.ngSortGridItems, {});