BigW Consortium Gitlab

gl_dropdown_spec.js 7.17 KB
Newer Older
1
/* eslint-disable comma-dangle, no-param-reassign, no-unused-expressions, max-len */
2

3 4 5
require('~/gl_dropdown');
require('~/lib/utils/common_utils');
require('~/lib/utils/type_utility');
6
require('~/lib/utils/url_utility');
7

8 9
(() => {
  const NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-link';
10
  const SEARCH_INPUT_SELECTOR = '.dropdown-input-field';
11 12
  const ITEM_SELECTOR = `.dropdown-content li:not(${NON_SELECTABLE_CLASSES})`;
  const FOCUSED_ITEM_SELECTOR = `${ITEM_SELECTOR} a.is-focused`;
13

14 15 16 17 18 19
  const ARROW_KEYS = {
    DOWN: 40,
    UP: 38,
    ENTER: 13,
    ESC: 27
  };
20

21 22
  let remoteCallback;

23
  const navigateWithKeys = function navigateWithKeys(direction, steps, cb, i) {
24
    i = i || 0;
25
    if (!i) direction = direction.toUpperCase();
26 27
    $('body').trigger({
      type: 'keydown',
28 29
      which: ARROW_KEYS[direction],
      keyCode: ARROW_KEYS[direction]
30
    });
31
    i += 1;
32 33 34 35
    if (i <= steps) {
      navigateWithKeys(direction, steps, cb, i);
    } else {
      cb();
36
    }
37
  };
38

39
  const remoteMock = function remoteMock(data, term, callback) {
40
    remoteCallback = callback.bind({}, data);
41
  };
42

43
  describe('Dropdown', function describeDropdown() {
44
    preloadFixtures('static/gl_dropdown.html.raw');
45
    loadJSONFixtures('projects.json');
46

47
    function initDropDown(hasRemote, isFilterable) {
48 49
      this.dropdownButtonElement = $('#js-project-dropdown', this.dropdownContainerElement).glDropdown({
        selectable: true,
50 51
        filterable: isFilterable,
        data: hasRemote ? remoteMock.bind({}, this.projectsData) : this.projectsData,
52 53 54
        search: {
          fields: ['name']
        },
55
        text: (project) => {
Luke Bennett committed
56
          (project.name_with_namespace || project.name);
57 58
        },
        id: (project) => {
Luke Bennett committed
59
          project.id;
60 61
        }
      });
62 63 64
    }

    beforeEach(() => {
65
      loadFixtures('static/gl_dropdown.html.raw');
66 67
      this.dropdownContainerElement = $('.dropdown.inline');
      this.$dropdownMenuElement = $('.dropdown-menu', this.dropdownContainerElement);
68
      this.projectsData = getJSONFixture('projects.json');
69
    });
70

71
    afterEach(() => {
72 73
      $('body').unbind('keydown');
      this.dropdownContainerElement.unbind('keyup');
74
    });
75

76
    it('should open on click', () => {
77
      initDropDown.call(this, false);
78
      expect(this.dropdownContainerElement).not.toHaveClass('open');
79
      this.dropdownButtonElement.click();
80 81 82
      expect(this.dropdownContainerElement).toHaveClass('open');
    });

83 84
    describe('that is open', () => {
      beforeEach(() => {
85
        initDropDown.call(this, false, false);
86
        this.dropdownButtonElement.click();
87
      });
88

89
      it('should select a following item on DOWN keypress', () => {
90
        expect($(FOCUSED_ITEM_SELECTOR, this.$dropdownMenuElement).length).toBe(0);
91
        const randomIndex = (Math.floor(Math.random() * (this.projectsData.length - 1)) + 0);
92
        navigateWithKeys('down', randomIndex, () => {
93 94
          expect($(FOCUSED_ITEM_SELECTOR, this.$dropdownMenuElement).length).toBe(1);
          expect($(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, this.$dropdownMenuElement)).toHaveClass('is-focused');
95
        });
96 97
      });

98
      it('should select a previous item on UP keypress', () => {
99
        expect($(FOCUSED_ITEM_SELECTOR, this.$dropdownMenuElement).length).toBe(0);
100
        navigateWithKeys('down', (this.projectsData.length - 1), () => {
101
          expect($(FOCUSED_ITEM_SELECTOR, this.$dropdownMenuElement).length).toBe(1);
102
          const randomIndex = (Math.floor(Math.random() * (this.projectsData.length - 2)) + 0);
103
          navigateWithKeys('up', randomIndex, () => {
104 105
            expect($(FOCUSED_ITEM_SELECTOR, this.$dropdownMenuElement).length).toBe(1);
            expect($(`${ITEM_SELECTOR}:eq(${((this.projectsData.length - 2) - randomIndex)}) a`, this.$dropdownMenuElement)).toHaveClass('is-focused');
106
          });
107 108 109
        });
      });

110
      it('should click the selected item on ENTER keypress', () => {
111
        expect(this.dropdownContainerElement).toHaveClass('open');
112
        const randomIndex = Math.floor(Math.random() * (this.projectsData.length - 1)) + 0;
113
        navigateWithKeys('down', randomIndex, () => {
Bryce Johnson committed
114
          spyOn(gl.utils, 'visitUrl').and.stub();
115 116
          navigateWithKeys('enter', null, () => {
            expect(this.dropdownContainerElement).not.toHaveClass('open');
117
            const link = $(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, this.$dropdownMenuElement);
118
            expect(link).toHaveClass('is-active');
119
            const linkedLocation = link.attr('href');
Bryce Johnson committed
120
            if (linkedLocation && linkedLocation !== '#') expect(gl.utils.visitUrl).toHaveBeenCalledWith(linkedLocation);
121
          });
122 123 124
        });
      });

125 126 127 128 129 130 131 132
      it('should close on ESC keypress', () => {
        expect(this.dropdownContainerElement).toHaveClass('open');
        this.dropdownContainerElement.trigger({
          type: 'keyup',
          which: ARROW_KEYS.ESC,
          keyCode: ARROW_KEYS.ESC
        });
        expect(this.dropdownContainerElement).not.toHaveClass('open');
133 134
      });
    });
135 136 137 138 139 140 141

    describe('opened and waiting for a remote callback', () => {
      beforeEach(() => {
        initDropDown.call(this, true, true);
        this.dropdownButtonElement.click();
      });

Clement Ho committed
142 143 144 145 146 147 148 149
      it('should show loading indicator while search results are being fetched by backend', () => {
        const dropdownMenu = document.querySelector('.dropdown-menu');

        expect(dropdownMenu.className.indexOf('is-loading') !== -1).toEqual(true);
        remoteCallback();
        expect(dropdownMenu.className.indexOf('is-loading') !== -1).toEqual(false);
      });

150
      it('should not focus search input while remote task is not complete', () => {
151 152 153 154 155
        expect($(document.activeElement)).not.toEqual($(SEARCH_INPUT_SELECTOR));
        remoteCallback();
        expect($(document.activeElement)).toEqual($(SEARCH_INPUT_SELECTOR));
      });

156
      it('should focus search input after remote task is complete', () => {
157 158 159 160
        remoteCallback();
        expect($(document.activeElement)).toEqual($(SEARCH_INPUT_SELECTOR));
      });

161
      it('should focus on input when opening for the second time', () => {
162 163 164 165 166 167 168 169 170 171 172 173
        remoteCallback();
        this.dropdownContainerElement.trigger({
          type: 'keyup',
          which: ARROW_KEYS.ESC,
          keyCode: ARROW_KEYS.ESC
        });
        this.dropdownButtonElement.click();
        expect($(document.activeElement)).toEqual($(SEARCH_INPUT_SELECTOR));
      });
    });

    describe('input focus with array data', () => {
174
      it('should focus input when passing array data to drop down', () => {
175 176 177 178 179
        initDropDown.call(this, false, true);
        this.dropdownButtonElement.click();
        expect($(document.activeElement)).toEqual($(SEARCH_INPUT_SELECTOR));
      });
    });
180 181

    it('should still have input value on close and restore', () => {
182
      const $searchInput = $(SEARCH_INPUT_SELECTOR);
183 184 185 186 187 188 189 190 191 192 193 194
      initDropDown.call(this, false, true);
      $searchInput
        .trigger('focus')
        .val('g')
        .trigger('input');
      expect($searchInput.val()).toEqual('g');
      this.dropdownButtonElement.trigger('hidden.bs.dropdown');
      $searchInput
        .trigger('blur')
        .trigger('focus');
      expect($searchInput.val()).toEqual('g');
    });
195
  });
196
})();