Merge branch 'master' into sh-headless-chrome-support

7 files changed, 560 insertions, 0 deletions

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);
+    });
+  });
+});