Using 2.19.4, Windows, browser New feature: Add DOM hook to allow links to be adde

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Add DOM hook to allow links to be added after the Rerun link about qunit HOT 1 OPEN

david-pfx commented on August 15, 2024

Add DOM hook to allow links to be added after the Rerun link

from qunit.

Comments (1)

Krinkle commented on August 15, 2024

@david-pfx Coud you share an example or two of the kind of links you'd like to insert, and what (if any) test information you use to builld the links?

I've recently documented the beginnings of the "HTML API" at https://qunitjs.com/browser/#html-api

Here is how you might use it:

QUnit.hooks.afterEach(function () {
  const test = QUnit.config.current;
  const testItem = document.querySelector('#qunit-test-output-' + test.testId);
  const assertList = testItem.querySelector('ol');

  // Append "View source" link
  const fileName = /.*\/([^/:]+):/.exec((test.stack || '').split('\n')[0])?.[1];
  if (fileName) {
    const url = `https://github.com/search?type=code&q=${encodeURIComponent('org:qunitjs path:"' + fileName + '"')}`;
    testItem.insertBefore(
      Object.assign(document.createElement('a'), {
        href: url,
        textContent: 'View source'
      }),
      assertList
    );
  }
});

I suspect this is close to what you have already, but I figured I'd recognise and support it.
We could ease this by wrapping "Rerun" in a <span> with a documented class like qunit-test-actions that you can safely append to, instead of having to manually position it relative to "runtime" and "assert-list":

QUnit.hooks.afterEach(function () {
  const test = QUnit.config.current;
  const testActions = document.querySelector(`#qunit-test-output-${test.testId} .qunit-test-actions`);

  // Append "View source" link
  const fileName = /.*\/([^/:]+):/.exec((test.stack || '').split('\n')[0])?.[1];
  if (fileName) {
    const url = `https://github.com/search?type=code&q=${encodeURIComponent('org:qunitjs path:"' + fileName + '"')}`;
    testActions.append(Object.assign(document.createElement('a'), {
      href: url,
      textContent: 'View source'
    }));
  }
});

A more constrained but declarative API could look like this:

QUnit.on('htmlTestActions', (e) => {
  e.status; // "passed"
  e.testDone; // https://qunitjs.com/api/callbacks/QUnit.testDone

  e.actions.push({
    url: '…',
    label: 'View source'
  });
});