/** * @file laydate - 测试 * @author xuexb */ /* global layui */ /* eslint-disable max-nested-callbacks, fecs-indent */ var $ = layui.$; var laydate = layui.laydate; var lay = window.lay; /** * 是否基于`phantomjs`测试, 因为有些特殊的case在ie中是不可用的, 比如: `window.event = {}` * * @const * @type {boolean} */ var IS_PHANTOMJS = layui.device('phantomjs').phantomjs; /** * 创建dom元素, 并返回 jquery 对象 * * @inner * * @param {string} html 标签 * * @return {jQuery} */ var createNode = function (html) { return $(html).addClass('test-node').appendTo('body'); }; /** * 日期格式化 * * @inner * * @param {string} str 格式 * @param {Date|number|string} date 时间对象或者时间缀 * @return {string} * * @example * yyyy-MM-dd hh:mm:ss.S * yyyy-MM-dd E HH:mm:ss * yyyy-MM-dd EE hh:mm:ss * yyyy-MM-dd EEE hh:mm:ss * yyyy-M-d h:m:s.S */ var dateFormat = function (str, date) { str = str || 'yyyy-MM-dd HH:mm'; if (date) { if ('number' === typeof date && String(date).length !== 13) { var temp = new Date(); temp.setDate(temp.getDate() + date); date = temp; } else if (!(date instanceof Date)) { date = new Date(date); } } else { date = new Date(); } var getTime = { 'M+': date.getMonth() + 1, 'd+': date.getDate(), 'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, 'H+': date.getHours(), 'm+': date.getMinutes(), 's+': date.getSeconds(), 'S': date.getMilliseconds() }; // 如果有年 if (/(y+)/i.test(str)) { // RegExp.$1为上次正则匹配的第1个结果,那么length就不用说了吧 str = str.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); } layui.each(getTime, function (key) { if (new RegExp('(' + key + ')').test(str)) { str = str.replace(RegExp.$1, (RegExp.$1.length === 1) ? (getTime[key]) : (('00' + getTime[key]).substr(('' + getTime[key]).length))); } }); return str; }; describe('laydate', function () { // 输出测试节点 beforeEach(function () { createNode('
'); createNode(''); }); // 删除节点 afterEach(function () { $('.layui-laydate, .test-node').remove(); }); it('version', function () { expect(laydate.v).to.be.a('string'); expect(laydate.v).to.not.be.empty; }); it('loaded css link', function () { // 验证页面元素 expect($('#layuicss-laydate').length).to.equal(1, '加载laydate.css的link标签必须存在'); expect($('#layuicss-laydate').css('display')).to.equal('none', '验证laydate.css是否生效'); // 验证一个不存在的元素 expect($('#layuicss-laydate-no-suceess').css('display')).to.be.undefined; }); describe('laydate.render()', function () { it('check params and return value', function () { expect(laydate.render()).to.be.a('object', 'render() 返回值必须是对象'); expect(laydate.render('str')).to.have.property('hint'); expect(laydate.render().hint).to.be.a('function', 'render() 返回值必须包含 hint()'); expect(laydate.render({})).to.have.property('config'); }); describe('options.elem', function () { it('selector', function () { expect(function () { laydate.render({ elem: '#test-div' }); laydate.render({ elem: '#test-div-layui' }); laydate.render({ elem: '.ok-layui' }); }).to.not.throw; expect($('.layui-laydate').length).to.equal(0); }); it('error selector', function () { expect(function () { laydate.render({ elem: '#test-div-no-selector', show: true }); laydate.render({ elem: '.test-div-no-selector', show: true }); }).to.not.throw; expect($('.layui-laydate').length).to.equal(0); }); }); describe('options.type', function () { it('default value', function () { expect(laydate.render().config.type).to.equal('date'); expect(laydate.render({ elem: '#test-div' }).config.type).to.equal('date', 'render 方法 options.type 默认值必须是 date'); }); // 先不作错误值的校验了 // it('error value', function () { // expect(function () { // laydate.render({ // elem: '#test-div', // type: 'layui' // }); // }).to.throw(); // }); it('is year', function (done) { var result = laydate.render({ elem: '#test-div', type: 'year', show: true }); expect(result.config.type).to.equal('year'); setTimeout(function () { expect($('.laydate-set-ym').length).to.equal(1, '标头年月元素必须存在'); expect($('.laydate-year-list .layui-this').text()).to.equal(dateFormat('yyyy年'), '默认高亮显示当前年'); $('.laydate-btns-confirm').click(); expect($('#test-div').text()).to.equal(dateFormat('yyyy'), '确认后输出选中的值'); done(); }, 100); }); it('is month', function (done) { var result = laydate.render({ elem: '#test-div', type: 'month', show: true }); expect(result.config.type).to.equal('month'); setTimeout(function () { expect($('.laydate-set-ym').length).to.equal(1); expect($('.laydate-month-list .layui-this').attr('lay-ym')) .to.equal(dateFormat('M') - 1 + '', '默认高亮显示当前月'); $('.laydate-btns-confirm').click(); expect($('#test-div').text()).to.equal(dateFormat('yyyy-MM'), '确认后输出选中的值'); done(); }); }); it('is date', function (done) { var result = laydate.render({ elem: '#test-div', type: 'date', show: true }); expect(result.config.type).to.equal('date'); setTimeout(function () { expect($('.laydate-set-ym').text()).to.equal(dateFormat('yyyy年M月'), '标头内显示当前年+月'); expect($('.layui-laydate-content .layui-this').attr('lay-ymd')) .to.equal(dateFormat('yyyy-M-d'), '默认高亮显示当前日'); $('.laydate-btns-confirm').click(); expect($('#test-div').text()).to.equal(dateFormat('yyyy-MM-dd'), '确认后输出选中的值'); done(); }); }); it('is time', function (done) { var result = laydate.render({ elem: '#test-div', type: 'time', show: true }); expect(result.config.type).to.equal('time'); setTimeout(function () { expect($('.laydate-time-text').text()).to.equal('选择时间', '标头内显示当前年+月'); expect($('.laydate-time-list').length).to.equal(1); expect($('#test-div').text()).to.equal(''); $('.laydate-btns-confirm').click(); expect($('#test-div').text()).to.equal('00:00:00'); done(); }); }); it('is datetime', function (done) { var result = laydate.render({ elem: '#test-div', type: 'datetime', show: true }); var now = new Date(); expect(result.config.type).to.equal('datetime'); setTimeout(function () { expect($('.laydate-set-ym').text()).to.equal( now.getFullYear() + '年' + (now.getMonth() + 1) + '月', '标头内显示当前年+月' ); expect($('.layui-laydate-content .layui-this').attr('lay-ymd')).to.equal( now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate(), '默认高亮显示当前日' ); expect($('.laydate-btns-time').text()).to.equal('选择时间'); expect($('.laydate-time-text').text()).to.equal(''); // 断定选择时间的切换 $('.laydate-btns-time').click(); expect($('.laydate-time-text').text()).to.equal('选择时间'); expect($('.laydate-btns-time').text()).to.equal('返回日期'); $('.laydate-btns-time').click(); expect($('.laydate-time-text').text()).to.equal(''); expect($('.laydate-btns-time').text()).to.equal('选择时间'); $('.laydate-btns-confirm').click(); expect($('#test-div').text()).to.equal(dateFormat('yyyy-MM-dd 00:00:00'), '确认后输出选中的值'); done(); }); }); }); describe('options.range', function () { it('time type and range', function (done) { laydate.render({ elem: '#test-div', type: 'time', range: true, show: true }); setTimeout(function () { expect($('.laydate-time-text').length).to.equal(2); $('.laydate-btns-confirm').click(); expect($('#test-div').text()).to.equal('00:00:00 - 00:00:00', '确认后输出范围值'); done(); }); }); it('year type and range is split', function () { laydate.render({ elem: '#test-div', type: 'year', range: '到', show: true }); $('.laydate-btns-confirm').click(); expect($('#test-div').text()).to.match(/\d+\s到\s\d+/, '确认后输出范围值'); }); }); describe('options.format', function () { it('default value', function () { expect(laydate.render().config.format).to.equal('yyyy-MM-dd'); expect(laydate.render({ elem: '#test-div' }).config.format).to.equal('yyyy-MM-dd', 'render 方法 options.format 默认值必须是 yyyy-MM-dd'); }); it('yyyy年MM月dd日 HH时mm分ss秒', function () { var result = laydate.render({ format: 'yyyy年MM月dd日 HH时mm分ss秒', elem: '#test-div' }); expect(result.config.format).to.equal('yyyy年MM月dd日 HH时mm分ss秒', '设置 option.format 返回配置内必须相等'); $('#test-div').click(); $('.laydate-btns-confirm').click(); expect($('#test-div').text()).to.equal(dateFormat('yyyy年MM月dd日 00时00分00秒'), '确认后输出选中的值'); }); it('datetime type and yyyy年的M月某天晚上,大概H点', function () { laydate.render({ format: 'yyyy年的M月某天晚上,大概H点', elem: '#test-div', type: 'datetime' }); $('#test-div').click(); $('.laydate-btns-time').click(); $('.laydate-time-list li').eq(0).find('li').eq(5).click(); $('.laydate-btns-confirm').click(); expect($('#test-div').text()).to.equal(dateFormat('yyyy年的M月某天晚上,大概5点'), '确认后输出选中的值'); }); it('format and error value', function () { laydate.render({ elem: '#test-div', value: '2017年7月7日', format: 'yyyy~MM~dd' }); expect($('#test-div').text()).to.equal('2017年7月7日', '默认输出value的值到元素中'); $('#test-div').click(); expect($('#test-div').text()).to.equal(dateFormat('yyyy~MM~dd'), '根据options.format修正value为当天'); // 错误提示 expect($('.layui-laydate-hint').text()).to.match(/日期格式不合法/); expect($('.layui-laydate-hint').text()).to.match(/yyyy~MM~dd/); }); // 验证当format为 yyyyMMdd 和 value=20170707 时是否通过 it('format and number value', function (done) { laydate.render({ elem: '#test-div', value: '20170707', format: 'yyyyMMdd', show: true }); laydate.render({ elem: '#test-input', value: '201777', format: 'yyyyMd', show: true }); expect($('#test-div').text()).to.equal('20170707', '默认输出value的值到元素中'); expect($('#test-input').val()).to.equal('201777', '默认输出value的值到元素中'); setTimeout(function () { // 错误提示 expect($('.layui-laydate-hint').length).to.equal(0, '格式正确没有错误提示'); done(); }); }); }); describe('options.value', function () { it('2017-06-31', function (done) { laydate.render({ elem: '#test-div', show: true, value: '2017-06-31', done: function (value) { expect(value).to.equal('2017-06-30', '6月最大为30号'); done(); } }); $('.laydate-btns-confirm').click(); }); it('new Date()', function (done) { var date = new Date(); date.setDate(date.getDate() + 1); laydate.render({ elem: '#test-div', show: true, value: date, done: function (value) { expect(value).to.equal(dateFormat('yyyy-MM-dd', 1)); done(); } }); $('.laydate-btns-confirm').click(); }); it('yyyy-MM-dd', function () { laydate.render({ elem: '#test-div', value: '1990年11月27日', format: 'yyyy年MM月dd日' }); $('#test-div').click(); $('.laydate-btns-confirm').click(); expect($('#test-div').text()).to.equal('1990年11月27日', '确认后输出选中的值'); }); it('yyyy-MM-dd not format value', function () { laydate.render({ elem: '#test-div', value: '1990-11月-日', format: 'yyyy年MM月dd日' }); $('#test-div').click(); // 错误提示 expect($('.layui-laydate-hint').text()).to.match(/日期格式不合法/); expect($('.layui-laydate-hint').text()).to.match(/yyyy年MM月dd日/); $('.laydate-btns-confirm').click(); expect($('#test-div').text()).to.equal(dateFormat('yyyy年MM月dd日'), '确认后输出选中的值'); }); it('number not format value', function () { laydate.render({ elem: '#test-div', value: Date.now() }); $('#test-div').click(); // 错误提示 expect($('.layui-laydate-hint').text()).to.match(/日期格式不合法/); }); it('div default html value format error', function () { laydate.render({ elem: '#test-div', value: Date.now() }); $('#test-div').text('layui').click(); // 错误提示 expect($('.layui-laydate-hint').text()).to.match(/日期格式不合法/); }); it('input default value format error', function (done) { createNode(''); laydate.render({ elem: '#test-input-2', show: true }); // 错误提示 setTimeout(function () { expect($('.layui-laydate-hint').text()).to.match(/日期格式不合法/); done(); }); }); // 当元素值更新后, 再次显示日历时会更新 it('change value', function () { laydate.render({ show: true, value: '2017-3-7', elem: '#test-div' }); expect($('.layui-this').text()).to.equal('7', '显示默认的7'); $('.laydate-btns-confirm').click(); $('#test-div').text('2017-7-10').click(); expect($('.layui-this').text()).to.equal('10', '显示更新后的10'); }); }); describe('options.min and options.max', function () { it('date string', function () { laydate.render({ elem: '#test-div', min: '2017-7-7', max: '2017-7-8', value: '2017-7-8' }); $('#test-div').click(); $('.laydate-set-ym').find('[lay-type="year"]').click(); expect($('.laydate-year-list .layui-this').text()).to.equal('2017年'); // 只有2017年可用 expect($('.laydate-year-list [lay-ym="2016"]').hasClass('laydate-disabled')).to.be.true; expect($('.laydate-year-list [lay-ym="2018"]').hasClass('laydate-disabled')).to.be.true; $('#test-div').click(); $('.laydate-set-ym').find('[lay-type="month"]').click(); // 只有7月可用 expect($('.laydate-month-list [lay-ym="5"]').hasClass('laydate-disabled')).to.be.true; expect($('.laydate-month-list [lay-ym="7"]').hasClass('laydate-disabled')).to.be.true; }); // 错误字符串时直接设为当天最小 it('error string', function () { laydate.render({ elem: '#test-div', min: 'layui', max: 'layui' }); $('#test-div').click(); expect($('.layui-laydate-content .layui-this').attr('lay-ymd')).to.equal(dateFormat('yyyy-M-d'), '默认选中日期'); // 昨天不可用, 判断是为了处理跨月 var $elem = $('.layui-laydate-content [lay-ymd="' + dateFormat('yyyy-M-d', -1) + '"]'); if ($elem.length) { expect($elem.hasClass('laydate-disabled')).to.be.true; } // 明天不可用, 判断是为了处理跨月 $elem = $('.layui-laydate-content [lay-ymd="' + dateFormat('yyyy-M-d', 1) + '"]'); if ($elem.length) { expect($elem.hasClass('laydate-disabled')).to.be.true; } }); it('date number', function () { laydate.render({ elem: '#test-div', min: -2, max: 2 }); $('#test-div').click(); // 前两天应该是可用, 判断是为了处理跨月 var $elem = $('.layui-laydate-content [lay-ymd="' + dateFormat('yyyy-M-d', -2) + '"]'); if ($elem.length) { expect($elem.hasClass('laydate-disabled')).to.be.false; } // 前三天应该是禁用的 $elem = $('.layui-laydate-content [lay-ymd="' + dateFormat('yyyy-M-d', -3) + '"]'); if ($elem.length) { expect($elem.hasClass('laydate-disabled')).to.be.true; } // 后两天可用 $elem = $('.layui-laydate-content [lay-ymd="' + dateFormat('yyyy-M-d', 2) + '"]'); if ($elem.length) { expect($elem.hasClass('laydate-disabled')).to.be.false; } // 后三天禁用 $elem = $('.layui-laydate-content [lay-ymd="' + dateFormat('yyyy-M-d', 3) + '"]'); if ($elem.length) { expect($elem.hasClass('laydate-disabled')).to.be.true; } }); it('timestamp', function () { var date = new Date(); var date2 = new Date(); // 获取前三天的时间缀 date.setDate(date.getDate() + -3); date2.setDate(date2.getDate() + 3); laydate.render({ elem: '#test-div', min: date.getTime(), max: date2.getTime() }); $('#test-div').click(); // 前三天可用, 防止跨月 var $elem = $('.layui-laydate-content [lay-ymd="' + dateFormat('yyyy-M-d', -3) + '"]'); if ($elem.length) { expect($elem.hasClass('laydate-disabled')).to.be.false; } // 前四天不可用 $elem = $('.layui-laydate-content [lay-ymd="' + dateFormat('yyyy-M-d', -4) + '"]'); if ($elem.length) { expect($elem.hasClass('laydate-disabled')).to.be.true; } // 后三天可用 $elem = $('.layui-laydate-content [lay-ymd="' + dateFormat('yyyy-M-d', 3) + '"]'); if ($elem.length) { expect($elem.hasClass('laydate-disabled')).to.be.false; } // 后四天不可用 $elem = $('.layui-laydate-content [lay-ymd="' + dateFormat('yyyy-M-d', 4) + '"]'); if ($elem.length) { expect($elem.hasClass('laydate-disabled')).to.be.true; } }); it('and options.value', function () { laydate.render({ elem: '#test-div', min: '2017-7-7', max: '2017-7-7', value: '2017-7-7' }); $('#test-div').click(); expect($('.layui-laydate-content .layui-this').attr('lay-ymd')).to.equal('2017-7-7', '默认选中日期'); expect($('.layui-laydate-content [lay-ymd="2017-7-6"]').hasClass('laydate-disabled')).to.be.true; expect($('.layui-laydate-content [lay-ymd="2017-7-8"]').hasClass('laydate-disabled')).to.be.true; }); // 当最大小于最小时, 日期选择都不可用 it('options.max < options.min', function () { laydate.render({ elem: '#test-div', min: '2017-7-7', max: '2017-7-1' }); $('#test-div').click(); $('.laydate-set-ym').find('[lay-type="year"]').click(); // 查找可用的年 var year = $('.laydate-year-list li').filter(function () { return !$(this).hasClass('laydate-disabled'); }).get(); expect(year.length).to.equal(0); $('#test-div').click(); $('.laydate-set-ym').find('[lay-type="month"]').click(); // 查找可用的月 var month = $('.laydate-month-list li').filter(function () { return !$(this).hasClass('laydate-disabled'); }).get(); expect(month.length).to.equal(0); }); }); describe('options.trigger', function () { it('default value', function () { var result = laydate.render({ elem: '#test-input' }); expect(result.config.trigger).to.equal('focus'); result = laydate.render({ elem: '#test-div' }); // div会默认转成click expect(result.config.trigger).to.equal('click'); }); it('not click', function (done) { laydate.render({ elem: '#test-div', trigger: 'layui', ready: done }); $('#test-div').click(); setTimeout(done); }); }); describe('options.show', function () { it('default value', function (done) { laydate.render({ elem: '#test-div', ready: done }); setTimeout(done); }); it('show is true', function (done) { laydate.render({ elem: '#test-div', show: true, ready: function () { done(); } }); }); // 以下2个是测试和`options.closeStop`的配合 it('element trigger show', function (done) { createNode(''); $('#test-trigger-show').on('click', function () { laydate.render({ elem: '#test-div', show: true }); }).click(); setTimeout(function () { expect($('.layui-laydate').length).to.equal(0); done(); }, 100); }); it('element trigger show and options.closeStop', function (done) { createNode(''); $('#test-trigger-show').on('click', function () { laydate.render({ elem: '#test-div', show: true, closeStop: '#test-trigger-show' }); }).click(); setTimeout(function () { expect($('.layui-laydate').length).to.equal(1); done(); }, 100); }); }); describe('options.position', function () { it('static', function () { laydate.render({ elem: '#test-div', position: 'static' }); expect($('#test-div').find('.layui-laydate-static').length).to.equal(1); }); it('fixed', function () { laydate.render({ elem: '#test-div', position: 'fixed', show: true }); expect($('.layui-laydate').css('position')).to.equal('fixed'); }); }); describe('options.zIndex', function () { it('options.position is fixed', function () { laydate.render({ elem: '#test-div', position: 'fixed', show: true, zIndex: 10086 }); expect($('.layui-laydate').css('zIndex')).to.equal('10086'); }); it('options.position is abolute', function () { laydate.render({ elem: '#test-div', show: true, position: 'abolute', zIndex: 10086 }); expect($('.layui-laydate').css('zIndex')).to.equal('10086'); }); it('options.position is static', function () { laydate.render({ elem: '#test-div', position: 'static', show: true, zIndex: 10086 }); expect($('.layui-laydate').css('zIndex')).to.equal('10086'); }); }); describe('options.showBottom', function () { it('default value', function () { laydate.render({ elem: '#test-div', show: true }); expect($('.layui-laydate-footer').length).to.equal(1); }); it('is false', function () { laydate.render({ elem: '#test-div', show: true, showBottom: false }); expect($('.layui-laydate-footer').length).to.equal(0); }); }); describe('options.btns', function () { it('default value', function () { laydate.render({ elem: '#test-div', show: true }); var btns = $('.laydate-footer-btns span').map(function () { return $(this).attr('lay-type'); }).get(); expect(btns).to.deep.equal([ 'clear', 'now', 'confirm' ]); }); it('[confirm, now]', function () { laydate.render({ elem: '#test-div', show: true, btns: ['confirm', 'now'] }); var btns = $('.laydate-footer-btns span').map(function () { return $(this).attr('lay-type'); }).get(); expect(btns).to.deep.equal([ 'confirm', 'now' ]); }); it('error value', function () { laydate.render({ elem: '#test-div', show: true, btns: ['layui'] }); var btns = $('.laydate-footer-btns span').map(function () { return $(this).attr('lay-type'); }).get(); expect(btns).to.deep.equal([ 'layui' ]); }); }); describe('options.lang', function () { it('default value is cn', function () { var result = laydate.render({ show: true, elem: '#test-div' }); var weeks = $('.layui-laydate-content').find('thead th').map(function () { return $(this).text(); }).get(); expect(weeks).to.deep.equal(['日', '一', '二', '三', '四', '五', '六'], 'cn版本星期的标头'); expect($('.laydate-btns-confirm').text()).to.equal('确定', 'cn版本确定按钮'); expect($('.laydate-btns-now').text()).to.equal('现在', 'cn版本当前按钮'); expect($('.laydate-btns-clear').text()).to.equal('清空', 'cn版本清除按钮'); expect(result.config.lang).to.equal('cn'); }); it('en', function () { var result = laydate.render({ show: true, lang: 'en', elem: '#test-div' }); var weeks = $('.layui-laydate-content').find('thead th').map(function () { return $(this).text(); }).get(); expect(weeks).to.deep.equal(['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], 'en版本星期的标头'); expect($('.laydate-btns-confirm').text()).to.equal('Confirm', 'en版本确定按钮'); expect($('.laydate-btns-now').text()).to.equal('Now', 'en版本当前按钮'); expect($('.laydate-btns-clear').text()).to.equal('Clear', 'en版本清除按钮'); expect(result.config.lang).to.equal('en'); }); it('error vaue', function () { var result = laydate.render({ show: true, lang: 'layui', elem: '#test-div' }); expect($('.laydate-btns-confirm').text()).to.equal('确定', 'lang错误时默认为中文'); expect(result.config.lang).to.equal('layui'); }); // todo month, time, timeTips }); describe('options.theme', function () { it('molv', function () { laydate.render({ show: true, elem: '#test-div', theme: 'molv' }); expect($('.laydate-theme-molv').length).to.equal(1, '墨绿主题class存在'); }); it('grid', function () { laydate.render({ show: true, elem: '#test-div', theme: 'grid' }); expect($('.laydate-theme-grid').length).to.equal(1, '格子主题class存在'); }); it('error value', function () { laydate.render({ show: true, elem: '#test-div', theme: 'layui-test' }); expect($('.laydate-theme-layui-test').length).to.equal(1, '自定义主题class存在'); }); it('#color', function () { // 主要处理多浏览器兼容 var colors = [ 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 0)', '#000' ]; laydate.render({ show: true, elem: '#test-div', theme: '#000' }); $.each([ '.layui-this', '.layui-laydate-header' ], function (index, selector) { expect(colors).to.includes($(selector).css('background-color'), '标头和当前选中颜色必须是设置的'); }); }); }); describe('options.calendar', function () { it('default value', function () { var result = laydate.render({ elem: '#test-div', show: true, value: '2017-3-8' }); expect(result.config.calendar).to.equal(false, '默认值为false'); expect($('.layui-this').text()).to.equal('8', '显示数字'); }); it('is true', function () { var result = laydate.render({ elem: '#test-div', show: true, value: '2017-3-8', calendar: true }); expect(result.config.calendar).to.equal(true, '默认值为false'); expect($('.layui-this').text()).to.equal('妇女', '显示妇女节'); }); it('options.lang is en', function () { laydate.render({ elem: '#test-div', show: true, lang: 'en', value: '2017-3-8' }); expect($('.layui-this').text()).to.equal('8', '国际版显示数字'); }); }); describe('options.mark', function () { it('every year', function () { laydate.render({ mark: { '0-3-7': '妹子' }, show: true, value: '2017-3-7', elem: '#test-div' }); expect($('.layui-this').text()).to.equal('妹子', '显示自定义的妹子'); // 再看下4月7日 $('.laydate-btns-confirm').click(); $('#test-div').text('2017-4-7').click(); expect($('.layui-this').text()).to.equal('7', '显示日期'); }); it('every year and month', function () { laydate.render({ mark: { '0-0-7': '妹子' }, show: true, value: '2017-7-7', elem: '#test-div' }); expect($('.layui-this').text()).to.equal('妹子', '显示自定义的妹子'); // 再看下4月7日 $('.laydate-btns-confirm').click(); $('#test-div').text('2017-4-7').click(); expect($('.layui-this').text()).to.equal('妹子', '显示自定义的妹子'); }); it('yyyy-M-d', function () { laydate.render({ mark: { '2017-3-7': '妹子' }, show: true, value: '2017-3-7', elem: '#test-div' }); expect($('.layui-this').text()).to.equal('妹子', '显示自定义的妹子'); // 再看下2016年 $('.laydate-btns-confirm').click(); $('#test-div').text('2016-3-7').click(); expect($('.layui-this').text()).to.equal('7', '显示日期'); }); it('options.calendar is true', function () { laydate.render({ elem: '#test-div', show: true, value: '2017-3-8', mark: { '2017-3-8': '快乐' }, calendar: true }); expect($('.layui-this').text()).to.equal('快乐', '显示被mark覆盖的 快乐'); }); }); // 基于phantomjs测试内部方法 if (IS_PHANTOMJS) { it('options.dateTime', function (done) { laydate.render({ elem: '#test-div', show: true, dateTime: { year: 20000000, month: 15, minutes: 70, seconds: 60, hours: 25 }, done: function (value) { expect(value).to.equal(dateFormat('yyyy-MM-dd'), '设置日期超出范围, 初始化为当天'); done(); } }); $('.laydate-btns-confirm').click(); }); } }); describe('callbacks', function () { describe('render', function () { it('not elem', function (done) { var flag = true; laydate.render({ ready: function () { flag = false; } }); setTimeout(function () { expect(flag).to.be.true; done(); }, 360); }); it('trigger', function (done) { laydate.render({ elem: '#test-div', ready: function (data) { expect(data).to.be.a('object'); done(); } }); $('#test-div').click(); }); // 如果是div则自动切换成click it('multiple trigger', function (done) { var index = 0; laydate.render({ elem: '#test-div', ready: function () { index += 1; } }); $('#test-div').click().click().click(); setTimeout(function () { expect(index).to.equal(3); done(); }); }); // 当show=true时应该直接显示并执行ready事件 it('options.show is true', function (done) { laydate.render({ elem: '#test-div', show: true, ready: function (data) { expect(data).to.be.a('object'); done(); } }); }); }); describe('change', function () { it('trigger', function (done) { laydate.render({ elem: '#test-div', show: true, value: '2017-07-07', range: false, change: function (value, date, endDate) { expect(value).to.equal('2017-08-07', '进入下一月的日期'); expect(date).to.deep.equal({ year: 2017, month: 8, date: 7, hours: 0, minutes: 0, seconds: 0 }, '进入下一月的日期时间对象'); expect(endDate).to.deep.equal({}, '没有开启 options.range 时 endDate 为空对象'); done(); } }); $('.laydate-next-m').click(); }); it('options.range is true', function (done) { laydate.render({ elem: '#test-div', range: true, show: true, change: function (value, date, endDate) { var start = dateFormat('yyyy-MM-dd'); var end = dateFormat('yyyy-MM-dd', 1); // expect(value).to.equal(start + ' - ' + end, '进入下一月的日期'); expect(date).to.be.a('Object'); expect(date).to.not.deep.equal({}); expect(endDate).to.be.a('Object'); expect(endDate).to.not.deep.equal({}, '开启 options.range 时 endDate 不能为空'); done(); } }); // 模拟点击当天和下一天 $('[lay-ymd="' + dateFormat('yyyy-M-d') + '"]').click(); $('[lay-ymd="' + dateFormat('yyyy-M-d', 1) + '"]').click(); }); }); describe('done', function () { it('click date', function (done) { laydate.render({ elem: '#test-div', show: true, value: '2017-07-07', range: false, done: function (value, date, endDate) { expect(value).to.equal('2017-07-07'); expect(date).to.deep.equal({ year: 2017, month: 7, date: 7, hours: 0, minutes: 0, seconds: 0 }); expect(endDate).to.deep.equal({}); done(); } }); $('.layui-this').click(); }); it('click confirm btn', function (done) { laydate.render({ elem: '#test-div', show: true, value: '2017-07-07', range: false, done: function (value, date, endDate) { expect(value).to.equal('2017-07-07'); expect(date).to.deep.equal({ year: 2017, month: 7, date: 7, hours: 0, minutes: 0, seconds: 0 }); expect(endDate).to.deep.equal({}); done(); } }); $('.laydate-btns-confirm').click(); }); it('click clear btn', function (done) { laydate.render({ elem: '#test-div', show: true, value: '2017-07-07', range: false, done: function (value, date, endDate) { expect(value).to.equal(''); expect(date).to.deep.equal({}); expect(endDate).to.deep.equal({}); done(); } }); $('.laydate-btns-clear').click(); }); it('click now btn', function (done) { laydate.render({ elem: '#test-div', show: true, value: '2017-07-07', range: false, done: function (value, date, endDate) { expect(value).to.equal(dateFormat('yyyy-MM-dd')); done(); } }); $('.laydate-btns-now').click(); }); }); }); describe('#hint', function () { it('set string', function () { var app = laydate.render({ elem: '#test-div', show: true }); expect(app.hint).to.be.a('function', '.hint 必须是方法'); app.hint('layui'); expect($('.layui-laydate-hint').text()).to.equal('layui'); }); it('timeout 3000', function (done) { var app = laydate.render({ elem: '#test-div', show: true }); app.hint('layui'); expect($('.layui-laydate-hint').length).to.equal(1); setTimeout(function () { expect($('.layui-laydate-hint').length).to.equal(0); done(); }, 3500); }); }); describe('.getEndDate', function () { it('default params and return value', function () { expect(laydate.getEndDate).to.be.a('function', 'laydate.getEndDate 必须是方法'); expect(laydate.getEndDate()).to.be.a('number', 'laydate.getEndDate 返回值必须是数字'); expect(laydate.getEndDate(10, 2017)).to.be.a('number', 'laydate.getEndDate 返回值必须是数字'); expect(laydate.getEndDate(10)).to.be.a('number', 'laydate.getEndDate 返回值必须是数字'); }); it('getEndDate(year)', function () { expect(laydate.getEndDate(10)).to.equal(31, '10月最后一天为31'); expect(laydate.getEndDate(11)).to.equal(30, '11月最后一天为30'); expect(laydate.getEndDate(11, 2017)).to.equal(30, '2017年11月最后一天为30'); expect(laydate.getEndDate(10, 2017)).to.equal(31, '2017年10月最后一天为31'); expect(laydate.getEndDate(2, 2017)).to.equal(28, '2017年2月最后一天为28'); expect(laydate.getEndDate(2, 2016)).to.equal(29, '2016年2月最后一天为29'); }); }); describe('lay', function () { describe('lay.stope', function () { it('stopPropagation', function (done) { lay.stope({ stopPropagation: function (e) { expect(e).to.be.undefined; done(); } }); }); it('cancelBubble', function () { var event = {}; lay.stope(event); expect(event.cancelBubble).to.be.true; }); // ie中不支持, 只针对phantomjs测试 if (IS_PHANTOMJS) { it('window.event', function () { var old = window.event; var event = window.event = {}; lay.stope(); expect(event.cancelBubble).to.be.true; window.event = old; }); } }); describe('lay.extend', function () { it('default params and return value', function () { expect(lay.extend).to.be.a('function', '必须是方法'); expect(lay.extend()).to.be.a('object', '返回值必须是对象'); expect(lay.extend({})).to.be.a('object', '返回值必须是对象'); expect(lay.extend({}, {})).to.be.a('object', '返回值必须是对象'); }); it('multiple object', function () { expect(lay.extend({}, {})).to.deep.equal({}); expect(lay.extend(true, {})).to.deep.equal({}); expect(lay.extend(true, {a: 1}, {b: 2})).to.deep.equal({ a: 1, b: 2 }, '合并多个对象'); expect(lay.extend({a: 1}, {b: 2})).to.deep.equal({ a: 1, b: 2 }, '合并多个对象'); }); it('recursion merge', function () { expect(lay.extend({ a: 1, b: { b1: 1 } }, { b: { b2: 1, b3: [1] } }, { c: null })).to.deep.equal({ a: 1, b: { b1: 1, b2: 1, b3: [1] }, c: null }); }); it('clone object', function () { var a = {}; lay.extend(a, { b: 1 }, { c: [] }); expect(a.b).to.equal(1, '污染了原对象'); expect(a.c).to.deep.equal([], '污染了原对象'); }); }); describe('lay.each', function () { it('check params', function () { expect(lay.each).to.be.a('function', '必须是方法'); expect(lay.each()).to.deep.equal(lay, '返回值判断'); expect(lay.each({})).to.deep.equal(lay); expect(lay.each([])).to.deep.equal(lay); expect(lay.each({}, function () {})).to.deep.equal(lay); }); it('null params', function (done) { var index = 0; lay.each(null, function (index) { index += 1; }); setTimeout(function () { expect(index).to.equal(0); done(); }); }); it('object each', function (done) { lay.each({ name: 'layui' }, function (key, value) { expect(this + '').to.deep.equal(value).and.equal('layui'); expect(key).to.equal('name'); done(); }); }); it('array each', function (done) { lay.each([ 'layui' ], function (index, value) { expect(this + '').to.deep.equal(value).and.equal('layui'); expect(index).to.equal(0); done(); }); }); it('break array each', function () { var arr = new Array(100).join(',').split(','); var flag = -1; lay.each(arr, function (index) { flag = index; if (index > 5) { return true; } }); expect(flag).to.equal(6); flag = -1; lay.each(arr, function (index) { flag = index; if (index > 5) { return false; } }); expect(flag).to.equal(99); }); it('break object each', function () { var obj = { name: 'layui', version: '2.x' }; var flag = null; lay.each(obj, function (key) { flag = key; return true; }); expect(flag).to.equal('name'); flag = null; lay.each(obj, function (key) { flag = key; return false; }); expect(flag).to.equal('version'); }); }); describe('lay.elem', function () { it('create div', function () { expect(lay.elem('div')).to.be.an.instanceof(HTMLElement, '必须是 html 节点'); }); it('has error', function () { expect(function () { lay.elem([]); }).to.throw; expect(function () { lay.elem(); }).to.throw; }); it('set attrs', function () { var node = lay.elem('div', { 'data-name': 'layui' }); expect($(node).attr('data-name')).to.equal('layui'); }); }); describe('lay.digit', function () { it('default params and return value', function () { expect(lay.digit).to.be.a('function', '必须是方法'); expect(lay.digit()).to.equal('undefined', '无参数时返回 undefined'); }); it('default length', function () { expect(lay.digit(1)).to.equal('01'); expect(lay.digit(1)).to.equal(lay.digit(1, 2)); expect(lay.digit(11)).to.equal('11'); expect(lay.digit('111')).to.equal('111'); }); it('set length', function () { expect(lay.digit(1, 1)).to.equal('1'); expect(lay.digit(1, 2)).to.equal('01'); expect(lay.digit(11, 1)).to.equal('11'); expect(lay.digit('11', 10)).to.equal('0000000011', '补10位'); expect(lay.digit(1, 5)).to.equal('00001'); expect(lay.digit(1, 100).length).to.equal(100, '补100位'); }); }); if (IS_PHANTOMJS) { it('lay.ie', function () { expect(lay.ie).to.be.a('boolean'); }); } }); describe('lay()', function () { it('return value', function () { expect(lay).to.be.a('function', '必须是方法'); expect(lay()).to.be.a('object'); }); it('#find', function () { expect(lay('body').find()[0]).to.be.undefined; expect(lay('body').find('.test-test-empty')[0]).to.be.undefined; expect(lay('body').find('div')[0]).to.not.be.undefined; }); it('#addClass', function () { var $node = lay('#test-div'); expect($('#test-div').hasClass('layui')).to.be.false; expect($node.addClass('layui')).to.deep.equal($node); expect($('#test-div').hasClass('layui')).to.be.true; }); it('#removeClass', function () { var $node = lay('#test-div'); lay('#test-div').addClass('layui'); expect($('#test-div').hasClass('layui')).to.be.true; expect($node.removeClass('layui')).to.deep.equal($node); expect($('#test-div').hasClass('layui')).to.be.false; }); it('#hasClass', function () { expect(lay('#test-div').hasClass('layui')).to.be.false; lay('#test-div').addClass('layui'); expect(lay('#test-div').hasClass('layui')).to.be.true; lay('#test-div').removeClass('layui'); expect(lay('#test-div').hasClass('layui')).to.be.false; }); it('#attr', function () { $('#test-div').attr('data-name', 'layui'); expect(lay('#test-div').attr('data-name')).to.equal('layui'); var $node = lay('#test-div'); expect($node.attr('data-name', 'layui-2')).to.deep.equal($node); expect(lay('#test-div').attr('data-name')).to.equal('layui-2'); expect(lay('#test-test-empty').attr('data-name')).to.be.undefined; }); it('#removeAttr', function () { var $node = lay('#test-div'); lay('#test-div').attr('data-name', 'layui'); expect(lay('#test-div').attr('data-name')).to.equal('layui'); expect(lay('#test-div').removeAttr('data-name')).to.deep.equal($node); expect(lay('#test-div').attr('data-name')).to.not.equal('layui'); }); it('#html', function () { var str = 'layui'; var $node = lay('#test-div'); expect($node.html(str)).to.deep.equal($node); expect($('#test-div').html()).to.equal(str); }); it('#val', function () { var $node = lay('#test-input'); expect($node.val('layui')).to.deep.equal($node); expect($('#test-input').val()).to.equal('layui'); }); it('#append', function () { var $node = lay('#test-div'); expect($node.append('1')).to.deep.equal($node); lay('#test-div').append('2'); expect($('#test-div').html()).to.equal('12'); $('#test-div').empty(); var node = $('').html('layui').get(0); lay('#test-div').append(node); expect($('#test-div').html()).to.equal('layui'); }); it('#remove', function () { lay('#test-div').append('
1
'); expect($('#test-div').children().length).to.equal(1); lay('#test-div').remove($('#test-div').children().get(0)); expect($('#test-div').children().length).to.equal(0); lay('#test-div').append('
1
'); expect($('#test-div').children().length).to.equal(1); lay('#test-div div').remove(); expect($('#test-div').children().length).to.equal(0); }); it('#on', function (done) { lay('#test-div').on('click', function (event) { expect(event).to.be.not.undefined; done(); }); $('#test-div').click(); }); // it('#off', function (done) { // var fn = function () { // done('off error'); // }; // lay('#test-div').on('click', fn).off('click', fn); // $('#test-div').click(); // setTimeout(function () { // done(); // }); // }); }); }); /* eslint-enable max-nested-callbacks, fecs-indent */