Merge pull request #567 from QingWei-Li/test/pagination

Pagination: add test

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;
     }
   }
 

packages/pagination/src/pager.vue

@@ -68,6 +68,7 @@
           }
         }
 
+        /* istanbul ignore if */
         if (!isNaN(newPage)) {
           if (newPage < 1) {
             newPage = 1;

packages/pagination/src/pagination.js

@@ -45,7 +45,8 @@ export default {
 
   render(h) {
     let template = <div class='el-pagination'></div>;
-    const layout = this.$options.layout || this.layout || '';
+    const layout = this.layout || '';
+    if (!layout) return;
     const TEMPLATE_MAP = {
       prev: <prev></prev>,
       jumper: <jumper></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 {

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);

test/unit/specs/pagination.spec.js

+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: `
+        <el-pagination
+          @currentchange="handleChange"
+          :page-size="10"
+          :total="100" />
+      `,
+
+      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: `
+        <el-pagination
+          :total="1000"
+          @currentchange="change = true" />
+      `,
+
+      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: `
+        <el-pagination
+          :total="100"
+          layout="sizes, prev, pager, next"
+          @sizechange="trigger = true"
+          :pageSize="10" />
+      `,
+
+      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: `
+        <el-pagination
+          @currentchange="handleChange"
+          :page-size="1000"
+          :total="0" />
+      `,
+
+      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);
+    });
+  });
+});

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