Unit Testing in Angular

hello you can hear me killer clearly yes yes you can hear it yeah yes yes so my name is joel and i'm a developer based in nairobi kenya we'll be going through you need testing using angular today let me share my screen [Music] uh i prepared this small app i don't know if you can see my browser are you able to see my browser yeah oh yeah so it's a simple app with a form and uh at least that is mocking up uh getting data from uh from an endpoint from a service so you'll be testing this section the form section and testing data that's coming from a service so my presentation is on i uh i compiled everything on this repo and i will share it to anyone who is interested [Music] is there someone i can share if some is there someone i can share so that if someone wants to follow along it's easy um yes yes yes so you can just um if you have either of our contacts you can just damage to us or you can even game it on me uh on twitter and then i can just uh tweet it so that anyone can just access it okay i'll shift after the presentation yeah sure no problem okay so uh let's start by where you need test uh i've come to realize that if you have a big project if you're working on a big angular project unit testing is the critical part of the development process and it has several benefits that i'd like us to have a look at i don't know if you can see is the black to black or okay let me make it white actually i think i'm okay with it cynthia are you okay with it is this better yeah i think that is good what do you think cynthia i think that was working just fine all right so let's look at some of the benefits of having tests one of the big benefit is it improves the design of our implementations as developers we at times after getting the brief we go ahead and start building immediately instead of thinking through the whole process the whole is a journey and we at times uh get blockers that you didn't anticipate but if you if you are making tests especially if you use the tdd methodology whereby you start by writing tests and then write code to pass the test you'll find that you will minimize these unforeseen challenges that may come as you develop another benefit is that when it comes to refactoring if you had written tests while you're building you'll find that refactoring becomes very easy as you are going to you'll be able to see any bug you'll be able to notice any bug very fast unlike someone who who doesn't have tests another benefit is that it allows it it allows us to add new features easily without breaking things uh this is as simple as that when you're adding a new feature you can run the test to ensure that nothing has broken another good benefit of having tests is that they act as a good documentation uh if a new development is joining the project if the project is well it has very good tests it's very easy for one to get up and running very fast because all the logic is explained on the day another benefit is that you're confident with your work as you will see you'll be able to run your tests before you publish or before you you [Music] take your product online so when they're when they when you run the test and the pass you will be confident that what you are pushing is bug free it will not break anything and yeah that's that's another big benefit another benefit is that bugs are found easier and quicker uh the same once you run that once you run your test you'll be able to identify the bags very easily there are some people who argue that having tests takes a lot of time but i've come to realize that if you take the time the short time that you take to write the test compared to the amount of time that you'll be trying to look for bugs resolving bugs later without tests you'll find that if you have the test especially for very big projects uh the skills of an example uh like amb for it airbnb for instance if you have tests for big projects you'll find that you'll spend way less time solving the bugs compared to if you if you didn't write the tests so for for our case in angular there are two popular tools that the angular community uses one of one of them is camera and the other one is just me uh once you have the link to this repo you can click on this and it will take you to the official jasmine site and you can read more about it we'll just uh go through it lightly so jasmine is a is a is a framework is a framework for testing javascript code it attempts to describe text in a human readable format so that non-technical people can understand what is being tested [Music] that's just me it's a framework that we use in angular and it's the framework that you are going to use to create the test for this meter the other tool that's used a lot with angular scanner and karma is at a strana at a scram for our tests sorry karma is a task runner for a test so what this basically means is that karma let us run jasmine test as part of a development tool chain which requires tests to be runnable and results inspected via the command line so i'll show you exactly how this works uh once you run ng test on the command line you'll be able to see camera track and you and it will open a browser where you you will be able to see all the tasks that uh that you you've created whether they've passed or they failed so for a simple demo today this is how you you create your app if you don't have angular installed just type this command mp install angular cli and then create your angular app it doesn't have to be ng unit test it can be any any name you want and once once you've done creating uh your angular app using the angular cli a very beneficial thing happens around the this one can you see my vs code um no no no what are you seeing now oh it's in the browser i want to share my i want to show you the yeah you can see okay okay okay so once you generate your angular app without without writing any code this is done automatically on the packet.json uh file it automatically generates for you all the jasmine and comma files that you'll need to to generate your tests so this is everything that you need for your test starting from jasmine core to come a jasmine html reporter so that's everything you need to create angular tests another important file i would like us to look at is the comma configuration file on the comma configuration file we we specify the framework and in our case we are going to use jasmine as our testing framework we specify the reporters and there and then we set auto watch to true this means that if you change any text and save the file the tests are rebuilt unrela and reliant sorry the tests are rebuild and rerun hey re-run and rely on automatically that word and another another if another important thing i wanted us to look at on the camera configuration file is the browser section this is where you set up the browser that you want to run your test on default is by default it's chrome but if you if you use safari mozilla you can set all that up so the karma file is this one comma config.js so [Music] jasmine frameworks this is where you set up the frameworks i hope you can see this this is how you set up jasmine and then you set up the reporters auto what you set it to true so that once you save it automatically reloads and reruns the tests and then this is where you set up the browser for a case i love chrome so i'll be using chrome another file that's important for testing is the test entry file uh the angular cli configuration of karma uses the file test.ts at the entry file of tests for applications so this file is this one here tests.tears so what happens on test.ts so the first thing is an environment to run angular test is is created using the imports this imports i hope you can see the the imports so after the the environment to run angular test is created testbed is initialized and then camera loads all the test files in the application so comma checks for any file that has spec.ts and considers that as a test so any file that has spec.ts i i'm sure if you've run if you created components ng createng g that command for creating a component we always have that spec.ts file so any file that has that extension camera load this as a test file and and yeah load this as a test file so those are the uh the files that you should be aware of that are very important when it comes to [Music] testing in angular so the first simple test i would like us to go through is on the app component so i've created a few simple test on the app component so the app component so here we are going to [Music] let me open the app component so this is the app component are you sharing your uh your uh your vs code emma yes yes uh okay probably i can't see it on my end can anyone see his vs code [Music] okay so i'm switching between the browser and the vs code the browser is my slides and then practically be on the vs code okay so on the app on the app component we will first import all the angular testing tools that we'll be using for this specific component and then you import all the dependencies that the component has and then we use describe to start our test block and then we will use a sink before each and the purpose of the async is to let all the possible as asynchronous code to finish before continuing so let me show you this uh for importing all the angular testing tools this is where we import the angular testing tools this is the describe i was talking about and then this is the i think uh i'm talking about so after after defining this section this is the first auto-generated test when you are creating an angular when you are creating a an app an angular ah an angular component this test will be created automatically this basically tells us that once it runs it tells us that the component has been initialized and to see this [Music] this test in action you run let me delete this and then start it iran ng test and you run in the test it will so this is comma track and it will show how many tests have passed how many have failed so all our tests have passed for now we'll pass we'll go through the other test but i wanted to show you uh simply how to run the the test so you'll run using this command ng test and once you run it uh comma will show you the results on the command line and also you'll it will open for you a browser with all the tests that you had created for uh for a case let me zoom this for our case we are still on the app component so we are we are we are looking at this desk we are looking at this test should create the app so this means that this is the test that checks that checks to see that the app has been initialized so let's have a look at the other two tests on the app component so the the second test this test here this test this [Music] this test will be will be checking this for this test this test will be checking that i will be checking to see that this angular unit testing is displayed on our template on our html so on the component we have this angular unit testing defined on the ts file and then we want to test and check that once it runs it is displayed on html let me show you when you come back to the app component this is the ts file and this is where we define the angular image test and now you want we want to test that once we run this component on the html let's minimize this on the html this title the text that will be generated here will be angular unit test angular unit testing so if that if we run this app we see that on the browser we get angular unit testing so the welcome is here welcome to angular unit testing so welcome to title and this title we've defined it on the ts file here are you together yeah yeah all right so if we if we check the test you can see that the title is angular in its testing so that the test has passed but if we change something let's say we change we change like maybe someone wrote her someone was typing the air on the terminal and then he misspelled it so we misspelled the title once we run the test what we'll be getting on the on the template is different from what is defined in the test and so what you expect is that this the test will fail and when you check on the test you can see that it's expecting welcome to angular unit testing not welcome to angular elite testing dir so this is what i was saying that this is where i was saying that if you make any mistake it will be very quick to you'll be very quick to notice if you had written the test because like for this instance you are you you know exactly where the problem is and once you change you change it to the expected value the tests should run successfully now so that's that's our first our first our second test on the app component so this is the second this is the third there are three to the third and the that checks that the dom renders the text property and it also checks that the property rendered is inside a h1 tag so the first one checks that the text is correct and the second one checks that the checks that the dome renders the text property all right so that's the app component so that's that's where we what we are covering here is testing testing is testing elements in a component so the other the other data sections this the other section i want us to look at is you will find that in almost every project you lock on you always have a form and i'd like us to [Music] look at some tests that we can run when working with forms so similar to the other section we are going to import angular the angular testing tools but now we'll introduce by that will allow us to select elements from the dom similar to the previous instance declare we use declare to create the text i will declare sorry we'll use describe to declare the text block the test blocks so by test blocks i mean you see for this instance this grant list component this is one test block for app component this is another test block for grand ad component this is another test block so for this section we are we are looking at this test in this grand ad component so let's look at vs code so for add for grant add component uh so this is the section where this is the this is a form that we'll be using this is the form that we'll be using to add a grant and it has three entries the name the grant and the amount so on the browser this is the form i'm talking about so to add a grant you'll add the name grant and the amount so you want to test [Music] to test to see to only submit when the form is valid [Music] yeah and the other tests are here let's start from the beginning so similar to the previous instance we are importing the testing tools and the buy i was talking about is sorry this we import by from angular platform browser that it will help us select elements from the dom and then this is where we declare the test the the test block the tests block and then for this instant we'll need to set all the needed dependencies before we start the test and dependencies i mean all the modules all the components and if if there is a service in the in the next section we are going to also look at a service so in this in this section we the the dependencies are a component and these three modules all right for similar to the other test the first test expect the component to be initialized so once it's initialized this one will be successful the second text the second tests expect the component instance has the expected value text the expected value of the text property so similar to the uh the tests that were in the app component we also we are also testing that we are also testing to see this text on our component once it's initialized and if this test is not initialized or there is a typo a typo this test will fail so similarly to the other instance this text is initialized on the ts file uh let me show you on the ts file here this is where we've initialized the the text that you want to test on the template are the tests so that's the second test the that test expects the property of the component submitted to be true when on submit function is called so for this test we are testing that this this function that we've we've set it by default is it's false when the when the component is initialized the on submit returns false but we are testing that once the once once the form is saved the unsubmit changes from false to true i hope i'm clear so this is where you'll add if you want to [Music] to hit a endpoint this is where you also add that that function down here but for our test i wanted to make it simple we are only testing that once we click the save button the unsubmit sub on submit on submit the on submit returns true so that's the the third test the fourth and the fifth test we are going to check the validity of the form so we are going to check that the validity that we've set up here while creating this form you're going to test that they work they run well that if someone if the granta is an empty string the name is an empty string the amount is an empty string it returns false and if the values are provided correctly it returns a valid it returns true if the correct values are passed so this is where we've set up [Music] this is where we've set up the [Music] the controls for the form and on the tiers you can see for the form control name we are checking that the control name is required and the minimum length is for uh for granted for the granted it's the same and for the amount you have to to provide the diamond for the form to be valid so those are the three controls that we have and these are the tests that we run to make sure that we've defined the controls correctly so and once we run the once we run ng ng test you can see them here so they so this is the test for on submit on submit [Music] it returns true this is the test that checks if a form is valid this is the test that checks that the component is initialized this is the test that checks that this this text is generated or this is invalid and this is valid so this this is what i mean so we can give an example name let's say covet masks the ground ties us aid and the amount a thousand so all the tests are successful um quick question joel um does uh does this happen uh before does the test run before you click on uh the button or does it run after you click on the button like when does the test pass and when does it fail in this particular case with this component for this one they they run when you run ng [Music] test uh let's like right now i've stopped no no tester running now uh let's uh let's test let's try and make a one test fill let's change this add grant we expect we expecting this add grant page let's change let's redefine that if there's a typo here and then you run the tests that's one example it was expecting page but we passed pages so that that one will fail that's one example uh we passed page dire another example could be maybe you don't want the grant name you want the grant title you've but you have to change this here too you updated uh from grant's name to grant's title as the property of of a grand institute of grant name but you've not updated the the test so we have to update here too title i was expecting this to fit so on the test we are expecting the name but on the code you've used title it has passed whereas it costs but i had such a problem i had defined an object differently i had used a different object on the tests from the component and that test field i don't know okay so okay and no problem so i think my my question was more uh so you see the way um if you go to the test file inspect the tsp [Music] you had a section where it was checking on if the [Music] if the the form has been submitted if it stands to be true right so whether that just expects the property of the components i mean to be true when the unsubmit function is called so this as we can say like this is a test right so yes um does does this fail during the first ng test run or because of course when you write uh when you when you type in ng test right um the submitted is at four is false right yes and it will only be true if it's uh if someone clicks or not puts in all the information and then clicks on uh submitting the the form right [Music] so does uh when when you run it when you run it without clicking on that particular button you haven't put anything inside the form does the test um uh is it successful or i was because i'm trying to really understand that part like when does it say successful when the form has been submitted and the form is only uh submit i mean the the boolean turns to true when the form has been submitted so when does the test actually pass and say like oh the form has actually been submitted if if by default is it's false so the test i think you'll you'll see it more clearly when you're testing an instance where you have a service so what happens is the test tried to the test the test file tries to test a running component the component tries to mimic the com the component running as expected so far there okay yeah so for the submit [Music] um you see here we need to we need to have somewhere where we are checking for click event before it's submitted foreign um this test this test is it's testing this function uh what's happening on the test on the it's testing this logic on the unsubmitted logic yes can you see this this this is submitted is equal to true oh okay okay so it expects that when that uh that method has if that method of function has been invoked it should it's supposed to uh turn the boolean from false to true okay yeah so it's testing it's not changing it's not changing sorry about that it's not uh the the on submit function does not change it's not changing on these on this example it's not changing yes yes this test is testing uh the result of this on submit function so this was as it was an example it was just a simple example this is how it was we wanted to see that we wanted to see that this on submit returns are true we wanted to see this on the spec.ts file so that's why that's why we we we have this it expects to be truthy uh i don't know yeah it might make sense make sense yeah thanks thanks okay i'm going to add another function another test i think when i share i'll be i'll test this this function where is it i'll be writing a test for for the create form function i have not been able to completely i'll i'll share that this section this is the part where it changes from false to true click on submit okay okay this is this is the next section i have not i don't have the test for for that part oh okay i'll send it okay so so that that that was working with the form we've just scratched the surface there are more things that you can do here you can test the button if it's taking you to another page you can test for the routing and test which route it's taking you to and which route you're coming from so there's a lot that we can do here but let us leave it at uh at that for now and let us look at the services uh let us look at a component that has a service so for this section when testing a component with services we need to add the providers to the testing module created in the before each that we just seen and for example today we are going to uh [Music] to mock a service you don't necessarily need to have the end point if you know the structure that you'll be getting you can mock it this is the bt of front end you don't have to if let's say there is a delay with the backend guys you can mock you can have a mock and then once the api is ready you can use the real api uh also you can actually even mock even if you have the api you can you can create a mock because it's it's just a file on the i'll show you the file you don't have to use a lot of resources loading data from the server uh and also i'd like us to look at the provider declaration because we need to we need to declare the providers on the test file similar the the same way we declare providers on the module of a specific component or of a specific module they declare the services on the providers we have to declare the services that the services of that specific component on the ts file on the sorry on the test file so we are telling the module that when the service grant service is injected it should use the grant service smoke instead the grant service mooc is a dummy service that we created that return that returns dummy data to run the tests of the component so let me show you what this grant service and this grant service mooc are so we have the ground here this is what we are this is where the form is and this is where this is the component that has the service so this is a a simple html with a ng4 that gets at least an array of grants this is the array of grants so you are fetching the grants from this grant service you can console log the and the grounds just a simple area what is happening so this is the array that we are getting from our mock hammock i don't know if it's too small this is the array we are getting from our more service and generated yeah and generating it on the template so let's now see how we are going to set up the providers on the service file uh because that's the the tricky part of found well when creating tests for a component that has services so this is the service the this is the spec file for this component this is the component that i've just shown you we are getting this array and displaying it on the template so uh similar to the other instances we declare all the other components and then if you have services you have to you you have to you must have this section if your component has services you must have this provider section and for our component we are getting our data from the grant service but as i had told you earlier you're going to use this mock mock service so all these files you will have access to them so the grant service is a simple service the service this is the array of array of grants that you are getting and for the mock service this is the mock service this is the mock service that we are going to use for our test uh if you don't want to have a separate file you can have this section down here you can have it on the spec file you can have it down here i've seen how other people were doing that so for for this [Music] for this template we are we are testing that we are testing to see that a grant once the component is loaded the template should have at least one grant and because you have the data already i just used i i was just checking to see that we have this copy 19 vaccine generated on the template so once you run the test once you run the test so you'll see that so you've rendered one grant and should have one grant so that was correct should render one grant and the grant will contain this and yeah it will contain this text i don't understand this error say yes you'll see that our two our two tests have run successfully and if if there's a table i don't know what's happening here i will look at it later so that's that's basically it for the component that has that has services the most important section is this now for a component that has services you have to declare the service on the test file so that's all for for now down here you'll see all the places i got all this information this guy fellowship angular the official site and these two developers have some very good content too santisana do you have questions yeah yeah just one question um first of all i'd like to say thank you thank you for taking us through this um we know for sure i personally i can attest to this is that testing is something that is very very important for any software engineer whether it's in angular whether it's in vgs react but like an android flutter these are things that um this is something that cuts across all frameworks or all um all base cases when it comes to software development and i'd like to say thank you for taking the time to take us through this uh personally i've been struggling to really understand the concepts of of unit testing or testing in general but uh with this at least has given me at least a glimpse of how it is because i always sometimes i used to fear tests but with something later on i realized like i can't escape it and yeah i'd like to say thank you for that um so probably my question will be just very quickly um on the spec file um expect the ts file so does that mean that for example if it's say you're rendering the data coming in from the from the api you're rendering it let's say in terms of uh let's say it's a let's say a list right so how how are you going to do that are you still going to use like a native element and all that or how are you going to do that you are rendering a list yes yes a list of let's say if it's names from that api or the user's api for example i don't know if i've got you oh you're rendering a list like at least yes yes so a list of let's say um okay let's see what okay so let's say instead of now you rendering it in terms of um can you go to the html file a template file this one yeah the grants html file are you rearing it in terms of paragraphs or okay okay okay all right and then um when you go into the spec.ts file [Music] when you move down to the place where the services is uh being made use of uh yeah that that down down though yeah this part html should render one grunt um so this line uh line 40 right yes yeah um is this something that one should always um look after a lookout at for example instead of it now being p let's say if it's a list that means it's gonna be li like you really have to get into the dorm and pick whatever you want to look at right oh i get you now i get you now yeah yeah yeah for a list it will be the same but now this will be li instead of a paragraph yeah yeah all right all right okay sure sure and then um this is back in the ts5 uh the spectators fire um they provide a spot um provide said provide grant service and then use class run service smoke [Music] they they use class right uh is then is it the name of the service or what is it exactly grand service mark is is a mooc of the the grand service it's uh not a duplicate uh an imposter a look and then uh what do you call it what's another name of foreign [Music] okay what does it what does it contain this is the this is the mock this is the mock so it's just it shows you exactly how the service looks uh-huh so like for this this is the service but if it was uh here i've just had quoted the an example but if it was uh service that's in production it will be urls yeah yeah yeah okay so the so it's is it's like a must for you to have the the more more files so that this um your test can see okay how does uh how does the data come in from the api and all that is it a mask that you created it's not a must for you to have the mark there is another implementation using jasmine here and i've shared i've shared it on the on the resources i've shared this this link you can use jasmine through here instead of mocking jasmine has more features that you can use uh to mock a service you can use it for there's also another uh you can use it for the routing this uh uh i've forgotten how it's called but there is a lot you can do yeah okay sure no problem no problem anyone else has a question um hi wayne i wanted to ask if i could just chip in on some of the questions you asked if that's okay with um you enjoy yeah so if you could just go back to the code yeah which section um yeah just that on the test um so the they use class part i had um wayne asked a question about that so i think from my understanding just the way jill has said it's definitely a mock of the service that you are um providing for it uh but sometimes you can even think about it as some sort of renaming of um the service so that you can be able to use grant service smoke in the file instead of just grant service but even the you you don't have to use use class like you can always just provide grant service only and just use grant service and it will still work the same way and you can also instead of even having to provide the service up there you can always like the way joel said use jasmine to just inject it in the test case then that was the first question i forgot it what was your first question yeah the other one was i think the dom for the dorms so yes yes yes so in his service currently in jail service currently he has um data right he has mocked data that is supposed to be received from a service so i i think that is why he was able to check whether that is what is being rendered in the html right but then if you are making an actual api service call you wouldn't need to say dot to contain or anything you can always um in the service for that particular component mock the kind of data that you want to receive from the service so that when you're writing the test for that service you just really need to expect um data that looks like the mooc data that you've provided in the tests i don't know if that answers your question yeah yeah yeah so you don't have to use dots to contain all the time when you're writing a test from like a service um i think you use dot content because that data is fixed on the service um and that should work just fine so yeah i think i think that's yeah i think those are my thoughts on the questions that you asked so back to you joel thank you so much all right thank you oh sorry last thing sorry um so there's this part for um submitted is equals to false and then you want to transform it to true on on click there was a question about that wayne yeah so in that sort of situation so if you can just go to that file this one not the test one but not the the component itself okay um so up there we have submitted is equals to false i think that is uh um you've declared it up there right yeah okay so we have submitted this equals to false and then let's assume on submits we want this dot submitted to be true so um we can go to the component and then we can go and now um uh sort of call this um what is it called call this method so the same way we said component dot on submit and then after that we can now come and say component that submitted is equals to true still in our test so that means that um we are going to transform now since um locally or when the test is running it knows it falls when it gets to that test case we are now able to transform the submitted part from false to true and then that makes the test run so yeah especially in like some of these um functions that have so many lines um of code you'll realize that there's some things like maybe uh say this not submitted maybe you have a loader right um and you want it to load maybe you have so many things that are supposed to happen inside like one um like function right so you can be able to test all of them by just calling them by saying component dot loading is equals to true component data is equal to true inside those test cases and they will pass yeah that's it all right awesome awesome thank you thank you anyone else was a question question comment or comment okay so if there's no question or comment or any remark i like to say once again big thank you to joel uh who was our guest speaker today taking us through unit testing uh thank you for those who all of you as the attendees who took the time to attend this session um decision is going to be recorded so you can definitely still refer back to it whenever you want to uh the video will be up by tomorrow afternoon so be on the lookout if you're not uh if you're not aware we have a youtube channel um angular kenya where you can get all the content that we've been having since our inception uh so starting from beginners uh in angular to working with the template driven forms reactive forms ngrx rxjs you name it even building npm packages we've actually built npm packages here in one of our sessions and even today having a session on testing um of course this is something that will definitely have at least even uh if joel can come back again and do another session um probably digging deeper or as you can see also cinque is good at this so we can definitely have like taking us to one of the sessions on testing i'm not testing is broad so we're definitely gonna have more sessions on this um but be sure to just check out um our videos and of course follow us on twitter where we provide information that's the community and all that and without much further ado i'd like to say again thank you and i wish you all a merry christmas uh we'll be breaking as a community breaking for christmas for the holidays until next year in january uh we'll be having um i can't really say for sure but just be on the lookout for our session but we're gonna have a session i think it's gonna be on this i'm not sure if it's the seventh uh it's actually yes on the seventh yes seventh of uh january so be on the lookout for that yeah um unless there's nothing else i'd like to bring this meeting to a close and thank you very much and have a good night thank you for having me yeah ow sorry and joel please uh share with us uh your details so that at least people can know who you are what you do and all that they will definitely share with them um if you have probably closing remarks anything you'd like to say merry christmas [Laughter] [Music] all right merry christmas everyone yeah yeah sorry i'm thank you everyone have a good night you

Channel: Angular Kenya

Views: 157

Keywords: Angular, Angular Kenya, Angular KE, Kenya, Unit Testing, Unit, Testing, Software Testing, Software Engineering, User Testing, ng ke, ng, angular unit testing, angular testing

Id: xokt6CC8X60

Length: 81min 48sec (4908 seconds)

Published: Fri Dec 18 2020