2012-03-13 17:35:50 +00:00
<!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' > . h l l { b a c k g r o u n d - c o l o r : # f f f f c c }
.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 >
2012-03-13 19:21:20 +00:00
< / div > < / div > < div class = "slide" > < div class = "content" >
< h1 > Why is it important?< / h1 >
2012-03-13 17:35:50 +00:00
< / 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 style-larger" > < 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" >
< h1 > < a href = "http://johnbintz.github.com/tea-time/" > johnbintz.github.com/tea-time< / a > < / h1 >
< / 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-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 = "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-even-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 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 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" > " should be in the same context as the 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-even-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-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" > 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 style-larger" > < 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 style-even-larger" > < div class = "content" >
< h1 > < code > toHaveBeenCalledWith()< / code > < / h1 >
< h2 > Called least once with the given parameters< / h2 >
< 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 style-even-larger" > < div class = "content" >
< h1 > < code > toHaveBeenCalled()< / code > < / h1 >
< h1 > Just called, no parameter check< / h1 >
< 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-even-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 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" > @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-even-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 style-larger" > < 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-even-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 style-even-larger" > < 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-even-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" >
< h1 > < a href = "http://github.com/pivotal/jasmine-gem" > github.com/pivotal/jasmine-gem< / a > < / h1 >
< / 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 style-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" > 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 style-even-larger" > < 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-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" > 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-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 = "k" > class< / span > < span class = "nx" > Cat< / span >
< span class = "nv" > hiss: < / span > < span class = "o" > -> < / span > < span class = "s" > " hiss" < / span >
< span class = "c1" > # like Ruby include, add code to instances< / 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" > Cat< / span > < span class = "p" > .< / span > < span class = "nx" > prototype< / 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 = "nv" > cat = < / span > < span class = "k" > new< / span > < span class = "nx" > Cat< / span > < span class = "p" > ()< / span >
< span class = "nx" > cat< / 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 #{name}" < / span >
< / pre >
< / div >
< / 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 = "k" > class< / span > < span class = "nx" > Cat< / span >
< span class = "nv" > hiss: < / span > < span class = "o" > -> < / span > < span class = "s" > " hiss" < / span >
< span class = "c1" > # like Ruby extend, add code to class< / 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" > Cat< / 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" > Cat< / 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-even-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 style-even-larger" > < 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" >
< h1 > < a href = "http://pivotal.github.com/jasmine/" > Jasmine documentation< / a > < / h1 >
< / div > < / div > < div class = "slide" > < div class = "content" >
< h1 > < a href = "http://johnbintz.github.com/tea-time/" > johnbintz.github.com/tea-time< / a > < / h1 >
< / 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 >
