salix/client/core/src/drop-down/drop-down.spec.js

import './drop-down.js';

describe('Component vnDropDown', () => {
    let $componentController;
    let $timeout;
    let $element;
    let $filter;

    beforeEach(() => {
        angular.mock.module('client');
    });

    beforeEach(angular.mock.inject((_$componentController_, _$timeout_, _$filter_) => {
        $componentController = _$componentController_;
        $element = angular.element('<div><ul><li></li></ul></div>');
        $timeout = _$timeout_;
        $filter = _$filter_;
    }));

    describe('show() setter', () => {
        it(`should define controllers _show using the value received as argument`, () => {
            let controller = $componentController('vnDropDown', {$element, $timeout, $filter});
            controller._show = 'old value';
            controller.show = 'new value';

            expect(controller._show).toEqual('new value');
        });
    });

    describe('search()', () => {
        it(`should set controllers _search property with the value received`, () => {
            let controller = $componentController('vnDropDown', {$element, $timeout, $filter});
            controller.search = 'some filter valiue';

            expect(controller._search).toEqual('some filter valiue');
        });

        it(`should set controllers _search property to null as the value received is an empty string`, () => {
            let controller = $componentController('vnDropDown', {$element, $timeout, $filter});
            controller.search = '';

            expect(controller._search).toEqual(null);
        });

        it(`should call onFilterRest() if controllers filterAction is defined`, () => {
            let controller = $componentController('vnDropDown', {$element, $timeout, $filter});
            controller.filterAction = true;
            spyOn(controller, 'onFilterRest');
            controller.search = 'some filter valiue';

            expect(controller.onFilterRest).toHaveBeenCalledWith();
        });

        it(`should call filterItems() if controllers filterAction is undefined`, () => {
            let controller = $componentController('vnDropDown', {$element, $timeout, $filter});
            controller.filterAction = undefined;
            spyOn(controller, 'filterItems');
            controller.search = 'some filter valiue';

            expect(controller.filterItems).toHaveBeenCalledWith();
        });
    });

    describe('activeOption() setter', () => {
        it(`should set _activeOption as items.length if showLoadMore is defined if activeOption is bigger than items.length then call loadItems()`, () => {
            let controller = $componentController('vnDropDown', {$element, $timeout, $filter});
            spyOn(controller, 'loadItems');
            controller.showLoadMore = true;
            controller.items = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}];
            controller.activeOption = 10;
            $timeout.flush();

            expect(controller._activeOption).toEqual(4);
            expect(controller.loadItems).toHaveBeenCalledWith();
        });

        it(`should set _activeOption as activeOption if showLoadMore is defined if activeOption is smaller than items.length then call loadItems()`, () => {
            let controller = $componentController('vnDropDown', {$element, $timeout, $filter});
            spyOn(controller, 'loadItems');
            controller.showLoadMore = true;
            controller.items = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}];
            controller.activeOption = 2;
            $timeout.flush();

            expect(controller._activeOption).toEqual(2);
            expect(controller.loadItems).toHaveBeenCalledWith();
        });

        it(`should set _activeOption as items.length -1 if showLoadMore is not defined then call loadItems()`, () => {
            let controller = $componentController('vnDropDown', {$element, $timeout, $filter});
            spyOn(controller, 'loadItems');
            controller.showLoadMore = undefined;
            controller.items = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}];
            controller.activeOption = 10;
            $timeout.flush();

            expect(controller._activeOption).toEqual(3);
            expect(controller.loadItems).toHaveBeenCalledWith();
        });

        it(`should define _activeOption as activeOption and never call loadItems()`, () => {
            let controller = $componentController('vnDropDown', {$element, $timeout, $filter});
            spyOn(controller, 'loadItems');
            controller.items = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}, {id: 5, name: 'Doctor X'}];
            controller.activeOption = 1;
            $timeout.flush();

            expect(controller._activeOption).toEqual(1);
            expect(controller.loadItems).not.toHaveBeenCalledWith();
        });
    });

    describe('filterItems() setter', () => {
        it(`should set _itemsFiltered using the value of items`, () => {
            let controller = $componentController('vnDropDown', {$element, $timeout, $filter});
            controller.items = [{id: 1, name: 'Batman'}];
            controller.filterItems();

            expect(controller.itemsFiltered).toEqual(controller.items);
        });

        it(`should set _itemsFiltered with the filtered value of items`, () => {
            let controller = $componentController('vnDropDown', {$element, $timeout, $filter});
            controller.items = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}];
            controller.search = 'Batman';
            controller.filterItems();

            expect(controller.itemsFiltered).toEqual([Object({id: 1, name: 'Batman'})]);
        });

        it(`should set _itemsFiltered an empty array`, () => {
            let controller = $componentController('vnDropDown', {$element, $timeout, $filter});
            controller.items = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}];
            controller.search = 'the Joker';

            expect(controller.itemsFiltered.length).toEqual(0);
        });
    });

    describe('onFilterRest()', () => {
        it(`should call the filterAction() with a constructed object as argument`, () => {
            let controller = $componentController('vnDropDown', {$element, $timeout, $filter}, {filterAction: () => {}});
            controller.search = 'Batman';
            spyOn(controller, 'filterAction');
            controller.onFilterRest();

            expect(controller.filterAction).toHaveBeenCalledWith({search: controller.search});
        });
    });

    describe('$onChanges()', () => {
        it(`should set the top css of the $element`, () => {
            let controller = $componentController('vnDropDown', {$element, $timeout, $filter});
            let argumentObject = {show: true, top: {currentValue: 100}};
            spyOn(controller.$element, 'css');
            controller.$onChanges(argumentObject);

            expect(controller.$element.css).toHaveBeenCalledWith('top', '100px');
        });

        it(`should set the width css of the $element`, () => {
            let controller = $componentController('vnDropDown', {$element, $timeout, $filter});
            let argumentObject = {show: true, itemWidth: {currentValue: 100}};
            spyOn(controller.$element, 'css');
            controller.$onChanges(argumentObject);

            expect(controller.$element.css).toHaveBeenCalledWith('width', '100px');
        });

        it(`should set the width css of the $element`, () => {
            let controller = $componentController('vnDropDown', {$element, $timeout, $filter});
            let argumentObject = {items: {id: 1, name: 'Batman'}};
            spyOn(controller, 'filterItems');
            controller.$onChanges(argumentObject);

            expect(controller.filterItems).toHaveBeenCalledWith();
        });
    });

    describe('clearSearch()', () => {
        it(`should set the controllers search property to null`, () => {
            let controller = $componentController('vnDropDown', {$element, $timeout, $filter});
            controller.search = true;
            controller.clearSearch();

            expect(controller.search).toEqual(null);
        });
    });

    describe('selectOption()', () => {
        it(`should set controllers selected and show properties then call clearSearch() as _activeOption is smaller than items.length`, () => {
            let controller = $componentController('vnDropDown', {$element, $timeout, $filter});
            spyOn(controller, 'clearSearch');
            controller.items = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}];
            controller._activeOption = 0;
            controller.selectOption();

            expect(controller.selected).toEqual(controller.items[controller._activeOption]);
            expect(controller._show).toEqual(false);
            expect(controller.clearSearch).toHaveBeenCalledWith();
        });

        it(`should not set controllers selected, show and never call clearSearch() as _activeOption is bigger than items.length`, () => {
            let controller = $componentController('vnDropDown', {$element, $timeout, $filter});
            spyOn(controller, 'clearSearch');
            controller.items = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}];
            controller._activeOption = 100;
            controller.selectOption();

            expect(controller.selected).not.toBeDefined();
            expect(controller._show).not.toBeDefined();
            expect(controller.clearSearch).not.toHaveBeenCalledWith();
        });

        it(`should call loadMore() if the activeValue equals items.length`, () => {
            let controller = $componentController('vnDropDown', {$element, $timeout, $filter}, {loadMore: () => {}});
            spyOn(controller, 'loadMore');
            controller.items = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}];
            controller._activeOption = 4;
            controller.showLoadMore = 4;
            controller.selectOption();

            expect(controller.loadMore).toHaveBeenCalledWith();
        });
    });

    describe('onKeydown()', () => {
        it(`should call selectOption() and preventDefault() if Enter key is pressed`, () => {
            let controller = $componentController('vnDropDown', {$element, $timeout, $filter});
            spyOn(controller, 'selectOption');
            controller._show = true;
            controller.element = document.createElement('div');
            let event = {target: controller.element, preventDefault: () => {}};
            event.keyCode = 13;
            spyOn(event, 'preventDefault');
            controller.onKeydown(event);
            $timeout.flush();

            expect(controller.selectOption).toHaveBeenCalledWith();
            expect(event.preventDefault).toHaveBeenCalledWith();
        });

        it(`should call clearSearch() Esc key is pressed`, () => {
            let controller = $componentController('vnDropDown', {$element, $timeout, $filter});
            spyOn(controller, 'clearSearch');
            controller._show = true;
            controller.element = document.createElement('div');
            let event = {target: controller.element};
            event.keyCode = 27;
            controller.onKeydown(event);

            expect(controller.clearSearch).toHaveBeenCalledWith();
        });

        it(`should call clearSearch() Esc key is pressed and take off 1 from _activeOption`, () => {
            let controller = $componentController('vnDropDown', {$element, $timeout, $filter});
            controller.items = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}];
            spyOn(controller, 'setScrollPosition');
            controller._show = true;
            controller.element = document.createElement('div');
            let event = {target: controller.element};
            event.keyCode = 38;
            controller._activeOption = 1;
            controller.onKeydown(event);
            $timeout.flush();

            expect(controller.setScrollPosition).toHaveBeenCalledWith();
            expect(controller._activeOption).toEqual(0);
        });

        it(`should call clearSearch() Esc key is pressed and add up 1 to _activeOption`, () => {
            let controller = $componentController('vnDropDown', {$element, $timeout, $filter});
            controller.items = [{id: 1, name: 'Batman'}, {id: 2, name: 'Bruce'}, {id: 3, name: 'Logan'}, {id: 4, name: 'Wolverine'}];
            spyOn(controller, 'setScrollPosition');
            controller._show = true;
            controller.element = document.createElement('div');
            let event = {target: controller.element};
            event.keyCode = 40;
            controller._activeOption = 1;
            controller.onKeydown(event);
            $timeout.flush();

            expect(controller.setScrollPosition).toHaveBeenCalledWith();
            expect(controller._activeOption).toEqual(2);
        });
    });

    describe('setScrollPosition()', () => {
        it(`should call child.scrollIntoView if defined `, () => {
            $element[0].firstChild.setAttribute('class', 'dropdown');
            let child = $element[0].firstChild.firstChild;
            child.scrollIntoView = () => {};
            spyOn(child, 'scrollIntoView');
            let controller = $componentController('vnDropDown', {$element, $timeout, $filter});
            controller._activeOption = 0;
            controller.setScrollPosition();

            expect(child.scrollIntoView).toHaveBeenCalledWith();
        });
    });

    describe('selectItem()', () => {
        it(`should pass item to selected and set controller._show to false`, () => {
            let controller = $componentController('vnDropDown', {$element, $timeout, $filter});
            let item = {id: 1, name: 'Batman'};
            controller.selectItem(item);

            expect(controller.selected).toEqual(item);
            expect(controller._show).toEqual(false);
        });

        it(`should pass item to selected and set controller._show to true if the controller.multiple is defined`, () => {
            let controller = $componentController('vnDropDown', {$element, $timeout, $filter});
            let item = {id: 1, name: 'Batman'};
            controller.multiple = true;
            controller.selectItem(item);

            expect(controller.selected).toEqual(item);
            expect(controller._show).toEqual(true);
        });
    });

    describe('loadItems()', () => {
        it(`should set controller._show to true`, () => {
            let controller = $componentController('vnDropDown', {$element, $timeout, $filter});
            controller.loadItems();

            expect(controller._show).toEqual(true);
        });

        it(`should call loadMore() and then set controller._show to true`, () => {
            let controller = $componentController('vnDropDown', {$element, $timeout, $filter}, {showLoadMore: () => {}, loadMore: () => {}});
            spyOn(controller, 'loadMore');
            controller.loadItems();

            expect(controller._show).toEqual(true);
            expect(controller.loadMore).toHaveBeenCalledWith();
        });
    });

    describe('$onInit()', () => {
        it(`should add an event listener to the parent element`, () => {
            let controller = $componentController('vnDropDown', {$element, $timeout, $filter});
            spyOn(controller.parent, 'addEventListener');
            controller.$onInit();

            expect(controller.parent.addEventListener).toHaveBeenCalledWith('keydown', jasmine.any(Function));
        });
    });

    describe('$onDestroy()', () => {
        it(`should remove an event listener from the parent element`, () => {
            let controller = $componentController('vnDropDown', {$element, $timeout, $filter});
            spyOn(controller.parent, 'removeEventListener');
            controller.$onDestroy();

            expect(controller.parent.removeEventListener).toHaveBeenCalledWith('keydown', jasmine.any(Function));
        });
    });
});