1 00:00:00,780 --> 00:00:02,490 -: So, we are all done with our application now, 2 00:00:02,490 --> 00:00:04,169 we have written down all of our specs. 3 00:00:04,169 --> 00:00:05,840 But, I don't know, there is still 4 00:00:05,840 --> 00:00:08,220 a little bit of unanswered questions here. 5 00:00:08,220 --> 00:00:11,426 We have got all this mystery code inside of the test helper 6 00:00:11,426 --> 00:00:14,580 and heck, we've kind of also been flying around 7 00:00:14,580 --> 00:00:18,180 with terms like, say, 'mentioning chai' 8 00:00:18,180 --> 00:00:20,010 but I have also been 'mentioning mocha' 9 00:00:20,010 --> 00:00:22,590 in certain places as well, so there is still 10 00:00:22,590 --> 00:00:24,330 a couple of unanswered questions, 11 00:00:24,330 --> 00:00:26,670 inside this application I want to go over. 12 00:00:26,670 --> 00:00:30,120 If you are completely happy with learning tests 13 00:00:30,120 --> 00:00:32,250 as you have so far, and you want to move on 14 00:00:32,250 --> 00:00:34,650 to the next section, feel free to do so, 15 00:00:34,650 --> 00:00:35,940 but if you are really interested in 16 00:00:35,940 --> 00:00:37,410 some of the behind the scenes, you know, 17 00:00:37,410 --> 00:00:39,990 kind of figuring how this stuff really works, 18 00:00:39,990 --> 00:00:41,250 than I encourage you to stick around for 19 00:00:41,250 --> 00:00:44,130 the next couple videos and let's do kind of 20 00:00:44,130 --> 00:00:45,630 a deep dive and figure out how things 21 00:00:45,630 --> 00:00:46,803 are really taking here. 22 00:00:48,540 --> 00:00:50,670 So, the first thing I want to talk about is some 23 00:00:50,670 --> 00:00:52,380 of the imports that we are including into 24 00:00:52,380 --> 00:00:55,230 the spec file right here, into this test helper. 25 00:00:55,230 --> 00:00:57,300 So, at the very top we have got stuff like 26 00:00:57,300 --> 00:01:00,900 'jquery', 'react', 'react-dom', 'jsdom' 27 00:01:00,900 --> 00:01:02,580 and then very importantly, I want to talk 28 00:01:02,580 --> 00:01:05,430 a little bit about 'chai', right here. 29 00:01:05,430 --> 00:01:07,350 So, you can see that we are pulling of 30 00:01:07,350 --> 00:01:10,860 the 'chai' library and the 'expect' key word, 31 00:01:10,860 --> 00:01:11,970 and we have been using 'expect' 32 00:01:11,970 --> 00:01:13,530 all over the place. 33 00:01:13,530 --> 00:01:16,590 So, it turns out that 'expect' is coming from 34 00:01:16,590 --> 00:01:19,530 the 'chai' library, but again, what is 'chai' 35 00:01:19,530 --> 00:01:21,120 and how different it is from say, 'mocha', 36 00:01:21,120 --> 00:01:23,340 what is 'chai' doing, what is 'mocha' doing. 37 00:01:23,340 --> 00:01:25,320 So, let's investigate that relationship 38 00:01:25,320 --> 00:01:26,790 a little bit more. 39 00:01:26,790 --> 00:01:27,870 I am going to pull out a diagram up 40 00:01:27,870 --> 00:01:29,760 in the screen, it's going to kind of help 41 00:01:29,760 --> 00:01:31,173 illustrate the point here. 42 00:01:32,400 --> 00:01:34,069 So, the idea behind this diagram is to kind of 43 00:01:34,069 --> 00:01:35,490 talk a little bit about 44 00:01:35,490 --> 00:01:38,100 the needs of a testing suite. 45 00:01:38,100 --> 00:01:39,780 Don't try to focus too much on the stuff 46 00:01:39,780 --> 00:01:41,310 on the right hand side just yet, 47 00:01:41,310 --> 00:01:42,540 let's just look at the stuff on 48 00:01:42,540 --> 00:01:43,803 the left hand side. 49 00:01:44,670 --> 00:01:46,620 So, the needs of our testing suite 50 00:01:46,620 --> 00:01:49,108 are summarized by these two boxes right here, 51 00:01:49,108 --> 00:01:51,630 whenever we are writing test, we need something 52 00:01:51,630 --> 00:01:53,910 to actually run the test. Right? 53 00:01:53,910 --> 00:01:56,310 We need something to read all the java script 54 00:01:56,310 --> 00:01:58,530 files in, we need something to execute 55 00:01:58,530 --> 00:02:01,080 on the command line and give us the report back, 56 00:02:01,080 --> 00:02:03,180 we need something to handle errors, 57 00:02:03,180 --> 00:02:05,070 we need a entire apparatus 58 00:02:05,070 --> 00:02:07,093 to take care of all this, something that, say, 59 00:02:07,093 --> 00:02:10,979 loads our tests, runs them one by one and then 60 00:02:10,979 --> 00:02:12,990 cleans up after all the specs are done 61 00:02:12,990 --> 00:02:15,630 and generates a report. 62 00:02:15,630 --> 00:02:17,580 So, that's the job of 'mocha', 63 00:02:17,580 --> 00:02:19,140 that's what 'mocha' does, 'mocha' doesn't 64 00:02:19,140 --> 00:02:22,140 actually do, say, make any assertions 65 00:02:22,140 --> 00:02:24,420 about anything, or actually test anything, 66 00:02:24,420 --> 00:02:26,703 it's just a testing apparatus. 67 00:02:27,893 --> 00:02:30,930 So, you will notice that inside of our entire 68 00:02:30,930 --> 00:02:32,880 test helper here, and inside of a lot 69 00:02:32,880 --> 00:02:36,600 of our other files, we never really did a lot 70 00:02:36,600 --> 00:02:38,133 with 'mocha' directly. 71 00:02:39,330 --> 00:02:43,050 The 'describe', 'beforeEach' and 'it' were only 72 00:02:43,050 --> 00:02:45,690 interfaced to 'mocha' itself, everything else 73 00:02:45,690 --> 00:02:47,883 was really going on behind the scenes. 74 00:02:49,740 --> 00:02:51,960 So, along with something to run our tests, 75 00:02:51,960 --> 00:02:54,270 we need something to write our tests with, 76 00:02:54,270 --> 00:02:55,860 something to actually say; 77 00:02:55,860 --> 00:02:58,260 Okay, given this subject, given this, say, 78 00:02:58,260 --> 00:03:00,570 component or function or adduser 79 00:03:00,570 --> 00:03:03,030 or action creator or whatever it might be. 80 00:03:03,030 --> 00:03:06,150 I expect this component to contain 81 00:03:06,150 --> 00:03:08,430 the text 'asdf'. 82 00:03:08,430 --> 00:03:11,640 Or I expect this number to be equal to five. 83 00:03:11,640 --> 00:03:14,607 Or I expect this object to be 'nra'. 84 00:03:15,450 --> 00:03:17,190 Those are all things that are helping us with 85 00:03:17,190 --> 00:03:19,695 making assertions about a certain property, 86 00:03:19,695 --> 00:03:22,770 or a certain aspect of the test subject, 87 00:03:22,770 --> 00:03:24,660 and so, that is really a little bit more of 88 00:03:24,660 --> 00:03:27,420 what we think about when we think about testing 89 00:03:27,420 --> 00:03:30,128 and that is the responsibility of 'chai', 90 00:03:30,128 --> 00:03:32,640 'chai' is a hundred percent responsible for all 91 00:03:32,640 --> 00:03:35,100 the actual individual assertions that we used 92 00:03:35,100 --> 00:03:38,250 in our tests, it is also the source of a lot 93 00:03:38,250 --> 00:03:40,350 of the documentation we were looking at. 94 00:03:40,350 --> 00:03:42,630 So, we have pulled out very briefly the 'chai' 95 00:03:42,630 --> 00:03:45,060 documentation here, which you can get to, 96 00:03:45,060 --> 00:03:48,057 by just doing google search for 'chaijs'. 97 00:03:49,470 --> 00:03:51,810 Inside of this documentation, you will find 98 00:03:51,810 --> 00:03:54,300 all these different matchers, we only used one 99 00:03:54,300 --> 00:03:57,750 in our case, the 'instance of' matcher 100 00:03:57,750 --> 00:04:01,170 for the ray, but there is many other properties 101 00:04:01,170 --> 00:04:03,120 on here or many other matchers that you might 102 00:04:03,120 --> 00:04:04,620 want to know about. 103 00:04:04,620 --> 00:04:07,276 Also notice that some of the matchers in here 104 00:04:07,276 --> 00:04:09,780 are repeated in the documentation that we are 105 00:04:09,780 --> 00:04:12,480 looking at for 'chai jquery'. 106 00:04:12,480 --> 00:04:16,358 So, with 'chai jquery' we may use 107 00:04:16,358 --> 00:04:19,925 this '.exist' matcher and so, other libraries 108 00:04:19,925 --> 00:04:22,470 that kind of, are loaded on top of 'chai', 109 00:04:22,470 --> 00:04:26,267 like 'chai jquery', that is a tough one, 110 00:04:26,267 --> 00:04:29,250 some of these other libraries that we load up 111 00:04:29,250 --> 00:04:32,400 redefine these matchers or augment the matchers 112 00:04:32,400 --> 00:04:34,660 in some fashion, and so, for example, 113 00:04:34,660 --> 00:04:37,620 'chai jquery' says if they're making 114 00:04:37,620 --> 00:04:41,640 an expectation on a 'jquery' object, then I want 115 00:04:41,640 --> 00:04:45,210 to use this special matcher '.exist' otherwise, 116 00:04:45,210 --> 00:04:47,880 if it is just like, you know, 'say a string' or 117 00:04:47,880 --> 00:04:50,762 'null' or 'undefined' or something like that. 118 00:04:50,762 --> 00:04:53,266 'Mocha', you can take care of this one, 119 00:04:53,266 --> 00:04:55,840 'chai', you can take care of this one, 120 00:04:55,840 --> 00:04:57,570 'chai jquery', doesn't need to care 121 00:04:57,570 --> 00:04:59,010 about this one, this is some boring 122 00:04:59,010 --> 00:05:00,180 test subject. 123 00:05:00,180 --> 00:05:03,360 So, we can add other libraries on top of 'chai' 124 00:05:03,360 --> 00:05:05,160 that augment the matchers that 125 00:05:05,160 --> 00:05:06,333 we have access to. 126 00:05:07,617 --> 00:05:09,870 So, that is a little bit more about the purpose 127 00:05:09,870 --> 00:05:12,540 of 'mocha' and 'chai', now that we know 128 00:05:12,540 --> 00:05:14,970 a little bit more, we can do a little bit more 129 00:05:14,970 --> 00:05:16,740 digging into our test helper inside 130 00:05:16,740 --> 00:05:19,053 of the next section. I will see you there.