Docs: Write "Test lifecycle" page and add diagram

[Krinkle]

Test lifecycle

• New diagram from Document callback ordering more explicitly. #1358, with improvements by @FND and @jdittrich.

• New example demonstrating module options being copied to context.

QUnit.module § Hooks

• Rewrite to be more example-driven.

• Move existing examples inline, and simplify examples a lot.

Move low-level ordering details to the new "Test lifecycle" page. For most readers these are a technically-worded distraction that underminss the naturally correct intuition one would otherwise assume, and wrongly give the impression that there is something unique or complicated here.

The way QUnit works is comparable to other test frameworks, both those that came before (e.g. PHPUnit, Python unittest), and those that followed (e.g. Jasmine, Mocha).

Besides, most projects tend to define tests with 0 or 1 hooks, where ordering or inheritence isn't observable. Even when a larger ecosystem, like Ember or MediaWiki, is involved, their global hooks and utilities work as expected without contributors needing to be aware of where they come from. It just works!

QUnit.module § Options

Promote the shorter object literal "method" syntax (ES6).

QUnit.module § Examples

• "Async hook callback", moved inline.

• "Hooks on nested modules", moved to Test lifecycle page.

• "Hooks via module options", moved inline.

• "Using the test context", moved QUnit.test page, with a copy on the Test lifecycle page as well.

• "Only run a subset of tests"

  • rename to "Skip a module",
  • re-arrange to lead with "QUnit.module.skip" instead of obscure "todo" and "only".
  • add new example for QUnit.module.if().

[FND]

@Krinkle: I appreciate you following up on this!

I have two minor observations:

• It took me a little while to understand that on the left-hand side, QUnit.module("…", was unclosed by design rather than an unintentional syntax error. I now get why that's the case, so just from my entirely subjective POV, this leaves me with some tension - though admittedly, I don't have a great solution (other than crutches like QUnit.module("Parent", …) or QUnit.module("Parent", ┕┅┅┅┅┙) perhaps).
• I was positively surprised that you went to the trouble of supporting dark mode in the SVG. Within the surrounding page, that results in the diagram's borders blending with the edge (see screenshot below) - that might be improved with some padding?

[Krinkle]

@FND I'm actually as surprised as you are (I prefer light mode on desktop). I didn't realize Diagrams.net produces a dark mode version by default. (https://en.wikipedia.org/wiki/Diagrams.net, https://github.com/jgraph/drawio/).

Indeed, Firefox and Chrome appear to let the color-scheme of an HTML document bleed into the computed CSS value, such as light-dark(), even for embedded SVGs in <img> tags. Interesting!

Safari does not support this yet.

• https://bugs.webkit.org/show_bug.cgi?id=199134
• https://bugs.webkit.org/show_bug.cgi?id=283489

I've revised the diagram at #1807.

[FND]

TIL! I'll need to look into this more closely sometime... Thanks for looking up those WebKit links!