[ci skip] Adds tests to vuex and collapsibe component

Formats dates
Fixes clipboard button
Simplifies HTML

8 files changed, 389 insertions, 1 deletions

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/notes/stores/actions_spec.js b/spec/javascripts/notes/stores/actions_spec.js
index 72d362acb2f..4359899299f 100644
--- a/spec/javascripts/notes/stores/actions_spec.js
+++ b/spec/javascripts/notes/stores/actions_spec.js
@@ -1,6 +1,6 @@
 
 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..e69de29bb2d
--- /dev/null
+++ b/spec/javascripts/registry/components/app_spec.js
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..b9372f48965
--- /dev/null
+++ b/spec/javascripts/registry/components/collapsible_container_spec.js
@@ -0,0 +1,112 @@
+import Vue from 'vue';
+import collapsibleComponent from '~/registry/components/collapsible_container.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+describe('collapsible registry container', () => {
+  let vm;
+  let Component;
+  let mockData;
+
+  beforeEach(() => {
+    Component = Vue.extend(collapsibleComponent);
+    mockData = {
+      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',
+    };
+    vm = mountComponent(Component, { repo: mockData });
+  });
+
+  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();
+    });
+  });
+
+  describe('registry list', () => {
+    it('should render a table with the registry list', (done) => {
+      vm.$el.querySelector('.js-toggle-repo').click();
+
+      Vue.nextTick(() => {
+        expect(
+          vm.$el.querySelectorAll('table tbody tr').length,
+        ).toEqual(mockData.list.length);
+        done();
+      });
+    });
+
+    it('should render registry tag', (done) => {
+      vm.$el.querySelector('.js-toggle-repo').click();
+
+      Vue.nextTick(() => {
+        const textRendered = vm.$el.querySelector('.table tbody tr').textContent.trim().replace(/\s\s+/g, ' ');
+        expect(textRendered).toContain(mockData.list[0].tag);
+        expect(textRendered).toContain(mockData.list[0].shortRevision);
+        expect(textRendered).toContain(mockData.list[0].layers);
+        expect(textRendered).toContain(mockData.list[0].size);
+        done();
+      });
+    });
+
+    it('should be possible to delete a registry', (done) => {
+      vm.$el.querySelector('.js-toggle-repo').click();
+
+      Vue.nextTick(() => {
+        expect(
+          vm.$el.querySelector('.table tbody tr .js-delete-registry'),
+        ).toBeDefined();
+        done();
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/registry/stores/actions_spec.js b/spec/javascripts/registry/stores/actions_spec.js
new file mode 100644
index 00000000000..d835ea04622
--- /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, 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/getters_spec.js b/spec/javascripts/registry/stores/getters_spec.js
new file mode 100644
index 00000000000..3d989541881
--- /dev/null
+++ b/spec/javascripts/registry/stores/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/stores/mock_data.js b/spec/javascripts/registry/stores/mock_data.js
new file mode 100644
index 00000000000..80f7c51426a
--- /dev/null
+++ b/spec/javascripts/registry/stores/mock_data.js
@@ -0,0 +1,91 @@
+export const defaultState = {
+  isLoading: false,
+  endpoint: '',
+  repos: [],
+};
+
+export const reposServerResponse = [
+  {
+    destroy_path: 'path',
+    id: '123',
+    location: 'location',
+    name: 'foo',
+    tags_path: 'tags_path',
+  },
+  {
+    destroy_path: 'path_',
+    id: '456',
+    location: 'location_',
+    name: '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].name,
+    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].name,
+    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,
+  },
+];
diff --git a/spec/javascripts/registry/stores/mutations_spec.js b/spec/javascripts/registry/stores/mutations_spec.js
new file mode 100644
index 00000000000..7fae19f3656
--- /dev/null
+++ b/spec/javascripts/registry/stores/mutations_spec.js
@@ -0,0 +1,57 @@
+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, mockState.repos[0], registryServerResponse);
+
+      expect(mockState.repos[0].list).toEqual(parsedRegistryServerResponse);
+    });
+  });
+
+  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, mockState.repos[0], registryServerResponse);
+
+      mutations[types.TOGGLE_REGISTRY_LIST_LOADING](mockState, mockState.repos[0]);
+      expect(mockState.repos[0].isLoading).toEqual(true);
+    });
+  });
+});