Preview
Video Player
00:00
00:00
Greater Expectations
10:13Our expectations aren’t really accurate yet. We can pass all our tests, even if nothing works correctly, because our test code doesn’t really test what we want it to. In this video, we'll write more expectations to flesh out our outline.
Okay, so let's start on a new line and
still keep our first expectation so
0:00
that if anything breaks along
the way we'll know why.
0:06
And you can also go ahead and
0:09
remove the simple test expectation
we wrote in the previous video.
0:10
Also go ahead and get rid of the comments.
0:15
So now I'll write a new expectation
by typing expect titleCase,
0:21
the great mouse detective.
0:27
Now we don't just want
the same string back, right?
0:37
We want the function to
give us a different string.
0:39
So in our example,
the return string should be
0:42
the great mouse detective
with correct capitalization.
0:45
So let's start there.
0:49
This time I'll write .to.equal
The Great Mouse Detective.
0:51
Notice how each word begins
with a capital letter.
1:00
Now if we save our file and
1:03
run this in the console by
typing node textUtilities.js.
1:05
We see that we get an assertion error.
1:16
It says, expected the great
mouse detective to equal
1:18
The Great Mouse Detective capitalized.
1:22
Of course,
because right now our title case function
1:24
just returns the same string we put in.
1:28
So to make this test pass, we basically
need to make our whole function work.
1:32
Now that's a little bit too big and
it's not very helpful for
1:37
this test to just tell us make
it work like it's doing now.
1:40
So we should break this up into smaller
expectations that we know how to tackle.
1:44
Usually, when writing tests the most
comprehensive expectations should be
1:53
written last, that way the function
passes all the simpler tests first.
1:58
So we'll keep this to.equal expectation
at the bottom of all tests, so
2:02
that we know when we finished.
2:07
Then right above it
we'll write a new test.
2:09
So now we should think about the smallest
piece of the problem we know how to solve.
2:19
So what if we passed in just one letter?
2:24
That shouldn't be hard, right?.
2:27
The function would just return
the same letter capitalized.
2:29
So our expectation should be
something that captures that.
2:32
So we'll say expect lowercase
2:36
a to equal capital A.
2:42
So now when we save the file, go over
to the console and run our test again.
2:48
We can see that it doesn't work yet.
2:53
We get the AssertionError expected
lower case a to equal capital A.
2:56
Okay, we can definitely do this
because it's built into JavaScript.
3:05
So back in the textUtilities file, I can
call the toUpperCase method on our title.
3:08
So now if I save and run the test again,
3:20
we see that we passed
our new smaller tests.
3:23
And we still failed the final test but
for a different reason.
3:27
So now we're seeing the AssertionError,
3:30
expected THE GREAT MOUSE DETECTIVE
to equal The Great Mouse Detective.
3:33
So all caps versus
the correct capitalization.
3:37
Well, this is good progress.
3:40
But now we're capitalizing too
much instead of not enough.
3:42
So now let's add another expectation
with a bit more complexity.
3:50
So right below the expectation,
the stroke say expect titleCase.
3:54
To.equal.
4:04
And this time let's use a single
word title but more than one letter.
4:10
So first, I'll type the title
vertigo in all lower case letter,
4:15
then I'll type Vertigo with a capital V.
4:19
Running the tests gives us
the same problem as before but
4:26
it helps to keep the problem small and
4:30
comprehensible by confining our
expectation to only one word.
4:32
So instead of uppercasing
the entire title,
4:37
let's target just the first
character in the title.
4:41
This time, when we run the tests we get,
4:49
expected capital V to equal Vertigo,
right?
4:52
Because we're only
returning the first letter.
4:56
So back in our function,
4:58
let's add the rest of the title in,
skipping over the first letter.
5:00
So right after toUpperCase, we'll say
+ title.substring and we'll pass one.
5:04
So I'll run the test again
in the console and great.
5:14
It looks like we passed our Vertigo test.
5:17
So now our final test says,
AssertionError expected,
5:20
The great mouse detective to
equal The Great Mouse Detective.
5:24
So the first letter capitalized
vs the correct title casing.
5:28
So we're getting closer.
5:32
We know how to capitalize the first
letter of a string, we know how to
5:34
add strings together, we just need to
do this for each word in the title.
5:38
I think we're ready to try making it work.
5:42
We have a pretty thorough understanding
of the problem at this point and
5:44
several tests to keep us
on track if we misstep.
5:47
Okay so we know what to do with one word.
5:50
If we keep our final test case to mind,
we know we need to break the string apart
5:53
into several pieces so that we can do our
one word part on each word in the title.
5:57
And the title case function, we can start
by splitting the title up at the spaces.
6:03
I'll type of var words = title.split.
6:08
And I'll leave a space inside the quotes.
6:16
So now we have an array of
individual words from our title.
6:19
Now before we even get stuck figuring out
the middle, I like to write the return
6:23
statement because I already pretty
much know what it will look like.
6:27
We know we have to give back
a string that's been title cased.
6:31
We know that somewhere in this function
we have to put all the words we
6:34
just separated back together so we may
as well do that in the return statement.
6:37
So I'll write return,
titleCasedWords.join.
6:42
I know I have to join them back together
with a space because that's how
6:50
I took them apart.
6:54
So right now I'm going to just
guess that'll make an array called
6:56
titleCasedWords, because I
know I have to transform
6:59
all the individual words
from my words array somehow.
7:03
All right, so now that I have
the start and end of my function,
7:07
a lot is already done for me.
7:11
I know I need to make this
array titleCasedWords and
7:12
its value will be derived
from the words array.
7:16
So I can at least type var
7:21
titleCaseWords = words.
7:25
Now here's the logic part,
I need to loop through all the words,
7:30
do my title case logic on them and
then store them in titleCaseWords.
7:34
So let's see, do you already know
a function that will do something to each
7:40
member of an array and to give me
back an array of the same length?
7:43
Yup, that's right,
the map function can do that for us.
7:48
In fact we used this for the gather
names of function in the first video.
7:51
So back in my titleCasedWords variable
I'll add the map function right
7:57
after words.
8:01
Next I'll move all my titleCase logic for
one word into the map callback.
8:10
And now I'll get every word
title case to my title.
8:19
So in the map callback, I'll pass word and
in the return statement,
8:23
I'll change title to word.
8:27
So now when I save my JavaScript file and
run the test again in the console, great.
8:34
It looks like everything passes.
8:40
This function isn't quite finished.
8:43
I'll talk more about covering
edge cases in the next stage.
8:45
So far, we've made a lot of assumptions
about the input for this function.
8:48
For example, we've always started
with a completely lowercase string,
8:52
with no punctuation or weird characters.
8:56
But what happens if we get a title
that isn't nicely formatted already?
8:59
Like this type, we might need to expand
our function to account for these things.
9:03
For now try and
imagine a simple expectation for
9:07
the title case function, that would fail.
9:10
Remember titles don't really capitalize
the first letter of every word,
9:13
they skip less important words.
9:17
So you can try fixing the title case
function to practice your BDD strategy and
9:19
get more comfortable writing
expectations with Chai.
9:24
Even if he had been overwhelmed or
9:27
confused about where to start
with our title case function,
9:29
BDD helped us break the problem down
into smaller and easier pieces.
9:32
As we work towards passing tests we
got a better and better function.
9:37
Not only did red green refactor
help us write or code but
9:41
now we actually have some simple tests for
our function too.
9:45
It might seem strange at first to just
think about these tiny examples and
9:49
expectations but the secret is that this
is one of the easiest ways to program.
9:53
Once you get used to writing unit
tests your code will also be better
9:58
because you'll have thought
about it much more carefully.
10:02
You'll even have tests for your
functions that you can show other people
10:04
to explain what your code does or
get extra help.
10:08
That's pretty cool.
10:11