unexpected
Version:
Extensible BDD assertion toolkit
194 lines (165 loc) • 12.9 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
<link rel="stylesheet" href="../../static/normalize.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../../static/main.css" type="text/css" media="screen" />
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="../../static/bug-icon-black.ico">
<title>use</title>
</head>
<body class="sidebar-hidden has-sidebar">
<header>
<div class="logo-icon"></div>
<nav>
<ul>
<li class="menu-toggle-item">
<button class="menu-toggle" onclick="toggleSidebar()"></button>
</li>
<li class=""><a href="../..">Unexpected</a></li>
<li class=""><a href="../../assertions/any/to-be">Assertions</a></li>
<li class="active"><a href="../addAssertion">API</a></li>
<li class=""><a href="../../plugins">Plugins</a></li>
</ul>
</nav>
<div class="search" style="visibility: hidden">
<input id="search" placeholder="Search..." value="">
<div id="searchDropDown" class="dropDown">
<ul id="searchResults"></ul>
</div>
</div>
</header>
<section id="api">
<nav id="api-menu" class="sidebar js-remember-scroll-position">
<ul>
<li class="">
<a href="../addAssertion">addAssertion</a>
</li>
<li class="">
<a href="../addType">addType</a>
</li>
<li class="">
<a href="../async">async</a>
</li>
<li class="">
<a href="../clone">clone</a>
</li>
<li class="">
<a href="../expect">expect</a>
</li>
<li class="">
<a href="../fail">fail</a>
</li>
<li class="">
<a href="../promise">promise</a>
</li>
<li class="">
<a href="../promise-all">promise.all</a>
</li>
<li class="">
<a href="../promise-any">promise.any</a>
</li>
<li class="">
<a href="../promise-settle">promise.settle</a>
</li>
<li class="">
<a href="../toString">toString</a>
</li>
<li class="">
<a href="../UnexpectedError">UnexpectedError</a>
</li>
<li class="active">
<a href="">use</a>
</li>
<li class="">
<a href="../withError">withError</a>
</li>
</ul>
</nav>
<div class="main" tabindex="-1">
<div class="content">
<h1 id="expect-use-plugindefinition-">expect.use(pluginDefinition)</h1>
<p>Unexpected is built on an extensible core. Every assertion, type and
output style provided by the core library is implemented by extending
the core. Plugins can make use of the exact same extension methods to
provide new and exciting assertion capabilities.</p>
<p>Unexpected plugins are functions or objects that adhere to the following interface:</p>
<p>Optional properties:</p>
<ul>
<li><strong>name</strong>: <code>String</code> - the name of the plugin.</li>
<li><strong>version</strong>: <code>String</code> - the semver version of the plugin (string).</li>
<li><strong>dependencies</strong>: <code>String array</code> - a list of dependencies.</li>
</ul>
<p>Required:</p>
<ul>
<li><strong>installInto</strong>: <code>function(expect)</code> - a function that will update the given expect instance.</li>
</ul>
<p>If you pass a function to <code>use</code>, it will be used as the <code>installInto</code>
function, and the name of the function will be used as the name of the plugin,
unless the function is anonymous.</p>
<p>The name of the plugin should be the same as the NPM package name.</p>
<p>A plugin can require a list of other plugins to be installed prior to
installation of the plugin. If the dependency list is not fulfilled
the installation will fail. The idea is that you manage your plugin
versions using NPM. If you install a plugin that is already installed,
nothing will happen.</p>
<p>The <code>installInto</code> function receives an instance of unexpected and uses
the <code>addAssertion</code>, <code>addStyle</code>, <code>installTheme</code> and <code>addType</code> methods
to extend the instance.</p>
<div class="code lang-javascript">
<div>expect<span style="color: #000000">.</span><span style="color: #000000">use</span><span style="color: #000000">(</span><span style="color: #000000">require</span><span style="color: #000000">(</span><span style="color: #df5000">'unexpected-sinon'</span><span style="color: #000000">));</span></div>
</div><p>Notice that it is usually a good idea to <a href="../clone">clone</a> the instance before
extending it with plugins.</p>
<h2 id="example">Example</h2>
<p>Let's say we wanted first class support for a integer intervals and
provide as a plugin.</p>
<p>An integer interval is defined the following way:</p>
<div class="code lang-javascript">
<div><span style="color: #a71d5d">function</span> <span style="color: #000000">IntegerInterval</span><span style="color: #000000">(</span>from<span style="color: #000000">,</span> to<span style="color: #000000">)</span> <span style="color: #000000">{</span></div>
<div> <span style="color: #a71d5d">this</span><span style="color: #000000">.</span>from <span style="color: #a71d5d">=</span> from<span style="color: #000000">;</span></div>
<div> <span style="color: #a71d5d">this</span><span style="color: #000000">.</span>to <span style="color: #a71d5d">=</span> to<span style="color: #000000">;</span></div>
<div><span style="color: #000000">}</span></div>
</div><p>Now we will define an example plugin that will add support for this type:</p>
<div class="code lang-javascript">
<div>expect<span style="color: #000000">.</span><span style="color: #000000">use</span><span style="color: #000000">({</span></div>
<div> name<span style="color: #000000">:</span> <span style="color: #df5000">'unexpected-integer-intervals'</span><span style="color: #000000">,</span></div>
<div> installInto<span style="color: #000000">:</span> <span style="color: #a71d5d">function</span> <span style="color: #000000">(</span>expect<span style="color: #000000">)</span> <span style="color: #000000">{</span></div>
<div> expect<span style="color: #000000">.</span><span style="color: #000000">addType</span><span style="color: #000000">({</span></div>
<div> name<span style="color: #000000">:</span> <span style="color: #df5000">'IntegerInterval'</span><span style="color: #000000">,</span></div>
<div> base<span style="color: #000000">:</span> <span style="color: #df5000">'object'</span><span style="color: #000000">,</span></div>
<div> identify<span style="color: #000000">:</span> <span style="color: #a71d5d">function</span> <span style="color: #000000">(</span>value<span style="color: #000000">)</span> <span style="color: #000000">{</span></div>
<div> <span style="color: #a71d5d">return</span> value && value <span style="color: #a71d5d">instanceof</span> IntegerInterval<span style="color: #000000">;</span></div>
<div> <span style="color: #000000">},</span></div>
<div> inspect<span style="color: #000000">:</span> <span style="color: #a71d5d">function</span> <span style="color: #000000">(</span>value<span style="color: #000000">,</span> depth<span style="color: #000000">,</span> output<span style="color: #000000">)</span> <span style="color: #000000">{</span></div>
<div> output<span style="color: #000000">.</span><span style="color: #000000">text</span><span style="color: #000000">(</span><span style="color: #df5000">'['</span><span style="color: #000000">).</span><span style="color: #000000">jsNumber</span><span style="color: #000000">(</span>value<span style="color: #000000">.</span>from<span style="color: #000000">).</span><span style="color: #000000">text</span><span style="color: #000000">(</span><span style="color: #df5000">','</span><span style="color: #000000">).</span><span style="color: #000000">jsNumber</span><span style="color: #000000">(</span>value<span style="color: #000000">.</span>to<span style="color: #000000">).</span><span style="color: #000000">text</span><span style="color: #000000">(</span><span style="color: #df5000">']'</span><span style="color: #000000">);</span></div>
<div> <span style="color: #000000">}</span></div>
<div> <span style="color: #000000">});</span></div>
<div> </div>
<div> expect<span style="color: #000000">.</span><span style="color: #000000">addAssertion</span><span style="color: #000000">(</span><span style="color: #df5000">'[not] to contain'</span><span style="color: #000000">,</span> <span style="color: #a71d5d">function</span> <span style="color: #000000">(</span>expect<span style="color: #000000">,</span> subject<span style="color: #000000">,</span> value<span style="color: #000000">)</span> <span style="color: #000000">{</span></div>
<div> <span style="color: #000000">expect</span><span style="color: #000000">(</span>value<span style="color: #000000">,</span> <span style="color: #df5000">'[not] to be within'</span><span style="color: #000000">,</span> subject<span style="color: #000000">.</span>from<span style="color: #000000">,</span> subject<span style="color: #000000">.</span>to<span style="color: #000000">);</span></div>
<div> <span style="color: #000000">});</span></div>
<div> <span style="color: #000000">}</span></div>
<div><span style="color: #000000">});</span></div>
</div><p>After installing the plugin we can use the <code>to contain</code> assertion on
<code>IntegerInterval</code> instances.</p>
<div class="code lang-javascript">
<div><span style="color: #000000">expect</span><span style="color: #000000">(</span><span style="color: #a71d5d">new</span> IntegerInterval<span style="color: #000000">(</span><span style="color: #0086b3">7</span><span style="color: #000000">,</span> <span style="color: #0086b3">13</span><span style="color: #000000">),</span> <span style="color: #df5000">'to contain'</span><span style="color: #000000">,</span> <span style="color: #0086b3">9</span><span style="color: #000000">);</span></div>
</div><p>and we get improved output when the assertion fails:</p>
<div class="code lang-javascript">
<div><span style="color: #000000">expect</span><span style="color: #000000">(</span><span style="color: #a71d5d">new</span> IntegerInterval<span style="color: #000000">(</span><span style="color: #0086b3">7</span><span style="color: #000000">,</span> <span style="color: #0086b3">13</span><span style="color: #000000">),</span> <span style="color: #df5000">'to contain'</span><span style="color: #000000">,</span> <span style="color: #0086b3">27</span><span style="color: #000000">);</span></div>
</div><div class="output">
<div><span style="color: red; font-weight: bold">expected</span> [<span style="color: #0086b3">7</span>,<span style="color: #0086b3">13</span>] <span style="color: red; font-weight: bold">to contain</span> <span style="color: #0086b3">27</span></div>
</div><p>For more inspiration you can look at the source for existing plugins.
See <a href="/plugins/">the plugin page</a> for a list.</p>
</div>
</div>
</section>
<script type="text/javascript">
baseUrl = '../..';
</script>
<script type="text/javascript" src="../../static/toggleSidebar.js"></script>
<script type="text/javascript" src="../../static/rememberScrollPosition.js"></script>
<script type="text/javascript" src="../../static/focusMain.js"></script>
<script type="text/javascript" src="../../static/search.js"></script>
</body>
</html>