Angular 5 Unit Testing with Jasmine Karma and Protractor

okay so nowadays it's so important to write your own test as a developer so if you like if you build any feature angular you need to write unit tests exception tests and integration tests and possibly enter in tests using selenium but this tutorial is about intro to unit testing we're gonna look at protractor jazmyne syntax and karma where we can have the same test running on multiple browsers we're gonna learn how to configure them set it up and we're gonna write some unit tests including tests a service function and welcome to tech see tutorials [Music] in angular if you build your application using angular CLI you will have the whole test rember configured for you so you'll have the protractor jazz Ming and akarma available to you protractor basically helps you run your test against your browser you don't no longer have to add load those weight function and sleep function in your test it will automatically figure out when what step finishes it would run this the next step jazmyne is your behavior driven test environment so you're gonna be writing your tests in Jasmine and Jasmine will allow you to structure your test code properly and lastly karma will help you run these tests in multiple browser sometime at the same time so basically you write your tests in Jasmine it will run in protractor and it will allow you to do multiple browser using karma so that's in nutshell all right so let's start with building an app so I'm just gonna go to command line and if you don't know how to create a product using angular CLI have a tutorial on it and by the way this is a part of the much larger series and angular so I'll provide a link to the playlist here so a nutshell what do you do when you say ng knew that with a new project and I'm just gonna call it ng v jasmine karma test or something like that okay alright so it has created a project from for me so I'm just gonna go inside so I'm gonna do a CD ng karma test and I'm gonna open the code I'm using an item by the way first let's look at the protractor configuration so at the root level you'll have a protractor config dot Jas and it will have some basic configuration available to you for example your base URL where the project's gonna be loaded some default interval time and all that stuff but you need to know that if you were to chain something you go here and change it and then you will have your karma configuration so here it has some plugins for example it has a Jasmine plug-in a chrome launcher is less if you want to use Firefox you need to use a Firefox launcher we'll try to do that when we come to that point and here your how many browser you're supporting right now it's Chrome but you can add more here too so I would suggest it go and look at look this into more detail and play around with it and that's how you learn I run this thing by doing ng serve - - open so now you have welcome to app title here it has already some tests written for it so if you go to app component dot spec TS this is how protractor understands that there is a test written for it it's looking for specs spec dot TS file and if I look at the the file it simply is trying to actually check if that welcome to app is there or not and if I run the test all you have to say is ng test and it opens a karma and I can see that it has three tests which have passed now let's create our own test we're gonna look at these tests later on but I want to focus on how to write tests from scratch so I'm going to go in the app folder and create a new file and I'm going to call it hello test dot spec dot t-- s remember it has to be well it's actually spec dot TS so that protractor would know that this this test needs to be run so now first thing I need to do is I need to create the the page and because this is a hollow test page so I would call it using describe so I would say describe and I would name my test hello and inside you would have a callback function so what I'm gonna do I'm just gonna have to string and I'm just gonna compare them which is the way you ride the test and you would say it and write the name of the test here so it's a it checks if hello test is hello test and then you're gonna write the test so in the callback function expect so this is what you're expecting expect this string hello test dot to be and I'm going to say hello test so basically what is doing is is trying to compare this string hello test with hollow test so this is a simple syntax you need to understand so if you read this test it's pretty simple it checks if hello test says hello test so where you expect hollow test to be hello Ted so now let's run this test all right so it says this has already passed because previously we had three tests now we have hollow test which already passed now if I I do now if I instead of hollow test if I do this expect how it has to be hello test one then it's gonna fail because they are not the same so if I save this all right say it failed it says hollow test to be hollow test one has failed because there it's comparing the text let's say if you want to compare something something is not something expect something is not something right in that case and I'm gonna write in a second line here and this time I'm going to say hello test is not hello test okay so if I do some others text then I can use dot not so I would say expect hollow test dot not to be hollow test one two three so this would pass because they are not supposed to be equal on both sides of not to be so if I save this oh they're both passing this time now having this text is not a good idea because let's say if you want to have the same text happening in multiple tests then you should have a variable that you can save this text into and use a variable everywhere else so if we want to do that then you need to use this variable into a special function which would be call before each so I would say and inside I would have a callback function and here here I would create a variable call expected equal to it would be this hello test now I need to define this variable and I would define it outside here so I would say let expect Ted equal to an empty string so initially it's empty string and before I run each test it should set expected equal to hello test now I can use as expected instead of here and if I save it and run it it's passing and similarly I can say let not expected equal to also an empty and here I can set the not expected equal to this guy hello test one two three and replace this with not expected and also what I want to do is after this test I want to clean up this variable so I have another function call after each but instead of setting of the variable it's cleaning of the variable so it would simply do this now let's say if you don't want to use like the fix to be expected and you want to use a reg X so that you can say it starts with Hello something so we can write something like this so I'm just gonna copy and paste and I would say check if hello hollows test it starts with something like this so here instead of to be I can use to match and what I'm trying to match so here I would have a regex so what I'll do I'll create a variable here for regex and I would say let expect a match equal to no because it would be an object right it's not a string and I can say expect match equal to new if you know regex you have to use new reg reg X and here I would say I believe this is the right syntax if I'm making mistake I'm sorry okay so now I would use this expect match and here so it would try to match if this is starting with hello all right so it does matches let's see if you don't want certain text tests to run then all you have to do is put X in front of it and when you do that and when you do that as you can see it's it did not run this as you can see it's not green you can see here only three when instead of six because I said not to run by putting X in front of the scribe which is very useful sometimes you would say only run this test and ignore all other tests because you wrote this one test and if you want to test it out you don't want to run the entire set of tests every time you change this right right now we have only like six tests so it's not a big deal but if you have thousand tests it could take a long time right so all you have to do is put F in front of whichever test you wanna force run and ignore everything else it would run only hollow test and it would ignore the all the app tests as you can see it's the hello test are green now the objective of a unit test is to test a particular function particular functionality in its isolation so in order to do that let's create a service with a function to have a new service I can use angular CLI so to say ng G means generate and service and I'm gonna call it test that's all and it will create a new service for me and it would actually create a test for me as well so here it created test service which is empty and it has a test service spec so now let's look let's go into test service and write a simple function alright so inside this service I'm just gonna write a add function so add function takes two numbers a and B and it would simply returns a plus B alright now if we go back to the service test let's look at it in detail the first thing you would see is import function so you would need a test bear so this helps you if you have a service you need to inject it inside the the chest so you can use it right so you would have a test Bend and it's actually part of the angular core and then you need to import the service that you're testing which which we just created test service and remember we looked at the before each function who all it does is before running every test it needs to do something so in this case we need to actually inject service for every single test we'd won you would take the test bed which is this and you would say configure the testing module and you set the provider so when you when you have a service you need to have a provider which should have should be it should be created which means the service should be created so before you test the service you want to make sure the service is there right so it injects the service service our the test service and it expects the service to be true T to be true females is it there or not if it's null then it be false alright so now that we have a service let's write some more tests so we can test that add function so first thing we want to make sure that there is an add function right so we can say it as you expect it it says say should have add function alright so here I can say expect service dot add because service has add function and here I can say to be true T all right it says it should have add function let's say if I say and one which doesn't exist it should fail alright so as you can see it's failing now the second thing we want to do is now that we know it has add function it should add correctly so I can write another unit test say it should add correctly so here in sort of to be truthy I can actually execute this function add function so I can pass one and two and now I can say to correct so basically if you pass to one into it you expect it to be three all right so it works correctly alright so lastly what we want to do is we want to configure karma so when we've done our test it would run both on Chrome and Firefox and you can configure other browsers as well if you want to so I'm just gonna do for two browsers so if I go to karma config gs here inside the plugins I would need to have another plugin called so require and I would say karma - Firefox launcher and I would also need to add in the browsers I would have to have Firefox however this plug-in is not automatically available so you might have to npm install it go to my console and type this npm install karma Firefox launcher - - save - death so it's a ng test now it should open for both Chrome and Firefox I made a mistake I should say karma not Caramon okay now if I run it all right so it has open in Firefox and Chrome and both are passing okay I'll put this project onto my git and provide a link in the description so you can download and play around with it and I hope you learned something from this tutorial and if you did please like like like the video and provide a nice comment thank you you

Channel: techsith

Views: 96,941

Rating: 4.9243455 out of 5

Keywords: angular 4, angular 5, angular 2017, angular 2018, angular tutorials, angular lessons, angular training, angular unit tests, jasmine, karma, protractor, e2e, techsith, techsith.com

Id: D6qPDww2X8k

Length: 17min 32sec (1052 seconds)

Published: Mon Dec 11 2017