chore: fix/implement navigation tests

refunder · Mar 21, 2019 · cdee199 · cdee199
1 parent 9c07233
commit cdee199
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 116 deletions.
diff --git a/tests/client/components/__snapshots__/navigation.spec.js.snap b/tests/client/components/__snapshots__/navigation.spec.js.snap
@@ -1,76 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Navigation should mount successfully 1`] = `
-<div class="VueCarousel">
-  <div class="VueCarousel-wrapper">
-    <div class="VueCarousel-inner" style="transform: translate(0px, 0); visibility: hidden; height: auto;">
-      <div tabindex="-1" role="tabpanel" class="VueCarousel-slide" aria-hidden="true"></div>
-      <div tabindex="-1" role="tabpanel" class="VueCarousel-slide VueCarousel-slide-active VueCarousel-slide-center"></div>
-    </div>
-  </div>
-  <div class="VueCarousel-navigation"><button type="button" aria-label="Previous page" tabindex="0" class="VueCarousel-navigation-button VueCarousel-navigation-prev" style="padding: 8px; margin-right: -8px;">◀</button> <button type="button" aria-label="Next page" tabindex="-1" class="VueCarousel-navigation-button VueCarousel-navigation-next VueCarousel-navigation--disabled" style="padding: 8px; margin-left: -8px;">▶</button></div>
-  <div class="VueCarousel-pagination" style="">
-    <div role="tablist" class="VueCarousel-dot-container" style="margin-top: 20px;"><button aria-hidden="false" role="tab" title="Item 0" value="Item 0" aria-label="Item 0" aria-selected="false" class="VueCarousel-dot" style="margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(239, 239, 239);"></button><button aria-hidden="false" role="tab" title="Item 1" value="Item 1" aria-label="Item 1" aria-selected="true" class="VueCarousel-dot VueCarousel-dot--active" style="margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(0, 0, 0);"></button></div>
-  </div>
-</div>
-`;
+exports[`Navigation canAdvanceBackward should not be able to advanced backwards 1`] = `<div class="VueCarousel-navigation"><button type="button" aria-label="Previous page" tabindex="-1" class="VueCarousel-navigation-button VueCarousel-navigation-prev VueCarousel-navigation--disabled" style="padding: 8px; margin-right: -8px;">◀</button> <button type="button" aria-label="Next page" tabindex="0" class="VueCarousel-navigation-button VueCarousel-navigation-next" style="padding: 8px; margin-left: -8px;">▶</button></div>`;
 
-exports[`Navigation should render a next button 1`] = `
-<div class="VueCarousel">
-  <div class="VueCarousel-wrapper">
-    <div class="VueCarousel-inner" style="transform: translate(0px, 0); visibility: hidden; height: auto;">
-      <div tabindex="-1" role="tabpanel" class="VueCarousel-slide" aria-hidden="true"></div>
-      <div tabindex="-1" role="tabpanel" class="VueCarousel-slide VueCarousel-slide-active VueCarousel-slide-center"></div>
-    </div>
-  </div>
-  <div class="VueCarousel-navigation"><button type="button" aria-label="Previous page" tabindex="0" class="VueCarousel-navigation-button VueCarousel-navigation-prev" style="padding: 8px; margin-right: -8px;">◀</button> <button type="button" aria-label="Next page" tabindex="-1" class="VueCarousel-navigation-button VueCarousel-navigation-next VueCarousel-navigation--disabled" style="padding: 8px; margin-left: -8px;">▶</button></div>
-  <div class="VueCarousel-pagination" style="">
-    <div role="tablist" class="VueCarousel-dot-container" style="margin-top: 20px;"><button aria-hidden="false" role="tab" title="Item 0" value="Item 0" aria-label="Item 0" aria-selected="false" class="VueCarousel-dot" style="margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(239, 239, 239);"></button><button aria-hidden="false" role="tab" title="Item 1" value="Item 1" aria-label="Item 1" aria-selected="true" class="VueCarousel-dot VueCarousel-dot--active" style="margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(0, 0, 0);"></button></div>
-  </div>
-</div>
-`;
+exports[`Navigation canAdvanceForward should not be able to advance forwards 1`] = `<div class="VueCarousel-navigation"><button type="button" aria-label="Previous page" tabindex="0" class="VueCarousel-navigation-button VueCarousel-navigation-prev" style="padding: 8px; margin-right: -8px;">◀</button> <button type="button" aria-label="Next page" tabindex="-1" class="VueCarousel-navigation-button VueCarousel-navigation-next VueCarousel-navigation--disabled" style="padding: 8px; margin-left: -8px;">▶</button></div>`;
 
-exports[`Navigation should render a prev button 1`] = `
-<div class="VueCarousel">
-  <div class="VueCarousel-wrapper">
-    <div class="VueCarousel-inner" style="transform: translate(0px, 0); visibility: hidden; height: auto;">
-      <div tabindex="-1" role="tabpanel" class="VueCarousel-slide" aria-hidden="true"></div>
-      <div tabindex="-1" role="tabpanel" class="VueCarousel-slide VueCarousel-slide-active VueCarousel-slide-center"></div>
-    </div>
-  </div>
-  <div class="VueCarousel-navigation"><button type="button" aria-label="Previous page" tabindex="0" class="VueCarousel-navigation-button VueCarousel-navigation-prev" style="padding: 8px; margin-right: -8px;">◀</button> <button type="button" aria-label="Next page" tabindex="-1" class="VueCarousel-navigation-button VueCarousel-navigation-next VueCarousel-navigation--disabled" style="padding: 8px; margin-left: -8px;">▶</button></div>
-  <div class="VueCarousel-pagination" style="">
-    <div role="tablist" class="VueCarousel-dot-container" style="margin-top: 20px;"><button aria-hidden="false" role="tab" title="Item 0" value="Item 0" aria-label="Item 0" aria-selected="false" class="VueCarousel-dot" style="margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(239, 239, 239);"></button><button aria-hidden="false" role="tab" title="Item 1" value="Item 1" aria-label="Item 1" aria-selected="true" class="VueCarousel-dot VueCarousel-dot--active" style="margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(0, 0, 0);"></button></div>
-  </div>
-</div>
-`;
-
-exports[`Navigation should trigger page advance backward when prev is clicked 1`] = `
-<div class="VueCarousel">
-  <div class="VueCarousel-wrapper">
-    <div class="VueCarousel-inner" style="transform: translate(0px, 0); visibility: hidden; height: auto;">
-      <div tabindex="-1" role="tabpanel" class="VueCarousel-slide" aria-hidden="true"></div>
-      <div tabindex="-1" role="tabpanel" class="VueCarousel-slide VueCarousel-slide-active VueCarousel-slide-center"></div>
-    </div>
-  </div>
-  <div class="VueCarousel-navigation"><button type="button" aria-label="Previous page" tabindex="0" class="VueCarousel-navigation-button VueCarousel-navigation-prev" style="padding: 8px; margin-right: -8px;">◀</button> <button type="button" aria-label="Next page" tabindex="-1" class="VueCarousel-navigation-button VueCarousel-navigation-next VueCarousel-navigation--disabled" style="padding: 8px; margin-left: -8px;">▶</button></div>
-  <div class="VueCarousel-pagination" style="">
-    <div role="tablist" class="VueCarousel-dot-container" style="margin-top: 20px;"><button aria-hidden="false" role="tab" title="Item 0" value="Item 0" aria-label="Item 0" aria-selected="false" class="VueCarousel-dot" style="margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(239, 239, 239);"></button><button aria-hidden="false" role="tab" title="Item 1" value="Item 1" aria-label="Item 1" aria-selected="true" class="VueCarousel-dot VueCarousel-dot--active" style="margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(0, 0, 0);"></button></div>
-  </div>
-</div>
-`;
-
-exports[`Navigation should trigger page advance when next is clicked 1`] = `
-<div class="VueCarousel">
-  <div class="VueCarousel-wrapper">
-    <div class="VueCarousel-inner" style="transform: translate(0px, 0); visibility: hidden; height: auto;">
-      <div tabindex="-1" role="tabpanel" class="VueCarousel-slide" aria-hidden="true"></div>
-      <div tabindex="-1" role="tabpanel" class="VueCarousel-slide VueCarousel-slide-active VueCarousel-slide-center"></div>
-    </div>
-  </div>
-  <div class="VueCarousel-navigation"><button type="button" aria-label="Previous page" tabindex="0" class="VueCarousel-navigation-button VueCarousel-navigation-prev" style="padding: 8px; margin-right: -8px;">◀</button> <button type="button" aria-label="Next page" tabindex="-1" class="VueCarousel-navigation-button VueCarousel-navigation-next VueCarousel-navigation--disabled" style="padding: 8px; margin-left: -8px;">▶</button></div>
-  <div class="VueCarousel-pagination" style="">
-    <div role="tablist" class="VueCarousel-dot-container" style="margin-top: 20px;"><button aria-hidden="false" role="tab" title="Item 0" value="Item 0" aria-label="Item 0" aria-selected="false" class="VueCarousel-dot" style="margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(239, 239, 239);"></button><button aria-hidden="false" role="tab" title="Item 1" value="Item 1" aria-label="Item 1" aria-selected="true" class="VueCarousel-dot VueCarousel-dot--active" style="margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(0, 0, 0);"></button></div>
-  </div>
-</div>
-`;
+exports[`Navigation should match the stored snapshot 1`] = `<div class="VueCarousel-navigation"><button type="button" aria-label="Previous page" tabindex="0" class="VueCarousel-navigation-button VueCarousel-navigation-prev" style="padding: 8px; margin-right: -8px;">◀</button> <button type="button" aria-label="Next page" tabindex="0" class="VueCarousel-navigation-button VueCarousel-navigation-next" style="padding: 8px; margin-left: -8px;">▶</button></div>`;
diff --git a/tests/client/components/navigation.spec.js b/tests/client/components/navigation.spec.js
@@ -1,74 +1,102 @@
-import { mount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 
-const Carousel = require('../../../src/Carousel.vue');
-const Slide = require('../../../src/Slide.vue');
+const Navigation = require('../../../src/Navigation');
 
 describe('Navigation', () => {
-  let wrapper;
-  let vm;
-  let $navigation;
+  let carousel;
 
   beforeEach(() => {
-    wrapper = mount(Carousel, {
-      propsData: {
-        navigationEnabled: true,
-        perPage: 1
-      },
-      slots: {
-        default: [Slide, Slide]
-      }
+    carousel = {
+      canAdvanceForward: true,
+      canAdvanceBackward: true
+    };
+  });
+
+  it('should match the stored snapshot', () => {
+    const wrapper = shallowMount(Navigation, {
+      provide: { carousel },
     });
-    vm = wrapper.vm;
-    $navigation = wrapper.find('.navigation');
+
+    expect(wrapper).toMatchSnapshot();
   });
 
-  it('should mount successfully', done => {
-    expect($navigation).toBeDefined();
+  it('should render a next button', () => {
+    const wrapper = shallowMount(Navigation, {
+      provide: { carousel },
+    });
 
-    vm.$nextTick(() => {
-      expect(wrapper).toMatchSnapshot();
-      done();
+    expect(wrapper.find('.VueCarousel-navigation-next').exists()).toBeTruthy();
+  });
+
+  it('should render a prev button', () => {
+    const wrapper = shallowMount(Navigation, {
+      provide: { carousel },
     });
+
+    expect(wrapper.find('.VueCarousel-navigation-prev').exists()).toBeTruthy();
   });
 
-  it('should render a next button', done => {
-    expect(wrapper.find('.VueCarousel-navigation-next')).toBeDefined();
+  describe('navigationclick events', () => {
+    it('should emit page advance when next is clicked', () => {
+      const wrapper = shallowMount(Navigation, {
+        provide: { carousel },
+      });
 
-    vm.$nextTick(() => {
-      expect(wrapper).toMatchSnapshot();
-      done();
+      wrapper.find('.VueCarousel-navigation-next').trigger('click');
+
+      expect(wrapper.emitted().navigationclick[0][0]).toBeUndefined()
     });
-  });
 
-  it('should render a prev button', done => {
-    expect(wrapper.find('.VueCarousel-navigation-prev')).toBeDefined();
+    it('should emit page advance backward when prev is clicked', () => {
+      const wrapper = shallowMount(Navigation, {
+        provide: { carousel },
+      });
 
-    vm.$nextTick(() => {
-      expect(wrapper).toMatchSnapshot();
-      done();
+      wrapper.find('.VueCarousel-navigation-prev').trigger('click');
+
+      expect(wrapper.emitted().navigationclick[0][0]).toBe('backward')
     });
   });
 
-  it('should trigger page advance when next is clicked', done => {
-    vm.$nextTick(() => {
-      expect(vm.currentPage).toBe(1);
+  describe('canAdvanceForward', () => {
+    it('should be able to advance forwards', () => {
+      const wrapper = shallowMount(Navigation, {
+        provide: { carousel },
+      });
 
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.vm.canAdvanceForward).toBeTruthy()
+    });
+
+    it('should not be able to advance forwards', () => {
+      carousel.canAdvanceForward = false;
+
+      const wrapper = shallowMount(Navigation, {
+        provide: { carousel },
+      });
 
-      done();
+      expect(wrapper.vm.canAdvanceForward).toBeFalsy();
+      expect(wrapper).toMatchSnapshot();
     });
   });
 
-  it('should trigger page advance backward when prev is clicked', done => {
-    vm.goToPage(2);
-    wrapper.find('.VueCarousel-navigation-prev').trigger('click');
+  describe('canAdvanceBackward', () => {
+    it('should be able to advanced backwards', () => {
+      const wrapper = shallowMount(Navigation, {
+        provide: { carousel },
+      });
 
-    vm.$nextTick(() => {
-      expect(vm.currentPage).toBe(1);
+      expect(wrapper.vm.canAdvanceBackward).toBeTruthy()
+    });
 
-      expect(wrapper).toMatchSnapshot();
+    it('should not be able to advanced backwards', () => {
+      carousel.canAdvanceBackward = false;
 
-      done();
+      const wrapper = shallowMount(Navigation, {
+        provide: { carousel },
+      });
+
+      expect(wrapper.vm.canAdvanceBackward).toBeFalsy();
+      expect(wrapper).toMatchSnapshot();
     });
   });
 });