wordpress-theme-aksrt/tests/widget-system/zibll-modern-widgets-contract.test.cjs

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('widget skeleton lives inside the AJAX container so the REST client can find it', () => {
  const content = read('src/WidgetSystem/Renderers/ContentRenderer.php');

  // The loader must be emitted inside .widget-ajaxpager: frontend.js resolves
  // it with container.querySelector('.post_ajax_loader'). A sibling node would
  // never match and no skeleton could appear on 加载更多.
  assert.match(content, /\. \$loader \. '<\/div>'/);
  assert.match(content, /aria-busy="false"><div class="post_ajax_loader" role="status"/);

  // No pane may append the loader as a sibling of the pager.
  assert.doesNotMatch(content, /\$body \.= '<div class="post_ajax_loader">'/);
});

test('widget REST client keeps the skeleton across the load-more cycle', () => {
  const frontend = read('assets/widgets/frontend.js');

  // Reference-parity loader switch: a class, never an inline display that
  // would outrank the stylesheet and freeze the skeleton shut.
  assert.match(frontend, /var loader = loaderOf\(container\) \|\| container\.appendChild\(fallbackLoader\(\)\);/);
  assert.match(frontend, /loader\.classList\.add\('is-loading'\)/);
  assert.doesNotMatch(frontend, /loader\.style\.display/);

  // The skeleton is anchored to the end of the list on every request, exactly
  // like the reference post_ajax beforeSend hook.
  assert.match(frontend, /function anchorLoader\(container\) \{/);
  assert.match(frontend, /if \(!loader\) return null;/);
  assert.match(frontend, /pag\.parentNode\.insertBefore\(loader, pag\)/);

  // Appended cards must land before the skeleton, so the skeleton always sits
  // flush under the last card.
  assert.match(frontend, /var anchor = loaderOf\(container\) \|\| container\.querySelector\(':scope > \.ajax-pag'\);/);

  // A replace must preserve the loader node (the reference success only hides it).
  assert.match(frontend, /if \(child !== loader && !child\.classList\.contains\('ajax-pag'\)\) child\.remove\(\);/);
  assert.match(frontend, /return fetch\(itemsUrl\(/);
});

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/);
});