wordpress-theme-aksrt/tests/widget-system/tab-posts-style-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');
const css = read('assets/widgets/frontend.css');

function declarations(selector) {
  const result = {};
  for (const match of css.replace(/\/\*[\s\S]*?\*\//g, '').matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
    if (!match[1].split(',').map((value) => value.trim()).includes(selector)) continue;
    for (const declaration of match[2].split(';')) {
      const colon = declaration.indexOf(':');
      if (colon < 0) continue;
      result[declaration.slice(0, colon).trim()] = declaration.slice(colon + 1).trim();
    }
  }
  return result;
}

test('tab and single post widget titles restore reference weight while preserving the bold option', () => {
  // public.css sets h2 to 700. The widget must override that selector;
  // the explicit global heading-bold option must still win inside it.
  assert.match(read('assets/css/core/typography.css'), /font-weight:\s*700/);
  const heading = declarations('.widget-tab-post .item-heading');
  assert.equal(heading['font-weight'], '500');
  assert.equal(heading.color, 'inherit');
  assert.equal(declarations('.widget-tab-post .item-heading.font-bold')['font-weight'], '700');
  assert.equal(declarations('.widget-main-post .item-heading')['font-weight'], '500');
  assert.equal(declarations('.widget-main-post .item-heading.font-bold')['font-weight'], '700');
  const shell = declarations('.jio-tab-posts-wrap');
  assert.equal(shell['font-size'], '14px');
  assert.equal(shell['line-height'], '1.42857143');
  assert.equal(shell.color, 'var(--main-color,#4e5358)');
  assert.equal(declarations('.widget-tab-post .posts-mini')['vertical-align'], 'baseline');
  assert.equal(declarations('.widget-tab-post .posts-mini-con').flex, 'auto');
  assert.equal(declarations('.widget-main-post .posts-mini')['vertical-align'], 'baseline');
  assert.equal(declarations('.widget-main-post .posts-mini-con').flex, 'auto');
  assert.equal(declarations('.widget-tab-post .item-meta .meta-pay').cursor, 'auto');
  assert.equal(declarations('.widget-main-post .item-meta .meta-pay').cursor, 'auto');
  assert.match(css, /\.jio-posts-wrap :where\(a, button, input, select, textarea, \[tabindex\]\):focus-visible/);
});

test('widget pagination restores compact reference metrics over public pagination overrides', () => {
  assert.match(read('assets/css/frontend/pagination.css'), /\.pagenav\.ajax-pag span/);
  const pager = declarations('.widget-tab-post .pagenav');
  assert.equal(pager.display, 'block');
  assert.equal(pager.padding, '20px 0');
  const page = declarations('.widget-tab-post .pagenav .page-numbers');
  // The final rule is the 640px override, checked separately below.
  assert.equal(page.display, 'inline-block');
  assert.equal(page.padding, '6px 9px 5px');
  assert.equal(page['min-height'], '0');
  assert.equal(page.background, 'var(--main-border-color)');
  const nestedLabel = declarations('.widget-tab-post .pagenav .page-numbers > span');
  assert.equal(nestedLabel.background, 'none');
  assert.equal(nestedLabel['min-width'], '0');
  assert.equal(nestedLabel.padding, '0');
  const hover = declarations('.widget-tab-post .pagenav a.page-numbers:hover');
  assert.equal(declarations('.widget-main-post .pagenav').display, 'block');
  assert.equal(declarations('.widget-main-post .pagenav .page-numbers').padding, '6px 9px 5px');
  assert.equal(declarations('.widget-main-post .pagenav a.page-numbers:hover').opacity, '.7');
  assert.match(read('assets/css/main.css'), /\.pagenav \.current\s*\{[^}]*background-color:\s*var\(--focus-color\)\s*!important;[^}]*color:\s*#fff\s*!important;/s);
  assert.equal(hover.background, 'var(--main-border-color)');
  assert.equal(hover.opacity, '.7');
});

test('jump control keeps the reference inline layout and responsive numeric links', () => {
  const jump = declarations('.widget-tab-post .pagenav .pag-jump');
  assert.equal(jump.width, 'auto', 'public mobile CSS must not stretch the jump control to a full row');
  assert.equal(jump.display, 'inline-flex');
  const input = declarations('.widget-tab-post .pagenav .pag-jump .jump-input');
  assert.equal(declarations('.widget-main-post .pagenav .pag-jump').display, 'inline-flex');
  assert.equal(declarations('.widget-main-post .pagenav .pag-jump .jump-input').position, 'absolute');
  assert.equal(input.position, 'absolute');
  assert.equal(input.width, '100%');
  assert.equal(input.opacity, '0');
  const mobile = css.slice(css.indexOf('@media (max-width:640px)'));
  assert.match(mobile, /:is\(\.widget-tab-post, \.widget-main-post\) \.pagenav a\.page-numbers\s*\{\s*display:none/);
  assert.match(mobile, /:is\(\.widget-tab-post, \.widget-main-post\) \.pagenav a\.prev\s*\{\s*display:inline-block/);
  assert.match(mobile, /:is\(\.widget-tab-post, \.widget-main-post\) \.pagenav \.page-numbers\s*\{\s*min-width:28px;\s*margin:2px;\s*font-size:12px/);
});

test('modern tabs have one interaction owner and no retired tab selector or unused widget-style field', () => {
  const content = read('src/WidgetSystem/Renderers/ContentRenderer.php');
  const runtime = read('assets/widgets/frontend.js');
  const renderer = read('src/WidgetSystem/PostRenderer.php');
  assert.doesNotMatch(content, /data-toggle="tab"|data-ajax/);
  assert.doesNotMatch(runtime, /jio-widget-tabs/);
  assert.doesNotMatch(renderer, /widget_style/);
  assert.match(runtime, /scope\.querySelectorAll\('\.widget-tab-post'\)\.forEach\(initTabs\)/);
});