Angular 5.x - Unit Testing and HttpClient

as you can see when we have a passing test we do have the green here down the side but if it was to change something you would notice that instantly we would get not only the error message but also the red box so in order to test the HTTP client we need to have a service that of course takes advantage of that so let's generate ourselves a new service I'm going to run ng gs4 ng generate service and this will simply be called data I would most likely place this inside about providers or service folder but we'll simply just be importing it into the providers inside of our app module the data service itself will simply have a root URL we can set that equal to any API that we want to use I'll be using the JSON + or the API and I'll be making a function called get posts this will return us a list of posts but in order to take advantage of that we'll need to import the angular HTTP client from angular common HTTP we can then inject that into our constructor we can return this HTTP don't get and one T's back takes to return at the root URL slash posts now if we've done everything correctly we should then of course get a list of posts on-screen but what we want to do is as we sort of add more to this service and maybe as we add more to our application we want to verify that we're actually getting a list of posts from our API and that everything's working correctly so we'll head over to our data service spec TS you'll notice that inside of the describe block we're describing that we want to be testing the did a service before each test is run we're creating a new module with a test bed and we're providing that data service to this class now there are a variety of ways in which we can go about testing it provider we could if we wanted to provide a more keya but the HTTP client gives us what's known as the HTTP client testing module so let's first off import that from an angular slash common HTTP testing we can then add that to our test bed module and instead of injecting the data service each time into the it assertion what we'll do instead is make ourselves a reference to a service which will be of type data service and we'll assign that only once so inside of our before each year will sense service equal to test beds don't get and what this does is it gives us an injected version of that data service which we can then use throughout our project and then going to delete this it assertion like so and inside of our data service perhaps we want another describe block here or we could go down everything to do with getting posts but for now I'm simply just gonna have an it block which says it should retrieve from the API we could also add via gets here if we wanted to as well and we can test our certian also so now we have the body of our it's function and we can start off by making some dummy posts and what this essentially will be is just some posts that we can expect to get from our API so maybe you would have a user ID and that happens to be a string an ID which happens to be a number if body sort the body of the post and finally the title such as testing angular let's have a couple of items inside about dummy post and we can even go ahead and maybe make a models folder and inside of here we might want a post Model Ts we can export an interface called post that has these different things we can then send a proper it type and the next thing we want to do at this point so we have some dummy posts that we expect to get back we then want to say service don't get posts and this is our get posts method as you can see at the moment it returns an observable of object so we can go and fix that by heading back to the service and instead saying it will be an observable of posts we can subscribe to this inside of our service and at this point now we have a list of posts or an array of posts we can expect that the posts don't length so this would be the array that we get back should be equal to two and that's because what's happening is it doesn't matter how long that the posts are from the air pie itself the dummy posts will instead replace that data so we could also make another assertion that maybe the posts themselves would be equal to the dummy posts so we're nearly there what we need to do at this point is now is start a fire off that request because we haven't actually fired a request at this point we need to then use what's known as a hedge ttp mock so this comes from at the HTTP testing controller and that comes from the angular common HTTP testing module so we can make and you let HTTP mock of type HTTP testing controller we can now set the value of our HTTP mock equal to test bed of gets and this time we want to get the testing controller and here inside of our it block again we want to start setting up our request so that could be equal to our HTTP mock dot and then we have a few different things we have expect none this means that no requests should have been sent we have expect one and also match and verify we want to expect one at this point because we only want to expect that there was a single request made to our URL so we expect that the request was made to our service don't root URL and at this point I'm going to remove privates from our data service so we simply just have this root URL public to the class and then I'm going to add slash posts after that we can expect that the request itself dot request so this is the request object and the methods should be equal to get so essentially what we're asserting at this point is that the methods of our HTTP call should have been get so if this was something like post then of course it would fill and the final thing we need to do is say request don't flush and pass through our dummy posts because what this is then doing is its allowing our get posts to use this dummy posts here and allows us to fire off that HTTP request as you can see here the flush method returns the body and any other dead as such as the response headers if provided and so far we have a passing test now at this point everything works as expected it does retrieve us those dummy posts we are of course looking at the get method and we're pointing our HTTP clients at the service route URL slash posts the final thing to do at this point is to add an after each and what we want to run inside of this after each is HTTP mock dot verify and what this does is it just means that anytime we test our data sore for example if we make an assertion on the HTTP mock itself it will ensure that there's no requests outstanding and then we don't have any sort of stared issues going into another test so let's just run verify like so and that finishes up testing our HTTP client if we head back over to our data service and we instead change this to be slash post you'll notice that instantly our HTTP mock does fail because it does expect the URL to be slash posts so what we end up with is a test that that allows us to of course check to see whether we are retrieving posts from our API via get and of course we are looking to see those dummy posts as well so what have we locked down inside of this lecture well we've looked at things like test bed and making testing modules we've liked a getting instances of injected services using test bed don't get we've looked at the httpclient testing module and the subsequent testing controller we've looked at determining whether our URL was correct whether our request method was also correct and this allows us to then of course test to see whether we are getting those posts as expected you

Channel: developer.school

Views: 43,022

Rating: 4.8993287 out of 5

Keywords: angular, angular 5, angular how to, angular tutorial, angular testing, testing in angular, how to test in angular, angular 5 testing, angular testing http client, testing http client, angular http client, angular unit testing, unit testing, httpclienttestmodule, testing angular, angular tests

Id: 4JVnSkR04tM

Length: 10min 54sec (654 seconds)

Published: Sun Dec 10 2017