wordpress-theme-aksrt/tests/widget-system/icon-card-contract.test.cjs

'use strict';

const assert = require('node:assert/strict');
const fs = require('node:fs');
const path = require('node:path');
const test = require('node:test');

const root = path.resolve(__dirname, '..', '..');
const read = (file) => fs.readFileSync(path.join(root, file), 'utf8');

test('icon card renderers keep vertical and horizontal legacy DOM contracts separate', () => {
  const helper = read('inc/helpers/jio-icon-cards.php');
  const widgets = read('src/WidgetSystem/Renderers/GeneralRenderer.php');
  const header = read('inc/helpers/homepage/header-components.php');
  const mediaBrand = read('inc/helpers/template-tags/media-brand.php');

  assert.match(helper, /<div class="icon-card /);
  assert.match(helper, /<div class="icon-cover-card flex ac /);
  assert.match(helper, /icon-cover-icon badg cir/);
  assert.match(helper, /icon-cover-desc ml10 flex1 px12-sm/);
  assert.doesNotMatch(helper, /jio-icon-cover-card/);
  assert.match(widgets, /'customize_icon' => \$card\['customize_icon'\] \?\? ''/);
  assert.doesNotMatch(widgets, /\$card\['custom_icon'\]/);
  // combo_info legitimately renders icon_image cards; icon cards must not leak media-card fields.
  assert.doesNotMatch(widgets, /\$card\['description'\]/);
  assert.match(header, /empty\(\$card\['custom_icon'\]\)/);
  assert.doesNotMatch(mediaBrand, /function jio_render_icon_cover_card/);
});

test('homepage horizontal cards render fully from legacy CSS with no dedicated stylesheet', () => {
  const baseCss = read('assets/css/frontend/base.css');
  const legacyUtilities = read('assets/css/frontend/legacy-utilities.css');
  const mainCss = read('assets/css/main.css');
  const widgetCss = read('assets/widgets/frontend.css');
  const scripts = read('src/Core/ScriptsPart1b.php');

  assert.equal(fs.existsSync(path.join(root, 'assets/css/frontend/header-cards.css')), false);
  assert.doesNotMatch(baseCss, /\.icon-cover-card\.jio-icon-cover-card/);
  assert.doesNotMatch(baseCss, /\.header-components-card/);
  assert.doesNotMatch(baseCss, /\.header-slider-card\s+\.icon-cover-card\s*\{[^}]*font-size:/s);
  assert.doesNotMatch(legacyUtilities, /\.px12-sm\s*\{[^}]*font-size:\s*12px/);
  const mobileTextSize = mainCss.lastIndexOf('.px12-sm,');
  const mobileBreakpoint = mainCss.lastIndexOf('@media', mobileTextSize);
  assert.ok(mobileBreakpoint > 0, 'the compact card text utility must remain inside a responsive media rule');
  assert.match(mainCss.slice(mobileBreakpoint, mobileTextSize + 120), /max-width:\s*640px/);
  assert.match(mainCss.slice(mobileTextSize, mobileTextSize + 120), /font-size:\s*12px/);
  assert.doesNotMatch(scripts, /header-cards/);
  assert.doesNotMatch(widgetCss, /jio-widget-icon-cards \.icon-cover-card/);
});

test('widget icon cards restore the reference surface height without compact overrides', () => {
  const widgetCss = read('assets/widgets/frontend.css');

  assert.match(
    widgetCss,
    /\.jio-widget-box\s*\{[^}]*margin-bottom:\s*20px[^}]*padding:\s*15px[^}]*box-shadow:\s*0 0 10px/s,
  );
  assert.match(widgetCss, /\.jio-widget-box\.padding-10\s*\{\s*padding:\s*10px/);
  assert.match(widgetCss, /\.jio-widget-box\.nobottom\.notop\s*\{[^}]*padding-top:\s*0[^}]*padding-bottom:\s*0/s);
  assert.doesNotMatch(widgetCss, /\.row\.gutters-5/);
  assert.doesNotMatch(widgetCss, /\.icon-card\s*,\s*\.icon-cover-card\s*\{\s*font-size:\s*12px/);
  assert.doesNotMatch(widgetCss, /\.icon-cover-card\s*\{[^}]*padding-(?:top|bottom)/s);
});

test('header icon-card defaults use bundled Font Awesome icons', () => {
  const defaults = [
    read('src/Admin/Schema/SchemaPageDisplay.php'),
    read('src/Admin/PageConfigMetaBox.php'),
    read('src/Settings/DisplayPageGroups.php'),
  ];

  for (const source of defaults) {
    assert.doesNotMatch(source, /'icon'\s*=>\s*'jiosvg-/);
    for (const icon of ['gem', 'star', 'fire', 'wrench']) {
      assert.match(source, new RegExp(`'icon'\\s*=>\\s*'fa fas fa-${icon}'`));
    }
  }
});

test('icon card renderers route every picker format through the shared icon renderer', () => {
  const helper = read('inc/helpers/jio-icon-cards.php');

  // One resolver owns the icon-value contract for both card shapes.
  assert.match(helper, /function jio_card_icon_inner\(string \$value, string \$extra = ''\): string/);
  assert.match(helper, /if \(function_exists\('jio_icon_markup'\)\) \{\s*return jio_icon_markup\(\$value, \$extra\);/s);

  // Both renderers must delegate: emitting a bare FA class string produced
  // `<i class="fa fas fa-jiosvg-hot">`, i.e. an invisible glyph, for the two
  // SVG formats the admin picker can store.
  assert.match(helper, /\$icon_inner = jio_card_icon_inner\(\$icon_fa, 'em09'\);/);
  assert.match(helper, /\$icon_inner = jio_card_icon_inner\(\$icon_fa\);/);

  // The picker prefixes must drive the SVG branches, and the stale
  // `zibsvg-` prefix (never emitted by any picker) must be gone.
  assert.match(helper, /str_starts_with\(\$value, 'jiosvg-'\) \|\| str_starts_with\(\$value, 'customsvg-'\)/);
  assert.doesNotMatch(helper, /zibsvg-/);
  assert.doesNotMatch(helper, /'fa fas fa-'\s*\.\s*\$icon_fa/);
  assert.doesNotMatch(helper, /<i class="'\s*\.\s*esc_attr\(\$icon_fa\)\s*\.\s*' em09"/);
});

test('custom SVG payloads survive the admin save path for nested icon sub-fields', () => {
  const provider = read('src/Admin/SchemaProvider.php');
  const metaBox = read('src/Admin/PageConfigMetaBox.php');

  // header_slider_card_option.cards[].icon is a group sub-field: plain
  // sanitize_text_field stripped "customsvg-<svg>" down to a bare prefix.
  assert.match(provider, /if \(\$type === 'icon'\) \{\s*return function_exists\('jio_sanitize_icon_value'\)/s);
  assert.match(metaBox, /'icon'\s*=>\s*function_exists\('jio_sanitize_icon_value'\)/);
  assert.doesNotMatch(metaBox, /'icon'\s*=>\s*sanitize_text_field\(\(string\) \(\$card\['icon'\]/);
});

test('inline custom SVG shapes survive the kses allow list', () => {
  const icons = read('inc/helpers/jio-icons.php');
  const start = icons.indexOf('function jio_svg_kses_tags');
  const ksesBody = icons.slice(start, icons.indexOf('endif;', start));

  // Any element the picker's cleanSvg() lets through must also be accepted
  // here, otherwise the pasted icon is saved without its shapes.
  const pickerFiles = ['assets/js/admin-icon-picker.js', 'assets/admin/src/utils/icons.js'];
  for (const file of pickerFiles) {
    assert.match(
      read(file),
      /\/<path\|<use\|<g\\b\|<circle\|<rect\|<polygon\|<ellipse\|<line\/i/,
      `${file} must keep its cleanSvg accept test in sync with the PHP allow list`,
    );
  }

  for (const tag of ['circle', 'ellipse', 'rect', 'polygon', 'line', 'path', 'g', 'use']) {
    assert.match(ksesBody, new RegExp(`'${tag}'\\s*=>`), `jio_svg_kses_tags() is missing <${tag}>`);
  }
  assert.match(ksesBody, /'viewbox'/);
  assert.match(ksesBody, /'xlink:href'/);
});