1 00:00:02,140 --> 00:00:08,440 For this I prepared a little starting project which of course find attached to this video and you can 2 00:00:08,440 --> 00:00:16,460 simply download that, run npm install in the extracted folder to set up all the dependencies I have here, 3 00:00:16,570 --> 00:00:21,670 I don't have many dependencies, I only use webpack and then we have a very simple application here in 4 00:00:21,670 --> 00:00:28,720 app.js, a Javascript application, frontend Javascript where I import some stuff and then have some 5 00:00:28,720 --> 00:00:34,620 code to basically setup an event listener to a button and add a user to a list of users 6 00:00:34,630 --> 00:00:41,860 when we click that button. I got util.js which holds the functions and importing into app.js 7 00:00:42,280 --> 00:00:48,100 I'm using Node.js modules syntax here simply because that's a bit easier to test and doesn't require 8 00:00:48,100 --> 00:00:53,820 a complex build workflow setup, on which I simply didn't want to focus on this video but I use webpack 9 00:00:53,880 --> 00:00:58,980 to then bundle this all up and get a main.js file which is the file we then use. 10 00:00:59,060 --> 00:01:02,110 Now what you can do is you can simply double click index.html, 11 00:01:02,230 --> 00:01:09,610 I got no dev server in place here or anything like that, simply to not focus too much on the frontend 12 00:01:09,610 --> 00:01:10,870 workflow 13 00:01:10,870 --> 00:01:13,730 and if you did double click on that file, this is what you'll get, 14 00:01:13,750 --> 00:01:18,240 you can enter some data and add a user and that is all we can do here. 15 00:01:18,280 --> 00:01:23,680 So it's a relatively simple app but that is great for starting with testing because we can easily confirm 16 00:01:23,710 --> 00:01:25,300 if our tests make sense, 17 00:01:25,300 --> 00:01:29,470 if they do test something we would test manually as well. 18 00:01:29,470 --> 00:01:35,950 So this is the application and now let's write some tests. Now for writing tests, 19 00:01:35,950 --> 00:01:39,300 we need some tools to help us with creating these tests. 20 00:01:39,400 --> 00:01:40,750 What do we need? 21 00:01:40,750 --> 00:01:43,840 We typically need three kinds of tools - 22 00:01:43,840 --> 00:01:49,630 we need a test runner which is simply a tool that executes our tests and summarizes the results and 23 00:01:49,630 --> 00:01:54,930 gives us some output on the results, we can use something like mocha there, 24 00:01:54,970 --> 00:01:57,190 that is a popular test runner. 25 00:01:57,250 --> 00:02:02,980 We also have assertion libraries and there we define our tested logics, our expected outcomes, 26 00:02:02,980 --> 00:02:10,390 so these assertion libraries give us tools to define expectations, to define comparisons, conditions we 27 00:02:10,390 --> 00:02:17,920 want to check as part of our tests. There Chai is common or a popular assertion library, though what 28 00:02:17,920 --> 00:02:24,780 we will use is a very popular library both for running tests and asserting and that is jest, jest 29 00:02:24,790 --> 00:02:26,620 is relatively new 30 00:02:26,620 --> 00:02:33,940 or at least it was rewritten not that long ago and it's a very popular library for writing tests because 31 00:02:33,940 --> 00:02:38,980 it is both a test runner and an assertion library and it's really powerful and a lot of fun to work 32 00:02:38,980 --> 00:02:42,930 with. For end-to-end, 33 00:02:42,940 --> 00:02:48,370 we also sometimes need a headless browser, so basically a browser where we don't have to click manually 34 00:02:48,410 --> 00:02:50,530 but where we can use the browser API, 35 00:02:50,530 --> 00:02:57,040 the DOM and so on without a user interface necessarily because we'll analyze it in code anyways and 36 00:02:57,070 --> 00:03:01,020 there we can use puppeteer which is a very popular solution for that. 37 00:03:01,150 --> 00:03:06,640 We need that headless browser mostly for end-to-end testing whereas the test runner and the assertion library 38 00:03:06,850 --> 00:03:13,830 are also needed for that but also then are the only things we need for unit and integration tests. 39 00:03:13,830 --> 00:03:20,300 Now let's start with jest and with unit tests and you can simply google for Jest to find 40 00:03:20,380 --> 00:03:20,740 jestjs.io, 41 00:03:20,750 --> 00:03:27,720 the official web page of jestjs and there, I can only recommend trying that out, getting started, diving 42 00:03:27,720 --> 00:03:33,420 into the official docs to learn way more but of course I'll also walk you through all the basics in my videos 43 00:03:33,420 --> 00:03:33,960 here. 44 00:03:33,960 --> 00:03:41,100 So we'll start installing Jest now and for that, let's switch over to our project and in there let's 45 00:03:41,100 --> 00:03:49,200 run npm install --save dev just because jest will be a development dependency of our project 46 00:03:49,440 --> 00:03:55,350 and it will be the tool we use for running our tests and for checking our outcomes or for writing some 47 00:03:55,350 --> 00:04:03,090 conditions, some assertions as it's called. So this will now install and with it installed, we can write 48 00:04:03,150 --> 00:04:07,920 our first test and I will write my test for functions defined in util.js.