一套开源的 Web UI 组件库。采用自身极简的模块化规范,并遵循原生 HTML/CSS/JS 的开发模式,极易上手,开箱即用。非常适合网页界面的快速构建。
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

1715 lines
49 KiB

/**
* @file laydate - 测试
* @author xuexb <fe.xiaowu@gmail.com>
*/
/* 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('<div id="test-div"></div>');
createNode('<input id="test-input" type="text">');
});
// 删除节点
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('<input id="test-input-2" type="text" value="layui">');
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('<button id="test-trigger-show">显示</button>');
$('#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('<button id="test-trigger-show">显示</button>');
$('#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 = '<b>layui</b>';
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('<b>1</b>')).to.deep.equal($node);
lay('#test-div').append('<b>2</b>');
expect($('#test-div').html()).to.equal('<b>1</b><b>2</b>');
$('#test-div').empty();
var node = $('<b />').html('layui').get(0);
lay('#test-div').append(node);
expect($('#test-div').html()).to.equal('<b>layui</b>');
});
it('#remove', function () {
lay('#test-div').append('<div>1</div>');
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('<div>1</div>');
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 */