wordpress-theme-aksrt/tests/widget-system/ban-admin-runtime.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 vm = require('node:vm');

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

function runtime({ completed = false } = {}) {
  const ids = new Map();
  const doc = { activeElement: null };

  class Element {
    constructor(attrs = {}) {
      this.attrs = { ...attrs };
      this.listeners = {};
      this.queries = new Map();
      this.dataset = {};
      this.disabled = false;
      this.open = false;
      this.required = false;
      this.checked = Boolean(attrs.checked);
      this.value = attrs.value || '';
      this.textContent = attrs.textContent || '';
      this.validity = '';
      this.isConnected = true;
      this.currentContent = null;
      const names = new Set(String(attrs.class || '').split(/\s+/).filter(Boolean));
      this.classList = {
        add(name) { names.add(name); },
        remove(name) { names.delete(name); },
        toggle(name, force) {
          const enabled = force === undefined ? !names.has(name) : Boolean(force);
          if (enabled) names.add(name); else names.delete(name);
          return enabled;
        },
        contains(name) { return names.has(name); },
      };
    }
    getAttribute(name) { return this.attrs[name] ?? null; }
    setAttribute(name, value) { this.attrs[name] = String(value); }
    removeAttribute(name) { delete this.attrs[name]; }
    addEventListener(type, callback) { (this.listeners[type] ||= []).push(callback); }
    fire(type, values = {}) {
      const event = {
        target: this,
        defaultPrevented: false,
        preventDefault() { this.defaultPrevented = true; },
        ...values,
      };
      (this.listeners[type] || []).forEach((callback) => callback(event));
      return event;
    }
    querySelector(selector) {
      const matches = this.querySelectorAll(selector);
      return matches[0] || null;
    }
    querySelectorAll(selector) {
      const mapped = this.queries.get(selector);
      if (mapped) return Array.isArray(mapped) ? mapped : [mapped];
      if (this.currentContent) return this.currentContent.querySelectorAll(selector);
      return [];
    }
    map(selector, elements) { this.queries.set(selector, elements); return this; }
    closest(selector) {
      if (selector === '[data-jio-dialog-close]' && this.attrs['data-jio-dialog-close'] !== undefined) return this;
      return null;
    }
    focus() { doc.activeElement = this; }
    setCustomValidity(message) { this.validity = message; }
    replaceChildren(content = null) { this.currentContent = content; }
    getBoundingClientRect() { return { left: 100, top: 100, right: 500, bottom: 500 }; }
  }

  function fragment({ readOnly = false, initiallyChecked = false } = {}) {
    const part = new Element();
    const title = new Element({ id: 'jio-ban-dialog-title', autofocus: '' });
    const closeIcon = new Element({ 'data-jio-dialog-close': '' });
    const closeFooter = new Element({ 'data-jio-dialog-close': '' });
    part.map('#jio-ban-dialog-title', title)
      .map('[data-jio-dialog-close]', [closeIcon, closeFooter]);
    const controls = [closeIcon, closeFooter];
    let form = null;
    let radios = [];
    let note = null;
    let submit = null;
    if (!readOnly) {
      radios = [
        new Element({ type: 'radio', value: 'approve', required: '', checked: initiallyChecked }),
        new Element({ type: 'radio', value: 'reject', required: '', checked: initiallyChecked }),
      ];
      note = new Element({ name: 'note', value: 'old note', 'data-required-error': 'Please enter a nonblank rejection reason' });
      const label = new Element({ 'data-jio-ban-note-label': '', 'data-optional': 'Optional note', 'data-required': 'Reject reason required' });
      submit = new Element({ 'data-jio-ban-submit': '', 'data-idle-label': 'Choose decision', 'data-approve-label': 'Confirm approval', 'data-reject-label': 'Confirm rejection', 'data-busy-label': 'Submitting' });
      controls.push(submit);
      form = new Element();
      form.dataset = {};
      form.elements = { radios, note };
      form.map('input[type="radio"]', radios)
        .map('textarea[name="note"]', note)
        .map('[data-jio-ban-note-label]', label)
        .map('[data-jio-ban-submit]', submit);
      form.reportValidity = () => {
        const hasRequiredRadio = radios.some((radio) => radio.required);
        const radioValid = !hasRequiredRadio || radios.some((radio) => radio.checked);
        return radioValid && !note.validity && (!note.required || note.value.trim() !== '');
      };
      part.map('form[data-jio-ban-review]', form);
    }
    part.map('[data-jio-ban-submit], [data-jio-dialog-close]', controls);
    return { part, form, radios, note, submit, title, closeIcon, closeFooter };
  }

  const root = new Element();
  const window = new Element();
  doc.documentElement = new Element();
  doc.querySelector = (selector) => selector === '.jio-ban-page' ? root : null;
  doc.getElementById = (id) => ids.get(id) || null;
  const dialog = new Element();
  const originalDialogQuery = dialog.querySelector.bind(dialog);
  const originalDialogQueryAll = dialog.querySelectorAll.bind(dialog);
  dialog.querySelector = (selector) => dialog.currentContent ? dialog.currentContent.querySelector(selector) : originalDialogQuery(selector);
  dialog.querySelectorAll = (selector) => dialog.currentContent ? dialog.currentContent.querySelectorAll(selector) : originalDialogQueryAll(selector);
  dialog.showModal = () => {
    dialog.open = true;
    const title = dialog.querySelector('#jio-ban-dialog-title');
    if (title) title.focus();
  };
  dialog.close = () => {
    if (!dialog.open) return;
    dialog.open = false;
    dialog.fire('close');
  };
  ids.set('jio-ban-dialog', dialog);

  const opener = new Element({ 'data-jio-ban-view': 'report-1' });
  const readonlyOpener = new Element({ 'data-jio-ban-view': 'report-2' });
  const templates = new Map();
  templates.set('jio-ban-detail-report-1', {
    content: { cloneNode: () => fragment().part },
  });
  templates.set('jio-ban-detail-report-2', {
    content: { cloneNode: () => fragment({ readOnly: true }).part },
  });
  ids.set('jio-ban-detail-report-1', templates.get('jio-ban-detail-report-1'));
  ids.set('jio-ban-detail-report-2', templates.get('jio-ban-detail-report-2'));
  root.map('[data-jio-ban-view]', [opener, readonlyOpener]);

  vm.runInNewContext(fs.readFileSync(path.join(rootDir, 'assets/js/admin-user-ban.js'), 'utf8'), { document: doc, window });
  return { doc, window, root, dialog, opener, readonlyOpener };
}

