Files
wordpress-theme-aksrt/tests/widget-system/zibll-modern-widgets-contract.test.cjs
T
kate522 cd7082454a fix(widgets): preserve badge HTML in icon card title/desc like reference theme
wp_kses_post() strips the custom <badge> element, so icon card title/desc
lost admin-authored markup (e.g. <badge class="ml6 jb-blue">GO</badge>)
both at save time and render time, diverging from the reference theme
which stores and echoes these fields raw.

- add shared inline whitelist (aksrt_icon_card_kses_tags/aksrt_icon_card_kses)
  and route both card renderers plus the media-brand fallback through it
- drop the dead unused $allow array in aksrt_icon_cover_card
- add 'rich_html' sanitize type (FieldSchema + SchemaProvider) and mark
  icon card title/desc fields in widget schemas, page display schema and
  the page config meta box save path
- align header slider card module with reference show_widget_bg branches
  (aksrt-panel/flex1 vs padding-10 wrapper/relative-h)
- update widget contract tests to pin the whitelist behavior
2026-09-19 16:39:59 +08:00

139 lines
9.7 KiB
JavaScript

const test = require('node:test');
const assert = require('node:assert/strict');
const fs = require('node:fs');
const path = require('node:path');
const root = path.resolve(__dirname, '..', '..');
const read = (file) => fs.readFileSync(path.join(root, file), 'utf8');
test('modern widget schemas expose Zibll field names and defaults', () => {
const source = read('src/WidgetSystem/WidgetSchemas.php');
for (const field of ['mini_opt', 'paginate', 'tabs', "'id' => 'cat'", "'id' => 'zibpay_type'", 'layout_ratio', 'slide_scale', 'm_layout_type', 'm_cover_ratio', 'image_layer', 'image_select']) {
assert.match(source, new RegExp(field.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')));
}
assert.doesNotMatch(source, /'id' => 'topics'/);
assert.match(source, /'热门推荐'.*'orderby' => 'views'/s);
assert.match(source, /'最近更新'.*'orderby' => 'modified'/s);
assert.match(source, /'猜你喜欢'.*'orderby' => 'rand'/s);
});
test('tab and slider renderers retain reference DOM contracts', () => {
const content = read('src/WidgetSystem/Renderers/ContentRenderer.php');
const slider = read('src/WidgetSystem/Renderers/SliderRenderer.php');
for (const token of ['widget-tab-post', 'posts-mini-lists', 'index-tab', 'tab-nav-theme', 'tab-pane fade', 'ias-btn', 'post_ajax_loader', 'widget-ajaxpager']) assert.match(content, new RegExp(token.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')));
assert.doesNotMatch(content, /post_ajax_trigger/);
for (const token of ['relative zib-slider', 'new-swiper slide-widget', 'swiper-wrapper', 'swiper-slide', 'slide-layer', 'data-swiper-parallax', 'swiper-button-prev', 'swiper-pagination', 'widget-slider-graphic', 'slider-col', 'cover-col', 'widget-graphic-cover']) assert.match(slider, new RegExp(token.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')));
});
test('reference slider CSS includes responsive height and combo selectors', () => {
const css = read('assets/widgets/frontend.css');
const mainCss = read('assets/css/main.css');
for (const token of ['.new-swiper.slide-widget.scale-height', '--scale-height', '--pc-height', '--m-height', '.widget-slider-graphic', '.m-hide_slide', '.m-hide_cover']) assert.match(css, new RegExp(token.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')));
for (const token of ['--m-cover-ratio', '--cover-ratio', '--layout-ratio']) assert.match(mainCss + css, new RegExp(token.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')));
});
test('icon card widgets expose Zibll vertical and horizontal contracts', () => {
const schemas = read('src/WidgetSystem/WidgetSchemas.php');
const renderer = read('src/WidgetSystem/Renderers/GeneralRenderer.php');
const helper = read('inc/helpers/aksrt-icon-cards.php');
for (const token of ['show_widget_bg', "'id' => 'size'", 'icon_radius', 'icon_custom_color', "'id' => 'icon_radius4'", 'icon_background_palette', 'icon_text_palette']) {
assert.match(schemas, new RegExp(token.replace(/[.*+?^${}()|[\\]\\]/g, '\\$&')));
}
for (const token of ['clearfix', 'row gutters-5', 'icon-card', 'icon-cover-card', 'icon-cover-icon', 'icon-cover-desc']) {
assert.match(renderer + helper, new RegExp(token.replace(/[.*+?^${}()|[\\]\\]/g, '\\$&')));
}
// Card title/desc must keep legacy badge markup: fields go through the
// shared inline whitelist (aksrt_icon_card_kses), never bare wp_kses_post
// which strips the custom <badge> element.
assert.match(helper, /function aksrt_icon_card_kses_tags/);
assert.match(helper, /'badge'\s+=>\s*\['class' => true\]/);
assert.match(helper, /aksrt_icon_card_kses\(\$title\)/);
assert.match(helper, /aksrt_icon_card_kses\(\$desc\)/);
assert.doesNotMatch(helper, /wp_kses_post\(\$title\)/);
assert.doesNotMatch(helper, /wp_kses_post\(\$desc\)/);
});
test('button group uses the complete Zibll schema, DOM and responsive sizing contract', () => {
const schema = read('src/WidgetSystem/WidgetSchemas.php');
const renderer = read('src/WidgetSystem/Renderers/GeneralRenderer.php');
const css = read('assets/widgets/frontend.css');
for (const field of ['obs_animation', 'animation_repeat', 'pc_width', 'm_width', 'pc_padding', 'm_padding', 'pc_gap', 'm_gap', "'id' => 'align'", "'id' => 'radius'", "'id' => 'hollow'", 'go_link', 'icon_left', 'icon_right']) {
assert.match(schema, new RegExp(field.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')));
}
for (const token of ['widget-buttons mb20 pc-size-', 'm-size-', 'widget-buttons-wrap flex hh align-', 'class="ml6"', 'obs-animate ani-']) {
assert.match(renderer, new RegExp(token.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')));
}
assert.doesNotMatch(renderer, /aksrt-widget-buttons/);
assert.match(schema, /'id' => 'text'[^\n]+allow_html/);
assert.match(renderer, /wp_kses_post\(\(string\) \$item\['text'\]\)/);
assert.match(css, /\.widget-buttons\.pc-size-large \.but\s*\{\s*padding:\s*12px 24px/);
assert.match(css, /\.widget-buttons\.m-size-medium \.but\s*\{\s*padding:\s*8px 16px/);
});
test('vertical notice supports only custom and article sources with Zibll swiper sizing', () => {
const schema = read('src/WidgetSystem/WidgetSchemas.php');
const renderer = read('src/WidgetSystem/Renderers/GeneralRenderer.php');
const postQuery = read('src/WidgetSystem/PostQuery.php');
const form = read('src/WidgetSystem/FormRenderer.php');
const controller = read('src/WidgetSystem/AdminFormController.php');
const adminJs = read('assets/widgets/admin.js');
const css = read('assets/widgets/frontend.css');
for (const field of ["'id' => 'blank'", "'id' => 'radius'", "'id' => 'interval'", "'id' => 'color'", "'id' => 'source'", 'msg_icon', "'id' => 'count'", 'desc_s', 'posts_opts', 'img_ids']) {
assert.match(schema, new RegExp(field.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')));
}
assert.match(schema, /'options' => \['' => '自定义', 'posts' => '文章'\]/);
assert.doesNotMatch(schema, /forums_opts|notice_forum_fields|zibpay_price|zibpay_points_price|sales_volume/);
assert.doesNotMatch(renderer, /zib_bbs_get_posts_query|forums_opts/);
assert.doesNotMatch(postQuery, /zibpay_price|zibpay_points_price|sales_volume/);
assert.doesNotMatch(form + controller + adminJs, /aksrt_widget_remote_options|aksrt-widget-remote-select|aksrt-widget-remote-picker/);
for (const token of ['swiper-bulletin mb20 ', 'notice-slide', 'new-swiper', 'data-direction="vertical"', 'data-loop="true"', 'data-autoplay="1"', 'bulletin-icon flex jc shrink0']) {
assert.match(renderer, new RegExp(token.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')));
}
assert.doesNotMatch(renderer, /aksrt-widget-notice/);
assert.match(schema, /'id' => 'title'[^\n]+allow_html/);
assert.match(renderer, /wp_html_excerpt\([^\n]+160, '\.\.\.'/);
// Icon value rendering lives in the unified helper the renderer delegates to.
assert.match(renderer, /aksrt_icon_markup\(\$icon\)/);
assert.match(read('inc/helpers/aksrt-icons.php'), /str_starts_with\(\$value, 'customsvg-'\)/);
assert.match(css, /\.swiper-bulletin \.new-swiper\s*\{[^}]*height:\s*2\.4em/s);
assert.match(css, /\.swiper-bulletin \.new-swiper\s*\{[^}]*line-height:\s*2\.4em/s);
assert.match(css, /\.bulletin-icon\s*\{[^}]*width:\s*26px[^}]*height:\s*26px[^}]*font-size:\s*18px/s);
});
test('admin core supports composite dependencies and nested repeater renumbering', () => {
const core = require(path.join(root, 'assets/widgets/admin-core.js'));
assert.equal(core.dependencyVisible([['direction', '!=', 'vertical'], ['scale_height', '!=', '']], { direction: 'horizontal', scale_height: '1' }), true);
assert.equal(core.dependencyVisible(['image|free_size', '!=|!=', '|'], { image: 'x', free_size: '1' }), true);
assert.equal(core.replaceRepeaterIndexes('widget[3][0][1]', [4, 2]), 'widget[3][4][2]');
});
test('slider media combo replicates the reference module front and back', () => {
const renderer = read('src/WidgetSystem/Renderers/SliderRenderer.php');
const schema = read('src/WidgetSystem/WidgetSchemas.php');
const form = read('src/WidgetSystem/FormRenderer.php');
// 后台表单:参考主题分组按钮文案与上传字段库约束。
for (const token of ["'button_title' => '添加幻灯片'", "'button_title' => '添加卡片'", "'button_title' => '添加图层'", "'library' => 'image'", "'library' => 'video'", 'PC端布局配置', '移动端布局方式', '左侧幻灯片', '右侧图文视频卡片', '卡片样式配置']) {
assert.match(schema, new RegExp(token.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')));
}
assert.match(form, /\$field\['button_title'\]/);
assert.match(form, /\$library !== 'video'/);
// 前端:幻灯片 span/a 包裹、懒加载契约、视频背景与图层视差。
for (const token of ["'<span>' . $body . '</span>'", 'lazyload swiper-lazy', 'slide-background-video', "aksrt_is_lazy('lazy_sider')", 'data-swiper-parallax-opacity', 'data-swiper-parallax-scale']) {
assert.match(renderer, new RegExp(token.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')));
}
assert.doesNotMatch(renderer, /playsinline/);
// PC 端左右布局在后台预览(不加载 main.css)也必须成立。
const widgetCss = read('assets/widgets/frontend.css');
assert.match(widgetCss, /\.widget-slider-graphic\s*\{\s*display:\s*flex;/);
// 组合模块:is_show 门控、管理端缺省提示、卡片列动画与比例变量。
for (const token of ["aksrt_is_lazy('lazy_cover')", 'alert alert-warning', '当前模块下没有可显示的幻灯片', 'obs-animate ani-', "widget-graphic-cover ' . ($is_row ? 'mb10' : 'mb20')", 'row gutters-5', 'col-xs-', 'graphic-text this-font', 'm-cover-ratio', 'cover-ratio', 'layout-ratio', 'data-row=', 'data-col=', "m-' . sanitize_html_class($m_layout_type)"]) {
assert.match(renderer, new RegExp(token.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')));
}
// 参考主题 is_show:两侧均为空时不输出占位。
assert.doesNotMatch(renderer, /请配置幻灯片或卡片|empty_state/);
});