Angular 9 Tutorial For Beginners #69- Angular Unit Testing

hi friends welcome back to our tutorials we are continuing with our angular 9 full tutorial series and in today's episode we are going to learn about how to execute how to run unit tests in angular we have seen in the previous episodes about some fundamental concepts about angular testing and the frameworks that are supported by angular in the previous episode we did learn about some few concepts like how to identify a unit test file how to identify end-to-end test file where are the different configuration files etcetera so make sure you have check it out the previous video in order to have a continuation of your learning welcome back my name is shredder I have over 10 years of experience as a full-stack developer I'm here to share my knowledge with you all I am also here to learn from you all so during the course of this tutorial series if you have any doubts any queries on the code samples or the explanations covered in this tutorial or in the series please do let me know I'll be happy to help you I am putting in a lot of hard work in bringing these tutorials for you so I'll really appreciate if you can support me by subscribing to my channel and liking the videos thank you in advance this is part of the angular 9 full tutorial playlist where we have now close to 66 tutorials which are covering from basic introduction to the advanced concepts make sure you check out the link the link is in the description box below if you really want to learn and master angular 9 so we are curva covering this mini-series on angular testing where today we will learn about running and executing unit tests like I said the focus of this mini-series is only about the angular testing utilities I will still soon be starting a new course where I will cover end-to-end angular testing unit testing writing with protractor Jasmin karma in order that would be more technical in depth so wait for that and watch out and stay tuned for that so today's topic is about how to run unit tests so unit testing is a type of testing where the focus of the test is to test a particular small piece of the application the test is usually good when you are testing a smaller pieces like components module services pipes etc this allows us to test that particular feature only right that particular functionality only so we are not worried about the big picture here we are only worried about running the individual pieces angular has a native support for testing unit tests and in the previous episode we have seen that you can identify a particular unit test when it ends with dots spec dot ts file so today we will see how to run them how to see the output how to configure them so let's get started I will open up the browser and these are the notes from the last episode we made on angular testing make sure you have gone through it just to give you a high-level recap unit tests will always end with dot spec dot tsn2 and we'll end with dot e - E - SPECT or TS right so you can see there would be so many spec files in your app with these are all the unit tests because it's inside the app folder but e to e will be at the one root level up above source under e to e so we'll see that learn how to execute it in the next episode today we are focusing on unit tests so let's navigate to the project folder once you are here now the command that we will run to the command will run to execute our unit tests is the command we will run to execute our unit tests is ng space test ng space test will run your unit tests right so I have mentioned it here to execute our unit test so remember to run our unit test will write ng space test hit enter and you will see that it will first compile right the application will first compile to check if there are any errors for compile for errors and then we'll execute the unit tests it's building it will compile and you will see that it will open up a new window I will explain that in just a bit once it loads so it's building in the meanwhile if you're liking this video give a thumbs up to the video alright so if you see here it says karma server started right so carefully noted it says karma server started right karma server started it said and it gave a port number right gave a port number that is nine eight seven six that's the default right so let me show you at the top first that's ok you will see errors it's your bound to see that if you don't see then it's a problem okay so karma is the runner right all our all our test scripts are written in jasmine remember this is extremely important information always asked in your interviews okay so make sure you understand this concept really really well right so so unit testing unit tests I'll make some notes here for you quickly this this has lot of information so I am taking time to write it down all for you please make sure you follow this color cream now all the tests are written in Jasmine all the unit tests are executed or run using karma so karma is a runner right your test script Runner test scripts runner okay the default port where it executes is nine eight seven six that's the default port number that all unit test runs on all right and we know that to run to run unit we will use the command ng space test right and what it will do is the application will be compiled when you run this right and let me clean it up okay now it's clean to run the unit test we will use the command ng test and then the application will first compile for any errors okay and then we'll execute the unit test all our unit tests are written in Jasmine framework which is nothing but a bdd framework right beauty that is behavior driven development all our tests are executed right karma is a small star which is used to execute that tests right the default port that it runs is nine eight seven six right now let me show you that so see this is the now let me show you that how to run it okay so once you have done it it will give you this report that it has failed or it has started or it has not started so let me close this again and show you that so I'm going to do ng test and we'll see that it will give you the output oh let it run for a while again let's build it in the meanwhile make sure you are going through the notes understanding it correctly if you are liking the video hit the like button okay all right so let it build so it opens up this runner can you see that 9 8 7 6 is the default port it opens up a new window automatically and it says chrome is controlled by automated test software so it's executing the test in the background you can see here you can see it here it's executing it started the browser now it's executing right it will give you the output now let's let's wait for it so now importantly let's understand this for a bit if you see green that means it has passed right it will open it will open a new window right now window window of a browser now let's wait here for a minute the browser's supported our Chrome Firefox Safari and I right we can choose and configure which browser be warned to work with ok we have that freedom clear so far now that it's clear let's move on make some more understanding notes of it so you see this is the output now when you take the mouse over this green bullets that means green bullet in the report means the test has passed right red color X mark x mark means that test has failed okay that is what this means so if you see this report it says this has passed this has here it has failed one and you can see the count here right so it says total you can in the summary reply in the summary line we can see counts of total test specs failed a passed and skipped right so we can see here that it has 27 total test specs 10 has failed right and it will give you the failure report with the root cause right why it has failed it will give you that root cause right and you can see here it is running karma version 5.5 so and it is running jasmine 3.5 right so you can see this is the report that will you will get when you get when you run ng test right I hope it's clear so far I hope there are no doubts do not worry about do not worry about failed test cases now I will soon I will soon soon share tutorials on how to fix the test scripts okay so don't worry about that for now for now all you have to focus is on the unit testing using the tools and the utilities so till so far I think it's all clear to you and you know how to see how to run how to see and how to analyze this report now that you have done it now let's see some options right so what are the different options we can use so I told you we can configure the browser we can configure the code coverage we can configure the port we can configure the environment that we have right so let's see that now quickly alright so I told you the configuration file configuration file for unit tests is under source slash karma slash con dot JS file okay so let's go and explore that file so we have the file here right so you see here now this line here we are saying karma chrome launcher so in this is using Chrome right if we want to use right if we want to use Firefox or Safari or any browser we need to import we need to import that life okay and how do we do that we do that by saying we copy this paste it here and say karma Firefox launcher so this will use Firefox similarly if you want to use Safari you will have to install this right once you have done it you do a npm install after this and it will install the libraries right it will install the required modules so far clear so we are saying we can count we know how to configure the browser now the next thing here you see the port number the default is always nine eight seven six that was that is what we learned here right so we can change the default port in Carmen dot J's file right you can give any port that you wanted to run here similarly you will have to add here Firefox which all browsers it has to run right so here you will write Firefox if you want to run it in Firefox right where all do you which all browsers you want your app to run on you can configure that list in the browsers array right so you can configure that also and you can also mention progress should be true or false and those things right so we can pass them as param Zin the execution code so I'm going to show you we can also pass patterns in our CL like come on itself right so I'm going to close this here okay I'm going to close this here and I'm going to change this to nine eight five six you can give any port we can give any port number we want okay so there is no hurry on that so I'm going to take this out and I'm going to use only Firefox now okay so I'm going to comment this line here I'm going to comment this line here this is to show you how to do okay I'm giving you an example of how to run you can do any browser you want okay so this is the example let's do a hands-on on this okay example now once we have it here then to npm install karma firefox launcher right that's what we want so i'll do a npm install and you will see that it will install whatever is required let's give it a minute in the meanwhile I'll request you again if you are liking the video hit the like button alright let's give it a minute it should be done soon because it has to get all the dependencies also that are required of that particular module so let's wait for a minute it should be done soon so don't worry about if you get these errors of unable to issue local certificates that's not up to that's not what we really bother about so yeah so let's say ng test now so now we are starting on Firefox because I have told it that you require karma Firefox and run it on browsers Firefox so now it keeps giving me error that it cannot find the module right so let's install and get that module for it okay so let's do that here it's a npm install karma firefox launcher let's give it a minute it should find it we should see that in our package if it's added so we see karma Jasmine jasmine karma launcher so we see karma chrome but after this we should see a karma Firefox launcher as well right there is some issue I believe let's just refresh this and see if it installed karma no it didn't install okay okay so he did installed it yeah so we see karma Firefox's launcher is there so we are good to go now let's do an energy test so earlier it did not find it now it should find it and it should execute it in Firefox browser and the port number also we have configured the new port which is now nine eight five six again like I said you can give any port number you can use any browser you want that's up to you some people prefer Safari ie that's fine it will support up to last two versions of ie ok so there is some Firefox cannot is installing updates will start so this is specific to my machine I don't see a reason why it should not work in your machine so make sure that whichever browser you are working you get the point you get to see that it will automatically open up that particular browser and it will show you output is running but not responding must be closed close Firefox ok so we see that you know it is opening up and it has done the execution so but it did not open up because there was some issue with my Firefox old version I'm sure you will not find it in your if it's up to date I'm I use Chrome heavily let's try one last time so it's interesting there are so many things that you can configure with CLI you can do so many things with C so now it opened up the Firefox browser and it will execute and we'll show the simile same report it will not be different the only difference here now is that we are using a new browser you are using a new port number that's all so this is now you see here it opened up Firefox it is now running on nine eight five six right and the report is same only difference here now is the browser right so this is important when you want to run and test your application in multi browsers right it's good to test it's good to test in multiple browsers multiple browsers especially especially if you are doing responsive web apps alright and now Lex let's see some of the options that we can use with command line right so I'm going to show you some of the things you can instead of configurating in karma you can directly pass it also like you can say ng test - - browser equal to chrome right so this is something that we can configure and say let's check the spelling okay so let's check one okay it's browsers sorry it's browsers equal to chrome so - - - browsers equal to chrome that's the command that we will run to launch Chrome but then it will first check if it has that enabled or not in our case it may not find it but let's see so similarly like how you can pass - - browsers you can pass code coverage karma main file configuration file if you want to pass progress equal to true or false so these are different options that we can use with ng tests but most of these instead of passing it in to the command line we always configure it in karma dot J's right so you see it says cannot load Chrome because perhaps it's missing plug-in right because we have commented it out here right so if I open it I can have multiple browsers right and now I will add here also so now I'm enabling my app to run on Chrome and on Firefox right so you can pass it like this now now it will work again in chrome so you get the point we have told them that which all browsers to run this is that option from CLI we are passing it here here you see chrome equal to that's the same what is here so these are the different options you can pass via the command line or using contract so there are different options we can pass to CLI command param the best and good idea is to always have these settings in karma on dot JS file okay however that being said there are times when you want to pass theorems to CLI command because of these reasons like one reason I can think of it is indirectly if you are if you are running your tests in the in the build pipelines right in bitbucket or stash or something it's useful if you want to pass dynamic values in the pipeline so that's up to you basically how you want it to behave and how you want the test to be done right so this is all about unit tests that you should be knowing my friends in the next episode I will cover about how to run and details about end-to-end tests stay tuned for that I hope you're liking the video if you do please give the like to this video and don't forget to subscribe to my channel thank you so much see you in the next episode

Channel: ARC Tutorials

Views: 34,190

Keywords: Angular 9 tutorial for beginners, angular 9 tutorials, angular tutorials for beginners, angular interview questions and answers, angular live projects, angular 9 crash course, angular 9 tutorial for beginners step by step, angular tutorial for beginners 2020, angular tutorial 2020, arc tutorial angular, angular code examples, angular for freshers, angular tutorial for experienced, angular unit testing tutorial, angular unit test example, angular 9 unit testing tutorial, ng test

Id: 7WSMvufDh7s

Length: 23min 45sec (1425 seconds)

Published: Fri Jul 17 2020