1 00:00:00,505 --> 00:00:06,530 Okay, so let's start on a new line and still keep our first expectation so 2 00:00:06,530 --> 00:00:09,350 that if anything breaks along the way we'll know why. 3 00:00:09,350 --> 00:00:10,580 And you can also go ahead and 4 00:00:10,580 --> 00:00:15,130 remove the simple test expectation we wrote in the previous video. 5 00:00:15,130 --> 00:00:16,844 Also go ahead and get rid of the comments. 6 00:00:21,641 --> 00:00:27,479 So now I'll write a new expectation by typing expect titleCase, 7 00:00:27,479 --> 00:00:30,033 the great mouse detective. 8 00:00:37,070 --> 00:00:39,780 Now we don't just want the same string back, right? 9 00:00:39,780 --> 00:00:42,320 We want the function to give us a different string. 10 00:00:42,320 --> 00:00:45,700 So in our example, the return string should be 11 00:00:45,700 --> 00:00:49,250 the great mouse detective with correct capitalization. 12 00:00:49,250 --> 00:00:51,280 So let's start there. 13 00:00:51,280 --> 00:00:58,832 This time I'll write .to.equal The Great Mouse Detective. 14 00:01:00,510 --> 00:01:03,380 Notice how each word begins with a capital letter. 15 00:01:03,380 --> 00:01:05,809 Now if we save our file and 16 00:01:05,809 --> 00:01:11,611 run this in the console by typing node textUtilities.js. 17 00:01:16,088 --> 00:01:18,520 We see that we get an assertion error. 18 00:01:18,520 --> 00:01:22,230 It says, expected the great mouse detective to equal 19 00:01:22,230 --> 00:01:24,950 The Great Mouse Detective capitalized. 20 00:01:24,950 --> 00:01:28,310 Of course, because right now our title case function 21 00:01:28,310 --> 00:01:30,870 just returns the same string we put in. 22 00:01:32,580 --> 00:01:37,480 So to make this test pass, we basically need to make our whole function work. 23 00:01:37,480 --> 00:01:40,910 Now that's a little bit too big and it's not very helpful for 24 00:01:40,910 --> 00:01:44,920 this test to just tell us make it work like it's doing now. 25 00:01:44,920 --> 00:01:49,157 So we should break this up into smaller expectations that we know how to tackle. 26 00:01:53,896 --> 00:01:58,125 Usually, when writing tests the most comprehensive expectations should be 27 00:01:58,125 --> 00:02:02,600 written last, that way the function passes all the simpler tests first. 28 00:02:02,600 --> 00:02:07,690 So we'll keep this to.equal expectation at the bottom of all tests, so 29 00:02:07,690 --> 00:02:09,590 that we know when we finished. 30 00:02:09,590 --> 00:02:11,968 Then right above it we'll write a new test. 31 00:02:19,236 --> 00:02:24,530 So now we should think about the smallest piece of the problem we know how to solve. 32 00:02:24,530 --> 00:02:27,570 So what if we passed in just one letter? 33 00:02:27,570 --> 00:02:29,370 That shouldn't be hard, right?. 34 00:02:29,370 --> 00:02:32,980 The function would just return the same letter capitalized. 35 00:02:32,980 --> 00:02:36,320 So our expectation should be something that captures that. 36 00:02:36,320 --> 00:02:42,906 So we'll say expect lowercase 37 00:02:42,906 --> 00:02:48,040 a to equal capital A. 38 00:02:48,040 --> 00:02:53,740 So now when we save the file, go over to the console and run our test again. 39 00:02:53,740 --> 00:02:56,110 We can see that it doesn't work yet. 40 00:02:56,110 --> 00:03:00,937 We get the AssertionError expected lower case a to equal capital A. 41 00:03:05,161 --> 00:03:08,970 Okay, we can definitely do this because it's built into JavaScript. 42 00:03:08,970 --> 00:03:14,639 So back in the textUtilities file, I can call the toUpperCase method on our title. 43 00:03:20,218 --> 00:03:23,535 So now if I save and run the test again, 44 00:03:23,535 --> 00:03:27,860 we see that we passed our new smaller tests. 45 00:03:27,860 --> 00:03:30,760 And we still failed the final test but for a different reason. 46 00:03:30,760 --> 00:03:33,100 So now we're seeing the AssertionError, 47 00:03:33,100 --> 00:03:37,520 expected THE GREAT MOUSE DETECTIVE to equal The Great Mouse Detective. 48 00:03:37,520 --> 00:03:40,820 So all caps versus the correct capitalization. 49 00:03:40,820 --> 00:03:42,770 Well, this is good progress. 50 00:03:42,770 --> 00:03:45,843 But now we're capitalizing too much instead of not enough. 51 00:03:50,608 --> 00:03:54,810 So now let's add another expectation with a bit more complexity. 52 00:03:54,810 --> 00:03:59,969 So right below the expectation, the stroke say expect titleCase. 53 00:04:04,215 --> 00:04:05,708 To.equal. 54 00:04:10,881 --> 00:04:15,750 And this time let's use a single word title but more than one letter. 55 00:04:15,750 --> 00:04:19,617 So first, I'll type the title vertigo in all lower case letter, 56 00:04:19,617 --> 00:04:22,090 then I'll type Vertigo with a capital V. 57 00:04:26,658 --> 00:04:30,232 Running the tests gives us the same problem as before but 58 00:04:30,232 --> 00:04:32,589 it helps to keep the problem small and 59 00:04:32,589 --> 00:04:36,710 comprehensible by confining our expectation to only one word. 60 00:04:37,940 --> 00:04:41,271 So instead of uppercasing the entire title, 61 00:04:41,271 --> 00:04:45,222 let's target just the first character in the title. 62 00:04:49,651 --> 00:04:52,794 This time, when we run the tests we get, 63 00:04:52,794 --> 00:04:56,405 expected capital V to equal Vertigo, right? 64 00:04:56,405 --> 00:04:58,750 Because we're only returning the first letter. 65 00:04:58,750 --> 00:05:00,060 So back in our function, 66 00:05:00,060 --> 00:05:04,590 let's add the rest of the title in, skipping over the first letter. 67 00:05:04,590 --> 00:05:12,390 So right after toUpperCase, we'll say + title.substring and we'll pass one. 68 00:05:14,330 --> 00:05:17,510 So I'll run the test again in the console and great. 69 00:05:17,510 --> 00:05:20,610 It looks like we passed our Vertigo test. 70 00:05:20,610 --> 00:05:24,690 So now our final test says, AssertionError expected, 71 00:05:24,690 --> 00:05:28,290 The great mouse detective to equal The Great Mouse Detective. 72 00:05:28,290 --> 00:05:32,510 So the first letter capitalized vs the correct title casing. 73 00:05:32,510 --> 00:05:34,400 So we're getting closer. 74 00:05:34,400 --> 00:05:38,060 We know how to capitalize the first letter of a string, we know how to 75 00:05:38,060 --> 00:05:42,660 add strings together, we just need to do this for each word in the title. 76 00:05:42,660 --> 00:05:44,590 I think we're ready to try making it work. 77 00:05:44,590 --> 00:05:47,760 We have a pretty thorough understanding of the problem at this point and 78 00:05:47,760 --> 00:05:50,880 several tests to keep us on track if we misstep. 79 00:05:50,880 --> 00:05:53,660 Okay so we know what to do with one word. 80 00:05:53,660 --> 00:05:57,910 If we keep our final test case to mind, we know we need to break the string apart 81 00:05:57,910 --> 00:06:03,280 into several pieces so that we can do our one word part on each word in the title. 82 00:06:03,280 --> 00:06:08,280 And the title case function, we can start by splitting the title up at the spaces. 83 00:06:08,280 --> 00:06:13,257 I'll type of var words = title.split. 84 00:06:16,828 --> 00:06:19,370 And I'll leave a space inside the quotes. 85 00:06:19,370 --> 00:06:23,490 So now we have an array of individual words from our title. 86 00:06:23,490 --> 00:06:27,980 Now before we even get stuck figuring out the middle, I like to write the return 87 00:06:27,980 --> 00:06:31,270 statement because I already pretty much know what it will look like. 88 00:06:31,270 --> 00:06:34,650 We know we have to give back a string that's been title cased. 89 00:06:34,650 --> 00:06:37,500 We know that somewhere in this function we have to put all the words we 90 00:06:37,500 --> 00:06:42,040 just separated back together so we may as well do that in the return statement. 91 00:06:42,040 --> 00:06:46,324 So I'll write return, titleCasedWords.join. 92 00:06:50,724 --> 00:06:54,562 I know I have to join them back together with a space because that's how 93 00:06:54,562 --> 00:06:56,060 I took them apart. 94 00:06:56,060 --> 00:06:59,920 So right now I'm going to just guess that'll make an array called 95 00:06:59,920 --> 00:07:03,670 titleCasedWords, because I know I have to transform 96 00:07:03,670 --> 00:07:07,760 all the individual words from my words array somehow. 97 00:07:07,760 --> 00:07:11,030 All right, so now that I have the start and end of my function, 98 00:07:11,030 --> 00:07:12,750 a lot is already done for me. 99 00:07:12,750 --> 00:07:16,970 I know I need to make this array titleCasedWords and 100 00:07:16,970 --> 00:07:20,210 its value will be derived from the words array. 101 00:07:21,520 --> 00:07:25,709 So I can at least type var 102 00:07:25,709 --> 00:07:30,560 titleCaseWords = words. 103 00:07:30,560 --> 00:07:34,750 Now here's the logic part, I need to loop through all the words, 104 00:07:34,750 --> 00:07:40,090 do my title case logic on them and then store them in titleCaseWords. 105 00:07:40,090 --> 00:07:43,937 So let's see, do you already know a function that will do something to each 106 00:07:43,937 --> 00:07:48,110 member of an array and to give me back an array of the same length? 107 00:07:48,110 --> 00:07:51,320 Yup, that's right, the map function can do that for us. 108 00:07:51,320 --> 00:07:55,230 In fact we used this for the gather names of function in the first video. 109 00:07:57,260 --> 00:08:01,324 So back in my titleCasedWords variable I'll add the map function right 110 00:08:01,324 --> 00:08:02,142 after words. 111 00:08:10,008 --> 00:08:16,237 Next I'll move all my titleCase logic for one word into the map callback. 112 00:08:19,496 --> 00:08:23,100 And now I'll get every word title case to my title. 113 00:08:23,100 --> 00:08:27,841 So in the map callback, I'll pass word and in the return statement, 114 00:08:27,841 --> 00:08:29,822 I'll change title to word. 115 00:08:34,665 --> 00:08:40,370 So now when I save my JavaScript file and run the test again in the console, great. 116 00:08:40,370 --> 00:08:42,140 It looks like everything passes. 117 00:08:43,400 --> 00:08:45,260 This function isn't quite finished. 118 00:08:45,260 --> 00:08:47,860 I'll talk more about covering edge cases in the next stage. 119 00:08:48,990 --> 00:08:52,950 So far, we've made a lot of assumptions about the input for this function. 120 00:08:52,950 --> 00:08:56,910 For example, we've always started with a completely lowercase string, 121 00:08:56,910 --> 00:08:59,400 with no punctuation or weird characters. 122 00:08:59,400 --> 00:09:03,080 But what happens if we get a title that isn't nicely formatted already? 123 00:09:03,080 --> 00:09:07,650 Like this type, we might need to expand our function to account for these things. 124 00:09:07,650 --> 00:09:10,550 For now try and imagine a simple expectation for 125 00:09:10,550 --> 00:09:13,090 the title case function, that would fail. 126 00:09:13,090 --> 00:09:17,070 Remember titles don't really capitalize the first letter of every word, 127 00:09:17,070 --> 00:09:19,020 they skip less important words. 128 00:09:19,020 --> 00:09:24,280 So you can try fixing the title case function to practice your BDD strategy and 129 00:09:24,280 --> 00:09:26,485 get more comfortable writing expectations with Chai. 130 00:09:27,700 --> 00:09:29,270 Even if he had been overwhelmed or 131 00:09:29,270 --> 00:09:32,600 confused about where to start with our title case function, 132 00:09:32,600 --> 00:09:37,090 BDD helped us break the problem down into smaller and easier pieces. 133 00:09:37,090 --> 00:09:41,510 As we work towards passing tests we got a better and better function. 134 00:09:41,510 --> 00:09:45,050 Not only did red green refactor help us write or code but 135 00:09:45,050 --> 00:09:48,140 now we actually have some simple tests for our function too. 136 00:09:49,500 --> 00:09:53,090 It might seem strange at first to just think about these tiny examples and 137 00:09:53,090 --> 00:09:58,080 expectations but the secret is that this is one of the easiest ways to program. 138 00:09:58,080 --> 00:10:02,140 Once you get used to writing unit tests your code will also be better 139 00:10:02,140 --> 00:10:04,980 because you'll have thought about it much more carefully. 140 00:10:04,980 --> 00:10:08,630 You'll even have tests for your functions that you can show other people 141 00:10:08,630 --> 00:10:11,710 to explain what your code does or get extra help. 142 00:10:11,710 --> 00:10:12,310 That's pretty cool.