spec for label select

app/assets/javascripts/boards/components/board_form.vue

@@ -234,7 +234,6 @@ export default {
 
           <board-labels-select
             :board="board"
-            :selected="board.labels"
             title="Labels"
             :can-edit="canAdminBoard"
             :labels-path="labelsPath"

app/assets/javascripts/boards/components/labels_select.vue

@@ -14,30 +14,27 @@ export default {
       type: String,
       required: true,
     },
-    value: {
-      type: Array,
-      required: false,
-    },
     canEdit: {
       type: Boolean,
       required: false,
       default: false,
     },
-    selected: {
-      type: Array,
-      required: true,
-    },
   },
   components: {
     loadingIcon,
   },
   computed: {
     labelIds() {
-      return this.selected.map(label => label.id).join(',');
+      return this.board.labels.map(label => label.id);
+    },
+    isEmpty() {
+      return this.board.labels.length === 0;
     },
   },
   mounted() {
-    new LabelsSelect();
+    new LabelsSelect(this.$refs.dropdownButton, {
+      handleClick: this.handleClick,
+    });
   },
   methods: {
     labelStyle(label) {
@@ -46,6 +43,22 @@ export default {
         backgroundColor: label.color,
       };
     },
+    handleClick(label) {
+      if (label.isAny) {
+        this.board.labels = [];
+      } else if (!this.board.labels.find(l => l.id === label.id)) {
+        this.board.labels.push(new ListLabel({
+          id: label.id,
+          title: label.title,
+          color: label.color[0],
+          textColor: label.text_color,
+        }));
+      } else {
+        let labels = this.board.labels;
+        labels = labels.filter(selected => selected.id !== label.id);
+        this.board.labels = labels;
+      }
+    }
   },
 };
 </script>
