Skip to content

Commit

Permalink
Build commit aaa6e2f
Browse files Browse the repository at this point in the history
  • Loading branch information
@Krinkle
Krinkle committed Jun 29, 2024
1 parent b2ec68c commit 7d54768
Show file tree
Hide file tree
Showing 7 changed files with 112 additions and 88 deletions.
2 changes: 1 addition & 1 deletion api/QUnit/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ <h1>Main methods</h1>

</header>


<p>If you’re new to QUnit, check out <a href="../intro.md">Getting Started</a>!</p>


<div class="posts">
Expand Down
18 changes: 16 additions & 2 deletions api/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,8 +91,22 @@ <h1>QUnit API</h1>
</div>
<aside class="sidebar" role="complementary">

<h4><a href="/api/QUnit/">Main methods</a></h4>

<h4 class="sidebar-title-open"><a href="/api/QUnit/">Main methods</a></h4>
<ul class="sidebar-list"><li class="sidebar-item">
<a href="/api/QUnit/module/">QUnit.module()</a>
</li><li class="sidebar-item">
<a href="/api/QUnit/start/">QUnit.start()</a>
</li><li class="sidebar-item">
<a href="/api/QUnit/test/">QUnit.test()</a>
</li><li class="sidebar-item">
<a href="/api/QUnit/test.each/">QUnit.test.each()</a>
</li><li class="sidebar-item">
<a href="/api/QUnit/test.only/">QUnit.test.only()</a>
</li><li class="sidebar-item">
<a href="/api/QUnit/test.skip/">QUnit.test.skip()</a>
</li><li class="sidebar-item">
<a href="/api/QUnit/test.todo/">QUnit.test.todo()</a>
</li></ul>

<h4><a href="/api/assert/">Assertions</a></h4>

Expand Down
2 changes: 1 addition & 1 deletion browser/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ <h2 id="getting-started">Getting started</h2>

<iframe loading="lazy" title="Example test suite running in the browser" src="/resources/example-add.html" style="height: 380px;"></iframe>

<p>Congrats! You just executed your first QUnit test!</p>
<p><strong>Congrats!</strong> You just executed your first QUnit test!</p>

<h2 id="fixture">Fixture</h2>

Expand Down
101 changes: 87 additions & 14 deletions cli/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<link rel="stylesheet" href="/assets/styles.css?v=4ca9bae3" media="screen">
<link rel="alternate" type="application/rss+xml" href="/feed.xml" title="QUnit">
<title>Command-line Interface | QUnit</title>
<meta property="og:title" content="Command-line Interface"><link rel="me" href="https://fosstodon.org/@qunit"><meta name="twitter:creator" content="@qunitjs"><meta name="twitter:site" content="@qunitjs"><meta name="twitter:card" content="summary_large_image">
<meta property="og:title" content="Command-line Interface"><meta name="description" content="Test JavaScript code in Node.js with the QUnit CLI."><meta property="og:description" content="Test JavaScript code in Node.js with the QUnit CLI."><link rel="me" href="https://fosstodon.org/@qunit"><meta name="twitter:creator" content="@qunitjs"><meta name="twitter:site" content="@qunitjs"><meta name="twitter:card" content="summary_large_image">
<body>
<header class="site-header" role="banner">
<div class="site-header-wrapper wrapper">
Expand Down Expand Up @@ -74,10 +74,82 @@ <h1 class="hero-title">Command-line Interface</h1>
<div class="main main--columns wrapper">
<div class="content"><p class="lead">

How to use the QUnit CLI (command-line interface), after <a href="/intro/#in-nodejs">installing it from npm</a>.
This tutorial gets you up-and-running with QUnit in Node.js.

</p>

<p><em>For browser automations from the command-line, refer to <a href="/browser/#integrations">Browser automation</a> instead.</em></p>

<h2 id="getting-started">Getting started</h2>

<p>Getting started with QUnit to test your Node.js projects is quick and easy.<br />
First, install the <a href="https://www.npmjs.com/package/qunit">qunit</a> package from <code class="language-plaintext highlighter-rouge">npm</code>:</p>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm <span class="nb">install</span> <span class="nt">--save-dev</span> qunit

<span class="c"># Or, if using Yarn:</span>
yarn add <span class="nt">--dev</span> qunit
</code></pre></div></div>

<p>Let’s create an example program that we can test! We’ll start with a function that adds two numbers. Create a file <code class="language-plaintext highlighter-rouge">add.js</code> with the following contents:</p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nf">add</span> <span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span>
<span class="p">}</span>

<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">add</span><span class="p">;</span>
</code></pre></div></div>

<p>Now, let’s start writing tests!<br />
Create a file in a test directory, for example <code class="language-plaintext highlighter-rouge">test/add.js</code>, and write the following:</p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">add</span> <span class="o">=</span> <span class="nf">require</span><span class="p">(</span><span class="dl">'</span><span class="s1">../add.js</span><span class="dl">'</span><span class="p">);</span>

