wordpress-theme-aksrt/tests/widget-system/icon-picker-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('universal icon picker ships catalog data for the bundled FA5 fonts', () => {
  const data = read('src/Icons/fa5-icons.php');
  assert.match(data, /Font Awesome 5 Free \(5\.15\.4\)/);
  assert.match(data, /'fas' =>/, 'solid group');
  assert.match(data, /'far' =>/, 'regular group');
  assert.match(data, /'fab' =>/, 'brands group');
  const names = data.match(/'([a-z0-9-]+)'/g) || [];
  assert.ok(names.length > 1500, 'generated catalog is the full bundled set');
  for (const must of ["'clock'", "'folder-open'", "'file-alt'", "'weixin'"]) {
    assert.match(data, new RegExp(must), `FA5 name ${must} present (FA4 leftovers replaced)`);
  }
  assert.doesNotMatch(data, /fa-clock-o|fa-folder-open-o|fa-file-text-o/, 'no FA4-only names');
});

test('icon catalog REST route is registered with permission + sprite single source', () => {
  const admin = read('src/Admin/Admin.php');
  assert.match(admin, /\Jio\\Icons\\IconController::class/);
  const controller = read('src/Icons/IconController.php');
  assert.match(controller, /\/icons\/catalog/);
  assert.match(controller, /permission_callback.*check_permission/s);
  const catalog = read('src/Icons/IconCatalog.php');
  assert.match(catalog, /svg-icon\.js/);
  assert.match(catalog, /jio_svgs/);
  assert.match(catalog, /fa5-icons\.php/);
});

