other / mew-iview

Commit db1b716f2979bed3e2eb908052540595a48d65d4

Authored by Sergio Crisostomo
1 parent 3747aecd

Add more DatePicker tests

Showing 2 changed files with 119 additions and 1 deletions   Show diff stats
Inline Side-by-side
test/unit/specs/date-picker.spec.js
  Show/Hide comments   View file @db1b716
1   -import { createVue, destroyVM } from '../util';
  1 +import { createVue, destroyVM, stringToDate } from '../util';
2 2  
3 3 describe('DatePicker.vue', () => {
4 4 let vm;
... ... @@ -25,4 +25,112 @@ describe('DatePicker.vue', () => {
25 25 done();
26 26 });
27 27 });
  28 +
  29 + it('should create a DatePicker component of type="datetimerange"', done => {
  30 + vm = createVue(`
  31 + <Date-Picker type="datetimerange"></Date-Picker>
  32 + `);
  33 + const picker = vm.$children[0];
  34 + expect(picker.$children.length).to.equal(2);
  35 + expect(Array.isArray(picker.currentValue)).to.equal(true);
  36 + done();
  37 + });
  38 +
  39 + it('should create a datetimerange component and pick 2 dates in the current month', done => {
  40 + vm = createVue(`
  41 + <Date-picker type="datetimerange"></Date-picker>
  42 + `);
  43 +
  44 + const picker = vm.$children[0];
  45 + picker.handleIconClick();
  46 + vm.$nextTick(() => {
  47 + const displayField = vm.$el.querySelector('.ivu-input');
  48 + const clickableCells = vm.$el.querySelectorAll('.ivu-date-picker-cells-cell');
  49 + const lastMonthClass = 'ivu-date-picker-cells-cell-prev-month';
  50 + const firstDayInMonthIndex = [...clickableCells].findIndex(cell => !cell.classList.contains(lastMonthClass));
  51 +
  52 + clickableCells[firstDayInMonthIndex].firstElementChild.click();
  53 + vm.$nextTick(() => {
  54 + clickableCells[firstDayInMonthIndex + 4].firstElementChild.click();
  55 + vm.$nextTick(() => {
  56 + const dayOne = new Date();
  57 + dayOne.setDate(1);
  58 + dayOne.setHours(0, 0, 0, 0);
  59 + const dayFive = new Date(dayOne.getTime());
  60 + dayFive.setDate(5);
  61 + dayFive.setHours(0, 0, 0, 0);
  62 +
  63 + // check pickers internal value
  64 + const [startInternalValue, endInternalValue] = picker.currentValue; // Date Objects
  65 + expect(Math.abs(dayOne - startInternalValue)).to.equal(0);
  66 + expect(Math.abs(dayFive - endInternalValue)).to.equal(0);
  67 +
  68 + // check pickers display value
  69 + const [startDisplayValue, endDisplayValue] = displayField.value.split(' - ').map(stringToDate); // Date Objects
  70 + expect(Math.abs(dayOne - startDisplayValue)).to.equal(0);
  71 + expect(Math.abs(dayFive - endDisplayValue)).to.equal(0);
  72 +
  73 + done();
  74 + });
  75 + });
  76 + });
  77 + });
  78 +
  79 + it('should have same behavior after a reset as before the reset', done => {
  80 + vm = createVue(`
  81 + <Date-picker type="datetimerange"></Date-picker>
  82 + `);
  83 +
  84 + const picker = vm.$children[0];
  85 + picker.handleIconClick();
  86 + vm.$nextTick(() => {
  87 + const displayField = vm.$el.querySelector('.ivu-input');
  88 + const clickableCells = vm.$el.querySelectorAll('.ivu-date-picker-cells-cell');
  89 + const lastMonthClass = 'ivu-date-picker-cells-cell-prev-month';
  90 + const firstDayInMonthIndex = [...clickableCells].findIndex(cell => !cell.classList.contains(lastMonthClass));
  91 +
  92 + // choose first date
  93 + clickableCells[firstDayInMonthIndex].firstElementChild.click();
  94 + vm.$nextTick(() => {
  95 + // choose second date
  96 + clickableCells[firstDayInMonthIndex + 4].firstElementChild.click();
  97 + vm.$nextTick(() => {
  98 + // cache first values
  99 + const [startInternalValue, endInternalValue] = picker.currentValue; // Date Objects
  100 + const [startDisplayValue, endDisplayValue] = displayField.value.split(' - ').map(stringToDate); // Date Objects
  101 +
  102 + // clear picker
  103 + picker.handleClear();
  104 + vm.$nextTick(() => {
  105 + // it should be closed by now
  106 + expect(picker.visible).to.equal(false);
  107 + // open picker again
  108 + picker.handleIconClick();
  109 +
  110 + vm.$nextTick(() => {
  111 + expect(picker.visible).to.equal(true);
  112 + expect(JSON.stringify(picker.currentValue)).to.equal('[null,null]');
  113 + expect(displayField.value).to.equal('');
  114 +
  115 + clickableCells[firstDayInMonthIndex].firstElementChild.click();
  116 + vm.$nextTick(() => {
  117 + clickableCells[firstDayInMonthIndex + 4].firstElementChild.click();
  118 + vm.$nextTick(() => {
  119 + // recheck internal values
  120 + expect(Math.abs(picker.currentValue[0] - startInternalValue)).to.equal(0);
  121 + expect(Math.abs(picker.currentValue[1] - endInternalValue)).to.equal(0);
  122 + // recheck display value
  123 + const [_startDisplayValue, _endDisplayValue] = displayField.value.split(' - ').map(stringToDate); // Date Objects
  124 + expect(Math.abs(_startDisplayValue - startDisplayValue)).to.equal(0);
  125 + expect(Math.abs(_endDisplayValue - endDisplayValue)).to.equal(0);
  126 +
  127 + done();
  128 + });
  129 + });
  130 + });
  131 + });
  132 + });
  133 + });
  134 + });
  135 + });
28 136 });
... ...
test/unit/util.js
  Show/Hide comments   View file @db1b716
... ... @@ -58,6 +58,16 @@ exports.createTest = function(Compo, propsData = {}, mounted = false) {
58 58 };
59 59  
60 60 /**
  61 + * Transform Date string (yyyy-mm-dd hh:mm:ss) to Date object
  62 + * @param {String}
  63 + */
  64 +exports.stringToDate = function(str) {
  65 + const parts = str.split(/[^\d]/).filter(Boolean);
  66 + parts[1] = parts[1] - 1;
  67 + return new Date(...parts);
  68 +};
  69 +
  70 +/**
61 71 * 触发一个事件
62 72 * mouseenter, mouseleave, mouseover, keyup, change, click 等
63 73 * @param {Element} elm
... ...