wordpress-theme-aksrt/tests/widget-system/header-multifunction-render.test.cjs

'use strict';

const assert = require('node:assert/strict');
const { spawnSync } = require('node:child_process');
const fs = require('node:fs');
const path = require('node:path');
const test = require('node:test');

const root = path.resolve(__dirname, '..', '..');

test('header multifunction renders reference slide, search, and card contracts on desktop and mobile', () => {
  const rendered = spawnSync(
    process.env.PHP_BINARY || 'php',
    [path.join(__dirname, 'header-multifunction-render-harness.php')],
    { cwd: root, encoding: 'utf8' },
  );
  assert.equal(rendered.status, 0, rendered.stderr || rendered.stdout);
  const { desktop, mobile, module_background: moduleBackground } = JSON.parse(rendered.stdout);

  assert.match(desktop, /data-src="https:\/\/example\.test\/slide\.jpg"/);
  assert.match(desktop, /data-swiper-parallax="40%" data-swiper-parallax-opacity="0\.8" data-swiper-parallax-scale="1\.1"/);
  assert.match(desktop, /data-src="https:\/\/example\.test\/pc-only\.jpg"/);
  assert.doesNotMatch(desktop, /mobile-only\.jpg/);
  assert.match(desktop, /class="swiper-slide slide-background-video"/);
  assert.match(desktop, /data-src="https:\/\/example\.test\/background\.mp4"/);
  assert.match(desktop, /class="new-dplayer" video-url="https:\/\/example\.test\/content\.mp4" video-type="auto"/);
  assert.match(desktop, /class="absolute dplayer-poster"/);
  assert.doesNotMatch(desktop, /<video controls/);
  assert.match(desktop, /header-slider-search-more text-center before/);
  assert.match(desktop, /<div class="search-input">search-box<\/div>/);
  assert.match(desktop, /<div class="icon-cover-card flex ac jio-panel">Card one<\/div>/);
  // 叠加组件（每项 after_html）跟随所属幻灯片输出，不能落到幻灯片之外。
  assert.match(desktop, /<div class="slide-overlay-after"><div class="overlay-cta"><a href="https:\/\/example\.test\/cta">立即查看<\/a><\/div><\/div><\/div>/);

  assert.doesNotMatch(mobile, /background\.mp4/);
  assert.match(mobile, /data-src="https:\/\/example\.test\/mobile-only\.jpg"/);
  assert.doesNotMatch(mobile, /pc-only\.jpg/);
  assert.match(mobile, /data-src="https:\/\/example\.test\/poster\.jpg"/);
  assert.match(mobile, /class="new-dplayer" video-url="https:\/\/example\.test\/content\.mp4"/);
  assert.match(mobile, /header-slider-search-more text-center before/);
  assert.match(mobile, /<div class="icon-cover-card flex ac jio-panel">Card one<\/div>/);

  assert.match(moduleBackground, /<div class="jio-panel padding-10"><div class="flex jse/);
  assert.match(moduleBackground, /<div class="icon-cover-card flex ac padding-10">Card one<\/div>/);
  assert.equal(JSON.parse(rendered.stdout).page_config_save.show_widget_bg, true);

  // /sign/ resolves to index.php?jio_sign=1, so WordPress still reports it as
  // home; the component must stay off even when "首页" is in its scope list.
  const { auth_page_show: authShow, auth_page_type: authType, auth_page_markup: authMarkup } = JSON.parse(rendered.stdout);
  assert.equal(authShow, false);
  assert.equal(authType, '');
  assert.equal(authMarkup, '');

  const { lazy_disabled: eager, single_slide: single } = JSON.parse(rendered.stdout);
  assert.match(eager, /<img class="radius8" src="https:\/\/example\.test\/eager\.jpg"/);
  assert.doesNotMatch(eager, /data-src=|lazyload/);
  assert.match(single, /swiper-container-initialized/);
  assert.doesNotMatch(single, /swiper-pagination|swiper-button-prev/);
});

test('each background item exposes an overlay group with after_html', () => {
  const schema = fs.readFileSync(path.join(root, 'src/Admin/Schema/SchemaPageDisplay.php'), 'utf8');
  const metaBox = fs.readFileSync(path.join(root, 'src/Admin/PageConfigMetaBox.php'), 'utf8');
  const helper = fs.readFileSync(path.join(root, 'inc/helpers/homepage/header-components.php'), 'utf8');
  const css = fs.readFileSync(path.join(root, 'assets/css/main.css'), 'utf8');

  // 后台：「背景内容」每个项目里都有「叠加组件」手风琴，含 HTML 输入框。
  const itemFields = schema.slice(
    schema.indexOf('private static function slider_item_fields'),
    schema.indexOf('private static function slider_option_fields'),
  );
  assert.match(itemFields, /field\('overlay', '叠加组件', 'accordion'/);
  assert.match(itemFields, /field\('after_html', '组件下方额外内容', 'textarea', '', \['sanitize_type' => 'html'/);
  // 默认值里带上空 overlay，新加的项目不必手动展开即可保存。
  assert.match(schema, /'overlay' => \['after_html' => ''\]/);

  // 页面独立配置（page_config 元数据）同样落盘 after_html。
  assert.match(metaBox, /\$overlay = is_array\(\$slide\['overlay'\] \?\? null\) \? \$slide\['overlay'\] : \[\]/);
  assert.match(metaBox, /'after_html' => wp_kses_post\(\(string\) \(\$overlay\['after_html'\] \?\? ''\)\)/);
  assert.match(metaBox, /'overlay' => \['after_html' => ''\]/);

  // 前端：内容挂在所属幻灯片内，并作为覆盖层渲染。
  assert.match(helper, /\$overlay_html = '<div class="slide-overlay-after">'/);
  assert.match(helper, /\$slides_html \.= \$overlay_html;/);
  assert.match(css, /\.slide-overlay-after \{[^}]*position: absolute/);
  assert.match(css, /\.slide-overlay-after \{[^}]*z-index: 3/);
  // 覆盖层不能挡住背景上的其它交互，只有其中的可交互元素接收点击。
  assert.match(css, /\.slide-overlay-after \{[^}]*pointer-events: none/);
  assert.match(css, /\.slide-overlay-after a,[\s\S]*?pointer-events: auto/);
});

test('header card background setting is editable, saved, and defaults off', () => {  const schema = fs.readFileSync(path.join(root, 'src/Admin/Schema/SchemaPageDisplay.php'), 'utf8');
  const settings = fs.readFileSync(path.join(root, 'src/Settings/DisplayPageGroups.php'), 'utf8');
  const metaBox = fs.readFileSync(path.join(root, 'src/Admin/PageConfigMetaBox.php'), 'utf8');

  assert.match(schema, /field\('show_widget_bg', '模块背景', 'switcher', false/);
  assert.match(schema, /'show_widget_bg'\s*=>\s*false/);
  assert.match(settings, /'show_widget_bg'\s*=>\s*false/);
  assert.match(metaBox, /'show_widget_bg'\s*=>\s*!empty\(\$value\['show_widget_bg'\]\)/);
  assert.match(metaBox, /'show_widget_bg'\s*=>\s*false/);
});