test('widget and nav-menu icon fields render the shared picker', () => {
  const formRenderer = read('src/WidgetSystem/FormRenderer.php');
  assert.match(formRenderer, /case 'icon':\s*\n\s*echo jio_icon_picker_field\(\$field_name, \$field_id, \(string\) \$value\);/);
  assert.doesNotMatch(formRenderer, /jio-widget-icon/);
  const adminForm = read('src/WidgetSystem/AdminFormController.php');
  assert.match(adminForm, /jio_icon_picker_assets\(/);
  const navMenu = read('src/Admin/NavMenuOptions.php');
  assert.match(navMenu, /jio_icon_picker_field\(/);
  assert.match(navMenu, /jio_sanitize_icon_value\(\(string\) \(\$raw\['icon'\] \?\? ''\)\)/);
  const helper = read('inc/helpers/jio-icon-picker.php');
  for (const token of ['function jio_icon_picker_assets', 'function jio_icon_picker_field', 'id="jio-modal-icon"', 'jio-icon-picker__value']) {
    assert.match(helper, new RegExp(token));
  }
  assert.match(helper, /assets\/js\/runtime\/svg-icon\.js/, 'admin previews reuse the frontend sprite');
});

test('picker JS composes the three value formats and loads the REST catalog', () => {
  const js = read('assets/js/admin-icon-picker.js');
  for (const token of ['X-WP-Nonce', 'customsvg-', 'jiosvg-', '`fa ${group.id} fa-${name}`', 'data-jio-icon-picker', 'jio-icon-picker__value']) {
    assert.match(js, new RegExp(token.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')));
  }
  assert.match(js, /DOMParser/, 'custom SVG is sanitized client side');
  const cssPath = 'assets/css/admin-icon-picker.css';
  assert.ok(fs.existsSync(path.join(root, cssPath)), 'picker css shipped');
  // Tab/search switching toggles the [hidden] attribute; without this guard
  // the explicit display rules on grids/items override it and every group
  // stays visible, so the tab bar appears dead.
  assert.match(read(cssPath), /#jio-modal-icon \[hidden]\s*\{\s*display:\s*none\s*!important/);
});

test('icon values sanitize through the SVG-aware helper on every save path', () => {
  const iconsHelper = read('inc/helpers/jio-icons.php');
  assert.match(iconsHelper, /function jio_sanitize_icon_value/);
  assert.match(iconsHelper, /function jio_icon_markup/);
  assert.match(iconsHelper, /function jio_enqueue_fontawesome/);
  assert.match(iconsHelper, /str_starts_with\(\$value, 'customsvg-'\)/);
  const schemaProvider = read('src/Admin/SchemaProvider.php');
  assert.match(schemaProvider, /'icon'\s+=>\s+'icon'/);
  assert.match(schemaProvider, /case 'icon':\s*\n\s*return function_exists\('jio_sanitize_icon_value'\)/);
  const fieldSchema = read('src/WidgetSystem/FieldSchema.php');
  assert.match(fieldSchema, /case 'icon':\s*\n\s*return function_exists\('jio_sanitize_icon_value'\)/);
});

test('FA5 loads under a single canonical handle everywhere', () => {
  const picker = read('inc/helpers/jio-icon-picker.php');
  const admin = read('src/Admin/Admin.php');
  // 文章列表(edit.php)的 FA 入队随列增强迁到了 PostListEnhance。
  const postList = read('src/Admin/Native/PostListEnhance.php');
  const part1b = read('src/Core/ScriptsPart1b.php');
  assert.match(picker, /jio_enqueue_fontawesome\(\)/);
  assert.match(admin, /jio_enqueue_fontawesome\(\)/);
  assert.match(postList, /jio_enqueue_fontawesome\(\)/);
  assert.match(part1b, /jio_enqueue_fontawesome\(\['bootstrap'\]\)/);
  assert.match(part1b, /\['jio-font-awesome'\]/, 'public main css depends on the canonical handle');
  for (const file of [picker, admin, postList, part1b]) {
    assert.doesNotMatch(file, /wp_enqueue_style\(\s*'jio-font-awesome'/, 'no duplicate FA registrations');
  }
  // core-hooks.php 不该再自己注册或重复入队 FA。
  assert.doesNotMatch(read('inc/core-hooks.php'), /jio_enqueue_fontawesome|wp_enqueue_style\(\s*'jio-font-awesome'/);
  for (const file of ['inc/helpers/jio-widgets-markup.php', 'src/WidgetSystem/Renderers/ContentRenderer.php']) {
    const source = read(file);
    assert.doesNotMatch(source, /fa-clock-o|fa-folder-open-o|fa-file-text-o/, `${file} uses FA5 names`);
  }
});

test('custom settings pages and standalone save paths speak the three icon formats', () => {
  // 手机底部Tab / 右侧悬浮按钮 custom pages render the shared picker.
  // FaIconPicker declares modelValue / emits update:modelValue; the Naive UI
  // v-model:value convention binds a prop the picker never reads, so
  // selection clicks would be dropped.
  const pickerFiles = [
    'assets/admin/src/pages/content/FooterTabbarSettings.vue',
    'assets/admin/src/components/floating/FloatBtnItemPanel.vue',
    'assets/admin/src/components/floating/FloatMoreButtonsEditor.vue',
  ];
  for (const page of pickerFiles) {
    const source = read(page);
    assert.match(source, /import FaIconPicker from '@\/components\/form\/FaIconPicker\.vue'/);
    assert.match(source, /<FaIconPicker/, `${page} uses the picker for icon fields`);
    assert.doesNotMatch(source, /<FaIconPicker[^>]*v-model:value/, `${page} must not bind the picker with v-model:value`);
  }
  assert.match(read('assets/admin/src/pages/content/FooterTabbarSettings.vue'), /import IconValue from '@\/components\/form\/IconValue\.vue'/);
  assert.match(read('assets/admin/src/pages/content/FooterTabbarSettings.vue'), /<FaIconPicker v-model=/);
  assert.match(read('assets/admin/src/components/floating/FloatBtnItemPanel.vue'), /<FaIconPicker v-model=/);
  assert.match(read('assets/admin/src/components/floating/FloatMoreButtonsEditor.vue'), /import IconValue from '@\/components\/form\/IconValue\.vue'/);
  // Their REST save paths keep customsvg markup intact.
  const controller = read('src/Admin/GlobalControllerPart1.php');
  assert.match(controller, /jio_sanitize_icon_value\(/);
  assert.doesNotMatch(controller, /preg_match\('\/\^fa\\s\+/, 'no FA-only regex gate on icon fields');
  assert.match(read('src/Settings/FloatButtons.php'), /jio_sanitize_icon_value\(/);
  // Frontend consumers render every format.
  const footer = read('footer.php');
  assert.match(footer, /jio_icon_markup\(\(string\) \$tab_icon\)/);
  assert.match(read('inc/helpers/jio-float-buttons.php'), /jio_icon_markup\(\(string\) \(\$opt\['icon'\]/);
  // The popover tabs must wrap instead of overflowing the panel.
  assert.match(read('assets/admin/src/components/form/FaIconPicker.vue'), /flex-wrap: wrap/);
});

test('nav menu icons render every format without legacy fa-prefix mangling', () => {
  const helper = read('inc/helpers/menu-decoration.php');
  assert.match(helper, /str_starts_with\(\$icon_class, 'jiosvg-'\)/);
  // Top-level titles keep the default glyph classes; mega-menu lists pass
  // `mr3 fa-fw` so every row's icon occupies the same column.
  assert.match(helper, /\$extra_classes = 'mr3 menu-item-icon'/);
  assert.match(helper, /jio_icon_markup\(\$icon_class, \$extra\)/);
  assert.match(read('src/Frontend/NavWalker.php'), /jio_render_menu_icon\(\(string\) \$args\['icon'\], true, 'mr3 fa-fw'\)/);
  assert.doesNotMatch(helper, /'<i class="' \. esc_attr\(\$icon_class\)/, 'no raw i-tag bypassing the unified helper');
});

test('icon markup upgrades legacy FA4 values to FA5 and never emits the FA4 form', () => {
  const helper = read('inc/helpers/jio-icons.php');
  // Bare glyph, legacy double-fa value and style-only value all normalize to FA5 solid.
  assert.match(helper, /preg_match\('\/\^fa\\s\+fa-\/i', \$value\)/, 'legacy double-fa value is detected');
  assert.match(helper, /preg_replace\('\/\^fa\\s\+\/i', 'fa fas ', \$value, 1\)/, 'legacy double-fa value upgrades to FA5');
  assert.match(helper, /\$value = 'fa fas ' \. \$value;/, 'bare glyph gets the FA5 solid prefix');
  assert.match(helper, /preg_match\('\/\^\(\?:fas\|far\|fab\)\\s\+fa-\/i', \$value\)/, 'style-only value gets the fa token');
  // Key normalization strips the same legacy form, otherwise stored values miss the
  // brand-icon catalog and the picker shows an unresolvable key.
  assert.match(helper, /preg_replace\('\/\^fa\\s\+fa-\/i', '', \(string\) \$name\)/, 'icon keys normalize the legacy FA4 form');
});

test('brand icons render despite the legacy fa-fab double prefix', () => {
  const rule = /\.fa\.fab\{font-family:"Font Awesome 5 Brands";font-weight:400\}/;
  for (const file of ['assets/css/main.css', 'assets/css/admin-icon-picker.css', 'assets/admin/src/style.css']) {
    assert.match(read(file), rule, `${file} re-asserts the brand family`);
  }
  assert.match(read('assets/css/main.min.css'), rule, 'minified main css carries the fix');
  // Empty sprite entries surface as blank picker items — none may ship.
  assert.doesNotMatch(read('assets/js/runtime/svg-icon.js'), /jio_svgs\['[a-zA-Z0-9_]+'\]\s*=\s*'';/);
});

test('icon assets are consolidated and dead icon assets are gone', () => {
  for (const file of ['assets/icons/upload-add.svg', 'assets/icons/default-favicon.svg', 'assets/icons/playing.svg', 'assets/icons/user-certification.svg']) {
    assert.ok(fs.existsSync(path.join(root, file)), `${file} exists`);
  }
  for (const file of ['assets/img/upload-add.svg', 'assets/img/logo_dark.png', 'assets/icons/default-logo.svg', 'assets/img/vip-1.svg', 'assets/img/vip-2.svg', 'assets/img/404.svg', 'assets/img/msg-system.svg', 'assets/fonts/img-code.ttf', 'assets/js/runtime/gutenberg-extend.js', 'assets/fontawesome5/webfonts/fa-solid-900.ttf']) {
    assert.ok(!fs.existsSync(path.join(root, file)), `${file} removed`);
  }
  const mainCss = read('assets/css/main.css');
  assert.match(mainCss, /url\(\.\.\/icons\/playing\.svg\)/);
  const phpRefs = read('inc/helpers/comments/form-parts.php');
  assert.match(phpRefs, /\/assets\/icons\/upload-add\.svg/);
});