diff --git a/test/lay/modules/laydate.js b/test/lay/modules/laydate.js new file mode 100644 index 00000000..cf2d978e --- /dev/null +++ b/test/lay/modules/laydate.js @@ -0,0 +1,429 @@ +/** + * @file laydate - 测试 + * @author xuexb + */ + +/* global layui */ +/* eslint-disable max-nested-callbacks, fecs-indent */ + +var $ = layui.$; +var laydate = layui.laydate; + +/** + * 创建dom元素, 并返回 jquery 对象 + * + * @param {string} html 标签 + * + * @return {jQuery} + */ +var createNode = function (html) { + return $(html).addClass('test-node').appendTo('body'); +}; + +/** + * 日期格式化 + * + * @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 && !(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; + }); + + 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.ready', 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(); + }); + }); + }); + + it('options.elem', 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); + }); + + 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 () { + var result = laydate.render({ + elem: '#test-div', + type: 'year' + }); + + expect(result.config.type).to.equal('year'); + expect($('.laydate-set-ym').length).to.equal(0); + + $('#test-div').click(); + + 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'), '确认后输出选中的值'); + }); + + it('is month', function () { + var result = laydate.render({ + elem: '#test-div', + type: 'month' + }); + + expect(result.config.type).to.equal('month'); + expect($('.laydate-set-ym').length).to.equal(0); + + $('#test-div').click(); + + 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'), '确认后输出选中的值'); + }); + + it('is date', function () { + var result = laydate.render({ + elem: '#test-div', + type: 'date' + }); + var now = new Date(); + + expect(result.config.type).to.equal('date'); + expect($('.laydate-set-ym').length).to.equal(0); + + $('#test-div').click(); + + 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'), '确认后输出选中的值'); + }); + + it('is time', function () { + var result = laydate.render({ + elem: '#test-div', + type: 'time' + }); + + expect(result.config.type).to.equal('time'); + expect($('.laydate-time-text').length).to.equal(0); + + $('#test-div').click(); + + 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'); + }); + + it('is datetime', function () { + var result = laydate.render({ + elem: '#test-div', + type: 'datetime' + }); + var now = new Date(); + + expect(result.config.type).to.equal('datetime'); + expect($('.laydate-set-ym').length).to.equal(0); + + $('#test-div').click(); + + 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'), '确认后输出选中的值'); + }); + }); + + describe('options.range', function () { + it('time type and range', function () { + laydate.render({ + elem: '#test-div', + type: 'time', + range: true + }); + + $('#test-div').click(); + expect($('.laydate-time-text').length).to.equal(2); + $('.laydate-btns-confirm').click(); + expect($('#test-div').text()).to.equal('00:00:00 - 00:00:00', '确认后输出范围值'); + }); + + it('year type and range is split', function () { + laydate.render({ + elem: '#test-div', + type: 'year', + range: '到' + }); + + $('#test-div').click(); + $('.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点'), '确认后输出选中的值'); + }); + }); + + describe('options.value', function () { + 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' + }); + + $('#test-input-2').focus(); + + // 错误提示 + setTimeout(function () { + expect($('.layui-laydate-hint').text()).to.match(/日期格式不合法/); + done(); + }); + }); + }); + }); +}); + +/* eslint-enable max-nested-callbacks, fecs-indent */ diff --git a/test/layui.js b/test/layui.js index a2272677..5f7b9c2b 100644 --- a/test/layui.js +++ b/test/layui.js @@ -8,6 +8,13 @@ var $ = layui.$; +/** + * 是否基于`phantomjs`测试, 因为有些特殊的case在ie中是不可用的, 比如: `window.event = {}` + * + * @type {boolean} + */ +var IS_PHANTOMJS = layui.device('phantomjs').phantomjs; + describe('layui', function () { it('version', function () { expect(layui.v).to.be.a('string'); @@ -201,12 +208,13 @@ describe('layui', function () { // }); // }); - it('http 404', function (done) { - layui.img('http://www.404.xx/logo.404.gif', function () {}, function (e) { - expect(e).to.not.undefined; - done(); - }); - }); + // 由于没有超时配置, 在部分设备中, dns解析可能超时 + // it('http 404', function (done) { + // layui.img('http://www.404.xx/logo.404.gif', function () {}, function (e) { + // expect(e).to.not.undefined; + // done(); + // }); + // }); it('load complete', function (done) { layui.img(base64, function () { @@ -240,14 +248,16 @@ describe('layui', function () { expect(event.cancelBubble).to.be.true; }); - // ie中不支持 - // it('window.event', function () { - // var old = window.event; - // var event = window.event = {}; - // layui.stope(); - // expect(event.cancelBubble).to.be.true; - // window.event = old; - // }); + // ie中不支持, 只针对phantomjs测试 + if (IS_PHANTOMJS) { + it('window.event', function () { + var old = window.event; + var event = window.event = {}; + layui.stope(); + expect(event.cancelBubble).to.be.true; + window.event = old; + }); + } }); describe('layui.onevent', function () { @@ -309,7 +319,17 @@ describe('layui', function () { expect(index).to.equal(3); }); - // todo多个事件 + it('return value', function () { + expect(layui.event('id', 'event')).to.be.null; + + // 只有在返回 false 时, 结果才是 false + layui.onevent('test-return-value-1', 'click', function (data) { + return data; + }); + expect(layui.event('test-return-value-1', 'click', false)).to.be.false; + expect(layui.event('test-return-value-1', 'click', true)).to.be.null; + expect(layui.event('test-return-value-1', 'click')).to.be.null; + }); }); describe('layui.sort', function () { @@ -503,5 +523,81 @@ describe('layui', function () { expect(layui.modules[id]).to.equal(id); delete layui.modules[id]; }); + + describe('layui.data', function () { + if (IS_PHANTOMJS) { + it('not support JSON', function () { + var old = window.JSON; + window.JSON = null; + expect(layui.data()).to.be.undefined; + window.JSON = {}; + expect(layui.data()).to.be.undefined; + window.JSON = old; + }); + } + + // 在支持情况下才测试 + if (window.localStorage) { + it('delete table data', function() { + var id = 'test-delete-data'; + localStorage[id] = true; + expect(localStorage[id]).to.equal('true'); + expect(layui.data(id, null)).to.be.true; + expect(localStorage[id]).to.be.undefined; + }); + + it('get table data', function () { + var table = 'test-get-table-data'; + expect(layui.data(table)).to.deep.equal({}); + + layui.data(table, { + key: 'name', + value: 'layui' + }); + expect(layui.data(table)).to.deep.equal({ + name: 'layui' + }); + + // 删除数据 + layui.data(table, null); + }); + + it('get data', function () { + var id = 'test-get-data'; + + // 直接获取肯定为空 + expect(layui.data(null, id)).to.be.undefined; + + // 写入数据 + expect(layui.data(null, { + key: id, + value: true + })).to.be.true; + + expect(layui.data(null, id)).to.be.true; + + // 清除数据 + layui.data(null, { + key: id, + remove: true + }); + }); + + it('remove data', function () { + var id = 'test-remove-data'; + + layui.data(null, { + key: id, + value: true + }); + expect(layui.data(null, id)).to.be.true; + layui.data(null, { + key: id, + remove: true + }); + expect(layui.data(null, id)).to.be.undefined; + }); + } + }); }); /* eslint-enable max-nested-callbacks, fecs-indent */