Merge branch 'master' into feature/sm/35954-create-kubernetes-cluster-on-gke-from-k8s-service

13 files changed, 706 insertions, 12 deletions

diff --git a/spec/javascripts/fixtures/merge_requests.rb b/spec/javascripts/fixtures/merge_requests.rb
index 4bc2205e642..3fd16d76f51 100644
--- a/spec/javascripts/fixtures/merge_requests.rb
+++ b/spec/javascripts/fixtures/merge_requests.rb
@@ -41,6 +41,12 @@ describe Projects::MergeRequestsController, '(JavaScript fixtures)', type: :cont
     remove_repository(project)
   end
 
+  it 'merge_requests/merge_request_of_current_user.html.raw' do |example|
+    merge_request.update(author: admin)
+
+    render_merge_request(example.description, merge_request)
+  end
+
   it 'merge_requests/merge_request_with_task_list.html.raw' do |example|
     create(:ci_build, :pending, pipeline: pipeline)
 
diff --git a/spec/javascripts/notes/stores/helpers.js b/spec/javascripts/helpers/vuex_action_helper.js
index 2d386fe1da5..2d386fe1da5 100644
--- a/spec/javascripts/notes/stores/helpers.js
+++ b/spec/javascripts/helpers/vuex_action_helper.js
diff --git a/spec/javascripts/merge_request_spec.js b/spec/javascripts/merge_request_spec.js
index 6ff42e2378d..3ab901da6b6 100644
--- a/spec/javascripts/merge_request_spec.js
+++ b/spec/javascripts/merge_request_spec.js
@@ -58,5 +58,44 @@ import IssuablesHelper from '~/helpers/issuables_helper';
         expect(CloseReopenReportToggle.prototype.initDroplab).toHaveBeenCalled();
       });
     });
+
+    describe('hideCloseButton', () => {
+      describe('merge request of another user', () => {
+        beforeEach(() => {
+          loadFixtures('merge_requests/merge_request_with_task_list.html.raw');
+          this.el = document.querySelector('.merge-request .issuable-actions');
+          const merge = new MergeRequest();
+          merge.hideCloseButton();
+        });
+
+        it('hides the dropdown close item and selects the next item', () => {
+          const closeItem = this.el.querySelector('li.close-item');
+          const smallCloseItem = this.el.querySelector('.js-close-item');
+          const reportItem = this.el.querySelector('li.report-item');
+
+          expect(closeItem).toHaveClass('hidden');
+          expect(smallCloseItem).toHaveClass('hidden');
+          expect(reportItem).toHaveClass('droplab-item-selected');
+          expect(reportItem).not.toHaveClass('hidden');
+        });
+      });
+
+      describe('merge request of current_user', () => {
+        beforeEach(() => {
+          loadFixtures('merge_requests/merge_request_of_current_user.html.raw');
+          this.el = document.querySelector('.merge-request .issuable-actions');
+          const merge = new MergeRequest();
+          merge.hideCloseButton();
+        });
+
+        it('hides the close button', () => {
+          const closeButton = this.el.querySelector('.btn-close');
+          const smallCloseItem = this.el.querySelector('.js-close-item');
+
+          expect(closeButton).toHaveClass('hidden');
+          expect(smallCloseItem).toHaveClass('hidden');
+        });
+      });
+    });
   });
 }).call(window);
diff --git a/spec/javascripts/notes/components/issue_comment_form_spec.js b/spec/javascripts/notes/components/issue_comment_form_spec.js
index 1c8b1b98242..3f659af5c3b 100644
--- a/spec/javascripts/notes/components/issue_comment_form_spec.js
+++ b/spec/javascripts/notes/components/issue_comment_form_spec.js
@@ -33,6 +33,30 @@ describe('issue_comment_form component', () => {
       expect(vm.$el.querySelector('.timeline-icon .user-avatar-link').getAttribute('href')).toEqual(userDataMock.path);
     });
 
