1581 lines
81 KiB
HTML
1581 lines
81 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html>
|
|
<head>
|
|
<title>Tea Time: A Beginner's Guide to Jasmine</title>
|
|
<script src='assets/application.js' type='text/javascript'></script>
|
|
<style type='text/css'>.hll { background-color: #ffffcc }
|
|
.c { color: #408080; font-style: italic } /* Comment */
|
|
.err { border: 1px solid #FF0000 } /* Error */
|
|
.k { color: #008000; font-weight: bold } /* Keyword */
|
|
.o { color: #666666 } /* Operator */
|
|
.cm { color: #408080; font-style: italic } /* Comment.Multiline */
|
|
.cp { color: #BC7A00 } /* Comment.Preproc */
|
|
.c1 { color: #408080; font-style: italic } /* Comment.Single */
|
|
.cs { color: #408080; font-style: italic } /* Comment.Special */
|
|
.gd { color: #A00000 } /* Generic.Deleted */
|
|
.ge { font-style: italic } /* Generic.Emph */
|
|
.gr { color: #FF0000 } /* Generic.Error */
|
|
.gh { color: #000080; font-weight: bold } /* Generic.Heading */
|
|
.gi { color: #00A000 } /* Generic.Inserted */
|
|
.go { color: #808080 } /* Generic.Output */
|
|
.gp { color: #000080; font-weight: bold } /* Generic.Prompt */
|
|
.gs { font-weight: bold } /* Generic.Strong */
|
|
.gu { color: #800080; font-weight: bold } /* Generic.Subheading */
|
|
.gt { color: #0040D0 } /* Generic.Traceback */
|
|
.kc { color: #008000; font-weight: bold } /* Keyword.Constant */
|
|
.kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
|
|
.kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
|
|
.kp { color: #008000 } /* Keyword.Pseudo */
|
|
.kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
|
|
.kt { color: #B00040 } /* Keyword.Type */
|
|
.m { color: #666666 } /* Literal.Number */
|
|
.s { color: #BA2121 } /* Literal.String */
|
|
.na { color: #7D9029 } /* Name.Attribute */
|
|
.nb { color: #008000 } /* Name.Builtin */
|
|
.nc { color: #0000FF; font-weight: bold } /* Name.Class */
|
|
.no { color: #880000 } /* Name.Constant */
|
|
.nd { color: #AA22FF } /* Name.Decorator */
|
|
.ni { color: #999999; font-weight: bold } /* Name.Entity */
|
|
.ne { color: #D2413A; font-weight: bold } /* Name.Exception */
|
|
.nf { color: #0000FF } /* Name.Function */
|
|
.nl { color: #A0A000 } /* Name.Label */
|
|
.nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
|
|
.nt { color: #008000; font-weight: bold } /* Name.Tag */
|
|
.nv { color: #19177C } /* Name.Variable */
|
|
.ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
|
|
.w { color: #bbbbbb } /* Text.Whitespace */
|
|
.mf { color: #666666 } /* Literal.Number.Float */
|
|
.mh { color: #666666 } /* Literal.Number.Hex */
|
|
.mi { color: #666666 } /* Literal.Number.Integer */
|
|
.mo { color: #666666 } /* Literal.Number.Oct */
|
|
.sb { color: #BA2121 } /* Literal.String.Backtick */
|
|
.sc { color: #BA2121 } /* Literal.String.Char */
|
|
.sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
|
|
.s2 { color: #BA2121 } /* Literal.String.Double */
|
|
.se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
|
|
.sh { color: #BA2121 } /* Literal.String.Heredoc */
|
|
.si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
|
|
.sx { color: #008000 } /* Literal.String.Other */
|
|
.sr { color: #BB6688 } /* Literal.String.Regex */
|
|
.s1 { color: #BA2121 } /* Literal.String.Single */
|
|
.ss { color: #19177C } /* Literal.String.Symbol */
|
|
.bp { color: #008000 } /* Name.Builtin.Pseudo */
|
|
.vc { color: #19177C } /* Name.Variable.Class */
|
|
.vg { color: #19177C } /* Name.Variable.Global */
|
|
.vi { color: #19177C } /* Name.Variable.Instance */
|
|
.il { color: #666666 } /* Literal.Number.Integer.Long */</style>
|
|
<link href='assets/application.css' rel='stylesheet' type='text/css' />
|
|
<link href='http://fonts.googleapis.com/css?family=Acme' rel='stylesheet' type='text/css' />
|
|
|
|
</head>
|
|
<body class='loading'>
|
|
<div id='slides-container'>
|
|
<div id='slides'><div class="slide"><div class="content">
|
|
<div id="intro">
|
|
<img src="assets/john-drinking-tea.png" />
|
|
<div>
|
|
<h1>Tea Time</h1>
|
|
<h2>A Beginner's Guide to JavaScript Testing using Jasmine</h2>
|
|
<h3>By John Bintz</h3>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Automated testing is important</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Why is it important?</h1>
|
|
|
|
</div></div><div class="slide style-image-80-percent"><div class="content">
|
|
<p><img src="assets/checklist.png" /></p>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Fortunately, we're beyond that nowadays</h1>
|
|
|
|
</div></div><div class="slide style-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="nb">require</span> <span class="s1">'spec_helper'</span>
|
|
|
|
<span class="n">describe</span> <span class="no">MyCoolWebsite</span> <span class="k">do</span>
|
|
<span class="n">let</span><span class="p">(</span><span class="ss">:website</span><span class="p">)</span> <span class="p">{</span> <span class="n">described_class</span><span class="o">.</span><span class="n">new</span> <span class="p">}</span>
|
|
|
|
<span class="n">describe</span> <span class="s1">'#cool_method'</span> <span class="k">do</span>
|
|
<span class="n">subject</span> <span class="p">{</span> <span class="n">website</span><span class="o">.</span><span class="n">cool_method</span> <span class="p">}</span>
|
|
|
|
<span class="n">let</span><span class="p">(</span><span class="ss">:oh_yeah</span><span class="p">)</span> <span class="p">{</span> <span class="o">[</span> <span class="n">double_cool</span> <span class="o">]</span> <span class="p">}</span>
|
|
<span class="n">let</span><span class="p">(</span><span class="ss">:double_cool</span><span class="p">)</span> <span class="p">{</span> <span class="s1">'double cool'</span> <span class="p">}</span>
|
|
|
|
<span class="n">before</span> <span class="k">do</span>
|
|
<span class="n">website</span><span class="o">.</span><span class="n">stubs</span><span class="p">(</span><span class="ss">:whoa_cool</span><span class="p">)</span><span class="o">.</span><span class="n">returns</span><span class="p">(</span><span class="n">oh_yeah</span><span class="p">)</span>
|
|
<span class="k">end</span>
|
|
|
|
<span class="n">it</span> <span class="p">{</span> <span class="n">should</span> <span class="o">==</span> <span class="n">double_cool</span> <span class="p">}</span>
|
|
<span class="k">end</span>
|
|
<span class="k">end</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>But there's more to web apps than Ruby nowadays...</h1>
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="nt"><img</span> <span class="na">src=</span><span class="s">"normal.gif"</span>
|
|
<span class="na">onmouseover=</span><span class="s">"this.src='hover.gif'"</span>
|
|
<span class="na">onmouseout=</span><span class="s">"this.src='normal.gif'"</span> <span class="nt">/></span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<div class="highlight"><pre><span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></span>
|
|
<span class="kd">function</span> <span class="nx">showMyCoolTitle</span><span class="p">(</span><span class="nx">title</span><span class="p">,</span> <span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">length</span> <span class="o">==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span> <span class="nx">length</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="p">}</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">length</span> <span class="o"><=</span> <span class="nx">title</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nb">document</span><span class="p">.</span><span class="nx">title</span> <span class="o">=</span> <span class="nx">title</span><span class="p">.</span><span class="nx">substr</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="nx">length</span><span class="p">);</span>
|
|
<span class="nx">length</span><span class="o">++</span><span class="p">;</span>
|
|
|
|
<span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">showMyCoolTitle</span><span class="p">(</span><span class="nx">title</span><span class="p">,</span> <span class="nx">length</span><span class="p">);</span> <span class="p">},</span> <span class="mi">75</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="nb">window</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="nx">showMyCoolTitle</span><span class="p">(</span><span class="s2">"My cool website! Whoaaaaa!"</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
<span class="nt"></script></span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>jQuery</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Backbone</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Sprockets and RequireJS</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Automated testing is important</h1>
|
|
|
|
</div></div><div class="slide style-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="nb">require</span> <span class="s1">'spec_helper'</span>
|
|
|
|
<span class="n">describe</span> <span class="no">MyCoolWebsite</span> <span class="k">do</span>
|
|
<span class="n">let</span><span class="p">(</span><span class="ss">:website</span><span class="p">)</span> <span class="p">{</span> <span class="n">described_class</span><span class="o">.</span><span class="n">new</span> <span class="p">}</span>
|
|
|
|
<span class="n">describe</span> <span class="s1">'#cool_method'</span> <span class="k">do</span>
|
|
<span class="n">subject</span> <span class="p">{</span> <span class="n">website</span><span class="o">.</span><span class="n">cool_method</span> <span class="p">}</span>
|
|
|
|
<span class="n">let</span><span class="p">(</span><span class="ss">:oh_yeah</span><span class="p">)</span> <span class="p">{</span> <span class="o">[</span> <span class="n">double_cool</span> <span class="o">]</span> <span class="p">}</span>
|
|
<span class="n">let</span><span class="p">(</span><span class="ss">:double_cool</span><span class="p">)</span> <span class="p">{</span> <span class="s1">'double cool'</span> <span class="p">}</span>
|
|
|
|
<span class="n">before</span> <span class="k">do</span>
|
|
<span class="n">website</span><span class="o">.</span><span class="n">stubs</span><span class="p">(</span><span class="ss">:whoa_cool</span><span class="p">)</span><span class="o">.</span><span class="n">returns</span><span class="p">(</span><span class="n">oh_yeah</span><span class="p">)</span>
|
|
<span class="k">end</span>
|
|
|
|
<span class="n">it</span> <span class="p">{</span> <span class="n">should</span> <span class="o">==</span> <span class="n">double_cool</span> <span class="p">}</span>
|
|
<span class="k">end</span>
|
|
<span class="k">end</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="nx">describe</span> <span class="s">'MyCoolWebsiteView'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nv">website = </span><span class="kc">null</span>
|
|
|
|
<span class="nx">beforeEach</span> <span class="o">-></span>
|
|
<span class="nv">website = </span><span class="k">new</span> <span class="nx">MyCoolWebsiteView</span><span class="p">()</span>
|
|
|
|
<span class="nx">describe</span> <span class="s">'#coolMethod'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nv">doubleCool = </span><span class="s">'double cool'</span>
|
|
<span class="nv">ohYeah = </span><span class="p">[</span> <span class="nx">doubleCool</span> <span class="p">]</span>
|
|
|
|
<span class="nx">beforeEach</span> <span class="o">-></span>
|
|
<span class="nv">website.whoaCool = </span><span class="o">-></span> <span class="nx">ohYeah</span>
|
|
|
|
<span class="nx">it</span> <span class="s">'should be double cool'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">expect</span><span class="p">(</span><span class="nx">website</span><span class="p">.</span><span class="nx">coolMethod</span><span class="p">()).</span><span class="nx">toEqual</span><span class="p">(</span><span class="nx">doubleCool</span><span class="p">)</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Jasmine</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>BDD unit testing framework for JavaScript</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Platform independent</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Easily extended</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Very easy to learn!</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Follow along!</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h2><a href="http://johnbintz.github.com/tea-time/">johnbintz.github.com/tea-time</a></h2>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>No need to install anything right now</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1><a href="http://tryjasmine.com/">tryjasmine.com</a></h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Specs on the left</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Code under test on the right</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Write code in CoffeeScript</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Ready?</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Let's go!</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1><code>describe</code></h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Describes a thing or a behavior of a thing</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Let's describe...</h1>
|
|
|
|
</div></div><div class="slide style-image-80-percent"><div class="content">
|
|
<p><img src="assets/relevant-cat.jpg" /></p>
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="nx">describe</span> <span class="s">'Cat'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="c1"># cat behavior descriptions go here</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Something that cats do...</h1>
|
|
|
|
</div></div><div class="slide style-image-80-percent"><div class="content">
|
|
<p><img src="assets/cat-meow.jpg" /></p>
|
|
|
|
</div></div><div class="slide style-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="nx">describe</span> <span class="s">'Cat'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">describe</span> <span class="s">'#meow'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="c1"># description of the meow behavior goes here</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>John behavior #1</h1>
|
|
|
|
<h2>Use Ruby-style indicators for instance- and class-level methods, even in Jasmine</h2>
|
|
|
|
<div class="highlight"><pre><span class="nx">describe</span> <span class="s">'John'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">describe</span> <span class="s">'spec definitions'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">it</span> <span class="s">'should look like you did it in RSpec'</span><span class="p">,</span> <span class="o">-></span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Describe how we expect a cat to meow</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1><code>it</code></h1>
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="nx">describe</span> <span class="s">'Cat'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">describe</span> <span class="s">'#meow'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">it</span> <span class="s">'should meow correctly'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="c1"># expectation of a cat meowing</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>We have the description...</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Now let's add the expectations!</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1><code>expect</code></h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>What should we get as an output?</h1>
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="nx">describe</span> <span class="s">'Cat'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">describe</span> <span class="s">'#meow'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">it</span> <span class="s">'should meow correctly'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">expect</span><span class="p">(</span><span class="nx">cat</span><span class="p">.</span><span class="nx">meow</span><span class="p">()).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s">'meow'</span><span class="p">)</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Wait, we need a cat.</h1>
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="nx">describe</span> <span class="s">'Cat'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">describe</span> <span class="s">'#meow'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">it</span> <span class="s">'should meow correctly'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nv">cat = </span><span class="k">new</span> <span class="nx">Cat</span><span class="p">()</span>
|
|
|
|
<span class="nx">expect</span><span class="p">(</span><span class="nx">cat</span><span class="p">.</span><span class="nx">meow</span><span class="p">()).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s">'meow'</span><span class="p">)</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="c1"># code-under-test</span>
|
|
|
|
<span class="k">class</span> <span class="k">this</span><span class="p">.</span><span class="nx">Cat</span>
|
|
<span class="nv">meow: </span><span class="o">-></span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="c1">// safety wrapper to prevent global pollution</span>
|
|
<span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="c1">// ...but we want to pollute the Cat class</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">Cat</span> <span class="o">=</span> <span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="kd">function</span> <span class="nx">Cat</span><span class="p">()</span> <span class="p">{}</span>
|
|
<span class="nx">Cat</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">meow</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{};</span>
|
|
<span class="k">return</span> <span class="nx">Cat</span><span class="p">;</span>
|
|
<span class="p">})();</span>
|
|
<span class="p">})(</span><span class="k">this</span><span class="p">)</span> <span class="c1">// this is window in a browser</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Run it!</h1>
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre>1 spec, 1 failure
|
|
|
|
Expected undefined to equal 'meow'.
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Make it meow!</h1>
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="k">class</span> <span class="k">this</span><span class="p">.</span><span class="nx">Cat</span>
|
|
<span class="nv">meow: </span><span class="o">-></span> <span class="s">"meow"</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre>1 spec, 0 failures
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Here's what you should have meow...</h1>
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="c1"># spec</span>
|
|
|
|
<span class="nx">describe</span> <span class="s">'Cat'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">describe</span> <span class="s">'#meow'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">it</span> <span class="s">'should meow correctly'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">expect</span><span class="p">(</span><span class="nx">cat</span><span class="p">.</span><span class="nx">meow</span><span class="p">()).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s">'meow'</span><span class="p">)</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="c1"># code-under-test</span>
|
|
|
|
<span class="k">class</span> <span class="k">this</span><span class="p">.</span><span class="nx">Cat</span>
|
|
<span class="nv">meow: </span><span class="o">-></span> <span class="s">"meow"</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>What if the cat meows differently based on certain states?</h1>
|
|
|
|
</div></div><div class="slide style-image-80-percent"><div class="content">
|
|
<p><img src="assets/hungry-cat.jpg" /></p>
|
|
|
|
</div></div><div class="slide style-image-80-percent"><div class="content">
|
|
<p><img src="assets/cat-carrier.jpg" /></p>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Nested <code>describe</code></h1>
|
|
|
|
</div></div><div class="slide style-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="nx">describe</span> <span class="s">'Cat'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">describe</span> <span class="s">'#meow'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">describe</span> <span class="s">'hungry'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="c1"># Cat#meow expectation for when</span>
|
|
<span class="c1"># the cat is hungry</span>
|
|
|
|
<span class="nx">describe</span> <span class="s">'going to the vet'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="c1"># Cat#meow expectation for when</span>
|
|
<span class="c1"># the cat knows it's vet time</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="nx">describe</span> <span class="s">'Cat'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">describe</span> <span class="s">'#meow'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">describe</span> <span class="s">'hungry'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">it</span> <span class="s">'should be a mournful meow'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nv">cat = </span><span class="k">new</span> <span class="nx">Cat</span><span class="p">()</span>
|
|
<span class="nv">cat.state = </span><span class="o">-></span> <span class="nx">Cat</span><span class="p">.</span><span class="nx">HUNGRY</span>
|
|
<span class="c1"># ...just like cat.stubs(:state)</span>
|
|
|
|
<span class="nx">expect</span><span class="p">(</span><span class="nx">cat</span><span class="p">.</span><span class="nx">meow</span><span class="p">()).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s">"meeeyaow"</span><span class="p">)</span>
|
|
|
|
<span class="nx">describe</span> <span class="s">'going to the vet'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">it</span> <span class="s">'should be an evil meow'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nv">cat = </span><span class="k">new</span> <span class="nx">Cat</span><span class="p">()</span>
|
|
<span class="nv">cat.state = </span><span class="o">-></span> <span class="nx">Cat</span><span class="p">.</span><span class="nx">VET_PSYCHIC</span>
|
|
<span class="c1"># ...just like the one above</span>
|
|
|
|
<span class="nx">expect</span><span class="p">(</span><span class="nx">cat</span><span class="p">.</span><span class="nx">meow</span><span class="p">()).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s">"raowwww"</span><span class="p">)</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-image-80-percent"><div class="content">
|
|
<p><img src="assets/wet-cat.jpg" /></p>
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="nv">cat = </span><span class="k">new</span> <span class="nx">Cat</span><span class="p">()</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="n">before</span> <span class="k">do</span>
|
|
<span class="vi">@cat</span> <span class="o">=</span> <span class="no">Cat</span><span class="o">.</span><span class="n">new</span>
|
|
<span class="k">end</span>
|
|
|
|
<span class="n">it</span> <span class="s1">'should be a mournful meow'</span> <span class="k">do</span>
|
|
<span class="vi">@cat</span><span class="o">.</span><span class="n">stubs</span><span class="p">(</span><span class="ss">:state</span><span class="p">)</span><span class="o">.</span><span class="n">returns</span><span class="p">(</span><span class="no">Cat</span><span class="o">::</span><span class="no">HUNGRY</span><span class="p">)</span>
|
|
|
|
<span class="vi">@cat</span><span class="o">.</span><span class="n">meow</span><span class="o">.</span><span class="n">should</span> <span class="o">==</span> <span class="s2">"meeyaow"</span>
|
|
<span class="k">end</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="n">before</span> <span class="o">-></span> <span class="n">it</span> <span class="o">-></span> <span class="n">after</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="n">before</span> <span class="k">do</span>
|
|
<span class="vi">@instance_variable</span> <span class="o">=</span> <span class="s2">"yes"</span>
|
|
<span class="k">end</span>
|
|
|
|
<span class="n">it</span> <span class="s2">"is in same context as before block"</span> <span class="k">do</span>
|
|
<span class="vi">@instance_variable</span><span class="o">.</span><span class="n">should</span> <span class="o">==</span> <span class="s2">"yes"</span>
|
|
<span class="k">end</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="nx">beforeEach</span> <span class="o">-></span> <span class="nx">it</span> <span class="o">-></span> <span class="nx">afterEach</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="nx">beforeEach</span> <span class="o">-></span>
|
|
<span class="vi">@instanceVariable = </span><span class="s">"yes"</span>
|
|
|
|
<span class="nx">it</span> <span class="s">"should be in the same context"</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">expect</span><span class="p">(</span><span class="nx">@instanceVariable</span><span class="p">).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s">"yes"</span><span class="p">)</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="nx">describe</span> <span class="s">'Cat'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">describe</span> <span class="s">'#meow'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">beforeEach</span> <span class="o">-></span>
|
|
<span class="vi">@cat = </span><span class="k">new</span> <span class="nx">Cat</span><span class="p">()</span>
|
|
|
|
<span class="nx">describe</span> <span class="s">'hungry'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">it</span> <span class="s">'should be a mournful meow'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="vi">@cat.state = </span><span class="o">-></span> <span class="nx">Cat</span><span class="p">.</span><span class="nx">HUNGRY</span>
|
|
|
|
<span class="nx">expect</span><span class="p">(</span><span class="nx">@cat</span><span class="p">.</span><span class="nx">meow</span><span class="p">()).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s">"meeeyaow"</span><span class="p">)</span>
|
|
|
|
<span class="nx">describe</span> <span class="s">'going to the vet'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">it</span> <span class="s">'should be an evil meow'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="vi">@cat.state = </span><span class="o">-></span> <span class="nx">Cat</span><span class="p">.</span><span class="nx">VET_PSYCHIC</span>
|
|
|
|
<span class="nx">expect</span><span class="p">(</span><span class="nx">@cat</span><span class="p">.</span><span class="nx">meow</span><span class="p">()).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s">"raowwww"</span><span class="p">)</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>A little semantics game...</h1>
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="nx">describe</span> <span class="s">'Cat'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">describe</span> <span class="s">'#meow'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">describe</span> <span class="s">'hungry'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="c1"># cat codes</span>
|
|
|
|
<span class="nx">describe</span> <span class="s">'going to the vet'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="c1"># moar cat codes</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>This works, but it can be clearer</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<div class="highlight"><pre><span class="n">describe</span> <span class="no">Cat</span> <span class="k">do</span>
|
|
<span class="n">describe</span> <span class="s1">'#meow'</span> <span class="k">do</span>
|
|
<span class="n">describe</span> <span class="s1">'hungry'</span> <span class="k">do</span>
|
|
<span class="c1"># cat codes</span>
|
|
<span class="k">end</span>
|
|
|
|
<span class="n">describe</span> <span class="s1">'going to the vet'</span> <span class="k">do</span>
|
|
<span class="c1"># moar cat codes</span>
|
|
<span class="k">end</span>
|
|
<span class="k">end</span>
|
|
<span class="k">end</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1><code>context</code></h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Description of different states for a test</h1>
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="k">alias</span> <span class="ss">:context</span> <span class="ss">:describe</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="n">describe</span> <span class="no">Cat</span> <span class="k">do</span>
|
|
<span class="n">let</span><span class="p">(</span><span class="ss">:cat</span><span class="p">)</span> <span class="p">{</span> <span class="n">described_class</span><span class="o">.</span><span class="n">new</span> <span class="p">}</span>
|
|
|
|
<span class="c1"># save describe for things or behaviors...</span>
|
|
<span class="n">describe</span> <span class="s1">'#meow'</span> <span class="k">do</span>
|
|
<span class="n">subject</span> <span class="p">{</span> <span class="n">cat</span><span class="o">.</span><span class="n">meow</span> <span class="p">}</span>
|
|
|
|
<span class="c1"># use context to describe states</span>
|
|
<span class="n">context</span> <span class="s1">'hungry'</span> <span class="k">do</span>
|
|
<span class="c1"># cat codes</span>
|
|
<span class="k">end</span>
|
|
|
|
<span class="n">context</span> <span class="s1">'going to the vet'</span> <span class="k">do</span>
|
|
<span class="c1"># moar cat codes</span>
|
|
<span class="k">end</span>
|
|
<span class="k">end</span>
|
|
<span class="k">end</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Jasmine doesn't have <code>context</code></h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>However...</h1>
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nv">context = </span><span class="k">this</span><span class="p">.</span><span class="nx">describe</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nv">context = </span><span class="k">this</span><span class="p">.</span><span class="nx">describe</span>
|
|
|
|
<span class="nx">describe</span> <span class="s">'Cat'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">describe</span> <span class="s">'#meow'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">context</span> <span class="s">'hungry'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="c1"># cat codes</span>
|
|
|
|
<span class="nx">context</span> <span class="s">'going to the vet'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="c1"># moar cat codes</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nv">context = </span><span class="k">this</span><span class="p">.</span><span class="nx">describe</span>
|
|
|
|
<span class="nx">describe</span> <span class="s">'Cat'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">describe</span> <span class="s">'#meow'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">beforeEach</span> <span class="o">-></span>
|
|
<span class="vi">@cat = </span><span class="k">new</span> <span class="nx">Cat</span><span class="p">()</span>
|
|
|
|
<span class="nx">context</span> <span class="s">'hungry'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">it</span> <span class="s">'should be a mournful meow'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="vi">@cat.state = </span><span class="o">-></span> <span class="nx">Cat</span><span class="p">.</span><span class="nx">HUNGRY</span>
|
|
|
|
<span class="nx">expect</span><span class="p">(</span><span class="nx">@cat</span><span class="p">.</span><span class="nx">meow</span><span class="p">()).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s">"meeeyaow"</span><span class="p">)</span>
|
|
|
|
<span class="nx">context</span> <span class="s">'going to the vet'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">it</span> <span class="s">'should be an evil meow'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="vi">@cat.state = </span><span class="o">-></span> <span class="nx">Cat</span><span class="p">.</span><span class="nx">VET_PSYCHIC</span>
|
|
|
|
<span class="nx">expect</span><span class="p">(</span><span class="nx">@cat</span><span class="p">.</span><span class="nx">meow</span><span class="p">()).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s">"raowwww"</span><span class="p">)</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="k">class</span> <span class="k">this</span><span class="p">.</span><span class="nx">Cat</span>
|
|
<span class="vi">@HUNGRY = </span><span class="s">'hungry'</span>
|
|
<span class="vi">@VET_PSYCHIC = </span><span class="s">'vet psychic'</span>
|
|
|
|
<span class="nv">meow: </span><span class="o">-></span>
|
|
<span class="k">switch</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">()</span>
|
|
<span class="k">when</span> <span class="nx">Cat</span><span class="p">.</span><span class="nx">HUNGRY</span>
|
|
<span class="s">"meeeyaow"</span>
|
|
<span class="k">when</span> <span class="nx">Cat</span><span class="p">.</span><span class="nx">VET_PSYCHIC</span>
|
|
<span class="s">"raowwww"</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre>2 spec, 0 failures
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Matchers</h1>
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="n">cat</span><span class="o">.</span><span class="n">meow</span><span class="o">.</span><span class="n">should</span> <span class="o">==</span> <span class="s2">"meow"</span>
|
|
<span class="n">cat</span><span class="o">.</span><span class="n">should</span> <span class="n">be_a_kind_of</span><span class="p">(</span><span class="no">Cat</span><span class="p">)</span>
|
|
<span class="n">cat</span><span class="o">.</span><span class="n">should_not</span> <span class="n">be_hungry</span>
|
|
<span class="c1"># => cat.hungry?.should == false</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="nx">expect</span><span class="p">(</span><span class="nx">cat</span><span class="p">.</span><span class="nx">meow</span><span class="p">()).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s">"meow"</span><span class="p">)</span>
|
|
<span class="nx">expect</span><span class="p">(</span><span class="nx">cat</span><span class="p">.</span><span class="nx">prototype</span><span class="p">).</span><span class="nx">toEqual</span><span class="p">(</span><span class="nx">Cat</span><span class="p">.</span><span class="nx">prototype</span><span class="p">)</span>
|
|
<span class="nx">expect</span><span class="p">(</span><span class="nx">cat</span><span class="p">.</span><span class="nx">isHungry</span><span class="p">()).</span><span class="o">not</span><span class="p">.</span><span class="nx">toBeTruthy</span><span class="p">()</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<h1>Lots of built in matchers</h1>
|
|
|
|
<div class="highlight"><pre><span class="nx">toEqual</span><span class="p">(</span><span class="nx">object</span><span class="p">)</span>
|
|
<span class="nx">toBeTruthy</span><span class="p">()</span>
|
|
<span class="nx">toBeFalsy</span><span class="p">()</span>
|
|
<span class="nx">toBeGreaterThan</span><span class="p">()</span>
|
|
<span class="nx">toBeLessThan</span><span class="p">()</span>
|
|
<span class="nx">toBeUndefined</span><span class="p">()</span>
|
|
<span class="nx">toContain</span><span class="p">()</span>
|
|
<span class="nx">toMatch</span><span class="p">()</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="nx">expect</span><span class="p">(</span><span class="nx">cat</span><span class="p">.</span><span class="nx">isHungry</span><span class="p">()).</span><span class="o">not</span><span class="p">.</span><span class="nx">toBeTruthy</span><span class="p">()</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Create your own matchers!</h1>
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="nv">MyMatchers =</span>
|
|
<span class="nv">toBeHungry: </span><span class="o">-></span>
|
|
<span class="k">return</span> <span class="nx">@actual</span><span class="p">.</span><span class="nx">isHungry</span><span class="p">()</span> <span class="o">==</span> <span class="kc">true</span>
|
|
|
|
<span class="nx">beforeEach</span> <span class="o">-></span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">addMatchers</span><span class="p">(</span><span class="nx">MyMatchers</span><span class="p">)</span>
|
|
|
|
<span class="nx">describe</span> <span class="s">'Cat'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">beforeEach</span> <span class="o">-></span>
|
|
<span class="vi">@cat = </span><span class="k">new</span> <span class="nx">Cat</span><span class="p">()</span>
|
|
|
|
<span class="nx">it</span> <span class="s">'should not be hungry'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">expect</span><span class="p">(</span><span class="nx">@cat</span><span class="p">).</span><span class="o">not</span><span class="p">.</span><span class="nx">toBeHungry</span><span class="p">()</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="nx">describe</span>
|
|
<span class="nx">it</span>
|
|
<span class="nx">expect</span>
|
|
<span class="nx">toSomething</span><span class="p">()</span>
|
|
<span class="nx">beforeEach</span>
|
|
<span class="nx">afterEach</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Jasmine == unit testing</h1>
|
|
|
|
</div></div><div class="slide style-image-80-percent"><div class="content">
|
|
<p><img src="assets/synergize.jpg" /></p>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>No, this isn't a talk about integration testing</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Testing the <em>right</em> things in your JavaScript unit tests</h1>
|
|
|
|
</div></div><div class="slide style-image-80-percent"><div class="content">
|
|
<p><img src="assets/spaghetti.jpg" /></p>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>John behavior #2</h1>
|
|
|
|
<h2>Mock, stub, and spy on anything that should be handled in an integration test</h2>
|
|
|
|
<div class="highlight"><pre><span class="nx">describe</span> <span class="s">'John'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">describe</span> <span class="s">'spec definitions'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">it</span> <span class="s">'should keep unit tests as focused as possible'</span><span class="p">,</span> <span class="o">-></span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-image-80-percent"><div class="content">
|
|
<p><img src="assets/beer-cat.jpg" /></p>
|
|
|
|
</div></div><div class="slide style-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="k">Feature:</span><span class="nf"> Cat Behaviors</span>
|
|
<span class="nf"> </span><span class="k">Scenario:</span><span class="nf"> Hungry cats meow a particular way</span>
|
|
<span class="k"> Given </span><span class="nf">I have a cat</span>
|
|
<span class="nf"> </span><span class="k">And </span><span class="nf">the cat is hungry</span>
|
|
<span class="nf"> </span><span class="k">When </span><span class="nf">the cat meows</span>
|
|
<span class="nf"> </span><span class="k">Then </span><span class="nf">the meow should sound like "</span><span class="s">meeyaow</span><span class="nf">"</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="k">class</span> <span class="k">this</span><span class="p">.</span><span class="nx">Cat</span>
|
|
<span class="vi">@FOOD_THRESHOLD = </span><span class="mi">20</span>
|
|
<span class="vi">@HUNGRY = </span><span class="s">'hungry'</span>
|
|
|
|
<span class="nv">constructor: </span><span class="nf">(@foodLevel = 30) -></span>
|
|
|
|
<span class="nv">meow: </span><span class="o">-></span>
|
|
<span class="k">switch</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">()</span>
|
|
<span class="k">when</span> <span class="nx">Cat</span><span class="p">.</span><span class="nx">HUNGRY</span>
|
|
<span class="s">"meeyaow"</span>
|
|
|
|
<span class="nv">state: </span><span class="o">-></span>
|
|
<span class="k">if</span> <span class="nx">@foodLevel</span> <span class="o"><</span> <span class="nx">Cat</span><span class="p">.</span><span class="nx">FOOD_THRESHOLD</span>
|
|
<span class="nx">Cat</span><span class="p">.</span><span class="nx">HUNGRY</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="nx">describe</span> <span class="s">'Cat'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">describe</span> <span class="s">'#meow'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">context</span> <span class="s">'hungry'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">it</span> <span class="s">'should be a mournful meow'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nv">cat = </span><span class="k">new</span> <span class="nx">Cat</span><span class="p">()</span>
|
|
<span class="nv">cat.foodLevel = </span><span class="mi">15</span>
|
|
|
|
<span class="nx">expect</span><span class="p">(</span><span class="nx">cat</span><span class="p">.</span><span class="nx">meow</span><span class="p">()).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s">"meeeyaow"</span><span class="p">)</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>A perfectly cromulent test</h1>
|
|
|
|
</div></div><div class="slide style-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="k">class</span> <span class="k">this</span><span class="p">.</span><span class="nx">Cat</span>
|
|
<span class="nv">meow: </span><span class="o">-></span>
|
|
<span class="k">switch</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">()</span> <span class="c1"># <= dependent code executed</span>
|
|
<span class="k">when</span> <span class="nx">Cat</span><span class="p">.</span><span class="nx">HUNGRY</span>
|
|
<span class="s">"meeyaow"</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Why make your unit tests fragile?</h1>
|
|
|
|
</div></div><div class="slide style-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="nv">cat.foodLevel = </span><span class="mi">15</span>
|
|
<span class="c1"># do we care about food level in this test?</span>
|
|
<span class="c1"># all we care about is that the cat is hungry</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="nx">describe</span> <span class="s">'Cat'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">describe</span> <span class="s">'#meow'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">describe</span> <span class="s">'hungry'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">it</span> <span class="s">'should be a mournful meow'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nv">cat = </span><span class="k">new</span> <span class="nx">Cat</span><span class="p">()</span>
|
|
<span class="nv">cat.state = </span><span class="o">-></span> <span class="nx">Cat</span><span class="p">.</span><span class="nx">HUNGRY</span>
|
|
<span class="c1"># ^^^ we don't care how state works,</span>
|
|
<span class="c1"># we just want a hungry cat</span>
|
|
|
|
<span class="nx">expect</span><span class="p">(</span><span class="nx">cat</span><span class="p">.</span><span class="nx">meow</span><span class="p">()).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s">"meeeyaow"</span><span class="p">)</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Instance Stubs in JavaScript</h1>
|
|
|
|
<h2>Just replace the method on the instance</h2>
|
|
|
|
<div class="highlight"><pre><span class="k">class</span> <span class="k">this</span><span class="p">.</span><span class="nx">Cat</span>
|
|
<span class="nv">state: </span><span class="o">-></span>
|
|
<span class="c1"># cat codes</span>
|
|
|
|
<span class="nv">cat = </span><span class="k">new</span> <span class="nx">Cat</span><span class="p">()</span>
|
|
<span class="nv">cat.state = </span><span class="o">-></span> <span class="s">"whatever"</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Stubs just return something when called</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Mocks expect to be called</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Test fails if all mocks are not called</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Jasmine blurs the line a little</h1>
|
|
|
|
</div></div><div class="slide style-image-80-percent"><div class="content">
|
|
<p><img src="assets/spy-cat.jpg" /></p>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Spies work like mocks, but with additional abilities</h1>
|
|
|
|
</div></div><div class="slide style-image-80-percent"><div class="content">
|
|
<p><img src="assets/flying-cat.jpg" /></p>
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="k">class</span> <span class="k">this</span><span class="p">.</span><span class="nx">Cat</span>
|
|
<span class="nv">vocalProcessor: </span><span class="p">(</span><span class="nx">speech</span><span class="p">)</span> <span class="o">=></span>
|
|
<span class="k">if</span> <span class="k">this</span><span class="p">.</span><span class="nx">isAirborne</span><span class="p">()</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">modifyForAirborne</span><span class="p">(</span><span class="nx">speech</span><span class="p">)</span>
|
|
<span class="k">else</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">modifyForGround</span><span class="p">(</span><span class="nx">speech</span><span class="p">)</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<div class="highlight"><pre><span class="nx">describe</span> <span class="s">'Cat#vocalProcessor'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nv">speech = </span><span class="s">"speech"</span>
|
|
|
|
<span class="nx">beforeEach</span> <span class="o">-></span>
|
|
<span class="vi">@cat = </span><span class="k">new</span> <span class="nx">Cat</span><span class="p">()</span>
|
|
|
|
<span class="nx">context</span> <span class="s">'airborne'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">beforeEach</span> <span class="o">-></span>
|
|
<span class="nx">spyOn</span><span class="p">(</span><span class="nx">@cat</span><span class="p">,</span> <span class="s">'modifyForAirborne'</span><span class="p">)</span>
|
|
<span class="vi">@cat.isAirborne = </span><span class="o">-></span> <span class="kc">true</span>
|
|
|
|
<span class="nx">it</span> <span class="s">'should be modified for flight'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">@cat</span><span class="p">.</span><span class="nx">vocalProcessor</span><span class="p">(</span><span class="nx">speech</span><span class="p">)</span>
|
|
<span class="nx">expect</span><span class="p">(</span><span class="nx">@cat</span><span class="p">.</span><span class="nx">modifyForAirborne</span><span class="p">).</span><span class="nx">toHaveBeenCalledWith</span><span class="p">(</span><span class="nx">speech</span><span class="p">)</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<h1><code>spyOn</code> replaces a method on an instance with a spy method</h1>
|
|
|
|
<div class="highlight"><pre><span class="nx">spyOn</span><span class="p">(</span><span class="nx">@cat</span><span class="p">,</span> <span class="s">'modifyForAirborne'</span><span class="p">)</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Can return a value, run code, run the original code, or just wait to be called</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Two basic ways to make sure a spy is called</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h2><code>toHaveBeenCalledWith(args...)</code></h2>
|
|
|
|
<h3>Called least once with the given parameters</h3>
|
|
|
|
<div class="highlight"><pre><span class="nx">expect</span><span class="p">(</span><span class="nx">@cat</span><span class="p">.</span><span class="nx">modifyForAirborne</span><span class="p">).</span><span class="nx">toHaveBeenCalledWith</span><span class="p">(</span><span class="nx">speech</span><span class="p">)</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h2><code>toHaveBeenCalled()</code></h2>
|
|
|
|
<h3>Just called, no parameter check</h3>
|
|
|
|
<div class="highlight"><pre><span class="nx">expect</span><span class="p">(</span><span class="nx">@cat</span><span class="p">.</span><span class="nx">modifyForAirborne</span><span class="p">).</span><span class="nx">toHaveBeenCalled</span><span class="p">()</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-larger"><div class="content">
|
|
<h1>Instance Mocks/Spies in JavaScript</h1>
|
|
|
|
<h2>Use <code>spyOn</code>/<code>toHaveBeenCalled</code> matchers</h2>
|
|
|
|
<div class="highlight"><pre><span class="k">class</span> <span class="k">this</span><span class="p">.</span><span class="nx">Cat</span>
|
|
<span class="nv">state: </span><span class="o">-></span>
|
|
<span class="c1"># cat codes</span>
|
|
|
|
<span class="nv">cat = </span><span class="k">new</span> <span class="nx">Cat</span><span class="p">()</span>
|
|
<span class="nx">spyOn</span><span class="p">(</span><span class="nx">cat</span><span class="p">,</span> <span class="s">'state'</span><span class="p">)</span>
|
|
<span class="nx">expect</span><span class="p">(</span><span class="nx">cat</span><span class="p">.</span><span class="nx">state</span><span class="p">).</span><span class="nx">toHaveBeenCalled</span><span class="p">()</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1><code>spyOn</code> works great with class-level stubs and mocks, too</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<div class="highlight"><pre><span class="k">class</span> <span class="k">this</span><span class="p">.</span><span class="nx">Cat</span>
|
|
<span class="vi">@generateFurColor: </span><span class="nf">(base) -></span>
|
|
<span class="c1"># magicks to make a fur color given a base</span>
|
|
|
|
<span class="nv">regrowFur: </span><span class="nf">(damagedHairs) -></span>
|
|
<span class="k">for</span> <span class="nx">follicle</span> <span class="k">in</span> <span class="nx">damagedHairs</span>
|
|
<span class="nx">follicle</span><span class="p">.</span><span class="nx">regrow</span><span class="p">(</span><span class="nx">Cat</span><span class="p">.</span><span class="nx">generateFurColor</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">baseColor</span><span class="p">))</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="nv">Cat.generateFurColor = </span><span class="o">-></span>
|
|
<span class="s">"whoops i nuked this method for every other test"</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<div class="highlight"><pre><span class="nx">describe</span> <span class="s">'Cat#regrowFur'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nv">color = </span><span class="s">'color'</span>
|
|
|
|
<span class="nx">beforeEach</span> <span class="o">-></span>
|
|
<span class="vi">@cat = </span><span class="k">new</span> <span class="nx">Cat</span><span class="p">()</span>
|
|
<span class="vi">@follicle =</span>
|
|
<span class="nv">regrow: </span><span class="o">-></span>
|
|
|
|
<span class="vi">@follicles = </span><span class="p">[</span> <span class="nx">follicle</span> <span class="p">]</span>
|
|
|
|
<span class="nx">spyOn</span><span class="p">(</span><span class="nx">Cat</span><span class="p">,</span> <span class="s">'generateFurColor'</span><span class="p">).</span><span class="nx">andReturn</span><span class="p">(</span><span class="nx">color</span><span class="p">)</span>
|
|
<span class="c1"># ^^^ original is replaced when done</span>
|
|
<span class="nx">spyOn</span><span class="p">(</span><span class="nx">@follicle</span><span class="p">,</span> <span class="s">'regrow'</span><span class="p">)</span>
|
|
|
|
<span class="nx">it</span> <span class="s">'should regrow'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">@cat</span><span class="p">.</span><span class="nx">regrowFur</span><span class="p">(</span><span class="nx">@follicles</span><span class="p">)</span>
|
|
|
|
<span class="nx">expect</span><span class="p">(</span><span class="nx">@follicle</span><span class="p">.</span><span class="nx">regrow</span><span class="p">).</span><span class="nx">toHaveBeenCalledWith</span><span class="p">(</span><span class="nx">color</span><span class="p">)</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-larger"><div class="content">
|
|
<h1>Class Stubs in JavaScript</h1>
|
|
|
|
<h2>Use <code>spyOn</code> to generate stubs so that the original code is replaced after the test</h2>
|
|
|
|
<div class="highlight"><pre><span class="k">class</span> <span class="k">this</span><span class="p">.</span><span class="nx">Cat</span>
|
|
<span class="vi">@injectPsychicPowers: </span><span class="nf">(cat) -></span>
|
|
<span class="c1"># cat codes</span>
|
|
|
|
<span class="nx">spyOn</span><span class="p">(</span><span class="nx">Cat</span><span class="p">,</span> <span class="s">'injectPsychicPowers'</span><span class="p">).</span><span class="nx">andReturn</span><span class="p">(</span><span class="nx">psychicCat</span><span class="p">)</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>John behavior #3</h1>
|
|
|
|
<h2>If you have too many mocks/stubs/contexts, your code is too complex</h2>
|
|
|
|
<div class="highlight"><pre><span class="nx">describe</span> <span class="s">'John'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">describe</span> <span class="s">'spec definitions'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">it</span> <span class="s">'should obey the Law of Demeter as much as possible'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">it</span> <span class="s">'should not smell too funny'</span><span class="p">,</span> <span class="o">-></span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-smaller"><div class="content">
|
|
<div class="highlight"><pre><span class="nx">describe</span> <span class="s">'Cat#fetch'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nv">object = </span><span class="kc">null</span>
|
|
|
|
<span class="nx">context</span> <span class="s">'a mouse'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">beforeEach</span> <span class="o">-></span>
|
|
<span class="nv">object = </span><span class="k">new</span> <span class="nx">Mouse</span><span class="p">()</span>
|
|
|
|
<span class="nx">context</span> <span class="s">'fast mouse'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">it</span> <span class="s">'should wear down the mouse'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="c1"># who</span>
|
|
|
|
<span class="nx">context</span> <span class="s">'slow mouse'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">it</span> <span class="s">'should deliver a present to you'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="c1"># cares</span>
|
|
|
|
<span class="nx">context</span> <span class="s">'a ball'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">beforeEach</span> <span class="o">-></span>
|
|
<span class="nv">object = </span><span class="k">new</span> <span class="nx">Ball</span><span class="p">()</span>
|
|
|
|
<span class="nx">context</span> <span class="s">'ball is bouncing'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">it</span> <span class="s">'should cause the cat to leap'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="c1"># this</span>
|
|
|
|
<span class="nx">context</span> <span class="s">'ball is rolling'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">it</span> <span class="s">'should cause the cat to slide on the floor'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="c1"># test</span>
|
|
|
|
<span class="nx">context</span> <span class="s">'a red dot'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nv">laser = </span><span class="kc">null</span>
|
|
|
|
<span class="nx">beforeEach</span> <span class="o">-></span>
|
|
<span class="nv">laser = </span><span class="k">new</span> <span class="nx">Laser</span><span class="p">()</span>
|
|
|
|
<span class="nx">context</span> <span class="s">'laser out of batteries'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">it</span> <span class="s">'should not activate'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="c1"># is</span>
|
|
|
|
<span class="nx">context</span> <span class="s">'laser functioning'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">it</span> <span class="s">'should activate, driving the cat insane'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="c1"># huge and unmaintainable and silly</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Sometimes you just need a big blob of unit tests</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<div class="highlight"><pre><span class="c1"># fast and focused!</span>
|
|
|
|
<span class="nx">describe</span> <span class="s">'Cat#respondsTo'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">beforeEach</span> <span class="o">-></span>
|
|
<span class="vi">@cat = </span><span class="k">new</span> <span class="nx">Cat</span><span class="p">()</span>
|
|
|
|
<span class="nx">context</span> <span class="s">'successes'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">it</span> <span class="s">'should respond'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="k">for</span> <span class="nx">request</span> <span class="k">in</span> <span class="p">[</span> <span class="s">'kitty kitty'</span><span class="p">,</span> <span class="s">'pookums'</span><span class="p">,</span> <span class="s">'hisshead'</span> <span class="p">]</span>
|
|
<span class="nx">expect</span><span class="p">(</span><span class="nx">@cat</span><span class="p">.</span><span class="nx">respondsTo</span><span class="p">(</span><span class="nx">request</span><span class="p">)).</span><span class="nx">toBeTruthy</span><span class="p">()</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="c"># slow and synergistic!</span><span class="nf"></span>
|
|
|
|
<span class="k">Scenario Outline:</span><span class="nf"> Successful responsiveness</span>
|
|
<span class="k"> Given </span><span class="nf">I have a cat</span>
|
|
<span class="nf"> </span><span class="k">When </span><span class="nf">I call it with "</span><span class="nv"><request></span><span class="nf">"</span>
|
|
<span class="nf"> </span><span class="k">Then </span><span class="nf">the cat should respond</span>
|
|
|
|
<span class="nf"> </span><span class="k">Examples:</span>
|
|
<span class="k"> |</span><span class="nv"> request</span><span class="k"> |</span><span class="nf"></span>
|
|
<span class="k"> |</span><span class="s"> kitty kitty</span><span class="k"> |</span><span class="nf"></span>
|
|
<span class="k"> |</span><span class="s"> pookums</span><span class="k"> |</span><span class="nf"></span>
|
|
<span class="k"> |</span><span class="s"> hisshead</span><span class="k"> |</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-image-80-percent"><div class="content">
|
|
<p><img src="assets/balancing-cat.jpg" /></p>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Find what works best for you and stick with it</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h2>...until you get sick of it, of course...</h2>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Using it in your project</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h2><a href="http://github.com/pivotal/jasmine-gem">github.com/pivotal/jasmine-gem</a></h2>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Starts a Rack server for running Jasmine against your code</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Really easy to plug into an existing Rails project</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Want to make that run fast?</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Use PhantomJS or <code>jasmine-headless-webkit</code></h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Fast code running in a real browser</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Evergreen</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Jasminerice</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Node.js</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Pick your favorite!</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Some miscellaneous hints and tips</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Testing jQuery</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Mocking and stubbing <code>$.fn</code> calls</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nv">containerWaiter = </span><span class="o">-></span>
|
|
<span class="nx">$</span><span class="p">(</span><span class="s">'#container'</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s">'wait'</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="s">'<div class="waiting" />'</span><span class="p">)</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<div class="highlight"><pre><span class="nv">$.fn.makeWait = </span><span class="o">-></span>
|
|
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s">'wait'</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="s">'<div class="waiting" />'</span><span class="p">)</span>
|
|
<span class="k">this</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nv">containerWaiter = </span><span class="o">-></span>
|
|
<span class="nx">$</span><span class="p">(</span><span class="s">'#container'</span><span class="p">).</span><span class="nx">makeWait</span><span class="p">()</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1><code>jquery-jasmine</code></h1>
|
|
|
|
</div></div><div class="slide style-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="nx">describe</span> <span class="s">'container'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">beforeEach</span> <span class="o">-></span>
|
|
<span class="nx">setFixtures</span><span class="p">(</span><span class="s">'<div id="container" />'</span><span class="p">)</span>
|
|
|
|
<span class="nx">it</span> <span class="s">'should make it wait'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">containerWaiter</span><span class="p">()</span>
|
|
<span class="nx">expect</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s">'#container'</span><span class="p">)).</span><span class="nx">toHaveClass</span><span class="p">(</span><span class="s">'wait'</span><span class="p">)</span>
|
|
<span class="nx">expect</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s">'#container'</span><span class="p">)).</span><span class="nx">toContain</span><span class="p">(</span><span class="s">'div.waiting'</span><span class="p">)</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-image-80-percent"><div class="content">
|
|
<p><img src="assets/wet-cat.jpg" /></p>
|
|
|
|
</div></div><div class="slide style-image-80-percent"><div class="content">
|
|
<p><img src="assets/spaghetti.jpg" /></p>
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="nx">describe</span> <span class="s">'$.fn.makeWait'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">it</span> <span class="s">'should make wait'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nv">$div = </span><span class="nx">$</span><span class="p">(</span><span class="s">'<div />'</span><span class="p">)</span>
|
|
<span class="nx">$div</span><span class="p">.</span><span class="nx">makeWait</span><span class="p">()</span>
|
|
|
|
<span class="nx">expect</span><span class="p">(</span><span class="nx">$div</span><span class="p">).</span><span class="nx">toHaveClass</span><span class="p">(</span><span class="s">'wait'</span><span class="p">)</span>
|
|
<span class="nx">expect</span><span class="p">(</span><span class="nx">$div</span><span class="p">).</span><span class="nx">toContain</span><span class="p">(</span><span class="s">'div.waiting'</span><span class="p">)</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="nx">describe</span> <span class="s">'container'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">beforeEach</span> <span class="o">-></span>
|
|
<span class="nx">setFixtures</span><span class="p">(</span><span class="s">'<div id="container" />'</span><span class="p">)</span>
|
|
<span class="nx">spyOn</span><span class="p">(</span><span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">,</span> <span class="s">'makeWait'</span><span class="p">)</span>
|
|
|
|
<span class="nx">it</span> <span class="s">'should make it wait'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">containerWaiter</span><span class="p">()</span>
|
|
<span class="nx">expect</span><span class="p">(</span><span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">makeWait</span><span class="p">).</span><span class="nx">toHaveBeenCalled</span><span class="p">()</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>No longer testing jQuery, just testing for our code</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Animations and other time-dependent things</h1>
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="k">class</span> <span class="nx">Cat</span>
|
|
<span class="nv">constructor: </span><span class="o">-></span>
|
|
<span class="vi">@mood = </span><span class="s">"happy"</span>
|
|
|
|
<span class="nv">pet: </span><span class="o">-></span>
|
|
<span class="nx">setTimeout</span><span class="p">(</span>
|
|
<span class="o">-></span> <span class="vi">@mood = </span><span class="s">"angry"</span>
|
|
<span class="p">,</span> <span class="mi">500</span>
|
|
<span class="p">)</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Do you really need to test the <code>setTimeout</code>?</h1>
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="k">class</span> <span class="nx">Cat</span>
|
|
<span class="nv">constructor: </span><span class="o">-></span>
|
|
<span class="vi">@mood = </span><span class="s">"happy"</span>
|
|
|
|
<span class="nv">pet: </span><span class="o">-></span> <span class="nx">setTimeout</span><span class="p">(</span><span class="nx">@makeAngry</span><span class="p">,</span> <span class="mi">500</span><span class="p">)</span>
|
|
|
|
<span class="nv">makeAngry: </span><span class="o">=></span> <span class="vi">@mood = </span><span class="s">"angry"</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Use Jasmine's <code>waitsFor</code> and <code>runs</code></h1>
|
|
|
|
</div></div><div class="slide style-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="nx">describe</span> <span class="s">'cat moods'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">it</span> <span class="s">'should change moods'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nv">cat = </span><span class="k">new</span> <span class="nx">Cat</span><span class="p">()</span>
|
|
|
|
<span class="c1"># we want to know the cat's current mood</span>
|
|
<span class="nv">currentMood = </span><span class="nx">cat</span><span class="p">.</span><span class="nx">mood</span>
|
|
|
|
<span class="c1"># start petting the cat</span>
|
|
<span class="nx">runs</span> <span class="o">-></span> <span class="nx">cat</span><span class="p">.</span><span class="nx">pet</span><span class="p">()</span>
|
|
|
|
<span class="c1"># wait one second for the cat's mood to change</span>
|
|
<span class="nx">waitsFor</span><span class="p">(</span>
|
|
<span class="o">-></span>
|
|
<span class="nx">cat</span><span class="p">.</span><span class="nx">mood</span> <span class="o">!=</span> <span class="nx">currentMood</span>
|
|
<span class="p">,</span> <span class="s">"Cat changed its mood"</span><span class="p">,</span>
|
|
<span class="mi">1000</span>
|
|
<span class="p">)</span>
|
|
|
|
<span class="c1"># expect the inevitable</span>
|
|
<span class="nx">runs</span> <span class="o">-></span>
|
|
<span class="nx">expect</span><span class="p">(</span><span class="nx">cat</span><span class="p">.</span><span class="nx">mood</span><span class="p">).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s">'angry'</span><span class="p">)</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Underscore.js mixins</h1>
|
|
|
|
<h2>and other prototype mixin-style extensions</h2>
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="nv">CatLike =</span>
|
|
<span class="nv">catify: </span><span class="nf">(name) -></span>
|
|
<span class="s">"meow meow </span><span class="si">#{</span><span class="nx">name</span><span class="si">}</span><span class="s">"</span>
|
|
|
|
<span class="c1"># mix in to the Underscore object</span>
|
|
<span class="nx">_</span><span class="p">.</span><span class="nx">mixin</span><span class="p">(</span><span class="nx">CatLike</span><span class="p">)</span>
|
|
|
|
<span class="c1"># use it</span>
|
|
<span class="nx">_</span><span class="p">.</span><span class="nx">catify</span><span class="p">(</span><span class="s">"john"</span><span class="p">)</span> <span class="c1"># => "meow meow john"</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-larger"><div class="content">
|
|
<div class="highlight"><pre><span class="nx">describe</span> <span class="s">'_.catify'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">it</span> <span class="s">'should catify'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">expect</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">catify</span><span class="p">(</span><span class="s">"hiss"</span><span class="p">)).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s">"meow meow hiss"</span><span class="p">)</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Eliminate the Underscore.js dependency</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<div class="highlight"><pre><span class="nx">describe</span> <span class="s">'CatLike'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">beforeEach</span> <span class="o">-></span>
|
|
<span class="vi">@helper = </span><span class="p">{}</span>
|
|
|
|
<span class="k">for</span> <span class="nx">method</span><span class="p">,</span> <span class="nx">code</span> <span class="k">of</span> <span class="nx">CatLike</span>
|
|
<span class="nx">@helper</span><span class="p">[</span><span class="nx">method</span><span class="p">]</span> <span class="o">=</span> <span class="nx">code</span>
|
|
|
|
<span class="nx">describe</span> <span class="s">'#catify'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">it</span> <span class="s">'should catify'</span><span class="p">,</span> <span class="o">-></span>
|
|
<span class="nx">expect</span><span class="p">(</span><span class="nx">@helper</span><span class="p">.</span><span class="nx">catify</span><span class="p">(</span><span class="s">"hiss"</span><span class="p">)).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s">"meow meow hiss"</span><span class="p">)</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>So that's pretty much it.</h1>
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<h1>Basic parts of Jasmine unit tests</h1>
|
|
|
|
<div class="highlight"><pre><span class="nx">describe</span>
|
|
<span class="nx">it</span>
|
|
<span class="nx">expect</span>
|
|
<span class="nx">toSomething</span><span class="p">()</span>
|
|
<span class="nx">beforeEach</span>
|
|
<span class="nx">afterEach</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<h1>Mocking and stubbing</h1>
|
|
|
|
<div class="highlight"><pre><span class="nx">direct</span> <span class="nx">method</span> <span class="nx">replacement</span>
|
|
<span class="nx">spyOn</span><span class="p">()</span>
|
|
<span class="nx">toHaveBeenCalled</span><span class="p">()</span>
|
|
<span class="nx">toHaveBeenCalledWith</span><span class="p">()</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Running Jasmine in your project</h1>
|
|
|
|
</div></div><div class="slide style-even-larger"><div class="content">
|
|
<h1>Hints and tips for JavaScript testing</h1>
|
|
|
|
<div class="highlight"><pre><span class="nx">waitsFor</span><span class="p">()</span>
|
|
<span class="nx">runs</span><span class="p">()</span>
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h2><a href="http://pivotal.github.com/jasmine/">Jasmine documentation</a></h2>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h2><a href="http://johnbintz.github.com/tea-time/">johnbintz.github.com/tea-time</a></h2>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Any questions?</h1>
|
|
|
|
</div></div><div class="slide"><div class="content">
|
|
<h1>Thank you!</h1>
|
|
|
|
<h2><a href="http://twitter.com/johnbintz/">@johnbintz</a></h2>
|
|
|
|
<h2><a href="http://github.com/johnbintz/">GitHub</a></h2>
|
|
|
|
</div></div></div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|