function openReview(runtimeState, button = runtimeState.opener) {
  button.fire('click');
  const frame = runtimeState.dialog.currentContent;
  const form = frame.querySelector('form[data-jio-ban-review]');
  return {
    frame,
    form,
    radios: form.querySelectorAll('input[type="radio"]'),
    note: form.querySelector('textarea[name="note"]'),
    label: form.querySelector('[data-jio-ban-note-label]'),
    submit: form.querySelector('[data-jio-ban-submit]'),
    closeButtons: frame.querySelectorAll('[data-jio-ban-submit], [data-jio-dialog-close]').filter((button) => button.attrs['data-jio-dialog-close'] !== undefined),
  };
}

test('opening review clears choices, focuses the dialog, and locks page scrolling', () => {
  const r = runtime();
  const review = openReview(r);

  assert.equal(r.dialog.open, true);
  assert.equal(r.doc.activeElement, review.frame.querySelector('#jio-ban-dialog-title'));
  assert.deepEqual(review.radios.map((radio) => radio.checked), [false, false]);
  assert.equal(review.note.value, '');
  assert.equal(review.submit.disabled, true);
  assert.equal(review.label.textContent, 'Optional note');
  assert.equal(r.doc.documentElement.classList.contains('jio-ban-modal-open'), true);
});

test('reject decisions require a nonblank trimmed note before submission', () => {
  const r = runtime();
  const review = openReview(r);
  review.radios[1].checked = true;
  review.form.fire('change');

  assert.equal(review.note.required, true);
  assert.equal(review.label.textContent, 'Reject reason required');
  assert.equal(review.submit.disabled, false);
  review.note.value = '   \n  ';
  review.form.fire('input');
  assert.notEqual(review.note.validity, '');
  const invalid = review.form.fire('submit');
  assert.equal(invalid.defaultPrevented, true);
  assert.equal(review.form.dataset.submitting, undefined);

  review.note.value = 'Specific reason';
  review.form.fire('input');
  assert.equal(review.note.validity, '');
  const valid = review.form.fire('submit');
  assert.equal(valid.defaultPrevented, false);
  assert.equal(review.form.dataset.submitting, '1');
  assert.equal(review.submit.textContent, 'Submitting');
});

test('submission blocks duplicate posts and closing until pageshow restores state', () => {
  const r = runtime();
  const review = openReview(r);
  review.radios[0].checked = true;
  review.form.fire('change');
  review.form.fire('submit');

  assert.equal(review.submit.disabled, true);
  assert.ok(review.closeButtons.every((button) => button.disabled));
  assert.equal(r.dialog.open, true);
  assert.equal(review.form.fire('submit').defaultPrevented, true);
  r.dialog.fire('cancel');
  r.dialog.fire('click', { target: review.closeButtons[0] });
  assert.equal(r.dialog.open, true);

  r.window.fire('pageshow');
  assert.equal(review.form.dataset.submitting, undefined);
  assert.equal(review.form.getAttribute('aria-busy'), null);
  assert.equal(review.submit.disabled, false);
  assert.ok(review.closeButtons.every((button) => !button.disabled));
  assert.equal(r.doc.documentElement.classList.contains('jio-ban-modal-open'), true);

  r.dialog.fire('click', { target: review.closeButtons[0] });
  assert.equal(r.dialog.open, false);
  assert.equal(r.dialog.currentContent, null);
  assert.equal(r.doc.documentElement.classList.contains('jio-ban-modal-open'), false);
  assert.equal(r.doc.activeElement, r.opener);
});

test('completed records open read-only without a form or submit controls', () => {
  const r = runtime();
  r.readonlyOpener.fire('click');

  assert.equal(r.dialog.open, true);
  assert.equal(r.dialog.querySelector('form[data-jio-ban-review]'), null);
  assert.equal(r.dialog.querySelector('[data-jio-ban-submit]'), null);
  assert.ok(r.dialog.querySelector('[data-jio-dialog-close]'));
  r.dialog.fire('click', { target: r.dialog.querySelector('[data-jio-dialog-close]') });
  assert.equal(r.dialog.open, false);
  assert.equal(r.doc.activeElement, r.readonlyOpener);
});

test('backdrop closes only when the pointer starts and ends outside the dialog', () => {
  const r = runtime();
  openReview(r);
  r.dialog.fire('pointerdown', { clientX: 120, clientY: 120 });
  r.dialog.fire('click', { clientX: 0, clientY: 0 });
  assert.equal(r.dialog.open, true);
  r.dialog.fire('pointerdown', { clientX: 0, clientY: 0 });
  r.dialog.fire('click', { clientX: 0, clientY: 0 });
  assert.equal(r.dialog.open, false);
  assert.equal(r.doc.documentElement.classList.contains('jio-ban-modal-open'), false);
});