Export the functions to run tests in browser

[abourget]

Hi there,

I'm using scripterio as such:

import {
  runParsedBlocks,
  testFiles,
} from "https://cdn.jsdelivr.net/npm/scripterio@1.8.0/src/core/context.mjs";

export async function runTests() {
  const urlParams = new URLSearchParams(window.location.search);
  const tagsParam = urlParams.get("tags");
  const tags = tagsParam ? tagsParam.split(",").map((tag) => tag.trim()) : null;

  // To simulate what the CLI runner does
  testFiles.push("ALO");

  const { successes, failures } = await runParsedBlocks(tags);

  console.log(
    "Done\n------------------------- FAILURE REPORT --------------------------------"
  );
  if (failures.length > 0) {
    failures.forEach((failure) => {
      const describeSection = failure.describeStack
        .map((d) => d.name)
        .join(" > ");
      const tags =
        failure.tags.length > 0
          ? "(" + failure.tags.map((tag) => `#${tag}`).join(", ") + ")"
          : "";
      console.log(
        `- %c✗%c Failed: ${describeSection} > ${failure.name} ${tags}`,
        "color: red",
        "color: inherit"
      );
      failure.errors.forEach((error, errorIndex) => {
        console.log(` ${errorIndex + 1}.   ${error.message}`);
        if (error.stack) {
          console.log(`      Stack: ${error.stack}`);
        }
      });
    });

    console.log(`❌ Failures: ${failures.length}`);
  } else {
    console.log(`✅ No failures`);
  }
  console.log(`✅ Successes: ${successes}`);
  if (tags) {
    console.log(`Ran only tags: ${tags.join(", ")}`);
  }
  console.log("TESTS COMPLETE");
}

with the goal of running tests direclty in the browser, through files that use import { describe, test, expect } from "scripterio"; .. and define tests.

I'm using chromedp to run a headless browser to capture the logs on the CLI.

The fact that /src/core/context.mjs isn't exported means I need to go load it by its full path, and make sure I'm loading the exact same CDN version as the scripterio import I use in tests. If it were exposed, I'd be sure scripterio means the same in both, because the importmap would resolve them both to the same thing.

Would it be possible to export some of the runner interfaces ? Even if it's a tiny export.. just enough to run the registered tests.

thanks!

[VadimNastoyashchy]

Hi,
We removed the testFiles in version 1.9.0, so you don't need to use it anymore.

Basically, the idea is:
ScripterI/O is currently designed to run tests in a Node.js environment rather than in a browser. Here's why:
The CLI runner uses Node.js APIs such as process, fs, and path, which are not available in browsers.

• The test runner expects to be executed via a command-line interface (e.g. npx scripter-io).
• Some features (e.g. file system access, process exit codes, and certain global objects) are Node-specific.

It would be helpful if you could provide more context on exactly what you need and how you create tests/describe.

[abourget]

I have a Go server that renders something like this:

<script type="module">
import "/static/nodes/components/omnibar.test.mjs";
import "/static/pages/components/search-card.test.mjs";
import "/static/pages/components/search-column.test.mjs";
import "/static/pages/thread.test.mjs";
import "/static/threads/tag.test.mjs";
 
import { runTests } from "./static/test/test.mjs";
await runTests();
</script>

and then my ./static/test/test.mjs looks like this:

import {
  runParsedBlocks,
  testFiles,
} from "https://cdn.jsdelivr.net/npm/scripterio@1.8.0/src/core/context.mjs";

export async function runTests() {
  const urlParams = new URLSearchParams(window.location.search);
  const tagsParam = urlParams.get("tags");
  const tags = tagsParam ? tagsParam.split(",").map((tag) => tag.trim()) : null;

  const { successes, failures } = await runParsedBlocks(tags);

  console.log(
    "Done\n------------------------- FAILURE REPORT --------------------------------"
  );
  if (failures.length > 0) {
    failures.forEach((failure) => {
      const describeSection = failure.describeStack
        .map((d) => d.name)
        .join(" > ");
      const tags =
        failure.tags.length > 0
          ? "(" + failure.tags.map((tag) => `#${tag}`).join(", ") + ")"
          : "";
      console.log(
        `- %c✗%c Failed: ${describeSection} > ${failure.name} ${tags}`,
        "color: red",
        "color: inherit"
      );
      failure.errors.forEach((error, errorIndex) => {
        console.log(` ${errorIndex + 1}.   ${error.message}`);
        if (error.stack) {
          console.log(`      Stack: ${error.stack}`);
        }
      });
    });

    console.log(`❌ Failures: ${failures.length}`);
  } else {
    console.log(`✅ No failures`);
  }
  console.log(`✅ Successes: ${successes}`);
  if (tags) {
    console.log(`Ran only tags: ${tags.join(", ")}`);
  }
  console.log("TESTS COMPLETE");
}

This allows me to run the tests within the exact same environment, using the same server, serving the same importmap.js that I serve to my front-end in production.

I'm using no-build-steps ESM .mjs files all the way. I then format the errors in a way my CI can understand, but most especially, my AI agent, reading in text the output.

I can run tests in CI by running a bit of code that runs the server, spins a headless browser, and points it to /tests, which runs everything in the same env as its going to run, in production. And using chromedp, I listen on the console.log, and output them in the CI, or in the stdout of the agent.