diff --git a/examples/docs/zh-cn/pagination.md b/examples/docs/zh-cn/pagination.md index 0d7f6c0ae5b..8f453d1b219 100644 --- a/examples/docs/zh-cn/pagination.md +++ b/examples/docs/zh-cn/pagination.md @@ -160,7 +160,7 @@ padding: 30px 24px; border-bottom: solid 1px #EFF2F6; &:last-child { - border-bottom: none; + border-bottom: none; } } diff --git a/packages/pagination/src/pager.vue b/packages/pagination/src/pager.vue index e0f5969f611..f42a7c249cd 100644 --- a/packages/pagination/src/pager.vue +++ b/packages/pagination/src/pager.vue @@ -68,6 +68,7 @@ } } + /* istanbul ignore if */ if (!isNaN(newPage)) { if (newPage < 1) { newPage = 1; diff --git a/packages/pagination/src/pagination.js b/packages/pagination/src/pagination.js index 702645061c1..b7f3f4a1662 100644 --- a/packages/pagination/src/pagination.js +++ b/packages/pagination/src/pagination.js @@ -45,7 +45,8 @@ export default { render(h) { let template =
; - const layout = this.$options.layout || this.layout || ''; + const layout = this.layout || ''; + if (!layout) return; const TEMPLATE_MAP = { prev: , jumper: , @@ -116,7 +117,9 @@ export default { Sizes: { created() { if (Array.isArray(this.$parent.pageSizes)) { - this.$parent.internalPageSize = this.$parent.pageSizes.indexOf(this.$parent.pageSize) > -1 ? this.$parent.pageSize : this.$parent.pageSizes[0]; + this.$parent.internalPageSize = this.$parent.pageSizes.indexOf(this.$parent.pageSize) > -1 + ? this.$parent.pageSize + : this.$parent.pageSizes[0]; } }, @@ -232,25 +235,26 @@ export default { } }, - first() { - const oldPage = this.internalCurrentPage; - const newVal = 1; - this.internalCurrentPage = this.getValidCurrentPage(newVal); + // XXX: 暂时没有到第一页和最后一页的交互 + // first() { + // const oldPage = this.internalCurrentPage; + // const newVal = 1; + // this.internalCurrentPage = this.getValidCurrentPage(newVal); - if (this.internalCurrentPage !== oldPage) { - this.$emit('currentchange', this.internalCurrentPage); - } - }, + // if (this.internalCurrentPage !== oldPage) { + // this.$emit('currentchange', this.internalCurrentPage); + // } + // }, - last() { - const oldPage = this.internalCurrentPage; - const newVal = this.pageCount; - this.internalCurrentPage = this.getValidCurrentPage(newVal); + // last() { + // const oldPage = this.internalCurrentPage; + // const newVal = this.pageCount; + // this.internalCurrentPage = this.getValidCurrentPage(newVal); - if (this.internalCurrentPage !== oldPage) { - this.$emit('currentchange', this.internalCurrentPage); - } - }, + // if (this.internalCurrentPage !== oldPage) { + // this.$emit('currentchange', this.internalCurrentPage); + // } + // }, getValidCurrentPage(value) { value = parseInt(value, 10); @@ -273,21 +277,23 @@ export default { computed: { pageCount() { return Math.ceil(this.total / this.internalPageSize); - }, + } - startRecordIndex() { - const result = (this.internalCurrentPage - 1) * this.internalPageSize + 1; - return result > 0 ? result : 0; - }, + // XXX: 暂时没用到 + // startRecordIndex() { + // const result = (this.internalCurrentPage - 1) * this.internalPageSize + 1; + // return result > 0 ? result : 0; + // }, - endRecordIndex() { - const result = this.internalCurrentPage * this.internalPageSize; - return result > this.total ? this.total : result; - } + // endRecordIndex() { + // const result = this.internalCurrentPage * this.internalPageSize; + // return result > this.total ? this.total : result; + // } }, watch: { pageCount(newVal) { + /* istanbul ignore if */ if (newVal > 0 && this.internalCurrentPage === 0) { this.internalCurrentPage = 1; } else if (this.internalCurrentPage > newVal) { @@ -312,6 +318,7 @@ export default { internalCurrentPage(newVal, oldVal) { newVal = parseInt(newVal, 10); + /* istanbul ignore if */ if (isNaN(newVal)) { newVal = oldVal || 1; } else { diff --git a/test/unit/specs/date-picker.spec.js b/test/unit/specs/date-picker.spec.js index dc816ba9a3a..6de6fa52fa3 100644 --- a/test/unit/specs/date-picker.spec.js +++ b/test/unit/specs/date-picker.spec.js @@ -39,16 +39,16 @@ describe('DatePicker', () => { expect(spans[1].textContent).to.include(date.getMonth() + 1); $el.querySelector('.el-date-picker__prev-btn.el-icon-d-arrow-left').click(); // click 5 - arrowLeftElm.click(); - arrowLeftElm.click(); - arrowLeftElm.click(); - arrowLeftElm.click(); - arrowLeftElm.click(); + let count = 5; + while (--count) { + arrowLeftElm.click(); + } // click 3 - arrowRightElm.click(); - arrowRightElm.click(); - arrowRightElm.click(); + count = 3; + while (--count) { + arrowRightElm.click(); + } setTimeout(_ => { expect(spans[0].textContent).to.include(date.getFullYear() - 1); expect(spans[1].textContent).to.include(date.getMonth() - 1); diff --git a/test/unit/specs/pagination.spec.js b/test/unit/specs/pagination.spec.js new file mode 100644 index 00000000000..b3c10437f51 --- /dev/null +++ b/test/unit/specs/pagination.spec.js @@ -0,0 +1,270 @@ +import { createTest, createVue, triggerEvent } from '../util'; +import Pagination from 'packages/pagination'; + +describe('Pagination', () => { + it('create', () => { + const vm = createTest(Pagination); + const elm = vm.$el; + // prev + expect(elm.querySelector('button.btn-prev')).to.exist; + // pager + expect(elm.querySelector('ul.el-pager')).to.exist; + // next + expect(elm.querySelector('button.btn-next')).to.exist; + // jumper + expect(elm.querySelector('.el-pagination__jump')).to.exist; + // -> + expect(elm.querySelector('.el-pagination__rightwrapper')).to.exist; + // total + expect(elm.querySelector('.el-pagination__total')).to.exist; + }); + + it('set layout', () => { + const vm = createTest(Pagination, { + layout: 'prev, pager, next' + }); + const elm = vm.$el; + // prev + expect(elm.querySelector('button.btn-prev')).to.exist; + // pager + expect(elm.querySelector('ul.el-pager')).to.exist; + // next + expect(elm.querySelector('button.btn-next')).to.exist; + // not found jumper + expect(elm.querySelector('.el-pagination__jump')).to.not.exist; + // not found -> + expect(elm.querySelector('.el-pagination__rightwrapper')).to.not.exist; + // not found total + expect(elm.querySelector('.el-pagination__total')).to.not.exist; + }); + + it('small', () => { + const vm = createTest(Pagination, { + small: true + }); + expect(vm.$el.classList.contains('el-pagination--small')).to.true; + }); + + it('pageSize', () => { + const vm = createTest(Pagination, { + pageSize: 25, + total: 100 + }); + + expect(vm.$el.querySelectorAll('li.number')).to.length(4); + }); + + it('currentPage', () => { + const vm = createTest(Pagination, { + pageSize: 20, + total: 200, + currentPage: 3 + }); + + expect(vm.$el.querySelector('li.number.active')).to.have.property('textContent').to.equal('3'); + }); + + it('pageSizes', () => { + const vm = createTest(Pagination, { + pageSizes: [10, 15, 35, 50], + pageSize: 35, + total: 1000, + layout: 'sizes, prev, pager, next' + }); + + expect(vm.$el.querySelector('.el-select-dropdown__item.selected')).to.property('textContent').include('35'); + expect([].slice.call(vm.$el.querySelectorAll('.el-select-dropdown__item')) + .map(node => parseInt(node.textContent, 10))) + .to.deep.equal([10, 15, 35, 50]); + }); + + it('pageSizes:not found pageSize', () => { + const vm = createTest(Pagination, { + pageSizes: [10, 15, 35, 50], + pageSize: 24, + total: 1000, + layout: 'sizes, prev, pager, next' + }); + + expect(vm.$el.querySelector('.el-select-dropdown__item.selected')).to.property('textContent').include('10'); + }); + + it('layout is empty', () => { + const vm = createTest(Pagination, { + layout: '' + }); + + expect(vm.$el.textContent).to.empty; + }); + + it('jumper: change value', () => { + const vm = createVue({ + template: ` + + `, + + methods: { + handleChange(val) { + this.page = val; + } + }, + + data() { + return { page: 0 }; + } + }, true); + const input = vm.$el.querySelector('.el-pagination__jump input'); + + input.focus(); + input.value = -1; + triggerEvent(input, 'change'); + expect(vm.page).to.equal(1); + + input.value = 10000; + triggerEvent(input, 'change'); + expect(vm.page).to.equal(10); + + input.value = '我好帅'; + triggerEvent(input, 'change'); + expect(vm.page).to.equal(1); + }); + + it('event:currentchange', () => { + const vm = createVue({ + template: ` + + `, + + data() { + return { change: false }; + } + }); + const next = vm.$el.querySelector('button.btn-next'); + const prev = vm.$el.querySelector('button.btn-prev'); + + expect(vm.change).to.false; + // click 9 + let count = 9; + while (--count) { + next.click(); + } + + prev.click(); + expect(vm.change).to.true; + }); + + it('event:sizechange', done => { + const vm = createVue({ + template: ` + + `, + + data() { + return { trigger: false }; + } + }); + + expect(vm.trigger).to.false; + vm.$el.querySelectorAll('li.el-select-dropdown__item')[1].click(); + setTimeout(_ => { + expect(vm.trigger).to.true; + done(); + }, 50); + }); + + it('pageSize > total', () => { + const vm = createVue({ + template: ` + + `, + + methods: { + handleChange(val) { + this.page = val; + } + }, + + data() { + return { page: 0 }; + } + }); + const input = vm.$el.querySelector('.el-pagination__jump input'); + + input.value = 1; + triggerEvent(input, 'change'); + expect(vm.page).to.equal(0); + + input.value = '我好帅'; + triggerEvent(input, 'change'); + expect(vm.page).to.equal(0); + }); + + describe('click pager', () => { + it('click ul', () => { + const vm = createTest(Pagination, { + total: 1000 + }, true); + + vm.$el.querySelector('.el-pager').click(); + expect(vm.internalCurrentPage).to.equal(1); + }); + + it('click li', () => { + const vm = createTest(Pagination, { + total: 1000 + }, true); + + vm.$el.querySelectorAll('.el-pager li.number')[1].click(); + expect(vm.internalCurrentPage).to.equal(2); + }); + + it('click next icon-more', () => { + const vm = createTest(Pagination, { + total: 1000 + }, true); + + vm.$el.querySelector('.el-pager .more').click(); + expect(vm.internalCurrentPage).to.equal(6); + }); + + it('click prev icon-more', done => { + const vm = createTest(Pagination, { + total: 1000 + }, true); + + vm.$el.querySelector('.btn-quicknext.more').click(); + setTimeout(_ => { + expect(vm.$el.querySelector('.btn-quickprev.more')).to.exist; + vm.$el.querySelector('.btn-quickprev.more').click(); + expect(vm.internalCurrentPage).to.equal(1); + done(); + }, 50); + }); + + it('click last page', done => { + const vm = createTest(Pagination, { + total: 1000 + }, true); + const nodes = vm.$el.querySelectorAll('li.number'); + + nodes[nodes.length - 1].click(); + setTimeout(_ => { + expect(vm.$el.querySelector('.btn-quickprev.more')).to.exist; + expect(vm.$el.querySelector('.btn-quicknext.more')).to.not.exist; + done(); + }, 50); + }); + }); +}); diff --git a/test/unit/util.js b/test/unit/util.js index a71b47740b1..2aeddef6a99 100644 --- a/test/unit/util.js +++ b/test/unit/util.js @@ -49,16 +49,22 @@ exports.createTest = function(Compo, propsData = {}, mounted = false) { /** * 触发一个事件 - * mouseenter, mouseleave, mouseover, keyup 等 + * mouseenter, mouseleave, mouseover, keyup, change 等 * @param {Element} elm * @param {EventName} name * @param {options} opts */ exports.triggerEvent = function(elm, name, opts) { - const isMouseEvent = /^mouse/.test(name); - const isKeyEvent = /^key/.test(name); - if (!isMouseEvent && !isKeyEvent) return; - const evt = document.createEvent(isMouseEvent ? 'MouseEvents' : 'KeyboardEvent'); + let eventName; + + if (/^mouse/.test(name)) { + eventName = 'MouseEvents'; + } else if (/^key/.test(name)) { + eventName = 'KeyboardEvent'; + } else { + eventName = 'HTMLEvents'; + } + const evt = document.createEvent(eventName); evt.initEvent(name, ...opts); elm.dispatchEvent