Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

HTML Reporter: Add support for instant rendering #1793

Merged
merged 1 commit into from
Aug 9, 2024
Merged

Conversation

Krinkle
Copy link
Member

@Krinkle Krinkle commented Aug 7, 2024

For the last ten years, our HTML examples have looked something like this. With qunit.js generally recommended as the first script, but always after the <div id="qunit"> element, toward the end of the HTML <body> element:

<!DOCTYPE html>
<head>
  <link rel="stylesheet" href="lib/qunit.css">
</head>
<body>
  <div id="qunit"></div>
  <script src="lib/qunit.js"></script>
  <script src="src/app.js"></script>
  <script src="test/app.js"></script>
</body>

As of this PR, we now leverage this fact to instantly render the UI, instead of waiting for all source code and test suites to load first, which can take a while in large projects. Additionally, if a project has only synchronous tests, the page would previously remain blank for whole extra second (or until all tests have completed running) until the first render yield point (config.updateRate).

This requires changing the HTML Reporter to have its initial rendering not depend on the complete module list from QUnit.begin(). As a first step, I've simply omitted the toolbar from the first render.

Minor changes:

  • /demos/qunit-onerror-early.html

    Add an "boomBegin" option, to allow separate testing of "general" early uncaught errors, from early errors inside QUnit.begin() callbacks.

  • /test/config-reporters.html

    Move <div id=qunit> up so that we cover code for disabling QUnit.config.reporters after qunit.js. This code previously existed in QUnit.start(), but now that we've moved to happen earlier, this was now testing a less interesting scenario.


As an example, the /demos/q4000-qunit.html is an intentionally large test suite that takes a while to load, and are all synchronous tests.

Before this change, the page remains blank for about half a second after the first, final, and singular frame is painted; rendering the entire UI, green completed status bar, and all test results.

After this change, the following renders almost instantly at http://localhost:4000/demos/q4000-qunit.html, while the tests run and complete in the same time as otherwise:

Screenshot

When projects use the recommended structure for the HTML test suite,
in which qunit.js is loaded at the end of the `<body>` we now render
the UI immediately instead of waiting for all source code and test
suites to load first, which can take a while in large projects.

* /demos/qunit-onerror-early.html

  Add an "boomBegin" option, to allow separate testing of "normal"
  early early errors, and errors from QUnit.begin().

* /test/config-reporters.html

  Move `<div id=qunit>` up so that we cover code for disabling
  QUnit.config.reporters after qunit.js. This code previously existed
  in QUnit.start(), but now that we've moved to happen earlier,
  this was now testing a less interesting scenario.
@Krinkle Krinkle added this to the 3.0 release milestone Aug 7, 2024
@Krinkle Krinkle merged commit eb93713 into main Aug 9, 2024
21 checks passed
@Krinkle Krinkle deleted the early-html-render branch August 9, 2024 20:43
@Krinkle Krinkle changed the title HTML Reporter: Add support for early rendering HTML Reporter: Add support for instant rendering Aug 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

1 participant