add assignee select spec

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

@@ -6,7 +6,7 @@ import PopupDialog from '~/vue_shared/components/popup_dialog.vue';
 import BoardMilestoneSelect from './milestone_select.vue';
 import BoardWeightSelect from './weight_select.vue';
 import BoardLabelsSelect from './labels_select.vue';
-import UserSelect from './user_select.vue';
+import AssigneeSelect from './assignee_select.vue';
 
 window.gl = window.gl || {};
 window.gl.issueBoards = window.gl.issueBoards || {};
@@ -69,11 +69,11 @@ export default {
     };
   },
   components: {
+    AssigneeSelect,
     BoardLabelsSelect,
     BoardMilestoneSelect,
     BoardWeightSelect,
     PopupDialog,
-    UserSelect,
   },
   computed: {
     isNewForm() {
@@ -247,7 +247,7 @@ export default {
               :labels-path="labelsPath"
             />
 
-            <user-select
+            <assignee-select
               any-user-text="Any assignee"
               :board="board"
               field-name="assignee_id"

spec/javascripts/boards/components/assignee_select_spec.js

+/* global boardsMockInterceptor */
+/* global boardObj */
+/* global BoardService */
+/* global mockBoardService */
+/* global IssuableContext */
+
+import Vue from 'vue';
+import AssigneeSelect from '~/boards/components/assignee_select.vue';
+import '~/boards/services/board_service';
+import '~/boards/stores/boards_store';
+import '~/issuable_context';
+
+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 assignee = {
+  id: 1,
+  name: 'first assignee',
+};
+
+const assignee2 = {
+  id: 2,
+  name: 'second assignee',
+};
+
+describe('Assignee select component', () => {
+  beforeEach((done) => {
+    setFixtures('<div class="test-container"></div>');
+    gl.boardService = mockBoardService();
+    gl.issueBoards.BoardsStore.create();
+
+    // eslint-disable-next-line no-new
+    new IssuableContext();
+
+    const Component = Vue.extend(AssigneeSelect);
+    vm = new Component({
+      propsData: {
+        board: boardObj,
+        assigneePath: '/test/issue-boards/assignees.json',
+        canEdit: true,
+        label: 'Assignee',
+        selected: {},
+        fieldName: 'assignee_id',
+        anyUserText: 'Any assignee',
+      },
+    }).$mount('.test-container');
+
+    setTimeout(done);
+  });
+
+  describe('canEdit', () => {
+    it('hides Edit button', (done) => {
+      vm.canEdit = false;
+      Vue.nextTick(() => {
+        expect(document.querySelector('.edit-link')).toBeFalsy();
+        done();
+      });
+    });
+
+    it('shows Edit button if true', (done) => {
+      vm.canEdit = true;
+      Vue.nextTick(() => {
+        expect(document.querySelector('.edit-link')).toBeTruthy();
+        done();
+      });
+    });
+  });
+
+  describe('selected value', () => {
+    it('defaults to Any Assignee', () => {
+      expect(selectedText()).toContain('Any assignee');
+    });
+
+    it('shows selected assignee', (done) => {
+      vm.selected = assignee;
+      Vue.nextTick(() => {
+        expect(selectedText()).toContain('first assignee');
+        done();
+      });
+    });
+
+    describe('clicking dropdown items', () => {
+      beforeEach(() => {
+        const deferred = new jQuery.Deferred();
+        spyOn($, 'ajax').and.returnValue(deferred.resolve([
+          assignee,
+          assignee2,
+        ]));
+      });
+
+      it('sets assignee', (done) => {
+        vm.$el.querySelector('.edit-link').click();
+
+        setTimeout(() => {
+          vm.$el.querySelectorAll('li a')[2].click();
+        });
+
+        setTimeout(() => {
+          expect(activeDropdownItem(0)).toEqual('second assignee');
+          expect(vm.board.assignee).toEqual(assignee2);
+          done();
+        });
+      });
+    });
+  });
+});

spec/javascripts/boards/milestone_select_spec.js

@@ -6,10 +6,7 @@
 
 import Vue from 'vue';
 import MilestoneSelect from '~/boards/components/milestone_select.vue';
-import '~/boards/services/board_service';
-import '~/boards/stores/boards_store';
 import '~/issuable_context';
-import './mock_data';
 
 let vm;
 
@@ -38,8 +35,6 @@ const milestone2 = {
 describe('Milestone select component', () => {
   beforeEach((done) => {
     setFixtures('<div class="test-container"></div>');
-    gl.boardService = mockBoardService();
-    gl.issueBoards.BoardsStore.create();
 
     // eslint-disable-next-line no-new
     new IssuableContext();