Merge pull request #3 from coderdiaz/next

Next release

Author: coderdiaz

.babelrc

@@ -2,5 +2,12 @@
   "presets": [
     ["env", { "modules": false }],
     "stage-3"
-  ]
+  ],
+  "env": {
+    "test": {
+      "presets": [
+        ["env", { "targets": { "node": 8 }}]
+      ]
+    }
+  }
 }

.gitignore

@@ -2,6 +2,7 @@
 node_modules/
 dist/
 public/
+coverage/
 npm-debug.log
 yarn-error.log
 

__tests__/TinyPagination.spec.js

@@ -0,0 +1,108 @@
+import {mount} from 'vue-test-utils'
+import TinyPagination from '../src/components/TinyPagination.vue'
+import { create } from 'domain';
+
+// Helper function to create a component
+const createComponent = propsData => mount(TinyPagination, {propsData})
+
+describe('TinyPagination.vue', () => {
+  let cmp
+  it('has a created hook', () => {
+    expect(typeof TinyPagination.created).toBe('function')
+  })
+
+  describe('Properties', () => {
+    it('when the component is created without page prop, Page 1 is the page by default', () => {
+      cmp = createComponent({total: 300})
+      expect(cmp.vm.page).toBe(1)
+    })
+
+    it('when the page property is set, the currentPage is equals', () => {
+      cmp = createComponent({total: 300, page: 2})
+      expect(cmp.vm.currentPage).toBe(2)
+    })
+
+    it('when the component is created, English is the language by default', () => {
+      cmp = createComponent({total: 300})
+      expect(cmp.vm.lang).toBe('en')
+      expect(cmp.vm.translation.title).toBe('Page')
+    })
+
+    it('when the lang prop is set to spanish, the component is translated', () => {
+      cmp = createComponent({total: 300, lang: 'es'})
+      expect(cmp.vm.lang).toBe('es')
+      expect(cmp.vm.translation.title).toBe('Página')
+    })
+
+    it('when the lang prop is set to not available language, English is the language by default', () => {
+      cmp = createComponent({total: 300, lang: 'fr'})
+      expect(cmp.vm.translation.title).toBe('Page')
+    })
+  })
+
+  describe('Watchers', () => {
+
+    it('currentPage watcher is called with the new value', () => {
+      let spy = jest.fn()
+      cmp = createComponent({total: 100})
+      cmp.vm.$watch('currentPage', spy)
+
+      cmp.setData({currentPage: 3})
+      cmp.update()
+
+      expect(spy).toBeCalled()
+    })
+
+    it('currentLimit watcher is called with the new value', () => {
+      let spy = jest.fn()
+      cmp = createComponent({total: 200})
+      cmp.vm.$watch('currentLimit', spy)
+
+      cmp.setData({currentLimit: 20})
+      cmp.update()
+
+      expect(spy).toBeCalled()
+    })
+    
+    it('when the currentPage watcher is called, the tiny:change-page event is emitted', () => {
+      let stub = jest.fn()
+      cmp = createComponent({total: 100})
+      cmp.vm.$on('tiny:change-page', stub)
+
+      cmp.setData({currentPage: 3})
+      expect(stub).toBeCalledWith({page: 3})
+    })
+
+    it('when the currentLimit watcher is called, the tiny:change-limit event is emitted', () => {
+      let stub = jest.fn()
+      cmp = createComponent({total: 100})
+      cmp.vm.$on('tiny:change-limit', stub)
+
+      cmp.setData({currentLimit: 20})
+      expect(stub).toBeCalledWith({limit: 20})
+    })
+  })
+
+  describe('Events', () => {
+    beforeEach(() => {
+      cmp = createComponent({total: 20})
+    })
+
+    it('calls nextPage when click on next button', () => {
+      cmp.vm.nextPage = jest.fn()
+      cmp.update()
+
+      const el = cmp.find('.btn-next-page').trigger('click')
+      expect(cmp.vm.nextPage).toBeCalled()
+    })
+
+    it('call lastPage when click on prev button', () => {
+      cmp.vm.lastPage = jest.fn()
+      cmp.update()
+
+      const el = cmp.find('.btn-prev-page').trigger('click')
+      expect(cmp.vm.lastPage).toBeCalled()
+    })
+  })
+
+})