1 00:00:06,570 --> 00:00:07,410 - In this section, 2 00:00:07,410 --> 00:00:09,810 we're going to see how to write comprehensive tests 3 00:00:09,810 --> 00:00:11,550 for our BackAccount class. 4 00:00:11,550 --> 00:00:15,000 So if you want to follow along, go into lesson 11. 5 00:00:15,000 --> 00:00:19,140 We're in example three now, and it's a HelloWorld example. 6 00:00:19,140 --> 00:00:20,280 Here's what it looks like. 7 00:00:20,280 --> 00:00:23,370 Here's a quick reminder of the BackAccount class. 8 00:00:23,370 --> 00:00:26,310 If you remember, I had a BackAccount class 9 00:00:26,310 --> 00:00:28,620 and the BackAccount class had had a constructor 10 00:00:28,620 --> 00:00:32,160 to initialize the back account's name, and balance, 11 00:00:32,160 --> 00:00:33,480 and deposit method, 12 00:00:33,480 --> 00:00:37,140 which added an amount to the back account, 13 00:00:37,140 --> 00:00:39,450 a withdraw method to withdraw, 14 00:00:39,450 --> 00:00:42,300 and a getter to return the balance. 15 00:00:42,300 --> 00:00:45,240 Okay, so that code is the same as before. 16 00:00:45,240 --> 00:00:46,230 What we're gonna do now 17 00:00:46,230 --> 00:00:48,810 is see how to write more comprehensive tests 18 00:00:48,810 --> 00:00:51,540 in back-account.spec.ts. 19 00:00:51,540 --> 00:00:54,150 So I'll give you a quick summary here of what's going on 20 00:00:54,150 --> 00:00:56,790 and then we'll go through the deep down. 21 00:00:56,790 --> 00:00:58,800 So we've got two tests. 22 00:00:58,800 --> 00:01:01,290 I've got a test for the deposit method 23 00:01:01,290 --> 00:01:03,147 and the test with the withdraw method. 24 00:01:03,147 --> 00:01:05,550 And I've got some code that I want to execute 25 00:01:05,550 --> 00:01:07,860 beforeEach test is executed. 26 00:01:07,860 --> 00:01:10,800 Okay, so let's take a closer look at that code. 27 00:01:10,800 --> 00:01:12,360 That was my class 28 00:01:12,360 --> 00:01:16,350 and here's my comprehensive tests for the BackAccount class. 29 00:01:16,350 --> 00:01:17,550 So from the top, 30 00:01:17,550 --> 00:01:22,050 import the BackAccount class from back-account.ts. 31 00:01:22,050 --> 00:01:25,053 This test suite is for the BackAccount class. 32 00:01:26,190 --> 00:01:29,130 Typically, each test needs to create a new object, 33 00:01:29,130 --> 00:01:32,460 a new fresh BackAccount with a zero balance. 34 00:01:32,460 --> 00:01:33,750 This is the kind of... 35 00:01:33,750 --> 00:01:36,900 Each test should be independent of every other test. 36 00:01:36,900 --> 00:01:39,360 In other words, create a new object every time 37 00:01:39,360 --> 00:01:42,240 so that it isn't encumbered with any history 38 00:01:42,240 --> 00:01:44,010 from the previous tests. 39 00:01:44,010 --> 00:01:47,010 So I've implemented the day beforeEach method. 40 00:01:47,010 --> 00:01:49,590 I've got a variable here in my test suite. 41 00:01:49,590 --> 00:01:53,580 I've defined a variable which will point to a back account. 42 00:01:53,580 --> 00:01:56,490 beforeEach test, I run this code. 43 00:01:56,490 --> 00:01:58,920 I basically create a new BackAccount. 44 00:01:58,920 --> 00:02:02,100 Oh, it's me. I have 1,000 pounds. 45 00:02:02,100 --> 00:02:04,170 So each test will basically start off 46 00:02:04,170 --> 00:02:06,180 with this fresh back account. 47 00:02:06,180 --> 00:02:08,673 The initial balance will always be 1,000. 48 00:02:09,990 --> 00:02:11,910 Okay, very nice. 49 00:02:11,910 --> 00:02:15,690 Let's check, this test here is testing the deposit method. 50 00:02:15,690 --> 00:02:17,880 Does the deposit method work? 51 00:02:17,880 --> 00:02:19,470 Okay, well, let's see. 52 00:02:19,470 --> 00:02:22,500 I've already created the BackAccount. 53 00:02:22,500 --> 00:02:24,720 I invoked the deposit method. 54 00:02:24,720 --> 00:02:29,070 Let's verify that after, the balance should be 1,200. 55 00:02:29,070 --> 00:02:34,070 So this expect and to be, very much like Jest, isn't it? 56 00:02:34,290 --> 00:02:35,790 Very similar. 57 00:02:35,790 --> 00:02:38,520 Remember here, when you say acc1.balance, 58 00:02:38,520 --> 00:02:40,920 that's calling the getter. 59 00:02:40,920 --> 00:02:43,680 My BackAccount class has a get balance property 60 00:02:43,680 --> 00:02:45,030 to return the balance. 61 00:02:45,030 --> 00:02:46,893 It should be 1,200. 62 00:02:47,820 --> 00:02:50,970 Likewise, let's check that the withdraw method works. 63 00:02:50,970 --> 00:02:52,483 Again, it'll run this code first. 64 00:02:52,483 --> 00:02:55,320 beforeEach test, it'll create a new back account. 65 00:02:55,320 --> 00:02:57,390 So I'm back to 1,000 again. 66 00:02:57,390 --> 00:02:59,400 If I try to withdraw 200, 67 00:02:59,400 --> 00:03:03,060 then when I get the balance afterwards it should be 800. 68 00:03:03,060 --> 00:03:05,520 Everything we've learned so far about Jest 69 00:03:05,520 --> 00:03:08,580 in terms of matches and expect functions and so on, 70 00:03:08,580 --> 00:03:10,650 we can still use using Jasmine, okay? 71 00:03:10,650 --> 00:03:11,493 So that's great. 72 00:03:12,450 --> 00:03:15,270 So what we need to do then is to run the tests. 73 00:03:15,270 --> 00:03:16,443 So a couple of things, 74 00:03:17,310 --> 00:03:19,800 just if you wanna follow along with this. 75 00:03:19,800 --> 00:03:24,800 First of all, make sure that you do an npm install, okay? 76 00:03:25,260 --> 00:03:27,390 Because then the zip version of my project, 77 00:03:27,390 --> 00:03:30,330 I delete the node modules folder because it's too big. 78 00:03:30,330 --> 00:03:34,410 So if you wanna follow along, npm install, 79 00:03:34,410 --> 00:03:37,830 and give it a few minutes to download the libraries. 80 00:03:37,830 --> 00:03:41,130 Once you've done that, then you can run the test harness. 81 00:03:41,130 --> 00:03:45,600 You say ng test in watch mode, like that. 82 00:03:45,600 --> 00:03:50,040 Start the Karma test runner. It'll compile your code. 83 00:03:50,040 --> 00:03:52,500 It'll start Karma. 84 00:03:52,500 --> 00:03:54,390 It'll open up a browser window, 85 00:03:54,390 --> 00:03:57,930 run the tests, display the results in the browser window. 86 00:03:57,930 --> 00:03:59,670 Okay, so we can get that going now. 87 00:03:59,670 --> 00:04:00,930 This is what it's gonna look like. 88 00:04:00,930 --> 00:04:02,880 That's the command I just ran. 89 00:04:02,880 --> 00:04:04,950 Give it a few moments. 90 00:04:04,950 --> 00:04:08,310 In the browser window you should see this, okay? 91 00:04:08,310 --> 00:04:11,790 So we should find, my app component still has some tests 92 00:04:11,790 --> 00:04:13,710 that we do need to have a look at, 93 00:04:13,710 --> 00:04:17,610 but my BackAccount suite had the deposit test method 94 00:04:17,610 --> 00:04:19,350 and the withdraw test method. 95 00:04:19,350 --> 00:04:21,000 And that all seems to be working beautifully. 96 00:04:21,000 --> 00:04:22,500 So that's quite reassuring. 97 00:04:22,500 --> 00:04:24,690 Everything we've learned so far with Jest 98 00:04:24,690 --> 00:04:26,850 applies equally well with Jasmine 99 00:04:26,850 --> 00:04:28,850 when we're testing Angular code as well.