1 00:00:00,932 --> 00:00:02,730 -: In the last section, we introduced Moxios 2 00:00:02,730 --> 00:00:04,620 into our test suite. 3 00:00:04,620 --> 00:00:07,590 However, it looks like our test suite is failing still 4 00:00:07,590 --> 00:00:09,390 particularly the one test that is trying 5 00:00:09,390 --> 00:00:11,550 to fetch a list of comments and display all 6 00:00:11,550 --> 00:00:12,990 of them on the screen. 7 00:00:12,990 --> 00:00:15,030 Now at least we have a better failure 8 00:00:15,030 --> 00:00:16,200 than what we had before. 9 00:00:16,200 --> 00:00:17,940 Previously your entire test suite might 10 00:00:17,940 --> 00:00:19,320 have been just been exiting back out 11 00:00:19,320 --> 00:00:20,310 to the command line 12 00:00:20,310 --> 00:00:21,600 so hopefully you're at least seeing 13 00:00:21,600 --> 00:00:23,370 seeing something a little bit more positive 14 00:00:23,370 --> 00:00:24,840 at this point. 15 00:00:24,840 --> 00:00:26,670 Let's take a look at a diagram really quick 16 00:00:26,670 --> 00:00:28,950 and try to get a better idea of why our test 17 00:00:28,950 --> 00:00:30,003 is still failing. 18 00:00:30,900 --> 00:00:32,220 All right, so this is a timeline 19 00:00:32,220 --> 00:00:34,350 of what is happening inside of our integration 20 00:00:34,350 --> 00:00:35,940 test right now. 21 00:00:35,940 --> 00:00:37,190 At present were triggering that 22 00:00:37,190 --> 00:00:39,810 or simulating that click event on the 23 00:00:39,810 --> 00:00:41,433 fetch comments button. 24 00:00:42,300 --> 00:00:44,970 When we trigger that click event 25 00:00:44,970 --> 00:00:47,370 our action creator is definitely being called 26 00:00:47,370 --> 00:00:48,690 no doubt about that 27 00:00:48,690 --> 00:00:52,050 and inside that action creator we are issuing a request 28 00:00:52,050 --> 00:00:53,520 now when that request is issued 29 00:00:53,520 --> 00:00:55,740 right after that is where our trouble 30 00:00:55,740 --> 00:00:57,600 starts to occur. 31 00:00:57,600 --> 00:01:00,090 So when we issue that request it takes 32 00:01:00,090 --> 00:01:04,260 a tiny tiny bit of time for Moxios 33 00:01:04,260 --> 00:01:06,390 to see that outgoing request 34 00:01:06,390 --> 00:01:08,700 intercept it and then respond back with that 35 00:01:08,700 --> 00:01:11,280 fake list of comments that we just put together. 36 00:01:11,280 --> 00:01:14,820 So that tiny bit of time that it takes Moxios 37 00:01:14,820 --> 00:01:18,150 to kick in is the source of all of our troubles. 38 00:01:18,150 --> 00:01:19,530 Cause the problem is 39 00:01:19,530 --> 00:01:20,760 back over here 40 00:01:20,760 --> 00:01:23,280 you and I are calling that simulate function 41 00:01:23,280 --> 00:01:24,720 simulate click on that button 42 00:01:24,720 --> 00:01:26,010 so this line of code right here 43 00:01:26,010 --> 00:01:28,980 triggers the request and then in the very 44 00:01:28,980 --> 00:01:33,570 next instant the very next micro second 45 00:01:33,570 --> 00:01:35,640 we then look at that wrapped element 46 00:01:35,640 --> 00:01:38,283 and try to find the number of LI's inside of it. 47 00:01:39,180 --> 00:01:41,790 And so the problem is this tiny little gap 48 00:01:41,790 --> 00:01:43,140 in time right here this is 49 00:01:43,140 --> 00:01:45,510 what this dotted line is meant to represent. 50 00:01:45,510 --> 00:01:47,400 After we issue that request we then 51 00:01:47,400 --> 00:01:51,120 instantly check to see if those 2 LI's are visible 52 00:01:51,120 --> 00:01:54,360 and then a tiny very small amount of time 53 00:01:54,360 --> 00:01:56,550 Moxios finally kicks in and says 54 00:01:56,550 --> 00:01:58,830 hey I got this request I'm going to respond 55 00:01:58,830 --> 00:02:01,080 with a fake list of comments. 56 00:02:01,080 --> 00:02:04,620 So then a millisecond later the request succeeds 57 00:02:04,620 --> 00:02:06,060 the reducer picks up the comments 58 00:02:06,060 --> 00:02:08,789 and the comment list gets rendered on the screen 59 00:02:08,789 --> 00:02:11,700 so that's the cause of our issue right now. 60 00:02:11,700 --> 00:02:14,100 To solve this you and I are going to introduce 61 00:02:14,100 --> 00:02:17,130 a tiny arbitrary little delay 62 00:02:17,130 --> 00:02:19,710 between issuing that request 63 00:02:19,710 --> 00:02:23,640 and when our test weed tries to find that list of comments. 64 00:02:23,640 --> 00:02:25,540 So essentially we're going to do this. 65 00:02:26,760 --> 00:02:28,170 When we issue that request 66 00:02:28,170 --> 00:02:30,210 we're going to introduce this little tiny 67 00:02:30,210 --> 00:02:32,340 delay right here so that Moxios 68 00:02:32,340 --> 00:02:34,440 has time to intercept the request 69 00:02:34,440 --> 00:02:37,620 and respond with the fake list of comments. 70 00:02:37,620 --> 00:02:38,970 So let's take a quick pause right here 71 00:02:38,970 --> 00:02:40,800 now that we've got a better idea of what's going on 72 00:02:40,800 --> 00:02:42,360 we'll continue in the next section 73 00:02:42,360 --> 00:02:43,470 and we're going to figure out how we're 74 00:02:43,470 --> 00:02:46,383 going to introduce this tiny little pause.