mirror of
https://github.com/layui/layui.git
synced 2026-02-09 02:09:18 +08:00
chore: initial commit (#2906)
This commit is contained in:
贤心
568
tests/visual/base.html
Normal file
568
tests/visual/base.html
Normal file
@@ -0,0 +1,568 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>基础方法测试 - layui</title>
|
||||
<link href="./assets/dist/css/layui.css" rel="stylesheet" />
|
||||
<link href="./assets/modules/test/test.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script src="./assets/dist/layui.js"></script>
|
||||
<script>
|
||||
layui.use(async () => {
|
||||
var lay = layui.lay;
|
||||
var util = layui.util;
|
||||
|
||||
// 异步导入测试模块
|
||||
const { test } = await import('./assets/modules/test/test.js');
|
||||
const tester = test({
|
||||
elem: '#root',
|
||||
items: [
|
||||
{
|
||||
name: 'layui',
|
||||
children: [
|
||||
{ name: 'sort' },
|
||||
{ name: 'type' },
|
||||
{ name: 'isArray' },
|
||||
{ name: 'extend' },
|
||||
],
|
||||
},
|
||||
{ type: '-' },
|
||||
{
|
||||
name: 'lay',
|
||||
children: [
|
||||
{ name: 'extend' },
|
||||
{ name: 'treeToFlat' },
|
||||
{ name: 'flatToTree' },
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
tester.describe('layui.sort', (it) => {
|
||||
it({
|
||||
title: '整数型数字排序',
|
||||
code: `
|
||||
const arr = layui.sort([{a: 3},{a: 0},{a: 0},{a: -1},{a: -5},{a: 6},{a: 9},{a: -333333}], 'a');
|
||||
console.log(arr);
|
||||
`,
|
||||
expected: [
|
||||
{ a: -333333 },
|
||||
{ a: -5 },
|
||||
{ a: -1 },
|
||||
{ a: 0 },
|
||||
{ a: 0 },
|
||||
{ a: 3 },
|
||||
{ a: 6 },
|
||||
{ a: 9 },
|
||||
],
|
||||
});
|
||||
|
||||
it({
|
||||
title: '浮点型数字排序',
|
||||
code: `
|
||||
const arr = layui.sort([{a: 3.5},{a: 0.5},{a: 0.5},{a: -1.5},{a: -5.5},{a: 6.5},{a: 9.5},{a: -333333.5}], 'a');
|
||||
console.log(arr);
|
||||
`,
|
||||
expected: [
|
||||
{ a: -333333.5 },
|
||||
{ a: -5.5 },
|
||||
{ a: -1.5 },
|
||||
{ a: 0.5 },
|
||||
{ a: 0.5 },
|
||||
{ a: 3.5 },
|
||||
{ a: 6.5 },
|
||||
{ a: 9.5 },
|
||||
],
|
||||
});
|
||||
|
||||
it({
|
||||
title: '混合型数字排序',
|
||||
code: `
|
||||
const arr = layui.sort([{a: 1},{a: 20.5},{a: 20.3},{a: 3},{a: 52},{a: 4.3}], 'a');
|
||||
console.log(arr);
|
||||
`,
|
||||
expected: [
|
||||
{ a: 1 },
|
||||
{ a: 3 },
|
||||
{ a: 4.3 },
|
||||
{ a: 20.3 },
|
||||
{ a: 20.5 },
|
||||
{ a: 52 },
|
||||
],
|
||||
});
|
||||
|
||||
it({
|
||||
title: '中文排序',
|
||||
code: `
|
||||
const arr = layui.sort([{a: '男'},{a: '女'},{a: '男'},{a: '女'},{a: '男'}], 'a');
|
||||
console.log(arr);
|
||||
`,
|
||||
expected: [
|
||||
{ a: '女' },
|
||||
{ a: '女' },
|
||||
{ a: '男' },
|
||||
{ a: '男' },
|
||||
{ a: '男' },
|
||||
],
|
||||
});
|
||||
|
||||
it({
|
||||
title: '英文排序',
|
||||
code: `
|
||||
const arr = layui.sort([{a: 'E'},{a: 'B'},{a: 'D'},{a: 'C'},{a: 'A'}], 'a');
|
||||
console.log(arr);
|
||||
`,
|
||||
expected: [
|
||||
{ a: 'A' },
|
||||
{ a: 'B' },
|
||||
{ a: 'C' },
|
||||
{ a: 'D' },
|
||||
{ a: 'E' },
|
||||
],
|
||||
});
|
||||
|
||||
it({
|
||||
title: '混合排序',
|
||||
code: `
|
||||
const arr = layui.sort([
|
||||
{a: 3},
|
||||
{a: '男'},
|
||||
{a: 0},
|
||||
{a: 66},
|
||||
{a: 99},
|
||||
{a: 'C'},
|
||||
{a: '女'},
|
||||
{a: 3.5},
|
||||
{a: 0},
|
||||
{a: -1},
|
||||
{a: 'B'},
|
||||
{a: 5.5},
|
||||
{a: '男'},
|
||||
{a: 'A'},
|
||||
{a: -5},
|
||||
{a: '男'},
|
||||
{a: 6},
|
||||
{a: 9}
|
||||
], 'a');
|
||||
console.log(arr);
|
||||
`,
|
||||
expected: [
|
||||
{ a: -5 },
|
||||
{ a: -1 },
|
||||
{ a: 0 },
|
||||
{ a: 0 },
|
||||
{ a: 3 },
|
||||
{ a: 3.5 },
|
||||
{ a: 5.5 },
|
||||
{ a: 6 },
|
||||
{ a: 9 },
|
||||
{ a: 66 },
|
||||
{ a: 99 },
|
||||
{ a: 'A' },
|
||||
{ a: 'B' },
|
||||
{ a: 'C' },
|
||||
{ a: '女' },
|
||||
{ a: '男' },
|
||||
{ a: '男' },
|
||||
{ a: '男' },
|
||||
],
|
||||
});
|
||||
|
||||
it({
|
||||
title: '数组成员为纯数字',
|
||||
code: `
|
||||
const arr = layui.sort([1, 20.5, 19.5, 52, 4.5]);
|
||||
console.log(arr);
|
||||
`,
|
||||
expected: [1, 4.5, 19.5, 20.5, 52],
|
||||
});
|
||||
|
||||
it({
|
||||
title: '数组成员为混合型',
|
||||
code: `
|
||||
// 按成员对象的 key 为 a 进行比较
|
||||
const arr = layui.sort([1, {a: 32}, 20.5, {a: 6}, 52, 5.5], 'a');
|
||||
console.log(arr);
|
||||
`,
|
||||
expected: [1, 5.5, { a: 6 }, 20.5, { a: 32 }, 52],
|
||||
});
|
||||
});
|
||||
|
||||
tester.describe('layui.type', (it) => {
|
||||
it({
|
||||
title: 'new RegExp()',
|
||||
code: `console.log(layui.type(new RegExp()))`,
|
||||
expected: 'regexp',
|
||||
});
|
||||
|
||||
it({
|
||||
title: 'new Date()',
|
||||
code: `console.log(layui.type(new Date()))`,
|
||||
expected: 'date',
|
||||
});
|
||||
});
|
||||
|
||||
tester.describe('layui.isArray', (it) => {
|
||||
it({
|
||||
title: '[]',
|
||||
code: `console.log(layui.isArray([]))`,
|
||||
expected: true,
|
||||
});
|
||||
|
||||
it({
|
||||
title: 'lay("div")',
|
||||
code: `console.log(layui.isArray(lay("div")))`,
|
||||
expected: true,
|
||||
});
|
||||
|
||||
it({
|
||||
title: 'document.querySelectorAll("div")',
|
||||
code: `console.log(layui.isArray(document.querySelectorAll("div")))`,
|
||||
expected: true,
|
||||
});
|
||||
|
||||
it({
|
||||
title: '{}',
|
||||
code: `console.log(layui.isArray({}))`,
|
||||
expected: false,
|
||||
});
|
||||
});
|
||||
|
||||
tester.describe('layui.extend', (it) => {
|
||||
it({
|
||||
title: '测试扩展模块是否注册成功',
|
||||
code: `
|
||||
layui.config({
|
||||
base: './assets/modules/extends/' // 用于扩展模块的基础路径
|
||||
});
|
||||
|
||||
// 扩展模块
|
||||
layui.extend({
|
||||
// 扩展遵循 Layui 规范的模块
|
||||
index: 'index', // 会前置追加 base 基础路径
|
||||
test1: 'test/test1', // 会前置追加 base 基础路径
|
||||
test2: '{/}./assets/modules/extends/test/test2', // 不会前置追加 base 基础路径，即单独路径
|
||||
// 扩展任意外部模块
|
||||
markdownit: {
|
||||
src: 'https://cdnjs.cloudflare.com/ajax/libs/markdown-it/13.0.2/markdown-it.min.js', // 模块路径
|
||||
api: 'markdownit' // 接口名称
|
||||
},
|
||||
Prism: {
|
||||
src: 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js',
|
||||
api: 'Prism'
|
||||
}
|
||||
});
|
||||
`,
|
||||
expected: '扩展模块名应为 layui.modules 成员',
|
||||
assert(actual, expected) {
|
||||
var modules = layui.modules;
|
||||
if (
|
||||
modules.index &&
|
||||
modules.test1 &&
|
||||
modules.test2 &&
|
||||
modules.markdownit &&
|
||||
modules.Prism
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
it({
|
||||
title: '测试加载「扩展模块」是否成功',
|
||||
code: `
|
||||
// 加载全部扩展模块
|
||||
layui.use(['index', 'test1', 'test2', 'markdownit', 'Prism'], function() {
|
||||
console.log('All modules loaded successfully.');
|
||||
});
|
||||
|
||||
// 直接加载 base 目录下的模块
|
||||
layui.use(['test'], function() {
|
||||
console.log('test module: loaded successfully');
|
||||
});
|
||||
`,
|
||||
expected: '扩展模块应成功绑定在 layui 对象上',
|
||||
async assert(actual, expected) {
|
||||
async function loadExtendModule() {
|
||||
await new Promise((resolve, reject) => {
|
||||
// 加载全部扩展模块
|
||||
layui.use(
|
||||
['index', 'test1', 'test2', 'markdownit', 'Prism'],
|
||||
() => {
|
||||
console.log(
|
||||
'遵循 Layui 规范的扩展模块 loaded: ',
|
||||
layui.index,
|
||||
layui.test1,
|
||||
layui.test2,
|
||||
);
|
||||
console.log('任意外部模块 loaded: ');
|
||||
console.log(' > markdownit: ', layui.markdownit);
|
||||
console.log(' > Prism: ', layui.Prism);
|
||||
|
||||
resolve();
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
await new Promise((resolve, reject) => {
|
||||
// 直接加载 base 目录下的模块
|
||||
layui.use(['test'], () => {
|
||||
console.log(
|
||||
'直接加载 base 目录下的模块 loaded: ',
|
||||
layui.test,
|
||||
);
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
|
||||
if (
|
||||
layui.index &&
|
||||
layui.test1 &&
|
||||
layui.test2 &&
|
||||
layui.markdownit &&
|
||||
layui.Prism &&
|
||||
layui.test
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return await loadExtendModule();
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* lay
|
||||
*/
|
||||
|
||||
tester.describe('lay.extend', (it) => {
|
||||
const objNCode = `
|
||||
const objN = [
|
||||
{
|
||||
a: [1, 3],
|
||||
b: {ba: 1}
|
||||
},
|
||||
{
|
||||
a: [5],
|
||||
b: {bb: 2}
|
||||
},
|
||||
{
|
||||
b: {ba: 3},
|
||||
c: 3
|
||||
}
|
||||
];
|
||||
`;
|
||||
|
||||
it({
|
||||
title: '普通拷贝',
|
||||
code: `
|
||||
const obj = lay.extend({}, {a:1});
|
||||
console.log(obj);
|
||||
`,
|
||||
expected: { a: 1 },
|
||||
});
|
||||
|
||||
it({
|
||||
title: '普通合并',
|
||||
code: `
|
||||
const obj = lay.extend({a:1}, {a:3}, {a:5, b:5});
|
||||
console.log(obj);
|
||||
`,
|
||||
expected: { a: 5, b: 5 },
|
||||
});
|
||||
|
||||
it({
|
||||
title: '值为「普通对象和数组」的深拷贝合并',
|
||||
code: `
|
||||
${objNCode}
|
||||
const obj = lay.extend({}, ...objN);
|
||||
console.log(obj);
|
||||
`,
|
||||
expected: { a: [5, 3], b: { ba: 3, bb: 2 }, c: 3 },
|
||||
});
|
||||
|
||||
it({
|
||||
title: '使用 customizer 实现数组覆盖而非合并',
|
||||
code: `
|
||||
${objNCode}
|
||||
const obj = lay.extend({}, ...objN, (objValue, srcValue) => {
|
||||
if (Array.isArray(objValue) && Array.isArray(srcValue)) {
|
||||
return srcValue
|
||||
|
||||
// 若为 Object[] 值，可深拷贝数据源覆盖
|
||||
// return lay.extend([], srcValue);
|
||||
}
|
||||
});
|
||||
console.log(obj);
|
||||
`,
|
||||
expected: { a: [5], b: { ba: 3, bb: 2 }, c: 3 },
|
||||
});
|
||||
|
||||
it({
|
||||
title: '使用 customizer 实现特定字段跳过合并',
|
||||
code: `
|
||||
${objNCode}
|
||||
const obj = lay.extend({}, ...objN, (objValue, srcValue, key) => {
|
||||
if (key === 'b') {
|
||||
return objValue;
|
||||
}
|
||||
});
|
||||
console.log(obj);
|
||||
`,
|
||||
expected: { a: [5, 3], b: { ba: 1 }, c: 3 },
|
||||
});
|
||||
|
||||
it({
|
||||
title: '是否存在对象引用',
|
||||
code: `
|
||||
const src = { data: [{a: 1, b: 2}] };
|
||||
const obj = lay.extend({}, src);
|
||||
|
||||
// 修改 obj 数组类型中的对象成员，查看 src 是否被影响
|
||||
obj.data[0].a = '11111';
|
||||
console.log(obj.data[0].a === src.data[0].a);
|
||||
`,
|
||||
expected: false,
|
||||
});
|
||||
});
|
||||
|
||||
tester.describe('lay.treeToFlat', (it) => {
|
||||
const data = [
|
||||
{
|
||||
title: '节点 1',
|
||||
id: '1000',
|
||||
children: [
|
||||
{
|
||||
title: '节点 1-1',
|
||||
id: '1001',
|
||||
},
|
||||
{
|
||||
title: '节点 1-2',
|
||||
id: '1002',
|
||||
children: [
|
||||
{
|
||||
title: '节点 1-2-1',
|
||||
id: '1003',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '节点 2',
|
||||
id: '2000',
|
||||
},
|
||||
];
|
||||
|
||||
it({
|
||||
title: '树状数据展平',
|
||||
code: `
|
||||
const data = ${JSON.stringify(data, null, 2)};
|
||||
|
||||
// 树状数据展平
|
||||
const flatData = lay.treeToFlat(data, {
|
||||
keepChildren: true // 是否保留 children 字段
|
||||
});
|
||||
console.log(JSON.stringify(flatData));
|
||||
`,
|
||||
expected: '子节点被展平到一级数组中（控制台查看）',
|
||||
assert(actual, expected) {
|
||||
try {
|
||||
actual = JSON.parse(actual);
|
||||
console.log(`${this.title} : `, actual);
|
||||
return actual.length === 5;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
it({
|
||||
title: '是否存在对象引用',
|
||||
code: `
|
||||
const data = ${JSON.stringify(data, null, 2)};
|
||||
|
||||
// 树状数据展平
|
||||
const flatData = lay.treeToFlat(data, {
|
||||
keepChildren: true // 是否保留 children 字段
|
||||
});
|
||||
flatData[0].children[0].title="333333"; // 修改数据
|
||||
console.log(flatData[0].children[0].title === data[0].children[0].title);
|
||||
`,
|
||||
expected: false,
|
||||
});
|
||||
});
|
||||
|
||||
tester.describe('lay.flatToTree', (it) => {
|
||||
const data = [
|
||||
{
|
||||
title: '节点 1',
|
||||
id: '1000',
|
||||
parentId: null,
|
||||
},
|
||||
{
|
||||
title: '节点 1-1',
|
||||
id: '1001',
|
||||
parentId: '1000',
|
||||
},
|
||||
{
|
||||
title: '节点 1-2',
|
||||
id: '1002',
|
||||
parentId: '1000',
|
||||
},
|
||||
{
|
||||
title: '节点 1-2-1',
|
||||
id: '1003',
|
||||
parentId: '1002',
|
||||
},
|
||||
{
|
||||
title: '节点 2',
|
||||
id: '2000',
|
||||
parentId: null,
|
||||
},
|
||||
];
|
||||
|
||||
it({
|
||||
title: '平铺数据转树状',
|
||||
code: `
|
||||
const data = ${JSON.stringify(data, null, 2)};
|
||||
|
||||
const treeData = lay.flatToTree(data); // 平铺数据转树状
|
||||
console.log(JSON.stringify(treeData));
|
||||
`,
|
||||
expected: '根据 parentId 字段进行树状数据生成（控制台查看）',
|
||||
assert(actual, expected) {
|
||||
try {
|
||||
actual = JSON.parse(actual);
|
||||
console.log(`${this.title} : `, actual);
|
||||
return actual.length === 2;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
it({
|
||||
title: '是否存在对象引用',
|
||||
code: `
|
||||
const data = ${JSON.stringify(data, null, 2)};
|
||||
|
||||
const treeData = lay.flatToTree(data); // 平铺数据转树状
|
||||
treeData[0].children[0].title="333333"; // 修改数据
|
||||
// 查看原始数据是否被修改
|
||||
console.log(treeData[0].children[0].title === data[1].title);
|
||||
`,
|
||||
expected: false,
|
||||
});
|
||||
});
|
||||
|
||||
// 返回顶部
|
||||
util.fixbar();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user