Adds pagination

Adds specs

5 files changed, 172 insertions, 7 deletions

diff --git a/spec/javascripts/registry/components/app_spec.js b/spec/javascripts/registry/components/app_spec.js
index e69de29bb2d..2d4bc010a00 100644
--- a/spec/javascripts/registry/components/app_spec.js
+++ 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 '../stores/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('.container-image a').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
index b9372f48965..a659f08e250 100644
--- a/spec/javascripts/registry/components/collapsible_container_spec.js
+++ b/spec/javascripts/registry/components/collapsible_container_spec.js
@@ -30,6 +30,14 @@ describe('collapsible registry container', () => {
       location: 'location',
       name: 'foo',
       tagsPath: 'path',
+      pagination: {
+        perPage: 5,
+        page: 1,
+        total: 13,
+        totalPages: 1,
+        nextPage: null,
+        previousPage: null,
+      },
     };
     vm = mountComponent(Component, { repo: mockData });
   });
@@ -108,5 +116,16 @@ describe('collapsible registry container', () => {
         done();
       });
     });
+
+    describe('pagination', () => {
+      it('should be possible to change the page', (done) => {
+        vm.$el.querySelector('.js-toggle-repo').click();
+
+        Vue.nextTick(() => {
+          expect(vm.$el.querySelector('.gl-pagination')).toBeDefined();
+          done();
+        });
+      });
+    });
   });
 });
diff --git a/spec/javascripts/registry/stores/actions_spec.js b/spec/javascripts/registry/stores/actions_spec.js
index d835ea04622..3c53956510d 100644
--- a/spec/javascripts/registry/stores/actions_spec.js
+++ b/spec/javascripts/registry/stores/actions_spec.js
@@ -59,7 +59,7 @@ describe('Actions Registry Store', () => {
       it('should set received list', (done) => {
         mockedState.repos = parsedReposServerResponse;
 
-        testAction(actions.fetchList, mockedState.repos[1], mockedState, [
+        testAction(actions.fetchList, { repo: mockedState.repos[1] }, mockedState, [
           { type: types.TOGGLE_REGISTRY_LIST_LOADING },
           { type: types.SET_REGISTRY_LIST, payload: registryServerResponse },
         ], done);
diff --git a/spec/javascripts/registry/stores/mock_data.js b/spec/javascripts/registry/stores/mock_data.js
index 80f7c51426a..07c51503b7f 100644
--- a/spec/javascripts/registry/stores/mock_data.js
+++ b/spec/javascripts/registry/stores/mock_data.js
@@ -9,14 +9,14 @@ export const reposServerResponse = [
     destroy_path: 'path',
     id: '123',
     location: 'location',
-    name: 'foo',
+    path: 'foo',
     tags_path: 'tags_path',
   },
   {
     destroy_path: 'path_',
     id: '456',
     location: 'location_',
-    name: 'bar',
+    path: 'bar',
     tags_path: 'tags_path_',
   },
 ];
@@ -50,7 +50,7 @@ export const parsedReposServerResponse = [
     isLoading: false,
     list: [],
     location: reposServerResponse[0].location,
-    name: reposServerResponse[0].name,
+    name: reposServerResponse[0].path,
     tagsPath: reposServerResponse[0].tags_path,
   },
   {
@@ -60,7 +60,7 @@ export const parsedReposServerResponse = [
     isLoading: false,
     list: [],
     location: reposServerResponse[1].location,
-    name: reposServerResponse[1].name,
+    name: reposServerResponse[1].path,
     tagsPath: reposServerResponse[1].tags_path,
   },
 ];
diff --git a/spec/javascripts/registry/stores/mutations_spec.js b/spec/javascripts/registry/stores/mutations_spec.js
index 7fae19f3656..82c0d8c7f07 100644
--- a/spec/javascripts/registry/stores/mutations_spec.js
+++ b/spec/javascripts/registry/stores/mutations_spec.js
@@ -39,16 +39,40 @@ describe('Mutations Registry Store', () => {
   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);
+      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, mockState.repos[0], registryServerResponse);
+      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);