Unit Testing with Angular

hey it's fall today we're going to look at some unit tests within our angular applications so let's make in new application for the purposes of this demo by using ng mu and I'm going to call my project to angular testing when that has completed we can CD into angular testing and right away if we just run the tests that come along with the angular CLI essentially what happens is we get tests written with jasmine and run with comma and we can do this by saying ng test this will open up the tests inside of the browser and you can see right here that we have three test specs for the app components and essentially we have it should create the app it should have the title up works and the title should render inside of a h1 tag we also get a depiction of the app component and we can verify that yes indeed it does have app works and it is rendered inside of a h1 tag so let's take a look at the testing spec inside of our browser so head over to source up and then up component spec PS if you've never done any testing before this might look a little scary we have things like describe blocks before each and then these assertion blocks with it should do this and expect this at the moment that we are just simply going to gloss over this and make our first test of that involves none of the angular stuff just simply testing to see whether something is true so we'll come back to that in a moment for now let's simply delete everything inside of this file and start from scratch so beforehand we have something called a describe book so we have this describe here and what we need to put inside of the describe is a description of the suite of tests that we're going to create sort think of this as the overarching goal for your tests so at the moment I'm going to say we're testing the app components the second parameter to our describe function is the spec definitions and this is a function so let's add a new function and then inside the void describe block we can declare a new test by using the it keywords now it is just a function and it has an expectation so at the moment I'm going to say something that's not related to the app component at all and we're just going to say true should be true because women test the assertion that true is true we can now have an assertion inside of our f-block and we can expect that true is to be true and essentially in this assertion we're saying true should be true but before we do that let's say that true should be false now we obviously know that this is not the case because if something is true it's not false but by doing it this way we can have a test but feels first and we can then correct the test saw that the test passes if we save the file and take a look back inside of our browser we now have the new spec that we created now because we deleted all the other specs we only have the true to be true so this spec right here which says true it should be true has field and that's because it expected true to be false if we instead so that true should be true we now get a passing test that says true should be true so this right here is the basis of our testing going forwards we're simply going to have a describe block which describes the suite which we're testing we have eight blocks which perform a description of the assertion and then within those eight blocks we make the assertion to see whether something it should be the value that we expect it to be now at different stages of our testing lifecycle we also have things like before each so this during me before each stage would be setting up the test to have particular states beforehand we also have things like after each to reset the state of stuff that we do in slide bar tests but for now let's simply make a new component and investigate these concepts a little bit further so let's generate a new component named the counter component we can do that by saying ng GC which is ng generates component counter this will be automatically added to our app module so all we need to do then is head over to the app components and instead add our app counter to our app components so before going any further let's delete everything inside of the describe blog within our counter components Bank simply leave the imports and this described concert component so let's make a template for our counter components and that will simply be a paragraph tag the word number as well as a colon and then we'll have the current number of the counter we'll also have two buttons so button one will say increments and bantoom we'll set decrement both of them will have a click event named increment and the second one will also have a click event named decrement if we then implement these functions by saying we will have a counter and that will be of type number the initial value for the council will be one inside of our increment function we can simply increment the counter by one and for our decrements we'll simply - the concert by one so we have a very simple component that displays the counter number and we also increment it by 1 or decrement the dependant on whether we click the button so to check everything works before going forward laps around ng serve and check it out inside of the browser as you can see right here we have a counter with a number of 1 if we click that we get 2 and if we decrement the counter we get 1 this can be done as many times as us sure we could continuously increment or continuously decrements let's now write some tests for our counter components so inside of our counter component spec we can start off by firstly removing everything inside of the describe block apart from our component and fixture inside of our describe block we have our reference to the counter component and then we have something called a fixture so a component fixture is essentially a reference to our Kanpur with a few other methods added on these are things like detector changes which allow us to perform change detection from within our tests we can also access things like the net of elements the component instance and a few other things that we'll take a look at in a second so the first thing that we have to do is declare one of the before each books that we were talking about earlier on inside be before each we'll be declaring a new testing module and we'll be importing our counter component into the testing module so let's write before each and then inside of the before each we need to perform an async action so that's right s Inc and inside of this function we can simply say a testbed which is the testbed that we've imported from angular core testing and this provides us with different things such as a new module which will create in a second don't configure testing module and this module is created just at the same as any other module would be so we can have air declarations and inside of the declarations we can add our counter component and the reason we have to call this with air sink is because we then need to call compiled components and what this does is it waves for our asynchronous templates to be lauded such as our counter component or HTML I will count the component of CSS and so on we can then have another before each block and in this before each block will do things like setting up our components so so far we've simply said that we have two variables here one named component and the other one called fixture now at the moment we've yet to initialize them we've simply said they are either type of counter components or type of component fixture so let's now see a fixture is equal to test beds dots create components inside of the create component methods we can pass our counter component this gives us a testing version of our counter components we can then get an instance of that testing component by saying components is equal to fixture dot components instance you'll notice that already with its ID components and then on our component we have access to things like the counter property the increment function and the decrement function will not need to use them yet but we will look very soon so the first two tests that I'm going to write here is to assert that the counter component simply states the current number of the counter so we can say it and then our expectation should be written in English so it should display the current number of the counter after our expectation we're going to have an assertion function and in here we need to assert that the text on-screen is equal to a particular value so how might we do that let's say now add a comment asserts that the text on screen is of number 1 so to get reference to that we'll have to create some more variables the first thing we have to do is get access to the debug element and that debug element comes from angular core so let's imports from at angular slash core the debug elements and we can say let's debug elements is of type debug elements and when we use the debug element to get a reference of what will be the paragraph tag that says number one we want to get the need of hedge tml element within of that element itself this will become apparent very soon but for now let's them can make a new variable named HTML element of type HTML element and the final thing that we need to import is something called by and by importing by it allows us to query on a particular element for example if we import from arts angular slash platform - browser we can import by and because we may be checking the current number on a few occasions I'm going to put this and me before each so we'll start off by saying that the debug elements is equal to the component thinks jar dots debug elements and then we can query the elements within the components DOM and say bye so we clear in by and we'll say everything that matches the CSS and within the CSS selector I'm going to say P for paragraph and if we take a look inside of our components at the moment we have the one paragraph tag and that paragraph tag simply says number and inside of that number is a counter so the counter is going to be the value after or before it has been incremented or decremented so now we've got access to that debug element let's get the native HTML element for that query so we can say HTML elements is equal to P debug elements dot native element we now have a hold of that queried HTML elements because of that we can now assert that the text on screen is of number one and that's because that's the default number for our counter so we can say expect that the HTML elements and the text content of that elements is equal to number one but to make this fail first so we can check that our test is actually doing what we expected to I'm going to say number two notice now how we do gaps that are a first but there's something a little bit off with the error message it's seeing expected number and then we don't actually have a number here to equal number two and this is because we currently don't have any change detection implemented within our test we can handle change detection within angular in a couple of ways we can leave up to angular to do automatically or alternatively we can do it ourselves by leaving up to angular anything that is synchronous is caught by the change detection anything that's a synchronous change it to the value is not let's take a look at how we can use change detection within our tests so when we initialize our component let Spencer fixture don't detect changes if we read the description it does say trigger a change detection cycle for the component and if we love get inside of all components when we are initializing the components we also in the counter as equal to one so when we don't actually call that change detection that counter has not been initialized to 1 if we save our file and lock back inside of our browser we now get the error expected number one to equal number two we can now see that our assertion is working correctly we've expected number one to equal number two so let's say number one we can now see that all of our tests currently pass we are displaying the current number of the counter and we have number one here let's now make a new test and that tester should increment the counter number by one so let's say it should increment that counter number by one can make an assertion function and the first thing that I'll do is I will arrange my test and I will get the current value of the components counter number so we can say initial value is equal to the component counter and as we know that's currently equal to one let's now act on our test and we can of course call the component dot increments and that's going to increment the number of the counter by one we can then capture the new value by saying the new value is equal to the components counter and then our assertion here would simply be that the new value is greater than the initial value but let's make it feel fast by saying the initial value should be greater than the new value and yet again we get the expected one to be greater than two which we expected and if we put that back so we now have expect the new value to be greater than the initial value we now get our passing test of the number of being - however on the screen our change detection doesn't seem to have kicked in so let's make sure that our tests are of course detecting any changes after we increment the value within the component if we then click the counter component to answer it should increment the counter by one we click on we have the number is equal to two but if we remove the detect changes and click the increment come to number by one again we don't have our number equaling to two on screen so it's a good idea to implement detector changes whenever you're making any changes within at your tests I'm going to clean this up a little bit so we can see the screen and then I'm going to copy this and instead we will say it should decrement the counter number by one so we can say components decrement and if we save the file on Rises we have our initial failure expected zero to be greater than one and now we can say that the immune value should of course would be less than at the initial value and once we do that we do see that the decrement does work seem to have lost my detect changes so let's detect the changes once again and instead when we click it we do see that our number is zero so hopefully you're seeing right now but initially we have some boilerplate to deal with such as before h and importing all of our dependencies but when we actually get interrupt it's quite simple to test our components now right now we have a simple example of a counter but in future videos within the series we'll take a look at making things a little more complex looking at services and so on finally I want to write two more tests and these tests are going to be after the number is incremented is the correct number shown on screen and after the number is decremented is the correct number Shaun so this one is quite simple we can say that this test should display the counter number on screen after being incremented by one to keep this video a short I'll simply say that we will first off say components the increment will then a capture any changes I think fixture dots detect changes and obviously I'm aware that at the moment it will pass if this is number two but if this number was to become three our current assertion here which would be shunt display the counter number on screen after being incremented by one would not technically be correct because once that becomes three it no longer equals number two so this is an important point that when you're actually testing at your components and you're designing tests it's important to make sure that the test actually accurately represents what is happening but to keep this video short let's just a test for that we can also test for the fact that the number will be decremented by one so the number should equal number zero and can say component decrement if we then run this in the browser we do get indeed it's six passing tests but if we were then to say components two increments and instead we call that twice our tester now fails so it's important like I said to be quite specific on the functionality that you are testing I hope that this video has proven a good introduction to testing within angular applications my name is Paul Halliday and if you haven't seen already I have a learner ionic three from scratch course over at udemy there's a discount code in the description if you want to catch that while it's in early access don't forget to hit that subscribe button to stay up to date with the latest content and until that time see you very soon in the next video

Channel: developer.school

Views: 68,227

Rating: 4.9497485 out of 5

Keywords: unit testing angular, angular unit testing, angular 4 unit testing, angular 2 unit testing, jasmine unit testing, karma unit testing, angular testing, angular testing with jasmine, angular testing with karma

Id: Yod3tBt0beM

Length: 20min 25sec (1225 seconds)

Published: Wed May 03 2017