component specs

app/assets/javascripts/ide/components/merge_requests/dropdown.vue

@@ -21,6 +21,9 @@ export default {
     createdMergeRequestLength() {
       return this.createdData.mergeRequests.length;
     },
+    assignedMergeRequestLength() {
+      return this.assignedData.mergeRequests.length;
+    },
   },
 };
 </script>
@@ -47,7 +50,7 @@ export default {
         <template slot="title">
           {{ __('Assigned to me') }}
           <span class="badge badge-pill">
-            {{ assignedData.mergeRequests.length }}
+            {{ assignedMergeRequestLength }}
           </span>
         </template>
         <list

app/assets/javascripts/ide/components/merge_requests/list.vue

@@ -53,7 +53,6 @@ export default {
   },
   methods: {
     ...mapActions('mergeRequests', ['fetchMergeRequests', 'openMergeRequest']),
-    ...mapActions(['closeAllFiles']),
     loadMergeRequests() {
       this.fetchMergeRequests({ type: this.type, search: this.search });
     },

spec/javascripts/ide/components/merge_requests/dropdown_spec.js

+import Vue from 'vue';
+import { createStore } from '~/ide/stores';
+import Dropdown from '~/ide/components/merge_requests/dropdown.vue';
+import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper';
+import { mergeRequests } from '../../mock_data';
+
+describe('IDE merge requests dropdown', () => {
+  const Component = Vue.extend(Dropdown);
+  let vm;
+
+  beforeEach(() => {
+    const store = createStore();
+
+    vm = createComponentWithStore(Component, store, { show: false }).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('does not render tabs when show is false', () => {
+    expect(vm.$el.querySelector('.nav-links')).toBe(null);
+  });
+
+  describe('when show is true', () => {
+    beforeEach(done => {
+      vm.show = true;
+      vm.$store.state.mergeRequests.assigned.mergeRequests.push(mergeRequests[0]);
+
+      vm.$nextTick(done);
+    });
+
+    it('renders tabs', () => {
+      expect(vm.$el.querySelector('.nav-links')).not.toBe(null);
+    });
+
+    it('renders count for assigned & created data', () => {
+      expect(vm.$el.querySelector('.nav-links a').textContent).toContain('Created by me');
+      expect(vm.$el.querySelector('.nav-links a .badge').textContent).toContain('0');
+
+      expect(vm.$el.querySelectorAll('.nav-links a')[1].textContent).toContain('Assigned to me');
+      expect(
+        vm.$el.querySelectorAll('.nav-links a')[1].querySelector('.badge').textContent,
+      ).toContain('1');
+    });
+  });
+});

spec/javascripts/ide/components/merge_requests/item_spec.js

+import Vue from 'vue';
+import Item from '~/ide/components/merge_requests/item.vue';
+import mountCompontent from '../../../helpers/vue_mount_component_helper';
+
+describe('IDE merge request item', () => {
+  const Component = Vue.extend(Item);
+  let vm;
+
+  beforeEach(() => {
+    vm = mountCompontent(Component, {
+      item: {
+        iid: 1,
+        projectPathWithNamespace: 'gitlab-org/gitlab-ce',
+        title: 'Merge request title',
+      },
+      currentId: '1',
+      currentProjectId: 'gitlab-org/gitlab-ce',
+    });
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders merge requests data', () => {
+    expect(vm.$el.textContent).toContain('Merge request title');
+    expect(vm.$el.textContent).toContain('gitlab-org/gitlab-ce!1');
+  });
+
+  it('renders icon if ID matches currentId', () => {
+    expect(vm.$el.querySelector('.ic-mobile-issue-close')).not.toBe(null);
+  });
+
+  it('does not render icon if ID does not match currentId', done => {
+    vm.currentId = '2';
+
+    vm.$nextTick(() => {
+      expect(vm.$el.querySelector('.ic-mobile-issue-close')).toBe(null);
+
+      done();
+    });
+  });
+
+  it('does not render icon if project ID does not match', done => {
+    vm.currentProjectId = 'test/test';
+
+    vm.$nextTick(() => {
+      expect(vm.$el.querySelector('.ic-mobile-issue-close')).toBe(null);
+
+      done();
+    });
+  });
+
+  it('emits click event on click', () => {
+    spyOn(vm, '$emit');
+
+    vm.$el.click();
+
+    expect(vm.$emit).toHaveBeenCalledWith('click', vm.item);
+  });
+});

spec/javascripts/ide/components/merge_requests/list_spec.js

+import Vue from 'vue';
+import store from '~/ide/stores';
+import List from '~/ide/components/merge_requests/list.vue';
+import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper';
+import { mergeRequests } from '../../mock_data';
+import { resetStore } from '../../helpers';
+
+describe('IDE merge requests list', () => {
+  const Component = Vue.extend(List);
+  let vm;
+
+  beforeEach(() => {
+    vm = createComponentWithStore(Component, store, {
+      type: 'created',
+      emptyText: 'empty text',
+    });
+
+    spyOn(vm, 'fetchMergeRequests');
+
+    vm.$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+
+    resetStore(vm.$store);
+  });
+
+  it('calls fetch on mounted', () => {
+    expect(vm.fetchMergeRequests).toHaveBeenCalledWith({
+      type: 'created',
+      search: '',
+    });
+  });
+
+  it('renders loading icon', done => {
+    vm.$store.state.mergeRequests.created.isLoading = true;
+
+    vm.$nextTick(() => {
+      expect(vm.$el.querySelector('.loading-container')).not.toBe(null);
+
+      done();
+    });
+  });
+
+  it('renders empty text when no merge requests exist', () => {
+    expect(vm.$el.textContent).toContain('empty text');
+  });
+
+  it('renders no search results text when search is not empty', done => {
+    vm.search = 'testing';
+
+    vm.$nextTick(() => {
+      expect(vm.$el.textContent).toContain('No merge requests found');
+
+      done();
+    });
+  });
+
+  describe('with merge requests', () => {
+    beforeEach(done => {
+      vm.$store.state.mergeRequests.created.mergeRequests.push({
+        ...mergeRequests[0],
+        projectPathWithNamespace: 'gitlab-org/gitlab-ce',
+      });
+
+      vm.$nextTick(done);
+    });
+
+    it('renders list', () => {
+      expect(vm.$el.querySelectorAll('li').length).toBe(1);
+      expect(vm.$el.querySelector('li').textContent).toContain(mergeRequests[0].title);
+    });
+
+    it('calls openMergeRequest when clicking merge request', done => {
+      spyOn(vm, 'openMergeRequest');
+      vm.$el.querySelector('li button').click();
+
+      vm.$nextTick(() => {
+        expect(vm.openMergeRequest).toHaveBeenCalledWith({
+          projectPath: 'gitlab-org/gitlab-ce',
+          id: 1,
+        });
+
+        done();
+      });
+    });
+  });
+
+  describe('focusSearch', () => {
+    it('focuses search input when loading is false', done => {
+      spyOn(vm.$refs.searchInput, 'focus');
+
+      vm.$store.state.mergeRequests.created.isLoading = false;
+      vm.focusSearch();
+
+      vm.$nextTick(() => {
+        expect(vm.$refs.searchInput.focus).toHaveBeenCalled();
+
+        done();
+      });
+    });
+  });
+
+  describe('searchMergeRequests', () => {
+    beforeEach(() => {
+      spyOn(vm, 'loadMergeRequests');
+
+      jasmine.clock().install();
+    });
+
+    afterEach(() => {
+      jasmine.clock().uninstall();
+    });
+
+    it('calls loadMergeRequests on input in search field', () => {
+      const event = new Event('input');
+
+      vm.$el.querySelector('input').dispatchEvent(event);
+
+      jasmine.clock().tick(300);
+
+      expect(vm.loadMergeRequests).toHaveBeenCalled();
+    });
+  });
+});