<span class="nx">QUnit</span><span class="p">.</span><span class="nf">module</span><span class="p">(</span><span class="dl">'</span><span class="s1">add</span><span class="dl">'</span><span class="p">);</span>

<span class="nx">QUnit</span><span class="p">.</span><span class="nf">test</span><span class="p">(</span><span class="dl">'</span><span class="s1">two numbers</span><span class="dl">'</span><span class="p">,</span> <span class="p">(</span><span class="nx">assert</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span>
<span class="nx">assert</span><span class="p">.</span><span class="nf">equal</span><span class="p">(</span><span class="nf">add</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">),</span> <span class="mi">3</span><span class="p">);</span>
<span class="p">});</span>
</code></pre></div></div>

<p>This defines a test suite for the “add” feature, with a single test case that verifies the result of adding two numbers together.</p>

<p>You can now run your first test. It is recommended that you run the <code class="language-plaintext highlighter-rouge">qunit</code> command via npm test, which will automatically find the <code class="language-plaintext highlighter-rouge">qunit</code> program in your local <code class="language-plaintext highlighter-rouge">node_modules</code> folder. That’s where npm downloads the dependencies. In your <code class="language-plaintext highlighter-rouge">package.json</code> file, specify it like so:</p>

<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w">
</span><span class="nl">"scripts"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
</span><span class="nl">"test"</span><span class="p">:</span><span class="w"> </span><span class="s2">"qunit"</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre></div></div>

<p>Then run:</p>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm <span class="nb">test</span>
</code></pre></div></div>

<p><strong>Congrats!</strong> You just wrote and executed your first QUnit test!</p>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>TAP version 13
ok 1 add <span class="o">&gt;</span> two numbers
1..1
<span class="c"># pass 1</span>
<span class="c"># skip 0</span>
<span class="c"># todo 0</span>
<span class="c"># fail 0</span>
</code></pre></div></div>

<p>Check out the <a href="/api/">API documentation</a> to learn more. For example, use <a href="/api/QUnit/module/"><code class="language-plaintext highlighter-rouge">QUnit.module()</code></a> to organize test, or make other kinds of comparisons via the <a href="/api/assert/">assertion methods</a>.</p>

<h2 id="efficient-development">Efficient development</h2>

<p>As your project grows, you may reach a point where the complete test suite takes more than a second to run. QUnit provides several ways to maintain a fast feedback cycle on the command-line.</p>

<ul>
<li>Use <a href="#--watch"><code class="language-plaintext highlighter-rouge">--watch</code></a> to automatically re-run tests after making changes to your files.</li>
<li>When building out a larger feature, use <a href="#--filter"><code class="language-plaintext highlighter-rouge">--filter</code></a> or <code class="language-plaintext highlighter-rouge">--module</code> to run only a subset of tests.</li>
</ul>

<h2 id="qunit-cli-options">QUnit CLI options</h2>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Usage: qunit [options] [files]
Expand Down Expand Up @@ -155,17 +227,6 @@ <h3 id="--watch"><code class="language-plaintext highlighter-rouge">--watch</cod

<p>In watch mode, QUnit will run your tests once initially, and then keep watch mode open to re-run tests after files changed anywhere in or under the current directory. This includes adding or removing files.</p>

<h2 id="efficient-development">Efficient development</h2>

<p><em>For browser automations from the command-line, refer to <a href="/browser/#integrations">Browser automation</a> instead.</em></p>

<p>As your project grows, you may reach a point where the complete test suite takes more than a second to run. QUnit provides several ways to maintain a fast feedback cycle on the command-line.</p>

<ul>
<li>Use <code class="language-plaintext highlighter-rouge">--watch</code> to automatically re-run tests after making changes to your files.</li>
<li>When building out a larger feature, use <code class="language-plaintext highlighter-rouge">--filter</code> or <code class="language-plaintext highlighter-rouge">--module</code> to run only a subset of tests.</li>
</ul>

<h2 id="nodejs-cli-options">Node.js CLI options</h2>

<p>The QUnit CLI uses Node.js. You can pass <a href="https://nodejs.org/api/cli.html">Node.js CLI</a> options via the <a href="https://nodejs.org/api/cli.html#cli_node_options_options"><code class="language-plaintext highlighter-rouge">NODE_OPTIONS</code></a> environment variable. For example, to use <code class="language-plaintext highlighter-rouge">--enable-source-maps</code> or <code class="language-plaintext highlighter-rouge">--inspect</code>, invoke QUnit as follows:</p>
Expand All @@ -191,9 +252,21 @@ <h2 id="code-coverage">Code coverage</h2>
<p>See <a href="https://github.com/qunitjs/qunit/tree/main/test/integration/nyc">/test/integration/nyc/</a> in the QUnit repo for a minimal example.</p>

<p>For a more elaborate example showcasing a unified test coverage report for tests in both Node.js and a headless browser, see <a href="https://github.com/Krinkle/example-node-and-browser-qunit-ci/">Krinkle/example-node-and-browser-qunit</a>.</p>

<h2 id="nodejs-support-policy">Node.js support policy</h2>

<p>QUnit follows the <a href="https://github.com/nodejs/LTS" target="_blank">Node.js Long-term Support (LTS) schedule</a> and provides support for at least the Current, Active LTS, and Maintenance LTS releases.</p>

<h2 id="npm-package-name">npm Package name</h2>

<p>Since QUnit 2.4.1, the official npm package is <a href="https://www.npmjs.com/package/qunit">qunit</a>.</p>

<p>Earlier versions of QUnit were published to npm under the name “qunit<strong>js</strong>” instead of “qunit”. To download these earlier versions refer to the <a href="https://www.npmjs.com/package/qunitjs">qunitjs</a> package.</p>

<p>The 0.x and 1.x versions of the “qunit” package held an alternative CLI, now known as <a href="https://github.com/qunitjs/node-qunit">node-qunit</a>.</p>
</div>
<aside class="sidebar" role="complementary"><div class="toc-wrapper">
<h4>Table of contents</h4><ol class="toc"><li class="sidebar-item"><a href="#qunit-cli-options">QUnit CLI options</a><ol><li class="sidebar-item"><a href="#--filter">--filter</a></li><li class="sidebar-item"><a href="#--module">--module</a></li><li class="sidebar-item"><a href="#--reporter">--reporter</a></li><li class="sidebar-item"><a href="#--require">--require</a></li><li class="sidebar-item"><a href="#--seed">--seed</a></li><li class="sidebar-item"><a href="#--watch">--watch</a></li></ol></li><li class="sidebar-item"><a href="#efficient-development">Efficient development</a></li><li class="sidebar-item"><a href="#nodejs-cli-options">Node.js CLI options</a></li><li class="sidebar-item"><a href="#code-coverage">Code coverage</a></li></ol></div>
<h4>Table of contents</h4><ol class="toc"><li class="sidebar-item"><a href="#getting-started">Getting started</a></li><li class="sidebar-item"><a href="#efficient-development">Efficient development</a></li><li class="sidebar-item"><a href="#qunit-cli-options">QUnit CLI options</a><ol><li class="sidebar-item"><a href="#--filter">--filter</a></li><li class="sidebar-item"><a href="#--module">--module</a></li><li class="sidebar-item"><a href="#--reporter">--reporter</a></li><li class="sidebar-item"><a href="#--require">--require</a></li><li class="sidebar-item"><a href="#--seed">--seed</a></li><li class="sidebar-item"><a href="#--watch">--watch</a></li></ol></li><li class="sidebar-item"><a href="#nodejs-cli-options">Node.js CLI options</a></li><li class="sidebar-item"><a href="#code-coverage">Code coverage</a></li><li class="sidebar-item"><a href="#nodejs-support-policy">Node.js support policy</a></li><li class="sidebar-item"><a href="#npm-package-name">npm Package name</a></li></ol></div>
</aside>

</div>
Expand Down
2 changes: 1 addition & 1 deletion feed.xml
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en"><generator uri="https://jekyllrb.com/" version="4.3.3">Jekyll</generator><link href="https://qunitjs.com/feed.xml" rel="self" type="application/atom+xml" /><link href="https://qunitjs.com/" rel="alternate" type="text/html" hreflang="en" /><updated>2024-06-29T00:44:08+00:00</updated><id>https://qunitjs.com/feed.xml</id><title type="html">QUnit</title><subtitle>The powerful, easy-to-use JavaScript testing framework.</subtitle></feed>
<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en"><generator uri="https://jekyllrb.com/" version="4.3.3">Jekyll</generator><link href="https://qunitjs.com/feed.xml" rel="self" type="application/atom+xml" /><link href="https://qunitjs.com/" rel="alternate" type="text/html" hreflang="en" /><updated>2024-06-29T00:58:28+00:00</updated><id>https://qunitjs.com/feed.xml</id><title type="html">QUnit</title><subtitle>The powerful, easy-to-use JavaScript testing framework.</subtitle></feed>
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ <h2 class="hero-description">The powerful, easy-to-use JavaScript testing framew
<section class="grid grid--small home-highlights">
<div>
<h2>Easy</h2>
<p>Easy, zero configuration setup for any Node.js project and minimal configuration for Browser-based projects.</p>
<p>Zero configuration and setup for any Node.js project, and minimal setup for Browser-based projects.</p>
</div>

<div>
Expand Down
Loading

0 comments on commit 7d54768

Please sign in to comment.