Update tests to test what the component renders and what the clicks calls

app/assets/javascripts/vue_shared/components/table_pagination.vue

@@ -84,7 +84,9 @@ export default {
       const page = this.pageInfo.page;
       const items = [];
 
-      if (page > 1) items.push({ title: FIRST });
+      if (page > 1) {
+        items.push({ title: FIRST, first: true });
+      }
 
       if (page > 1) {
         items.push({ title: PREV, prev: true });
@@ -112,7 +114,9 @@ export default {
         items.push({ title: NEXT, next: true });
       }
 
-      if (total - page >= 1) items.push({ title: LAST, last: true });
+      if (total - page >= 1) {
+        items.push({ title: LAST, last: true });
+      }
 
       return items;
     },
@@ -126,8 +130,10 @@ export default {
         v-for="item in getItems"
         :class="{
           page: item.page,
-          prev: item.prev,
-          next: item.next,
+          'js-previous-button': item.prev,
+          'js-next-button': item.next,
+          'js-last-button': item.last,
+          'js-first-button': item.first,
           separator: item.separator,
           active: item.active,
           disabled: item.disabled

spec/javascripts/lib/utils/common_utils_spec.js

@@ -143,6 +143,7 @@ import '~/lib/utils/common_utils';
 
       it('should return valid parameter', () => {
         const value = gl.utils.getParameterByName('scope');
+        expect(gl.utils.getParameterByName('p')).toEqual('2');
         expect(value).toBe('all');
       });
 

spec/javascripts/vue_shared/components/table_pagination_spec.js

 import Vue from 'vue';
 import paginationComp from '~/vue_shared/components/table_pagination.vue';
-import '~/lib/utils/common_utils';
 
 describe('Pagination component', () => {
   let component;
   let PaginationComponent;
-
-  const changeChanges = {
-    one: '',
-  };
-
-  const change = (one) => {
-    changeChanges.one = one;
-  };
+  let spy;
+  let mountComponet;
 
   beforeEach(() => {
+    spy = jasmine.createSpy('spy');
     PaginationComponent = Vue.extend(paginationComp);
-  });
-
-  it('should render and start at page 1', () => {
-    component = new PaginationComponent({
-      propsData: {
-        pageInfo: {
-          totalPages: 10,
-          nextPage: 2,
-          previousPage: '',
-        },
-        change,
-      },
-    }).$mount();
-
-    expect(component.$el.classList).toContain('gl-pagination');
-
-    component.changePage({ target: { innerText: '1' } });
-
-    expect(changeChanges.one).toEqual(1);
-  });
-
-  it('should go to the previous page', () => {
-    component = new PaginationComponent({
-      propsData: {
-        pageInfo: {
-          totalPages: 10,
-          nextPage: 3,
-          previousPage: 1,
-        },
-        change,
-      },
-    }).$mount();
-
-    component.changePage({ target: { innerText: 'Prev' } });
 
-    expect(changeChanges.one).toEqual(1);
+    mountComponet = function (props) {
+      return new PaginationComponent({
+        propsData: props,
+      }).$mount();
+    };
   });
 
-  it('should go to the next page', () => {
-    component = new PaginationComponent({
-      propsData: {
+  describe('render', () => {
+    describe('prev button', () => {
+      it('should be disabled and non clickable', () => {
+        component = mountComponet({
+          pageInfo: {
+            nextPage: 2,
+            page: 1,
+            perPage: 20,
+            previousPage: NaN,
+            total: 84,
+            totalPages: 5,
+          },
+          change: spy,
+        });
+
+        expect(
+          component.$el.querySelector('.js-previous-button').classList.contains('disabled'),
+          ).toEqual(true);
+
+        component.$el.querySelector('.js-previous-button a').click();
+
+        expect(spy).not.toHaveBeenCalled();
+      });
+
+      it('should be enabled and clickable', () => {
+        component = mountComponet({
+          pageInfo: {
+            nextPage: 3,
+            page: 2,
+            perPage: 20,
+            previousPage: 1,
+            total: 84,
+            totalPages: 5,
+          },
+          change: spy,
+        });
+
+        component.$el.querySelector('.js-previous-button a').click();
+
+        expect(spy).toHaveBeenCalledWith(1);
+      });
+    });
+
+    describe('first button', () => {
+      it('should call the change callback with the first page', () => {
+        component = mountComponet({
+          pageInfo: {
+            nextPage: 3,
+            page: 2,
+            perPage: 20,
+            previousPage: 1,
+            total: 84,
+            totalPages: 5,
+          },
+          change: spy,
+        });
+
+        const button = component.$el.querySelector('.js-first-button a');
+
+        expect(button.textContent.trim()).toEqual('« First');
+
+        button.click();
+
+        expect(spy).toHaveBeenCalledWith(1);
+      });
+    });
+
+    describe('last button', () => {
+      it('should call the change callback with the last page', () => {
+        component = mountComponet({
+          pageInfo: {
+            nextPage: 3,
+            page: 2,
+            perPage: 20,
+            previousPage: 1,
+            total: 84,
+            totalPages: 5,
+          },
+          change: spy,
+        });
+
+        const button = component.$el.querySelector('.js-last-button a');
+
+        expect(button.textContent.trim()).toEqual('Last »');
+
+        button.click();
+
+        expect(spy).toHaveBeenCalledWith(5);
+      });
+    });
+
+    describe('next button', () => {
+      it('should be disabled and non clickable', () => {
+        component = mountComponet({
+          pageInfo: {
+            nextPage: 5,
+            page: 5,
+            perPage: 20,
+            previousPage: 1,
+            total: 84,
+            totalPages: 5,
+          },
+          change: spy,
+        });
+
+        expect(
+          component.$el.querySelector('.js-next-button').textContent.trim(),
+        ).toEqual('Next');
+
+        component.$el.querySelector('.js-next-button a').click();
+
+        expect(spy).not.toHaveBeenCalled();
+      });
+
+      it('should be enabled and clickable', () => {
+        component = mountComponet({
+          pageInfo: {
+            nextPage: 4,
+            page: 3,
+            perPage: 20,
+            previousPage: 2,
+            total: 84,
+            totalPages: 5,
+          },
+          change: spy,
+        });
+
+        component.$el.querySelector('.js-next-button a').click();
+
+        expect(spy).toHaveBeenCalledWith(4);
+      });
+    });
+
+    describe('numbered buttons', () => {
+      it('should render 5 pages', () => {
+        component = mountComponet({
+          pageInfo: {
+            nextPage: 4,
+            page: 3,
+            perPage: 20,
+            previousPage: 2,
+            total: 84,
+            totalPages: 5,
+          },
+          change: spy,
+        });
+
+        expect(component.$el.querySelectorAll('.page').length).toEqual(5);
+      });
+    });
+
+    it('should render the spread operator', () => {
+      component = mountComponet({
         pageInfo: {
-          totalPages: 10,
-          nextPage: 5,
-          previousPage: 3,
-        },
-        change,
-      },
-    }).$mount();
-
-    component.changePage({ target: { innerText: 'Next' } });
-
-    expect(changeChanges.one).toEqual(5);
-  });
-
-  it('should go to the last page', () => {
-    component = new PaginationComponent({
-      propsData: {
-        pageInfo: {
-          totalPages: 10,
-          nextPage: 5,
-          previousPage: 3,
-        },
-        change,
-      },
-    }).$mount();
-
-    component.changePage({ target: { innerText: 'Last »' } });
-
-    expect(changeChanges.one).toEqual(10);
-  });
-
-  it('should go to the first page', () => {
-    component = new PaginationComponent({
-      propsData: {
-        pageInfo: {
-          totalPages: 10,
-          nextPage: 5,
-          previousPage: 3,
-        },
-        change,
-      },
-    }).$mount();
-
-    component.changePage({ target: { innerText: '« First' } });
-
-    expect(changeChanges.one).toEqual(1);
-  });
-
-  it('should not call change callback if clicked link is disabled', () => {
-    const spy = jasmine.createSpy('spy');
-
-    component = new PaginationComponent({
-      propsData: {
-        pageInfo: {
-          nextPage: 2,
-          page: 1,
-          perPage: 20,
-          previousPage: NaN,
-          total: 84,
-          totalPages: 5,
-        },
-        change: spy,
-      },
-    }).$mount();
-
-    component.$el.querySelector('a').click();
-
-    expect(spy).not.toHaveBeenCalled();
-  });
-
-  it('should call change callback when link is clicked', () => {
-    const spy = jasmine.createSpy('spy');
-
-    component = new PaginationComponent({
-      propsData: {
-        pageInfo: {
-          nextPage: 3,
-          page: 2,
+          nextPage: 4,
+          page: 3,
           perPage: 20,
-          previousPage: 1,
+          previousPage: 2,
           total: 84,
-          totalPages: 5,
+          totalPages: 10,
         },
         change: spy,
-      },
-    }).$mount();
-
-    component.$el.querySelector('a').click();
-
-    expect(spy).toHaveBeenCalled();
-  });
-});
-
-describe('paramHelper', () => {
-  afterEach(() => {
-    window.history.pushState({}, null, '');
-  });
-
-  it('can parse url parameters correctly', () => {
-    window.history.pushState({}, null, '?scope=all&p=2');
-
-    const scope = gl.utils.getParameterByName('scope');
-    const p = gl.utils.getParameterByName('p');
-
-    expect(scope).toEqual('all');
-    expect(p).toEqual('2');
-  });
-
-  it('returns null if param not in url', () => {
-    window.history.pushState({}, null, '?p=2');
-
-    const scope = gl.utils.getParameterByName('scope');
-    const p = gl.utils.getParameterByName('p');
+      });
 
-    expect(scope).toEqual(null);
-    expect(p).toEqual('2');
+      expect(component.$el.querySelector('.separator').textContent.trim()).toEqual('...');
+    });
   });
 });