@@ -64,10 +77,10 @@ export default {
     </div>
     <div class="value issuable-show-labels">
       <span
-        v-if="board.labels.length === 0"
+        v-if="isEmpty"
         class="text-secondary"
       >
-        Any label
+        Any Label
       </span>
       <a
         v-else
@@ -96,6 +109,7 @@ export default {
       >
       <div class="dropdown">
         <button
+          ref="dropdownButton"
           :data-labels="labelsPath"
           class="dropdown-menu-toggle wide js-label-select js-multiselect js-extra-options js-board-config-modal"
           data-field-name="label_id[]"

app/assets/javascripts/labels_select.js

@@ -7,7 +7,7 @@ import DropdownUtils from './filtered_search/dropdown_utils';
 
 (function() {
   this.LabelsSelect = (function() {
-    function LabelsSelect(els) {
+    function LabelsSelect(els, options = {}) {
       var _this, $els;
       _this = this;
 
@@ -57,6 +57,7 @@ import DropdownUtils from './filtered_search/dropdown_utils';
           labelHTMLTemplate = _.template('<% _.each(labels, function(label){ %> <a href="<%- ["",issueURLSplit[1], issueURLSplit[2],""].join("/") %>issues?label_name[]=<%- encodeURIComponent(label.title) %>"> <span class="label has-tooltip color-label" title="<%- label.description %>" style="background-color: <%- label.color %>; color: <%- label.text_color %>;"> <%- label.title %> </span> </a> <% }); %>');
           labelNoneHTMLTemplate = '<span class="no-value">None</span>';
         }
+        const handleClick = options.handleClick;
 
         $sidebarLabelTooltip.tooltip();
 
@@ -315,9 +316,9 @@ import DropdownUtils from './filtered_search/dropdown_utils';
           },
           multiSelect: $dropdown.hasClass('js-multiselect'),
           vue: $dropdown.hasClass('js-issue-board-sidebar'),
-          clicked: function(options) {
-            const { $el, e, isMarking } = options;
-            const label = options.selectedObj;
+          clicked: function(clickEvent) {
+            const { $el, e, isMarking } = clickEvent;
+            const label = clickEvent.selectedObj;
 
             var isIssueIndex, isMRIndex, page, boardsModel;
             var fadeOutLoader = () => {
@@ -390,21 +391,8 @@ import DropdownUtils from './filtered_search/dropdown_utils';
                 .then(fadeOutLoader)
                 .catch(fadeOutLoader);
             }
-            else if ($dropdown.hasClass('js-board-config-modal')) {
-              if (label.isAny) {
-                gl.issueBoards.BoardsStore.boardConfig.labels = [];
-              } else if ($el.hasClass('is-active')) {
-                gl.issueBoards.BoardsStore.boardConfig.labels.push(new ListLabel({
-                  id: label.id,
-                  title: label.title,
-                  color: label.color[0],
-                  textColor: label.text_color || '#fff',
-                }));
-              } else {
-                let labels = gl.issueBoards.BoardsStore.boardConfig.labels;
-                labels = labels.filter(selected => selected.id !== label.id);
-                gl.issueBoards.BoardsStore.boardConfig.labels = labels;
-              }
+            else if (handleClick) {
+              handleClick(label);
             }
             else {
               if ($dropdown.hasClass('js-multiselect')) {

spec/javascripts/boards/components/labels_select_spec.js

+/* global IssuableContext */
+/* global boardsMockInterceptor */
+/* global BoardService */
+
+import Vue from 'vue';
+import '~/labels_select';
+import LabelsSelect from '~/boards/components/labels_select.vue';
+import '~/issuable_context';
+import '../mock_data';
+
+let vm;
+
+function selectedText() {
+  return vm.$el.querySelector('.value').innerText.trim();
+}
+
+function activeDropdownItem(index) {
+  const items = document.querySelectorAll('.is-active');
+  if (!items[index]) return '';
+  return items[index].innerText.trim();
+}
+
+const label = {
+  id: '1',
+  title: 'Testing',
+  color: 'red',
+  description: 'testing;',
+};
+
+const label2 = {
+  id: 2,
+  title: 'Still Testing',
+  color: 'red',
+  description: 'testing;',
+};
+
+describe('LabelsSelect', () => {
+  beforeEach((done) => {
+    setFixtures('<div class="test-container"></div>');
+
+    const deferred = new jQuery.Deferred();
+    spyOn($, 'ajax').and.returnValue(deferred);
+    deferred.resolve([
+      label,
+      label2,
+    ]);
+
+    // eslint-disable-next-line no-new
+    new IssuableContext();
+
+    const propsData = {
+      board: {
+        labels: [],
+      },
+      canEdit: true,
+      labelsPath: '/some/path',
+    };
+
+    const Component = Vue.extend(LabelsSelect);
+    vm = new Component({
+      propsData,
+    }).$mount('.test-container');
+
+    Vue.nextTick(done);
+  });
+
+  describe('canEdit false', () => {
+
+  });
+
+  describe('canEdit', () => {
+    it('shows edit link', () => {
+
+    });
+  });
+
+  describe('selected', () => {
+    it('shows Any Label', () => {
+      expect(selectedText()).toContain('Any Label');
+    });
+
+    it('shows single label', (done) => {
+      vm.board.labels = [label];
+      Vue.nextTick(() => {
+        expect(selectedText()).toContain(label.title);
+        done();
+      });
+    });
+
+    it('shows multiple labels', (done) => {
+      vm.board.labels = [label, label2];
+      Vue.nextTick(() => {
+        expect(selectedText()).toContain(label.title);
+        expect(selectedText()).toContain(label2.title);
+        done();
+      });
+    });
+  });
+
+  describe('clicking dropdown items', () => {
+    it('sets No labels', (done) => {
+      vm.board.labels = [label];
+      document.querySelector('.edit-link').click();
+
+      setTimeout(() => {
+        document.querySelectorAll('li a')[0].click();
+      });
+
+      setTimeout(() => {
+        expect(activeDropdownItem(0)).toEqual('Any Label');
+        expect(vm.board.labels).toEqual([]);
+        done();
+      });
+    });
+
+    it('sets value', (done) => {
+      document.querySelector('.edit-link').click();
+
+      setTimeout(() => {
+        document.querySelectorAll('li a')[1].click();
+      });
+
+      setTimeout(() => {
+        expect(activeDropdownItem(0)).toEqual(label.title);
+        expect(vm.board.labels[0].title).toEqual(label.title);
+        done();
+      });
+    });
+  });
+});