diff --git a/tests/client/components/__snapshots__/navigation.spec.js.snap b/tests/client/components/__snapshots__/navigation.spec.js.snap
index 3da3f8057..19b85735b 100644
--- 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`] = `
-
-`;
+exports[`Navigation canAdvanceBackward should not be able to advanced backwards 1`] = `
`;
-exports[`Navigation should render a next button 1`] = `
-
-`;
+exports[`Navigation canAdvanceForward should not be able to advance forwards 1`] = `
`;
-exports[`Navigation should render a prev button 1`] = `
-
-`;
-
-exports[`Navigation should trigger page advance backward when prev is clicked 1`] = `
-
-`;
-
-exports[`Navigation should trigger page advance when next is clicked 1`] = `
-
-`;
+exports[`Navigation should match the stored snapshot 1`] = `
`;
diff --git a/tests/client/components/navigation.spec.js b/tests/client/components/navigation.spec.js
index 4cc86123e..6aad3c809 100644
--- 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();
});
});
});