Integrates pagination component with API

Adds pagination tests

Remove misplaced comment

Fix broken store test

2 files changed, 53 insertions, 11 deletions

diff --git a/spec/javascripts/environments/environment_spec.js.es6 b/spec/javascripts/environments/environment_spec.js.es6
index 1d1a688a4a5..f557dcee91f 100644
--- a/spec/javascripts/environments/environment_spec.js.es6
+++ b/spec/javascripts/environments/environment_spec.js.es6
@@ -49,7 +49,7 @@ describe('Environment', () => {
       });
     });
 
-    describe('with environments', () => {
+    describe('with paginated environments', () => {
       const environmentsResponseInterceptor = (request, next) => {
         next(request.respondWith(JSON.stringify({
           environments: [environment],
@@ -57,11 +57,22 @@ describe('Environment', () => {
           available_count: 0,
         }), {
           status: 200,
+          headers: {
+            'X-Next-Page': '2',
+            'X-Page': '1',
+            'X-Per-Page': '1',
+            'X-Prev-Page': '',
+            'X-Total': '37',
+            'X-Total-Pages': '2',
+          },
         }));
       };
 
       beforeEach(() => {
         Vue.http.interceptors.push(environmentsResponseInterceptor);
+        component = new EnvironmentsComponent({
+          el: document.querySelector('#environments-list-view'),
+        });
       });
 
       afterEach(() => {
@@ -71,10 +82,6 @@ describe('Environment', () => {
       });
 
       it('should render a table with environments', (done) => {
-        component = new EnvironmentsComponent({
-          el: document.querySelector('#environments-list-view'),
-        });
-
         setTimeout(() => {
           expect(
             component.$el.querySelectorAll('table tbody tr').length,
@@ -82,6 +89,17 @@ describe('Environment', () => {
           done();
         }, 0);
       });
+
+      describe('pagination', () => {
+        it('should render pagination', (done) => {
+          setTimeout(() => {
+            expect(
+              component.$el.querySelectorAll('.gl-pagination li').length,
+            ).toEqual(5);
+            done();
+          }, 0);
+        });
+      });
     });
   });
 
diff --git a/spec/javascripts/environments/environments_store_spec.js.es6 b/spec/javascripts/environments/environments_store_spec.js.es6
index 861136c621f..8fd660c3edb 100644
--- a/spec/javascripts/environments/environments_store_spec.js.es6
+++ b/spec/javascripts/environments/environments_store_spec.js.es6
@@ -10,24 +10,48 @@ const { environmentsList } = require('./mock_data');
     });
 
     it('should start with a blank state', () => {
-      expect(store.state.environments.length).toBe(0);
-      expect(store.state.stoppedCounter).toBe(0);
-      expect(store.state.availableCounter).toBe(0);
+      expect(store.state.environments.length).toEqual(0);
+      expect(store.state.stoppedCounter).toEqual(0);
+      expect(store.state.availableCounter).toEqual(0);
+      expect(store.state.paginationInformation).toEqual({});
     });
 
     it('should store environments', () => {
       store.storeEnvironments(environmentsList);
-      expect(store.state.environments.length).toBe(environmentsList.length);
+      expect(store.state.environments.length).toEqual(environmentsList.length);
     });
 
     it('should store available count', () => {
       store.storeAvailableCount(2);
-      expect(store.state.availableCounter).toBe(2);
+      expect(store.state.availableCounter).toEqual(2);
     });
 
     it('should store stopped count', () => {
       store.storeStoppedCount(2);
-      expect(store.state.stoppedCounter).toBe(2);
+      expect(store.state.stoppedCounter).toEqual(2);
+    });
+
+    it('should store pagination information', () => {
+      const pagination = {
+        'X-nExt-pAge': '2',
+        'X-page': '1',
+        'X-Per-Page': '1',
+        'X-Prev-Page': '2',
+        'X-TOTAL': '37',
+        'X-Total-Pages': '2',
+      };
+
+      const expectedResult = {
+        perPage: 1,
+        page: 1,
+        total: 37,
+        totalPages: 2,
+        nextPage: 2,
+        previousPage: 2,
+      };
+
+      store.storePagination(pagination);
+      expect(store.state.paginationInformation).toEqual(expectedResult);
     });
   });
 })();