chore: add pagination tests (SSENSE#395)

* chore: add pagination test boilerplate

* chore: implement pagination tests

tests/client/components/__snapshots__/pagination.spec.js.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Pagination Component should match the stored snapshot 1`] = `
+<div class="VueCarousel-pagination" style="display: none;">
+  <div role="tablist" class="VueCarousel-dot-container" style="margin-top: 2px;"><button aria-hidden="false" role="tab" title="title1" value="title1" aria-label="title1" aria-selected="true" class="VueCarousel-dot VueCarousel-dot--active" style="margin-bottom: 2px; padding: 1px; width: 1px; height: 1px; background-color: red;"></button></div>
+</div>
+`;
+
+exports[`Pagination Component should not contain a button 1`] = `
+<div class="VueCarousel-pagination" style="display: none;">
+  <div role="tablist" class="VueCarousel-dot-container" style="margin-top: 2px;"></div>
+</div>
+`;

tests/client/components/pagination.spec.js

@@ -0,0 +1,177 @@
+import { shallowMount } from '@vue/test-utils';
+import Pagination from '../../../src/Pagination';
+
+describe('Pagination Component', () => {
+  let carousel;
+
+  beforeEach(() => {
+    carousel = {
+      pageCount: 1,
+      paginationPadding: 1,
+      paginationSize: 1,
+      paginationActiveColor: 'red',
+      paginationColor: 'blue',
+      paginationPosition: 'top',
+      slideCount: 2,
+      scrollPerPage: true,
+      currentPerPage: 2,
+      currentPage: 0,
+      $children: [
+        {
+          title: 'title1'
+        }
+      ]
+    };
+  });
+
+  it('should match the stored snapshot', () => {
+    const wrapper = shallowMount(Pagination, { provide: { carousel } });
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should not contain a button', () => {
+    carousel.pageCount = 0;
+
+    const wrapper = shallowMount(Pagination, { provide: { carousel } });
+
+    expect(wrapper.find('button').exists()).toBe(false);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should contain a button', () => {
+    const wrapper = shallowMount(Pagination, { provide: { carousel } });
+
+    expect(wrapper.find('button').exists()).toBe(true);
+  });
+
+  it('should set the correct title', () => {
+    const wrapper = shallowMount(Pagination, { provide: { carousel } });
+
+    expect(wrapper.vm.getDotTitle(0)).toBe('title1');
+  });
+
+  it('should emit paginationclick button event with index 0 when button is clicked', () => {
+    const wrapper = shallowMount(Pagination, { provide: { carousel } });
+
+    wrapper.find('button').trigger('click');
+
+    expect(wrapper.emitted().paginationclick[0][0]).toBe(0);
+  });
+
+  describe('paginationCount', () => {
+    it('should be set to pageCount if scrollPerPage is enabled', () => {
+      carousel.scrollPerPage = true;
+      carousel.pageCount = 1;
+
+      const wrapper = shallowMount(Pagination, { provide: { carousel } });
+
+      expect(wrapper.vm.paginationCount).toBe(1);
+    });
+
+    it('should be set to 0 if the currentPerPage is 0 and scrollPerPage is disabled', () => {
+      carousel.scrollPerPage = false;
+      carousel.currentPerPage = 0;
+
+      const wrapper = shallowMount(Pagination, { provide: { carousel } });
+
+      expect(wrapper.vm.paginationCount).toBe(0);
+    });
+
+    it('should be set to 1 if the currentPerPage is 2, slideCount is 2 and scrollPerPage is disabled', () => {
+      carousel.scrollPerPage = false;
+      carousel.currentPerPage = 2;
+      carousel.slideCount = 2;
+
+      const wrapper = shallowMount(Pagination, { provide: { carousel } });
+
+      expect(wrapper.vm.paginationCount).toBe(1);
+    })
+  });
+
+  describe('isCurrentDot', () => {
+    let wrapper;
+
+    beforeEach(() => {
+      wrapper = shallowMount(Pagination, { provide: { carousel } });
+    });
+
+    it('should be false when not the current dot', () => {
+      expect(wrapper.vm.isCurrentDot(1)).toBe(false);
+    });
+
+    it('should be true when it is the current dot', () => {
+      expect(wrapper.vm.isCurrentDot(0)).toBe(true);
+    })
+  });
+
+  // TODO: What is with this expected behaviour?
+  describe('paginationPropertyBasedOnPosition', () => {
+    // `bottom`, `bottom-overlay`, `top` and `top-overlay`
+    it('should be set to bottom if paginationPosition is set to top', () => {
+      carousel.paginationPosition = 'top';
+
+      const wrapper = shallowMount(Pagination, { provide: { carousel } });
+
+      expect(wrapper.vm.paginationPropertyBasedOnPosition).toBe('bottom');
+    });
+
+    it('should be set to bottom if paginationPosition is set to top-overlay', () => {
+      carousel.paginationPosition = 'top-overlay';
+
+      const wrapper = shallowMount(Pagination, { provide: { carousel } });
+
+      expect(wrapper.vm.paginationPropertyBasedOnPosition).toBe('bottom');
+    });
+
+    it('should be set to top if paginationPosition is set to bottom', () => {
+      carousel.paginationPosition = 'bottom';
+
+      const wrapper = shallowMount(Pagination, { provide: { carousel } });
+
+      expect(wrapper.vm.paginationPropertyBasedOnPosition).toBe('top');
+    });
+
+    it('should be set to top if paginationPosition is set to bottom-overlay', () => {
+      carousel.paginationPosition = 'bottom-overlay';
+
+      const wrapper = shallowMount(Pagination, { provide: { carousel } });
+
+      expect(wrapper.vm.paginationPropertyBasedOnPosition).toBe('top');
+    });
+  });
+
+  describe('paginationPositionModifierName', () => {
+    it('should be the paginationPosition if set to top-overlay', () => {
+      carousel.paginationPosition = 'top-overlay';
+
+      const wrapper = shallowMount(Pagination, { provide: { carousel } });
+
+      expect(wrapper.vm.paginationPositionModifierName).toBe('top-overlay');
+    });
+
+    it('should be the paginationPosition if set to bottom-overlay', () => {
+      carousel.paginationPosition = 'bottom-overlay';
+
+      const wrapper = shallowMount(Pagination, { provide: { carousel } });
+
+      expect(wrapper.vm.paginationPositionModifierName).toBe('bottom-overlay');
+    });
+
+    it('should be undefined if set to top', () => {
+      carousel.paginationPosition = 'top';
+
+      const wrapper = shallowMount(Pagination, { provide: { carousel } });
+
+      expect(wrapper.vm.paginationPositionModifierName).toBeUndefined();
+    });
+
+    it('should be undefined if set to bottom', () => {
+      carousel.paginationPosition = 'bottom';
+
+      const wrapper = shallowMount(Pagination, { provide: { carousel } });
+
+      expect(wrapper.vm.paginationPositionModifierName).toBeUndefined();
+    });
+  });
+});