Preview
Video Player
00:00
00:00
Red, Green, Refactor
7:56In this video, you'll use a testing tool called Chai to learn how BDD and the red-green-refactor cycle helps you write code that really does what it's supposed to. Chai is an expectation library that includes special functions that throw an error when an expectation is not met.
To show you how BDD and the red green
refactor cycle helps us, let's imagine we
0:00
have an application pulling movie titles
from different sites on the Internet.
0:05
Because the information
comes from multiple websites
0:09
we can't be sure that the titles
coming in have the style we want.
0:12
We want the titles in our database
to be nicely title cased.
0:16
Which means that the first letter of
every word is capitalized except for
0:20
certain less important words like the,
and, of and so on.
0:23
I've linked to some examples of title
case in the teacher's notes as well.
0:27
So, let's try writing a function that
can handle this title casing for
0:32
us using BDD principles.
0:35
First, let's install
a testing tool called cahi.
0:38
Chai is what's called
an expectation library.
0:42
Chai include special functions that throw
an error when an expectation is not met.
0:45
For now we can use chai functions to write
our BDD outline for a small function.
0:50
You can follow along in workspaces or
0:54
in your own command line
terminal on your computer.
0:56
Okay, so, first we need to
install chai for our project.
0:59
So in my workspace console I'll type,
npm install chai,
1:04
followed by --save -dev.
1:09
So I'm using the --save-dev flag here for
my npm installation instead
1:13
of just save because chai won't be
a dependency for our working code.
1:18
We don't actually need chai or
1:22
any of our testing tools in
order to run our application.
1:24
We just need to for
our development process.
1:27
Now if you forget how to set this up,
be sure to check the teacher's notes for
1:29
a link to chai's documentation and
installation instructions.
1:33
Next, I'll create a new JavaScript
file by going over to the console and
1:38
typing touchtextutilities.js.
1:42
I'm calling my JavaScript file text
utilities.js because the title case
1:49
function that we're going to write is
just a tool for manipulating text.
1:53
Once again, you can refresh your sidebar
to see the new textutilities.js file.
1:57
So, when I open our textutilities file,
2:08
the first thing I'm gonna do is import
the stuff we want from the cai library.
2:10
We specifically want to
use the expect method.
2:15
Check the teacher’s notes to read about
other methods you might prefer, but
2:19
I’m just going to use expect for
the rest of the course.
2:22
So, to import expect
from the chai library,
2:26
I'll type var expect = .expect;.
2:31
Remember, to import stuff,
2:37
we write require followed by
the name of our library as a string.
2:39
So, inside the quotes, I'll type, chai.
2:45
And now Node will know to go look for
2:49
a package with that name in
our node_modules directory.
2:51
Now you might not have seen this
style of require statement before.
2:57
But don't worry, since I don't
want to use everything in chai,
3:01
I'm just saving the expect method to
a variable and throwing the rest away.
3:04
So, writing it this way is a more
efficient way of writing it like this.
3:10
So var chai = require('chai')
followed by var expect = chai.expect.
3:16
Now that we have the expect
function in our file,
3:23
we can use it to write some
expectations as our outline.
3:26
To use it, we write expect and pass in
a value we want to use for comparison.
3:30
Then we chain some special
child chai methods to tell chai
3:37
what we expect that value to be.
3:40
So for example,
we can say expect(true).to.be.false.
3:42
So, expect(true).to.be.false.
3:50
Now this is obviously going to fail
because true does not equal false.
3:52
So, if I save this and run our test
file in the console using node,
3:56
followed by the name or a file,
which is textUtilities.js.
4:00
Once I hit Enter we see
that I get an error.
4:07
It says,
AssertionError: expected true to be false.
4:10
Cool, so now I can go back to our code and
fix this example so
4:13
that it's passing by
switching false with true.
4:18
And now if I run node textUtilities.js
again, we don't see any output at all.
4:24
So, there were no errors.
4:31
We're going to see a lot more
useful output when we combine chai
4:32
with our unit testing framework
Mocha in the next stage.
4:36
But for now, this will be our green.
4:39
All right, so now let's write our first
expectation for the titleCase function.
4:47
So I'll start by writing expect(titleCase.
4:54
And then pass in an example
of a movie title or
5:00
application might be
sent from the Internet.
5:03
So I'm going to type,
the great mouse detective.
5:06
Notice the title has no capital letters.
5:16
I'm just making this up as an example for
me to test against.
5:19
I could put anything I want to in here.
5:23
This is just acting as a guide for
me as I write this function.
5:25
So, what do I expect the output
of our titleCase function
5:29
with the great mouse detective to be?
5:32
Well, I definitely know that I
should get a string back, right?
5:36
A string goes in and a string comes out.
5:39
So, let's start with that.
5:40
So I'll say,
5:42
.to.be.a('string').
5:45
So, expect titleCase('the great
mouse detective') to be a string.
5:51
With my first expectation
written I could go run our
5:56
file again in the console with our
command node textutilities.js.
5:59
And, this gives me an error now.
6:04
It says,
ReferenceError: titleCase is not defined.
6:06
And that's right because I haven't
written the titleCase function yet.
6:11
Now, we should fix just
one error at a time.
6:15
So, let's make this go away.
6:18
Back in my textutilities.j sfile,
right above the test we just wrote,
6:20
I'll write a new function named titleCase.
6:25
It'll say function tittleCase.
6:28
So now, when I save the file and
run the file again in the console,
6:39
I see that I stop getting
a reference error.
6:44
Instead, I get an error that says,
6:49
AssertionError: expected
undefined to be a string.
6:51
Perfect, it looks like
we're making progress.
6:55
Now, at this point I know that
titleCase is going to accept
6:57
a string as an argument.
7:00
And it's going to do some stuff to it and
give me back a new string.
7:02
So, I can get our current test
to pass by doing just that much.
7:06
So, if I let the titleCase
function accept a title and
7:11
then spit it back out by typing,
return title.
7:15
Once I save my JavaScript file and
run the test again in the console.
7:18
Great, we can see that it
meets our expectations,
7:25
but our expectations aren't
really accurate yet, right?
7:29
And this is an important
lesson about testing.
7:33
We can pass all our tests even if nothing
works correctly if our test code doesn't
7:35
really test what we want it to.
7:40
So, in the next video let's add some more
expectations to flush out our outline.
7:42
We'll be talking a lot about how
to do this during the course.
7:47
For now, I've linked to an article
in the teacher's notes about
7:50
ways we can make our
expectations really informative.
7:53