refactor(frontend): replace toast system with zibll notyf
This commit is contained in:
@@ -0,0 +1,218 @@
|
||||
'use strict';
|
||||
|
||||
const assert = require('node:assert/strict');
|
||||
const fs = require('node:fs');
|
||||
const path = require('node:path');
|
||||
const test = require('node:test');
|
||||
const vm = require('node:vm');
|
||||
|
||||
const root = path.resolve(__dirname, '..', '..');
|
||||
const read = (file) => fs.readFileSync(path.join(root, file), 'utf8');
|
||||
|
||||
class FakeElement {
|
||||
constructor(classes = [], id = '') {
|
||||
this.classes = new Set(classes);
|
||||
this.id = id;
|
||||
this.children = [];
|
||||
this.parent = null;
|
||||
this.innerHTML = '';
|
||||
this.delegated = null;
|
||||
}
|
||||
|
||||
append(child) {
|
||||
child.parent = this;
|
||||
this.children.push(child);
|
||||
}
|
||||
}
|
||||
|
||||
function descendants(element) {
|
||||
return element.children.flatMap((child) => [child, ...descendants(child)]);
|
||||
}
|
||||
|
||||
function createRuntime() {
|
||||
const body = new FakeElement(['body']);
|
||||
const document = { body };
|
||||
const timers = [];
|
||||
const window = {
|
||||
setTimeout(callback, delay) {
|
||||
timers.push({ callback, delay });
|
||||
return timers.length;
|
||||
},
|
||||
};
|
||||
|
||||
class FakeQuery {
|
||||
constructor(elements) {
|
||||
this.elements = elements;
|
||||
this.length = elements.length;
|
||||
}
|
||||
|
||||
append(value) {
|
||||
let elements = value instanceof FakeQuery ? value.elements : [];
|
||||
if (typeof value === 'string' && value === '<div class="notyn"></div>') {
|
||||
elements = [new FakeElement(['notyn'])];
|
||||
}
|
||||
this.elements.forEach((parent) => elements.forEach((element) => parent.append(element)));
|
||||
return this;
|
||||
}
|
||||
|
||||
addClass(classes) {
|
||||
this.elements.forEach((element) => classes.split(/\s+/).forEach((name) => element.classes.add(name)));
|
||||
return this;
|
||||
}
|
||||
|
||||
removeClass() {
|
||||
this.elements.forEach((element) => element.classes.clear());
|
||||
return this;
|
||||
}
|
||||
|
||||
find(selector) {
|
||||
return new FakeQuery(this.elements.flatMap(descendants).filter((element) => matches(element, selector)));
|
||||
}
|
||||
|
||||
html(value) {
|
||||
this.elements.forEach((element) => { element.innerHTML = value; });
|
||||
return this;
|
||||
}
|
||||
|
||||
remove() {
|
||||
this.elements.forEach((element) => {
|
||||
if (!element.parent) return;
|
||||
element.parent.children = element.parent.children.filter((child) => child !== element);
|
||||
element.parent = null;
|
||||
});
|
||||
return this;
|
||||
}
|
||||
|
||||
on(event, selector, handler) {
|
||||
this.elements.forEach((element) => { element.delegated = { event, selector, handler }; });
|
||||
return this;
|
||||
}
|
||||
}
|
||||
|
||||
function matches(element, selector) {
|
||||
if (selector.startsWith('.')) return element.classes.has(selector.slice(1));
|
||||
if (selector.startsWith('#')) return element.id === selector.slice(1);
|
||||
return false;
|
||||
}
|
||||
|
||||
function parseNotification(html) {
|
||||
const id = (html.match(/ id="([^"]+)"/) || [])[1] || '';
|
||||
const content = html.match(/<div class="notyf ([^"]+)">([\s\S]*)<\/div><\/div>$/);
|
||||
assert.ok(content, 'notification markup should follow the Zibll contract');
|
||||
const wrapper = new FakeElement(['noty1'], id);
|
||||
const message = new FakeElement(['notyf', content[1]]);
|
||||
message.innerHTML = content[2];
|
||||
wrapper.append(message);
|
||||
return wrapper;
|
||||
}
|
||||
|
||||
function jQuery(value) {
|
||||
if (value === document.body || value instanceof FakeElement) return new FakeQuery([value]);
|
||||
if (typeof value === 'string' && value.startsWith('<div class="noty1"')) {
|
||||
return new FakeQuery([parseNotification(value)]);
|
||||
}
|
||||
if (typeof value === 'string') {
|
||||
return new FakeQuery([body, ...descendants(body)].filter((element) => matches(element, value)));
|
||||
}
|
||||
return new FakeQuery([]);
|
||||
}
|
||||
|
||||
vm.runInNewContext(read('assets/js/notyf.js'), { jQuery, window, document });
|
||||
return { body, timers, window };
|
||||
}
|
||||
|
||||
test('notyf follows Zibll defaults, type normalization, and timing', () => {
|
||||
const runtime = createRuntime();
|
||||
|
||||
runtime.window.notyf('完成');
|
||||
const container = runtime.body.children[0];
|
||||
const first = container.children[0];
|
||||
assert.ok(container.classes.has('notyn'));
|
||||
assert.ok(first.classes.has('noty1'));
|
||||
assert.ok(first.children[0].classes.has('success'));
|
||||
assert.equal(first.children[0].innerHTML, '完成');
|
||||
assert.equal(runtime.timers[0].delay, 5000);
|
||||
|
||||
runtime.window.notyf('失败', 'error', 2);
|
||||
const second = container.children[1];
|
||||
assert.ok(second.children[0].classes.has('danger'));
|
||||
assert.equal(runtime.timers[1].delay, 2000);
|
||||
});
|
||||
|
||||
test('fixed-id notifications stay open until an in-place update', () => {
|
||||
const runtime = createRuntime();
|
||||
|
||||
runtime.window.notyf('处理中', 'load', '', 'request-state');
|
||||
const container = runtime.body.children[0];
|
||||
const notification = container.children[0];
|
||||
assert.equal(runtime.timers.length, 0);
|
||||
assert.equal(notification.id, 'request-state');
|
||||
assert.ok(notification.children[0].classes.has('load'));
|
||||
|
||||
runtime.window.notyf('<strong>完成</strong>', 'success', 3, 'request-state');
|
||||
assert.equal(container.children.length, 1);
|
||||
assert.equal(notification.children[0].innerHTML, '<strong>完成</strong>');
|
||||
assert.ok(notification.children[0].classes.has('success'));
|
||||
assert.equal(runtime.timers[0].delay, 3000);
|
||||
});
|
||||
|
||||
test('clicking a notification uses the Zibll exit class and removal delay', () => {
|
||||
const runtime = createRuntime();
|
||||
runtime.window.notyf('可关闭');
|
||||
const notification = runtime.body.children[0].children[0];
|
||||
const delegated = runtime.body.delegated;
|
||||
|
||||
assert.deepEqual({ event: delegated.event, selector: delegated.selector }, { event: 'click', selector: '.noty1' });
|
||||
delegated.handler.call(notification);
|
||||
assert.ok(notification.classes.has('notyn-out'));
|
||||
assert.equal(runtime.timers.at(-1).delay, 1000);
|
||||
runtime.timers.at(-1).callback();
|
||||
assert.equal(runtime.body.children[0].children.length, 0);
|
||||
});
|
||||
|
||||
test('notyf CSS and WordPress enqueue match the reference contract', () => {
|
||||
const css = read('assets/css/frontend/notyf.css');
|
||||
const scripts = read('src/Core/ScriptsPart1c.php');
|
||||
|
||||
assert.match(css, /\.notyn\s*\{[\s\S]*?bottom:\s*6em;[\s\S]*?max-width:\s*320px;[\s\S]*?z-index:\s*10000000;/);
|
||||
assert.match(css, /\.notyf\s*\{[\s\S]*?min-width:\s*200px;[\s\S]*?padding:\s*1em 3em 1em 3\.4em;/);
|
||||
assert.match(css, /rgba\(15, 147, 249, 0\.7\)[\s\S]*?rgba\(61, 189, 249, 0\.8\)/);
|
||||
assert.match(css, /rgba\(58, 162, 54, 0\.8\)[\s\S]*?rgba\(89, 247, 131, 0\.8\)/);
|
||||
assert.match(css, /rgba\(253, 170, 71, 0\.7\)[\s\S]*?rgba\(247, 154, 13, 0\.8\)/);
|
||||
assert.match(css, /rgba\(253, 69, 28, 0\.7\)[\s\S]*?rgba\(251, 110, 75, 0\.8\)/);
|
||||
assert.match(css, /content:\s*'\\f058'/);
|
||||
assert.match(css, /content:\s*'\\f0a1'/);
|
||||
assert.match(css, /content:\s*'\\f05a'/);
|
||||
assert.match(css, /content:\s*'\\f057'/);
|
||||
assert.match(css, /\.notyf\.load::before[\s\S]*?huan-rotate 1s/);
|
||||
|
||||
assert.match(scripts, /'aksrt-notyf',[\s\S]*?'\/assets\/js\/notyf\.js',[\s\S]*?\['jquery'\]/);
|
||||
assert.match(scripts, /'aksrt-runtime',[\s\S]*?\['aksrt-rehydrate', 'aksrt-notyf'\]/);
|
||||
assert.match(scripts, /'\/assets\/css\/frontend\/notyf\.css',[\s\S]*?'aksrt-font-awesome-5-v4-shims'/);
|
||||
});
|
||||
|
||||
test('legacy frontend toast APIs and selectors are fully removed', () => {
|
||||
const files = [
|
||||
'assets/js',
|
||||
'assets/css/frontend',
|
||||
'assets/css/routes',
|
||||
'assets/css/build/frontend-base.min.css.disabled',
|
||||
'page.php',
|
||||
'templates/pages/page-profile.php',
|
||||
];
|
||||
const legacy = /AksrtToast|aksrtToast|aksrtShowToast|aksrt\.(?:toast|notyf)|showToast|toast-container|toast-item|aksrt-toast/;
|
||||
|
||||
function sourceFiles(target) {
|
||||
const absolute = path.join(root, target);
|
||||
if (!fs.statSync(absolute).isDirectory()) return [absolute];
|
||||
return fs.readdirSync(absolute, { withFileTypes: true }).flatMap((entry) => {
|
||||
if (entry.name === 'admin' || entry.name.endsWith('.min.js')) return [];
|
||||
const child = path.join(absolute, entry.name);
|
||||
return entry.isDirectory() ? sourceFiles(path.relative(root, child)) : [child];
|
||||
});
|
||||
}
|
||||
|
||||
const scanned = files.flatMap(sourceFiles);
|
||||
const offenders = scanned.filter((file) => legacy.test(fs.readFileSync(file, 'utf8')));
|
||||
assert.deepEqual(offenders.map((file) => path.relative(root, file)), []);
|
||||
});
|
||||
Reference in New Issue
Block a user