3.6 Testing Boundaries of Two Applications

Hi. In this episode we'll implement backup API for Edges. Now that we know what we want to get from the server, it shouldn't be a problem, but first we need to be sure that Angular makes requests to back an API to get this Edges data. So, we need to write a test again. And we'll see how to use HTTP mark provided by Angular to mock actual Edges communication. So, let's go to edges.gs controller spec and, first of all, here in, before each where we inject dependences, let's inject httpbackend. And that's the mock of HTTP. So to mock this, we will create http and we. Make it as it should to be back end. And then we can actually make when get. And that simply means that when we have get request to API edges, we want to mark it and to respond with something, like response. Okay, so now let's create this simple response and that's going to be just an array, because we expect that edges will return ar, array of objects. And a simple object with, for example, key: hello. Okay, so now let's add this variables here, http and response. Also when we work with http backend it's a good idea to make sure there are no leftovers like pending requests after each test. And for that we need to define after each block there's gonna be a function. And inside of it we want http to verifyNoOutstandingExpectation, and verifyNoOutstandingRequest. Okay, so now let's create our example. So, our example is like this. It makes request to api to fetch edges. So here, before each example, we actually mark an http and we create here. Mark for api edges get request. And we expect this request to happen when the controller instantiates. So http, and we expectGET request to api/edges to happen. And then we actually need to flush HTTP. So that will simulate the HTTP request. So as we added http to our task we need actually to add this http flash to every task that we have here. Okay, let's save the test and let's go to terminal and run karma start. And of course we fail because there are no pending requests to flush. There are no HTTP requests there. So to make it pass, let's go to our edge of service. Service edges dot GS file. Where we have this mark query object. And I'm going to remove everything from here and replace it with very simple thing. I inject resource module. Also I change servers to factory. And I return resource, which points to api/edges, like this. Okay so this way we created edges factory, or edges service. And it is a resource which points to api edges. So now when I save it and now I go to controller edges, here in this line we're actually making a query request to the server. So if we go back to terminal you can see that now we are green so this request is actually fired. Okay, let's go back to our test. And the second example will make sure that it assigns response data to edges. So we could make this thing pass if we simply make only edges request like this, without assigning, we still. We're still parsing, but this one of course is not. So if I go back here and I make HTTP flush. Save it. Go back and now we grin. So what we want to do is make sure that. Edges are actually equal to the response, so we expect that scope dot edges, and we take the first parameter. So the first object and key to equal hello, save it, it of course fails, so let's go back and return scope dot edges assignment, and we back to green. Okay, so, this is basically how we test Ajax. We inject httpBackend. We stop request that we want. And emulate some response, against which we can make our expectations. And then, we do not forget that after each example we should verify there are no outstanding expectations and requests. And then in examples, we whether expect that some request is fired, or we just flush in HTTP and then make our expectations. So now if you go to browser, so let's close karma and run grunt serve. So, here now, if I go to edges, you can see that there is a request to API edges. Excellent. So, now we're ready for a backend. And we'll start from tests. We need to be sure that this API Edges request is actually available and responds with status 200 and that's the easy controller test. So, I'm going to salvage roles backend application. I go to spec, and here I'm going to create folder controllers and inside of it edges, controller, spec.rb and I need to create this directory. Okay, so here I require spec helper, and let's describe api/edges controller. Let's save it, go to terminal and run our spec. Spec, controllers, edges, controllers, spec. So we do not have a constant API even. So to make this simple test task, we need to go to routes,. And inside of this route let's create a namespace, API. Inside of which we will have the resources address. And we know that we only for now we. We only will have index action. Let's save it. So now we need to create in our application, controllers, we gonna create new folder API and inside of this folder. Let's create edges_controller.rb, and again I need to make folder. And here, let's define module api. Let's save it. Go back and run our spec again. And now we can autoload constant api edges controller, which we expect in edges_controller.rb. So let's go back. And create class, edges controller, which inherits from application controller. Let's save it, go back, run specs, and now we're green, excellent. So, now we can get back to our spec. So, let's describe, get index. And inside of it, it responds with 200 stairs. Very easy, standard example. So we get to index and then we expect that response dot status to equal 200. Save it, run spec. And fail, because we do not have index action. So let's go back to our controller. Let's define index, save it, run spec again. Now we do not have template. But we know that we actually don't want to have any templates. We want to render JSON, but for now we will just, we'll just return render nothing: true. Let's save it, go back, run spec, and we're green again. Excellent. So now, let's make sure that we actually fetch edges. And for that we actually need models. We need to create three models, edge, requirement and category. Edge has many requirements and belong to one category, so let's do this. As we already know what kind of data we want, that's very easy to do with the help of Rails generators so let's generate. Model edge and it has name description as text and category as reference. Okay, the next model is requirement and it has name value and mode. And the last one is category which just has name. Okay, now we just make rake DB migrate, and rake DB test prepare. Good. So, now that we have that we need to create adjacent representation of these models. So we need to add active model serializers to our gem file. So let's go back. And open gem file. And right here let's add gem active model serializers and let's save it. Go to terminal, and run bundle. Now with active model serializers installed, let's generate serializers with rails generate serializer edge requirement and category. So now let's edit that. So let's start from edge serializer and be default it has only attributes like id but we also have name. We have description. We have has one category and has many requirements. Now let's open requirements, serializer, and here we have name, value and mode. And let's open category serializer, and here we have just name. Also, let's go edge dot rb model and here you can see that it belongs to category, but also it has many requirements, okay so now let's go back to our controller test. And let's describe another exam, and each response with JSON representation of an object. So first of all we need to create category. And that's gonna be just a Cateogry.create with name, category. And also we need requirement, as Requirement.create with name, rec. Value, val, and mode. Rank. And next, let's create edge itself. So we do edge create and we'll have name, we'll have description category, and requirements. Okay, so now when have all of these things in database we can actually get to index. And, let's get, parsed JSON, we parse(response.body). And then we expect, that parsed. First element and category and its name to equal category. So basically you recreate some records in database like category requirements and age. And then we expect that when we visit index action. It actually will return JSON with this category for example in the edge with the name of category. Let's save it and run our spec. So we have an error, can't write a known attribute AJD, and that happened because when we created our model for requirement. I forget to add the reference to edge, so let's fix this. So here in migration for requirements, let's add reference to edge and now let's go back. Back to terminal and let's run command rake db:drop and then rake db:migrate, okay? And now rake db:testprepare. And now let's run spec again. Okay, now it's better. Adjacent text must at least contain two octets. So, we do not have anything actually. So let's go back to our controller. And to make it pass we just, instead of rendering nothing, we render Jason and we fetch all edges, but our angular application does not expect root element. So, if I save it and run spec again. You'll see that we have a problem here. And this happens because Rails, by default, the active model serializers, has this root element instead of just returning an array of objects. So to fix this, just specify root false. And now, if we run our spec, we're green. Great. Okay, in this episode, we created two kinds of test. First was the front-end test, which tests that our angle application actually makes request to the server. And the second type of test is for the back end, which tests that so the guess the request and responds with JSON representation of the edges collection. So in the next episode we'll create end to end test with the help of capybara, and test all the functionality that we created so far, working together with front-end and back-end applications. So thank you very much for your time, and see you in the next episode.