+    describe('handleSave', () => {
+      it('should request to save note when note is entered', () => {
+        vm.note = 'hello world';
+        spyOn(vm, 'saveNote').and.returnValue(new Promise(() => {}));
+        spyOn(vm, 'resizeTextarea');
+        spyOn(vm, 'stopPolling');
+
+        vm.handleSave();
+        expect(vm.isSubmitting).toEqual(true);
+        expect(vm.note).toEqual('');
+        expect(vm.saveNote).toHaveBeenCalled();
+        expect(vm.stopPolling).toHaveBeenCalled();
+        expect(vm.resizeTextarea).toHaveBeenCalled();
+      });
+
+      it('should toggle issue state when no note', () => {
+        spyOn(vm, 'toggleIssueState');
+
+        vm.handleSave();
+
+        expect(vm.toggleIssueState).toHaveBeenCalled();
+      });
+    });
+
     describe('textarea', () => {
       it('should render textarea with placeholder', () => {
         expect(
@@ -40,6 +64,22 @@ describe('issue_comment_form component', () => {
         ).toEqual('Write a comment or drag your files here...');
       });
 
+      it('should make textarea disabled while requesting', (done) => {
+        const $submitButton = $(vm.$el.querySelector('.js-comment-submit-button'));
+        vm.note = 'hello world';
+        spyOn(vm, 'stopPolling');
+        spyOn(vm, 'saveNote').and.returnValue(new Promise(() => {}));
+
+        vm.$nextTick(() => { // Wait for vm.note change triggered. It should enable $submitButton.
+          $submitButton.trigger('click');
+
+          vm.$nextTick(() => { // Wait for vm.isSubmitting triggered. It should disable textarea.
+            expect(vm.$el.querySelector('.js-main-target-form textarea').disabled).toBeTruthy();
+            done();
+          });
+        });
+      });
+
       it('should support quick actions', () => {
         expect(
           vm.$el.querySelector('.js-main-target-form textarea').getAttribute('data-supports-quick-actions'),
diff --git a/spec/javascripts/notes/stores/actions_spec.js b/spec/javascripts/notes/stores/actions_spec.js
index 2b2219dcf0c..3d1ca870ca4 100644
--- a/spec/javascripts/notes/stores/actions_spec.js
+++ b/spec/javascripts/notes/stores/actions_spec.js
@@ -1,5 +1,5 @@
 import * as actions from '~/notes/stores/actions';
-import testAction from './helpers';
+import testAction from '../../helpers/vuex_action_helper';
 import { discussionMock, notesDataMock, userDataMock, issueDataMock, individualNote } from '../mock_data';
 
 describe('Actions Notes Store', () => {
diff --git a/spec/javascripts/registry/components/app_spec.js b/spec/javascripts/registry/components/app_spec.js
new file mode 100644
index 00000000000..43e7d9e1224
--- /dev/null
+++ b/spec/javascripts/registry/components/app_spec.js
@@ -0,0 +1,122 @@
+import Vue from 'vue';
+import registry from '~/registry/components/app.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
+import { reposServerResponse } from '../mock_data';
+
+describe('Registry List', () => {
+  let vm;
+  let Component;
+
+  beforeEach(() => {
+    Component = Vue.extend(registry);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('with data', () => {
+    const interceptor = (request, next) => {
+      next(request.respondWith(JSON.stringify(reposServerResponse), {
+        status: 200,
+      }));
+    };
+
+    beforeEach(() => {
+      Vue.http.interceptors.push(interceptor);
+      vm = mountComponent(Component, { endpoint: 'foo' });
+    });
+
+    afterEach(() => {
+      Vue.http.interceptors = _.without(Vue.http.interceptors, interceptor);
+    });
+
+    it('should render a list of repos', (done) => {
+      setTimeout(() => {
+        expect(vm.$store.state.repos.length).toEqual(reposServerResponse.length);
+
+        Vue.nextTick(() => {
+          expect(
+            vm.$el.querySelectorAll('.container-image').length,
+          ).toEqual(reposServerResponse.length);
+          done();
+        });
+      }, 0);
+    });
+
+    describe('delete repository', () => {
+      it('should be possible to delete a repo', (done) => {
+        setTimeout(() => {
+          Vue.nextTick(() => {
+            expect(vm.$el.querySelector('.container-image-head .js-remove-repo')).toBeDefined();
+            done();
+          });
+        }, 0);
+      });
+    });
+
+    describe('toggle repository', () => {
+      it('should open the container', (done) => {
+        setTimeout(() => {
+          Vue.nextTick(() => {
+            vm.$el.querySelector('.js-toggle-repo').click();
+            Vue.nextTick(() => {
+              expect(vm.$el.querySelector('.js-toggle-repo i').className).toEqual('fa fa-chevron-up');
+              done();
+            });
+          });
+        }, 0);
+      });
+    });
+  });
+
+  describe('without data', () => {
+    const interceptor = (request, next) => {
+      next(request.respondWith(JSON.stringify([]), {
+        status: 200,
+      }));
+    };
+
+    beforeEach(() => {
+      Vue.http.interceptors.push(interceptor);
+      vm = mountComponent(Component, { endpoint: 'foo' });
+    });
+
+    afterEach(() => {
+      Vue.http.interceptors = _.without(Vue.http.interceptors, interceptor);
+    });
+
+    it('should render empty message', (done) => {
+      setTimeout(() => {
+        expect(
+          vm.$el.querySelector('p').textContent.trim(),
+        ).toEqual('No container images stored for this project. Add one by following the instructions above.');
+        done();
+      }, 0);
+    });
+  });
+
+  describe('while loading data', () => {
+    const interceptor = (request, next) => {
+      next(request.respondWith(JSON.stringify(reposServerResponse), {
+        status: 200,
+      }));
+    };
+
+    beforeEach(() => {
+      Vue.http.interceptors.push(interceptor);
+      vm = mountComponent(Component, { endpoint: 'foo' });
+    });
+
+    afterEach(() => {
+      Vue.http.interceptors = _.without(Vue.http.interceptors, interceptor);
+    });
+
+    it('should render a loading spinner', (done) => {
+      Vue.nextTick(() => {
+        expect(vm.$el.querySelector('.fa-spinner')).not.toBe(null);
+        done();
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/registry/components/collapsible_container_spec.js b/spec/javascripts/registry/components/collapsible_container_spec.js
new file mode 100644
index 00000000000..5891921318a
--- /dev/null
+++ b/spec/javascripts/registry/components/collapsible_container_spec.js
@@ -0,0 +1,58 @@
+import Vue from 'vue';
+import collapsibleComponent from '~/registry/components/collapsible_container.vue';
+import store from '~/registry/stores';
+import { repoPropsData } from '../mock_data';
+
+describe('collapsible registry container', () => {
+  let vm;
+  let Component;
+
+  beforeEach(() => {
+    Component = Vue.extend(collapsibleComponent);
+    vm = new Component({
+      store,
+      propsData: {
+        repo: repoPropsData,
+      },
+    }).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('toggle', () => {
+    it('should be closed by default', () => {
+      expect(vm.$el.querySelector('.container-image-tags')).toBe(null);
+      expect(vm.$el.querySelector('.container-image-head i').className).toEqual('fa fa-chevron-right');
+    });
+
+    it('should be open when user clicks on closed repo', (done) => {
+      vm.$el.querySelector('.js-toggle-repo').click();
+      Vue.nextTick(() => {
+        expect(vm.$el.querySelector('.container-image-tags')).toBeDefined();
+        expect(vm.$el.querySelector('.container-image-head i').className).toEqual('fa fa-chevron-up');
+        done();
+      });
+    });
+
+    it('should be closed when the user clicks on an opened repo', (done) => {
+      vm.$el.querySelector('.js-toggle-repo').click();
+
+      Vue.nextTick(() => {
+        vm.$el.querySelector('.js-toggle-repo').click();
+        Vue.nextTick(() => {
+          expect(vm.$el.querySelector('.container-image-tags')).toBe(null);
+          expect(vm.$el.querySelector('.container-image-head i').className).toEqual('fa fa-chevron-right');
+          done();
+        });
+      });
+    });
+  });
+
+  describe('delete repo', () => {
+    it('should be possible to delete a repo', () => {
+      expect(vm.$el.querySelector('.js-remove-repo')).toBeDefined();
+    });
+  });
+});
diff --git a/spec/javascripts/registry/components/table_registry_spec.js b/spec/javascripts/registry/components/table_registry_spec.js
new file mode 100644
index 00000000000..6aa61afc445
--- /dev/null
+++ b/spec/javascripts/registry/components/table_registry_spec.js
@@ -0,0 +1,49 @@
+import Vue from 'vue';
+import tableRegistry from '~/registry/components/table_registry.vue';
+import store from '~/registry/stores';
+import { repoPropsData } from '../mock_data';
+
+describe('table registry', () => {
+  let vm;
+  let Component;
+
+  beforeEach(() => {
+    Component = Vue.extend(tableRegistry);
+    vm = new Component({
+      store,
+      propsData: {
+        repo: repoPropsData,
+      },
+    }).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('should render a table with the registry list', () => {
+    expect(
+      vm.$el.querySelectorAll('table tbody tr').length,
+    ).toEqual(repoPropsData.list.length);
+  });
+
+  it('should render registry tag', () => {
+    const textRendered = vm.$el.querySelector('.table tbody tr').textContent.trim().replace(/\s\s+/g, ' ');
+    expect(textRendered).toContain(repoPropsData.list[0].tag);
+    expect(textRendered).toContain(repoPropsData.list[0].shortRevision);
+    expect(textRendered).toContain(repoPropsData.list[0].layers);
+    expect(textRendered).toContain(repoPropsData.list[0].size);
+  });
+
+  it('should be possible to delete a registry', () => {
+    expect(
+      vm.$el.querySelector('.table tbody tr .js-delete-registry'),
+    ).toBeDefined();
+  });
+
+  describe('pagination', () => {
+    it('should be possible to change the page', () => {
+      expect(vm.$el.querySelector('.gl-pagination')).toBeDefined();
+    });
+  });
+});
diff --git a/spec/javascripts/registry/getters_spec.js b/spec/javascripts/registry/getters_spec.js
new file mode 100644
index 00000000000..3d989541881
--- /dev/null
+++ b/spec/javascripts/registry/getters_spec.js
@@ -0,0 +1,43 @@
+import * as getters from '~/registry/stores/getters';
+
+describe('Getters Registry Store', () => {
+  let state;
+
+  beforeEach(() => {
+    state = {
+      isLoading: false,
+      endpoint: '/root/empty-project/container_registry.json',
+      repos: [{
+        canDelete: true,
+        destroyPath: 'bar',
+        id: '134',
+        isLoading: false,
+        list: [],
+        location: 'foo',
+        name: 'gitlab-org/omnibus-gitlab/foo',
+        tagsPath: 'foo',
+      }, {
+        canDelete: true,
+        destroyPath: 'bar',
+        id: '123',
+        isLoading: false,
+        list: [],
+        location: 'foo',
+        name: 'gitlab-org/omnibus-gitlab',
+        tagsPath: 'foo',
+      }],
+    };
+  });
+
+  describe('isLoading', () => {
+    it('should return the isLoading property', () => {
+      expect(getters.isLoading(state)).toEqual(state.isLoading);
+    });
+  });
+
+  describe('repos', () => {
+    it('should return the repos', () => {
+      expect(getters.repos(state)).toEqual(state.repos);
+    });
+  });
+});
diff --git a/spec/javascripts/registry/mock_data.js b/spec/javascripts/registry/mock_data.js
new file mode 100644
index 00000000000..18600d00bff
--- /dev/null
+++ b/spec/javascripts/registry/mock_data.js
@@ -0,0 +1,122 @@
+export const defaultState = {
+  isLoading: false,
+  endpoint: '',
+  repos: [],
+};
+
+export const reposServerResponse = [
+  {
+    destroy_path: 'path',
+    id: '123',
+    location: 'location',
+    path: 'foo',
+    tags_path: 'tags_path',
+  },
+  {
+    destroy_path: 'path_',
+    id: '456',
+    location: 'location_',
+    path: 'bar',
+    tags_path: 'tags_path_',
+  },
+];
+
+export const registryServerResponse = [
+  {
+    name: 'centos7',
+    short_revision: 'b118ab5b0',
+    revision: 'b118ab5b0e90b7cb5127db31d5321ac14961d097516a8e0e72084b6cdc783b43',
+    size: 679,
+    layers: 19,
+    location: 'location',
+    created_at: 1505828744434,
+    destroy_path: 'path_',
+  },
+  {
+    name: 'centos6',
+    short_revision: 'b118ab5b0',
+    revision: 'b118ab5b0e90b7cb5127db31d5321ac14961d097516a8e0e72084b6cdc783b43',
+    size: 679,
+    layers: 19,
+    location: 'location',
+    created_at: 1505828744434,
+  }];
+
+export const parsedReposServerResponse = [
+  {
+    canDelete: true,
+    destroyPath: reposServerResponse[0].destroy_path,
+    id: reposServerResponse[0].id,
+    isLoading: false,
+    list: [],
+    location: reposServerResponse[0].location,
+    name: reposServerResponse[0].path,
+    tagsPath: reposServerResponse[0].tags_path,
+  },
+  {
+    canDelete: true,
+    destroyPath: reposServerResponse[1].destroy_path,
+    id: reposServerResponse[1].id,
+    isLoading: false,
+    list: [],
+    location: reposServerResponse[1].location,
+    name: reposServerResponse[1].path,
+    tagsPath: reposServerResponse[1].tags_path,
+  },
+];
+
+export const parsedRegistryServerResponse = [
+  {
+    tag: registryServerResponse[0].name,
+    revision: registryServerResponse[0].revision,
+    shortRevision: registryServerResponse[0].short_revision,
+    size: registryServerResponse[0].size,
+    layers: registryServerResponse[0].layers,
+    location: registryServerResponse[0].location,
+    createdAt: registryServerResponse[0].created_at,
+    destroyPath: registryServerResponse[0].destroy_path,
+    canDelete: true,
+  },
+  {
+    tag: registryServerResponse[1].name,
+    revision: registryServerResponse[1].revision,
+    shortRevision: registryServerResponse[1].short_revision,
+    size: registryServerResponse[1].size,
+    layers: registryServerResponse[1].layers,
+    location: registryServerResponse[1].location,
+    createdAt: registryServerResponse[1].created_at,
+    destroyPath: registryServerResponse[1].destroy_path,
+    canDelete: false,
+  },
+];
+
+export const repoPropsData = {
+  canDelete: true,
+  destroyPath: 'path',
+  id: '123',
+  isLoading: false,
+  list: [
+    {
+      tag: 'centos6',
+      revision: 'b118ab5b0e90b7cb5127db31d5321ac14961d097516a8e0e72084b6cdc783b43',
+      shortRevision: 'b118ab5b0',
+      size: 19,
+      layers: 10,
+      location: 'location',
+      createdAt: 1505828744434,
+      destroyPath: 'path',
+      canDelete: true,
+    },
+  ],
+  location: 'location',
+  name: 'foo',
+  tagsPath: 'path',
+  pagination: {
+    perPage: 5,
+    page: 1,
+    total: 13,
+    totalPages: 1,
+    nextPage: null,
+    previousPage: null,
+  },
+};
diff --git a/spec/javascripts/registry/stores/actions_spec.js b/spec/javascripts/registry/stores/actions_spec.js
new file mode 100644
index 00000000000..3c9da4f107b
--- /dev/null
+++ b/spec/javascripts/registry/stores/actions_spec.js
@@ -0,0 +1,85 @@
+import Vue from 'vue';
+import VueResource from 'vue-resource';
+import _ from 'underscore';
+import * as actions from '~/registry/stores/actions';
+import * as types from '~/registry/stores/mutation_types';
+import testAction from '../../helpers/vuex_action_helper';
+import {
+  defaultState,
+  reposServerResponse,
+  registryServerResponse,
+  parsedReposServerResponse,
+} from '../mock_data';
+
+Vue.use(VueResource);
+
+describe('Actions Registry Store', () => {
+  let interceptor;
+  let mockedState;
+
+  beforeEach(() => {
+    mockedState = defaultState;
+  });
+
+  describe('server requests', () => {
+    afterEach(() => {
+      Vue.http.interceptors = _.without(Vue.http.interceptors, interceptor);
+    });
+
+    describe('fetchRepos', () => {
+      beforeEach(() => {
+        interceptor = (request, next) => {
+          next(request.respondWith(JSON.stringify(reposServerResponse), {
+            status: 200,
+          }));
+        };
+
+        Vue.http.interceptors.push(interceptor);
+      });
+
+      it('should set receveived repos', (done) => {
+        testAction(actions.fetchRepos, null, mockedState, [
+          { type: types.TOGGLE_MAIN_LOADING },
+          { type: types.SET_REPOS_LIST, payload: reposServerResponse },
+        ], done);
+      });
+    });
+
+    describe('fetchList', () => {
+      beforeEach(() => {
+        interceptor = (request, next) => {
+          next(request.respondWith(JSON.stringify(registryServerResponse), {
+            status: 200,
+          }));
+        };
+
+        Vue.http.interceptors.push(interceptor);
+      });
+
+      it('should set received list', (done) => {
+        mockedState.repos = parsedReposServerResponse;
+
+        testAction(actions.fetchList, { repo: mockedState.repos[1] }, mockedState, [
+          { type: types.TOGGLE_REGISTRY_LIST_LOADING },
+          { type: types.SET_REGISTRY_LIST, payload: registryServerResponse },
+        ], done);
+      });
+    });
+  });
+
+  describe('setMainEndpoint', () => {
+    it('should commit set main endpoint', (done) => {
+      testAction(actions.setMainEndpoint, 'endpoint', mockedState, [
+        { type: types.SET_MAIN_ENDPOINT, payload: 'endpoint' },
+      ], done);
+    });
+  });
+
+  describe('toggleLoading', () => {
+    it('should commit toggle main loading', (done) => {
+      testAction(actions.toggleLoading, null, mockedState, [
+        { type: types.TOGGLE_MAIN_LOADING },
+      ], done);
+    });
+  });
+});
diff --git a/spec/javascripts/registry/stores/mutations_spec.js b/spec/javascripts/registry/stores/mutations_spec.js
new file mode 100644
index 00000000000..2e4c0659daa
--- /dev/null
+++ b/spec/javascripts/registry/stores/mutations_spec.js
@@ -0,0 +1,81 @@
+import mutations from '~/registry/stores/mutations';
+import * as types from '~/registry/stores/mutation_types';
+import {
+  defaultState,
+  reposServerResponse,
+  registryServerResponse,
+  parsedReposServerResponse,
+  parsedRegistryServerResponse,
+} from '../mock_data';
+
+describe('Mutations Registry Store', () => {
+  let mockState;
+  beforeEach(() => {
+    mockState = defaultState;
+  });
+
+  describe('SET_MAIN_ENDPOINT', () => {
+    it('should set the main endpoint', () => {
+      const expectedState = Object.assign({}, mockState, { endpoint: 'foo' });
+      mutations[types.SET_MAIN_ENDPOINT](mockState, 'foo');
+      expect(mockState).toEqual(expectedState);
+    });
+  });
+
+  describe('SET_REPOS_LIST', () => {
+    it('should set a parsed repository list', () => {
+      mutations[types.SET_REPOS_LIST](mockState, reposServerResponse);
+      expect(mockState.repos).toEqual(parsedReposServerResponse);
+    });
+  });
+
+  describe('TOGGLE_MAIN_LOADING', () => {
+    it('should set a parsed repository list', () => {
+      mutations[types.TOGGLE_MAIN_LOADING](mockState);
+      expect(mockState.isLoading).toEqual(true);
+    });
+  });
+
+  describe('SET_REGISTRY_LIST', () => {
+    it('should set a list of registries in a specific repository', () => {
+      mutations[types.SET_REPOS_LIST](mockState, reposServerResponse);
+      mutations[types.SET_REGISTRY_LIST](mockState, {
+        repo: mockState.repos[0],
+        resp: registryServerResponse,
+        headers: {
+          'x-per-page': 2,
+          'x-page': 1,
+          'x-total': 10,
+        },
+      });
+
+      expect(mockState.repos[0].list).toEqual(parsedRegistryServerResponse);
+      expect(mockState.repos[0].pagination).toEqual({
+        perPage: 2,
+        page: 1,
+        total: 10,
+        totalPages: NaN,
+        nextPage: NaN,
+        previousPage: NaN,
+      });
+    });
+  });
+
+  describe('TOGGLE_REGISTRY_LIST_LOADING', () => {
+    it('should toggle isLoading property for a specific repository', () => {
+      mutations[types.SET_REPOS_LIST](mockState, reposServerResponse);
+      mutations[types.SET_REGISTRY_LIST](mockState, {
+        repo: mockState.repos[0],
+        resp: registryServerResponse,
+        headers: {
+          'x-per-page': 2,
+          'x-page': 1,
+          'x-total': 10,
+        },
+      });
+
+      mutations[types.TOGGLE_REGISTRY_LIST_LOADING](mockState, mockState.repos[0]);
+      expect(mockState.repos[0].isLoading).toEqual(true);
+    });
+  });
+});
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
index 2422e844e97..c83b947579b 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
@@ -95,35 +95,84 @@ describe('MRWidgetReadyToMerge', () => {
       });
     });
 
+    describe('status', () => {
+      it('defaults to success', () => {
+        vm.mr.pipeline = true;
+        expect(vm.status).toEqual('success');
+      });
+
+      it('returns failed when MR has CI but also has an unknown status', () => {
+        vm.mr.hasCI = true;
+        expect(vm.status).toEqual('failed');
+      });
+
+      it('returns default when MR has no pipeline', () => {
+        expect(vm.status).toEqual('success');
+      });
+
+      it('returns pending when pipeline is active', () => {
+        vm.mr.pipeline = {};
+        vm.mr.isPipelineActive = true;
+        expect(vm.status).toEqual('pending');
+      });
+
+      it('returns failed when pipeline is failed', () => {
+        vm.mr.pipeline = {};
+        vm.mr.isPipelineFailed = true;
+        expect(vm.status).toEqual('failed');
+      });
+    });
+
     describe('mergeButtonClass', () => {
       const defaultClass = 'btn btn-sm btn-success accept-merge-request';
       const failedClass = `${defaultClass} btn-danger`;
       const inActionClass = `${defaultClass} btn-info`;
 
-      it('should return default class', () => {
+      it('defaults to success class', () => {
+        expect(vm.mergeButtonClass).toEqual(defaultClass);
+      });
+
+      it('returns success class for success status', () => {
         vm.mr.pipeline = true;
         expect(vm.mergeButtonClass).toEqual(defaultClass);
       });
 
-      it('should return failed class when MR has CI but also has an unknown status', () => {
+      it('returns info class for pending status', () => {
+        vm.mr.pipeline = {};
+        vm.mr.isPipelineActive = true;
+        expect(vm.mergeButtonClass).toEqual(inActionClass);
+      });
+
+      it('returns failed class for failed status', () => {
         vm.mr.hasCI = true;
         expect(vm.mergeButtonClass).toEqual(failedClass);
       });
+    });
 
-      it('should return default class when MR has no pipeline', () => {
-        expect(vm.mergeButtonClass).toEqual(defaultClass);
+    describe('status icon', () => {
+      it('defaults to tick icon', () => {
+        expect(vm.iconClass).toEqual('success');
       });
 
-      it('should return in action class when pipeline is active', () => {
+      it('shows tick for success status', () => {
+        vm.mr.pipeline = true;
+        expect(vm.iconClass).toEqual('success');
+      });
+
+      it('shows tick for pending status', () => {
         vm.mr.pipeline = {};
         vm.mr.isPipelineActive = true;
-        expect(vm.mergeButtonClass).toEqual(inActionClass);
+        expect(vm.iconClass).toEqual('success');
       });
 
-      it('should return failed class when pipeline is failed', () => {
-        vm.mr.pipeline = {};
-        vm.mr.isPipelineFailed = true;
-        expect(vm.mergeButtonClass).toEqual(failedClass);
+      it('shows x for failed status', () => {
+        vm.mr.hasCI = true;
+        expect(vm.iconClass).toEqual('failed');
+      });
+
+      it('shows x for merge not allowed', () => {
+        vm.mr.hasCI = true;
+        expect(vm.iconClass).toEqual('failed');
       });
     });
 
@@ -177,7 +226,7 @@ describe('MRWidgetReadyToMerge', () => {
         expect(vm.isMergeButtonDisabled).toBeTruthy();
       });
 
-      it('should return true when there vm instance is making request', () => {
+      it('should return true when the vm instance is making request', () => {
         vm.isMakingRequest = true;
         expect(vm.isMergeButtonDisabled).toBeTruthy();
       });