wordpress-theme-aksrt/tests/widget-system/color-unification-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 { execFileSync } = require('node:child_process');

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

function walk(dir, exts, out = []) {
  for (const entry of fs.readdirSync(path.join(root, dir), { withFileTypes: true })) {
    const rel = path.join(dir, entry.name);
    if (entry.isDirectory()) {
      if (['node_modules', 'build', 'vendor'].includes(entry.name)) continue;
      walk(rel, exts, out);
    } else if (exts.some((ext) => entry.name.endsWith(ext))) {
      out.push(rel);
    }
  }
  return out;
}

test('n-color-picker is used only inside the shared JioColorPicker', () => {
  const offenders = walk('assets/admin/src', ['.vue', '.js'])
    .filter((file) => /n-color-picker|NColorPicker/.test(read(file)))
    .map((file) => file.replace(/\\/g, '/'));
  assert.deepEqual(offenders, ['assets/admin/src/components/form/JioColorPicker.vue']);
});

test('PHP color sanitizing goes through Jio\\Core\\Color only', () => {
  const offenders = [...walk('src', ['.php']), ...walk('inc', ['.php'])]
    .filter((file) => /sanitize_hex_color\(|rgba\?\\\(/.test(read(file)))
    .map((file) => file.replace(/\\/g, '/'))
    .filter((file) => file !== 'src/Core/Color.php');
  assert.deepEqual(offenders, []);
});

test('schema color fields sanitize via Color with showAlpha opt-in', () => {
  const provider = read('src/Admin/SchemaProvider.php');
  assert.match(provider, /'color'\s*=>\s*'color'/);
  assert.match(provider, /case 'color_alpha':\s*return \\Jio\\Core\\Color::sanitize\(\$value, true\)/);
  assert.match(provider, /showAlpha/);
  const field = read('assets/admin/src/components/form/JioField.vue');
  assert.match(field, /<JioColorPicker[\s\S]*?:alpha="!!schema\.showAlpha"/);
});

test('dead composite branches are gone', () => {
  const composite = read('assets/admin/src/components/form/JioCompositeField.vue');
  assert.doesNotMatch(composite, /'dimensions'|'spacing'|'background'|JioMediaField/);
  assert.doesNotMatch(read('assets/js/gutenberg-blocks.js'), /ColorPicker/);
});

test('JS normalizeColor mirrors PHP Color::sanitize', async () => {
  const { normalizeColor } = await import(
    'file://' + path.join(root, 'assets/admin/src/utils/color.js').replace(/\\/g, '/')
  );
  const cases = [
    ['#ABC', false], ['abcdef', false], ['#abcd', false], ['#11223344', false], ['rgb(1,2,3)', false],
    ['#abcd', true], ['#11223344', true], ['rgb(1,2,3)', true], ['RGBA( 10 , 20 , 30 , .5 )', true],
    ['rgba(1,2,3,0.12345)', true], ['rgba(1,2,3,1.0)', true], ['rgb(256,0,0)', true],
    ['red', true], ['', true], ['  #FFF  ', false],
  ];
  const php = `require 'src/Core/Color.php';`
    + `foreach (json_decode($argv[1], true) as [$v, $a]) { echo Jio\\Core\\Color::sanitize($v, $a), "\\n"; }`;
  const out = execFileSync('php', ['-d', 'display_errors=1', '-r', `define('ABSPATH', '/');${php}`, JSON.stringify(cases)], {
    cwd: root,
    encoding: 'utf8',
  }).split('\n').slice(0, cases.length);
  assert.deepEqual(cases.map(([v, a]) => normalizeColor(v, a)), out);
});

test('widget background color input is wpColorPicker-enhanced like top-level color fields', () => {
  const renderer = read('src/WidgetSystem/FormRenderer.php');
  assert.match(renderer, /\$key \. '\[color\]'[^\n]+'widefat jio-widget-color'\)/);
  assert.match(renderer, /class="' \. esc_attr\(\$class\) \. '"/);
  assert.match(read('assets/widgets/admin.js'), /\.jio-widget-color'\)\.wpColorPicker\(\)/);
});

test('page config nav color uses wpColorPicker instead of native input[type=color]', () => {
  const metaBox = read('src/Admin/PageConfigMetaBox.php');
  assert.doesNotMatch(metaBox, /type="color"/);
  assert.match(metaBox, /class="jio-page-config-color" type="text" name="page_config\[header_slider_nav_color\]"/);
  assert.match(metaBox, /wp_enqueue_script\('wp-color-picker'\)/);
  assert.match(metaBox, /\.jio-page-config-color'\)\.wpColorPicker\(\)/);
  assert.match(metaBox, /Color::sanitize\(\(string\) \(\$raw\['header_slider_nav_color'\]/);
});

test('no native input[type=color] remains in theme PHP', () => {
  const offenders = ['src', 'inc', 'templates']
    .flatMap((dir) => walk(dir, ['.php']))
    .filter((file) => /type=["']color["']/.test(read(file)))
    .map((file) => file.replace(/\\/g, '/'));
  assert.deepEqual(offenders, []);
});