From abefa6666b6409f4a3e6dee0816fcb21cc5e33f8 Mon Sep 17 00:00:00 2001 From: Timo Tijhof Date: Sun, 19 Jan 2025 05:56:51 +0000 Subject: [PATCH] Docs: Add docs for `QUnit.reporters` First introduced in QUnit 2.16.0 with f8948c96fdcef0b0f96d27acaa59fa. --- docs/Gemfile | 2 +- docs/_config.yml | 3 ++ docs/_data/sidebar_api.yml | 3 ++ docs/_includes/search.html | 26 ----------- docs/api/callbacks/QUnit.on.md | 2 +- docs/api/config/current.md | 2 +- docs/api/config/index.md | 1 + docs/api/config/reporters.md | 81 +++++----------------------------- docs/api/index.md | 1 + docs/api/reporters/console.md | 65 +++++++++++++++++++++++++++ docs/api/reporters/html.md | 36 +++++++++++++++ docs/api/reporters/index.md | 12 +++++ docs/api/reporters/perf.md | 60 +++++++++++++++++++++++++ docs/api/reporters/tap.md | 73 ++++++++++++++++++++++++++++++ docs/browser.md | 4 +- docs/intro.md | 11 +++-- 16 files changed, 278 insertions(+), 104 deletions(-) delete mode 100644 docs/_includes/search.html create mode 100644 docs/api/reporters/console.md create mode 100644 docs/api/reporters/html.md create mode 100644 docs/api/reporters/index.md create mode 100644 docs/api/reporters/perf.md create mode 100644 docs/api/reporters/tap.md diff --git a/docs/Gemfile b/docs/Gemfile index df8be9b74..546d0cc6d 100644 --- a/docs/Gemfile +++ b/docs/Gemfile @@ -2,4 +2,4 @@ source "https://rubygems.org" ruby RUBY_VERSION # To apply changes, run `bundle update`. -gem "jekyll-theme-amethyst", "2.3.2", group: :jekyll_plugins +gem "jekyll-theme-amethyst", "2.5.0", group: :jekyll_plugins diff --git a/docs/_config.yml b/docs/_config.yml index 5c002dbd3..c908c02b1 100644 --- a/docs/_config.yml +++ b/docs/_config.yml @@ -15,6 +15,9 @@ markdown: kramdown kramdown: input: GFM toc_levels: "1,2" + # Disable automatic conversion, messes with headings like "--reporter". + typographic_symbols: + ndash: '--' sass: # https://jekyllrb.com/docs/assets/#sassscss style: compressed diff --git a/docs/_data/sidebar_api.yml b/docs/_data/sidebar_api.yml index c6370f369..a09728524 100644 --- a/docs/_data/sidebar_api.yml +++ b/docs/_data/sidebar_api.yml @@ -15,6 +15,9 @@ - title: Configuration group: config +- title: Reporters + group: reporters + - group: extension - group: deprecated diff --git a/docs/_includes/search.html b/docs/_includes/search.html deleted file mode 100644 index 7c0045983..000000000 --- a/docs/_includes/search.html +++ /dev/null @@ -1,26 +0,0 @@ - -
- - -
- -{%- if jekyll.environment == "development" %} - -{%- endif %} diff --git a/docs/api/callbacks/QUnit.on.md b/docs/api/callbacks/QUnit.on.md index d345f06d8..4e8ae3cdf 100644 --- a/docs/api/callbacks/QUnit.on.md +++ b/docs/api/callbacks/QUnit.on.md @@ -14,7 +14,7 @@ version_added: "2.2.0" Register a callback that will be invoked after the specified event is emitted. -This API is the primary interface for QUnit reporters, plugins, and continuous integration support. It is based on the [js-reporters CRI standard](/~https://github.com/js-reporters/js-reporters/blob/v2.1.0/spec/cri-draft.adoc). +This event emitter is the primary interface for QUnit reporters, plugins, and continuous integration support. It is based on the [js-reporters CRI standard](/~https://github.com/js-reporters/js-reporters/blob/v2.1.0/spec/cri-draft.adoc), and includes a [Reporter API](#reporter-api). | type | parameter | description |--|--|-- diff --git a/docs/api/config/current.md b/docs/api/config/current.md index 402d70ddf..33d74e697 100644 --- a/docs/api/config/current.md +++ b/docs/api/config/current.md @@ -26,7 +26,7 @@ This object is not a configuration option, but is exposed under `QUnit.config` f | name | description | |------|-------------| | `testName` (string) | Name of the currently-running test, as passed to [QUnit.test](../QUnit/test.md). -| `testId` (string) | Internal ID, used by [QUnit.config.testId](./testId.md) to power "Rerun" links and the HTML API in the [HTML Reporter](../../browser.md#html-reporter). +| `testId` (string) | Internal ID, used by [QUnit.config.testId](./testId.md) to power "Rerun" links and the HTML API in the [HTML Reporter](../../browser.md). Other properties may change without notice. When possible, use [QUnit.on](../callbacks/QUnit.on.md) or [event callbacks](../callbacks/index.md) instead. diff --git a/docs/api/config/index.md b/docs/api/config/index.md index d2a54bc66..421a04e17 100644 --- a/docs/api/config/index.md +++ b/docs/api/config/index.md @@ -7,6 +7,7 @@ amethyst: # Override inherited "pagetype: navigation" to enable Typesense indexing pagetype: custom robots: index + toc: true redirect_from: - "/QUnit.config/" - "/config/" diff --git a/docs/api/config/reporters.md b/docs/api/config/reporters.md index c0728dcff..855d13968 100644 --- a/docs/api/config/reporters.md +++ b/docs/api/config/reporters.md @@ -24,81 +24,22 @@ Control which reporters to enable or disable. ## Built-in reporters -### tap +* [`tap`](../reporters/tap.md) +* [`console`](../reporters/console.md) +* [`perf`](../reporters/perf.md) +* [`html`](../reporters/html.md) -The **tap** reporter is a [TAP compliant](https://testanything.org/) reporter. This is the default in the [QUnit CLI](../../cli.md). This allows you to pair QUnit with many [TAP-based reporters](/~https://github.com/sindresorhus/awesome-tap#reporters), by piping the output. For example: - -```sh -qunit test/ | tap-min -``` - -### console - -The **console** reporter logs a JSON object for each reporter event from [`QUnit.on`](../callbacks/QUnit.on.md). Use this to explore or debug the Reporter API. - -``` -runStart {…} -testStart {…} -testEnd {…} -testStart {…} -testEnd {…} -runEnd {…} -``` - -### perf - -The **perf** reporter emits measures for the duration of each QUnit test and each module via the Web Performance API. This allows you to visualize where time is spent during your test run. This uses the [performance.measure()](https://developer.mozilla.org/en-US/docs/Web/API/Performance/measure) method internally. QUnit enables the perf reporter by default in [Browser](../../browser.md) environments. The measures are included in Firefox Profiler and Chrome DevTools (Safari is pending [WebKit #213870](https://bugs.webkit.org/show_bug.cgi?id=213870)). - -``` -QUnit Test Run -└── QUnit Test Suite: Example - ├── QUnit Test: apple - ├── QUnit Test: banana - └── QUnit Test: citron -``` - -
- QUnit profiling in Chrome DevTools Performance tab -
Chrome
-
- -------- - -
- QUnit performance in Firefox Profiler -
Firefox
-
- - -The Web Performance API is also [available in Node.js](https://nodejs.org/docs/latest/api/perf_hooks.html) and the QUnit perf reporter can be enabled in Node.js. You can enable it in the QUnit CLI via `--reporter perf`. Note that the [Node.js inspector](https://nodejs.org/docs/latest/api/debugger.html#v8-inspector-integration-for-nodejs) does not yet send these to Chrome DevTools ([upstream nodejs/node#47813](/~https://github.com/nodejs/node/issues/47813)). - - -### html - -The **html** reporter renders a toolbar and visualizes test results. This is the default in [Browser](../../browser.md) environments, and is documented at [HTML Reporter](../../browser.md#markup). - -## Examples - -By default, the [HTML Reporter](../../browser.md) is automatically enabled in browser environments if a `
` element exists, and it remains disabled ("headless") if such element doesn't exist. You can override this to disable the HTML Reporter even if the element does exist. - -For example, this lets you share the same HTML file for manual testing, debugging, and CI runs; and yet disable the HTML Reporter in CI for improved performance. +## Example +Enable TAP in the browser via [preconfig](./index.md#preconfiguration): ```js -// Declare as preconfig, before loading qunit.js -qunit_config_reporters_html = false; - -// Set at runtime, after loading qunit.js (but before QUnit.begin) -QUnit.config.reporters.html = false; +// Set as global variable before loading qunit.js +qunit_config_reporters_tap = true; ``` -Declaratively enable the TAP reporter in a browser environment: +Or, via [QUnit.config](../config/index.md): ```js -// Declare preconfig, before loading qunit.js -qunit_config_reporters_tap = true; +// Set from any inline script or JS file after qunit.js +QUnit.config.reporters.tap = true; ``` - -## See also - -* [Preconfig](./index.md#preconfiguration) -* [QUnit Reporter API](../callbacks/QUnit.on.md#reporter-api) diff --git a/docs/api/index.md b/docs/api/index.md index 7d7015c73..0c373d466 100644 --- a/docs/api/index.md +++ b/docs/api/index.md @@ -18,4 +18,5 @@ QUnit is a powerful, easy-to-use JavaScript unit test suite. QUnit has no depend * [Assertions](./assert/) * [Callback events](./callbacks/) * [Configuration options](./config/) +* [Reporters](./reporters/) * [Extension interface](./extension/) diff --git a/docs/api/reporters/console.md b/docs/api/reporters/console.md new file mode 100644 index 000000000..79ff8db62 --- /dev/null +++ b/docs/api/reporters/console.md @@ -0,0 +1,65 @@ +--- +layout: page-api +title: QUnit.reporters.console +excerpt: | + The console reporter logs a JSON object from all `QUnit.on()` reporting events. + + ``` + runStart {…} + testStart {…} + testEnd {…} + testStart {…} + testEnd {…} + runEnd {…} + ``` +groups: + - reporters +version_added: "2.3.0" +--- + +The **console** reporter logs a JSON object from all [`QUnit.on`](../callbacks/QUnit.on.md) reporting events. + +Use this to explore or debug the [QUnit event emitter](../callbacks/QUnit.on.md). + +## Example + +``` +runStart {…} +testStart {…} +testEnd {…} +testStart {…} +testEnd {…} +runEnd {…} +``` + +## Usage + +[QUnit CLI](../../cli.md#qunit-cli-options): + +```sh +qunit --reporter console test/ +``` + +Enable manually in JavaScript code (since QUnit 2.16): + +```js +QUnit.reporters.console.init(QUnit); +``` + +Enable declaratively via [QUnit.config](../config/index.md) (since QUnit 3.0): + +```js +// Preconfig: +// Set as environment variable to Node.js, +// or as global variable before loading qunit.js +qunit_config_reporters_console = true; + +// Config: Set from any inline script or JS file after qunit.js +QUnit.config.reporters.console = true; +``` + +## Changelog + +| UNRELEASED | Enable declaratively via [`QUnit.config.reporters`](../config/reporters.md). +| [QUnit 2.16.0](/~https://github.com/qunitjs/qunit/releases/tag/2.16.0) | Exposed as `QUnit.reporters.perf` for programmatic usage. +| [QUnit 2.3.0](/~https://github.com/qunitjs/qunit/releases/tag/2.3.0) | Introduced as part of the QUnit CLI and `--reporter console`. diff --git a/docs/api/reporters/html.md b/docs/api/reporters/html.md new file mode 100644 index 000000000..cff7cb2ea --- /dev/null +++ b/docs/api/reporters/html.md @@ -0,0 +1,36 @@ +--- +layout: page-api +title: QUnit.reporters.html +excerpt: The HTML Reporter provides a toolbar, renders test results, diffs, and more. +groups: + - reporters +version_added: "1.0.0" +--- + +The **html** reporter renders a toolbar that lets you filter which modules or tests run, visualizes test results with diffs, provides "Rerun" links for individual tests, and more. This is enabled by default in [Browser](../../browser.md) environments + +The HTML Reporter is documented in detail at [Browser § HTML Reporter](../../browser.md#lead). + +## Usage + +By default, the [HTML Reporter](../../browser.md#lead) is automatically enabled in browser environments if a `
` element exists. If such element doesn't exist, it remains disabled ("headless"). + +You can override this and disable the HTML Reporter even if the element does exist. For example, to share and reuse the same HTML file for CI, debugging, and manual testing; but disable the HTML Reporter in CI for improved performance. + +### Example + +```js +// Preconfig: Set as global variable before loading qunit.js +qunit_config_reporters_html = false; +``` + +Or +```js +// Config: Set from any inline script or JS file after qunit.js +QUnit.config.reporters.html = false; +``` + +## Changelog + +| UNRELEASED | Toggle declaratively via [`QUnit.config.reporters`](../config/reporters.md). +| [QUnit 1.0.0](/~https://github.com/qunitjs/qunit/releases/tag/1.0.0) | Initial release. diff --git a/docs/api/reporters/index.md b/docs/api/reporters/index.md new file mode 100644 index 000000000..35f74a9b3 --- /dev/null +++ b/docs/api/reporters/index.md @@ -0,0 +1,12 @@ +--- +layout: group +group: reporters +title: QUnit.reporters +excerpt: Built-in reporters for TAP, HTML, console, and perf. +amethyst: + # Override inherited "pagetype: navigation" to enable Typesense indexing + pagetype: custom + robots: index +--- + +To create your own reporter, refer to the [QUnit.on()](../callbacks/QUnit.on.md) event emitter and its Reporter API. diff --git a/docs/api/reporters/perf.md b/docs/api/reporters/perf.md new file mode 100644 index 000000000..3a583e766 --- /dev/null +++ b/docs/api/reporters/perf.md @@ -0,0 +1,60 @@ +--- +layout: page-api +title: QUnit.reporters.perf +excerpt: | + The perf reporter measures each QUnit test, to then access or visualize in the browser devtools. + + QUnit profiling in Chrome DevTools Performance tab +groups: + - reporters +version_added: "2.7.0" +--- + +The **perf** reporter measures the duration of each QUnit test and each module, which you can then access in the browser dev tools to understand where time is spent during your test run. + +This uses the [performance.measure()](https://developer.mozilla.org/en-US/docs/Web/API/Performance/measure) method of the User Timing API, which adds each measure to the Performance Timeline. + +## Browser usage + +QUnit enables the perf reporter by default in [Browser](../../browser.md) environments. The measures are automatically included in Firefox Profiler and Chrome DevTools (Safari is pending [WebKit #213870](https://bugs.webkit.org/show_bug.cgi?id=213870)). + +``` +QUnit Test Run +└── QUnit Test Suite: Example + ├── QUnit Test: apple + ├── QUnit Test: banana + └── QUnit Test: citron +``` + +
+ QUnit profiling in Chrome DevTools Performance tab +
Chrome
+
+ +------- + +
+ QUnit performance in Firefox Profiler +
Firefox
+
+ +## Node.js usage + +The Web Performance API is also [available in Node.js](https://nodejs.org/docs/latest/api/perf_hooks.html), and the QUnit perf reporter can be enabled in Node.js since QUnit 3.0. + +You can enable it in the QUnit CLI via `--reporter perf`, or activate it explicitly from a [setup file](../../cli.md#--require) as: + +```js +QUnit.reporters.perf.init(QUnit); +``` + +**Note:** As of 2025, the [Node.js inspector](https://nodejs.org/docs/latest/api/debugger.html#v8-inspector-integration-for-nodejs) does not yet send User Timing measures to Chrome DevTools ([upstream nodejs/node#47813](/~https://github.com/nodejs/node/issues/47813)). + +This means that you _can_ retrieve the QUnit measures from [`performance.getEntries()`](https://nodejs.org/docs/latest/api/perf_hooks.html) and export or visualise them with tooling of your own (e.g. from a [runEnd event](../callback/QUnit.on.md##the-runend-event), or via a PerformanceObserver). + +But, when connecting Chrome DevTools to a Node.js process, these are not currently visualised. If you currently test frontend code for browsers via jsdom in Node.js, consider [testing in a real browser](../../browser.md) instead. + +## Changelog + +| UNRELEASED | Exposed separately via `qunit --reporter` on the CLI, via `QUnit.reporters.perf` for progammatic use in Node.js, and declaratively via [`QUnit.config.reporters`](../config/reporters.md). +| [QUnit 2.7.0](/~https://github.com/qunitjs/qunit/releases/tag/2.7.0) | Introduced as part of the HTML Reporter, always enabled. diff --git a/docs/api/reporters/tap.md b/docs/api/reporters/tap.md new file mode 100644 index 000000000..956731fe5 --- /dev/null +++ b/docs/api/reporters/tap.md @@ -0,0 +1,73 @@ +--- +layout: page-api +title: QUnit.reporters.tap +excerpt: | + The tap reporter is default in the QUnit CLI and enables pairing QUnit with an ecosystem of TAP-based reporters and other tools. + + ```tap + TAP version 13 + ok 1 add > two numbers + 1..1 + # pass 1 + # skip 0 + # todo 0 + # fail 0 + ``` +groups: + - reporters +version_added: "2.16.0" +--- + +The **tap** reporter formats test results according to the [TAP specification](https://testanything.org/), and prints them to the console. It enables pairing QUnit with any tools from the TAP-based ecosystem. + +## Example + +```tap +TAP version 13 +ok 1 add > two numbers +1..1 +# pass 1 +# skip 0 +# todo 0 +# fail 0 +``` + +## Command-line + +This is the default in the [QUnit CLI](../../cli.md). This allows you to pair QUnit with any [TAP-based reporters](/~https://github.com/sindresorhus/awesome-tap#reporters), by piping the output. For example: + +```sh +qunit test/ | tap-min +``` + +See also [QUnit CLI § reporter](../../cli.md#qunit-cli-options). + +## Enable + +Declaratively enable the TAP reporter in a browser environment, or in a custom Node.js runner, e.g. for use with TAP-based tooling such as [Airtap](/~https://github.com/airtap/airtap), or [karma-tap](/~https://github.com/bySabi/karma-tap). + +```js +// Preconfig: +// Set as environment variable to Node.js, +// or as global variable before loading qunit.js +qunit_config_reporters_tap = true; +``` + +Enable via [QUnit.config](../config/index.md): + +```js +// Config: Set from any inline script or JS file after qunit.js +QUnit.config.reporters.tap = true; +``` + +Enable manually, since QUnit 2.16: + +```js +QUnit.reporters.tap.init(QUnit); +``` + +## Changelog + +| UNRELEASED | Enable declaratively via [`QUnit.config.reporters`](../config/reporters.md). +| [QUnit 2.16.0](/~https://github.com/qunitjs/qunit/releases/tag/2.16.0) | Exposed as `QUnit.reporters.tap` for programmatic use in browsers or Node.js. +| [QUnit 2.3.0](/~https://github.com/qunitjs/qunit/releases/tag/2.3.0) | Introduced as part of the QUnit CLI. diff --git a/docs/browser.md b/docs/browser.md index a18707855..a07064187 100644 --- a/docs/browser.md +++ b/docs/browser.md @@ -8,7 +8,7 @@ redirect_from: - "/cookbook/" --- -

+

Test JavaScript code in a real browser with QUnit. @@ -131,7 +131,7 @@ QUnit requires no HTML markup in order to run tests. The above "Getting started" To display test results, the only markup necessary is a `

` with `id="qunit"`. Without this, the tests will run with the [HTML Reporter](#html-reporter) disabled. -[Browser automations](#integrations) that run tests for you from the command-line, might enable other reporters or event listeners instead. For example, they might use a TAP reporter, or [`QUnit.on()`](./api/callbacks/QUnit.on.md) to automatically extract results in a machine-readable way, and use it to set the build status of a continuous integration job (CI). +[Browser automations](#integrations) that run tests for you from the command-line, might enable other reporters or event listeners instead. For example, they might use a [TAP reporter](./api/reporters/tap.md), or [`QUnit.on()`](./api/callbacks/QUnit.on.md) to automatically extract results in a machine-readable way, and use it to set the build status of a continuous integration job (CI). ## HTML Reporter diff --git a/docs/intro.md b/docs/intro.md index 722e4f520..1dd3badae 100644 --- a/docs/intro.md +++ b/docs/intro.md @@ -26,6 +26,7 @@ Check these QUnit tutorials and examples, to make the most of your unit tests! 1. [Assertions](./api/assert/index.md): Partial object comparison, expected exceptions, and much more. 1. [Browser](./browser.md): Productivity tricks, Browser automation, What can the toolbar do? 1. [CLI](./cli.md): Productivity tricks, Code coverage. +1. [Reporter API](./callbacks/QUnit.on.md#reporter-api): Event emitter, Create your own reporter. ## Support @@ -61,7 +62,7 @@ These are the official release channels for QUnit releases: * npm Registry: - If your development workflow uses [Node.js](https://nodejs.org/en/), you can install the [qunit](https://www.npmjs.com/package/qunit) package the npm Registry, using the `npm` CLI: + If your development workflow uses [Node.js](https://nodejs.org/en/), you can install the [qunit](https://www.npmjs.com/package/qunit) package from the npm Registry, using the `npm` CLI: ```bash npm install --save-dev qunit @@ -72,9 +73,13 @@ These are the official release channels for QUnit releases: yarn add --dev qunit ``` - You can then reference `node_modules/qunit/qunit/qunit.css` and `node_modules/qunit/qunit/qunit.js` in your HTML. + You can then reference these in your HTML: + ```html + + + ``` - If your project uses a custom npm frontend that locates packages elsewhere, you may need to generate the HTML dynamically and use [`require.resolve()`](https://nodejs.org/api/modules.html#modules_require_resolve_request_options) to locate `qunit/qunit/qunit.js` and `qunit/qunit/qunit.css`. Alternatively, use one of the [Integrations](./browser.md#integrations) such as karma-qunit which can do this for you. + If your project uses an npm alternative that locates packages elsewhere, you may need to generate the HTML dynamically and use [`require.resolve()`](https://nodejs.org/api/modules.html#modules_require_resolve_request_options) to locate `qunit/qunit/qunit.js` and `qunit/qunit/qunit.css`. Alternatively, use one of the [Integrations](./browser.md#integrations) such as karma-qunit which can do this for you. * Bower: