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/pagination.spec.js b/test/unit/specs/pagination.spec.js
new file mode 100644
index 00000000000..49af95d1c2d
--- /dev/null
+++ b/test/unit/specs/pagination.spec.js
@@ -0,0 +1,275 @@
+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
+ next.click();
+ next.click();
+ next.click();
+ next.click();
+ next.click();
+ next.click();
+ next.click();
+ next.click();
+ 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