Building a RESTful API with Angular and .Net Core | Part 04 | Write our first e2e test with Cypress

so in the last session we went over all the setup and configuration that we've done so far for this retro application in this session we're going to write our first end-to-end tests using cypress so let's get started so the workflow that we'll use for test driven development is red green refractor red represents a failing test which is what you want to have before you start your implementation green represents a passing test which is what you want to have once you've completed your implementation and refactoring is what you want to do once your implementation is complete and all your tests are passing as you can see on your screen at the moment our application has a form that allows us to create a new board and once we create that board and click go we're directed to the new retro board that we've just created and what we're going to do in this session is we're going to write a few end-to-end tests that ensures this functionality is working but first so that we can get the red and red green refactor we are going to comment out our creation form and the new board details so let's get to our code in our home component we have a forum here that starts on line four we're just going to comment that out like so and in our board component which is on your screen now we're basically going to comment out everything like so now ordinarily you wouldn't have to comment out any code you would write the test before you did the implementation but at the very beginning of a project it's quite normal for there to be a little bit of implementation before you start writing your tests which is what we've got here let's call the initial functionality a spike that we're ready to test so let's open up our spec file that has the initial test in it and that can be found in the cypress folder under integration and as you can see there we've got a simple first test that i created during the setup but let's get rid of that so that we can start with a blank slate so the first thing we're going to create is a new described block let's do describe and a describe block will take as parameters a string which is a description for the described block and a function that's going to contain all our tests so for the string we'll put user can create a new board and then we'll pass through our anonymous function and then we'll close off the block we're also going to be creating a board at least twice in these tests so let's create a variable for the board name which will give us a little bit of consistency throughout our tests so the const board name equals and we'll call this test board so there's really two things that we want to test here firstly we want to test that we see the new board form when we visit the application and secondly when we create a new board we want to see that new board containing the name that we gave that new board with this in mind we'll create two tests for this initial describe block the first test block will be for displaying the new board form and the second will be for creating the new board so let's add these initial test blocks so we'll do it and the yet to function like the describe function takes a string which is a description for that test and then an anonymous function which will contain all the test details so we'll do should display the new board form and then we'll pass through anonymous function and we'll close off the test block and for our second one we'll do should create a new board with a specified board name and again we'll pass through the anonymous function and close off the describe block like so so at this point if we run our tests npm we're on cyprus open and if we run our tests so let's click on the spec and it will open up a new window and as you'll see both our tests pass this is because we have set up the tests but they have no assertions therefore cyprus will by default will consider both these assertionless tests to be successful thus they'll have pretty little green ticks on them we obviously want these tests to be a little bit more robust so let's go back to our spec test and improve the first test so the first thing we need to do is visit the home page so let's add the code for that first and the cy.visit with the forward slash will go to the home page for our application and the next thing that we want to do just to make sure we've got to the home page is we're going to do cy dot contains retro which is the title on our home page and the cy dot contains is basically just going to check to see if it can find the string retro anywhere on that page but of course we want to do a little bit more on this we want to actually check to see if our form is there and our form is basically two elements an input element and a button element so obviously a good test would be to check that both those elements are there so we'll start with the input element we'll do cy.get and then we'll pass through the name of the element we're looking for now we only have one element in this page so we can quite comfortably just put through the tag name if you had a more complex page that maybe had more than one input field then you'd probably want to pass an id here but we can get away with a basic call for an element so we've got our element but i want to check to see that the placeholder has the right text so to get the placeholder we do dot invoke and we do attribute placeholder and then we do shoot and let's put this down on another line and we'll do contain and then the string that we're expecting our placeholder to contain and that will be enter a board name so that code there on line 9 and 10 we'll find our input element it will then find the attribute called placeholder and then check to see if that placeholder contains the text enter the board name and then finally we want to find our button element so we'll do cy.get and again we've only got one button so we can safely just get the button and then for this one we just want to do contains go where go is the label on our button so that is effectively our first test and if we go to our cypress interface we will see that our first test is failed and it's failed because it can't find the input element which is exactly what we're expecting to see because we have temporarily removed the new board form from our application and that is what i would like to refer to as a successful red test you're expecting this test to fail and now you can go ahead and do the implementation but before we go ahead and fix that failing test i want to get our second test failing as well so let's go ahead and write that test first so again the first thing we want to do in this test is actually visit the home page so let's grab that code that we've got on line seven and we'll paste that in as our first line of code in our second test so this time round we don't want to test to see if the form is there we already have a test that does that what we want to do this time is use the form and by user i mean we want to add a board name to the input field and then click the go button so let's start by adding our board name first we'll do cy get and then we're going to get our input element and then we're going to do type and then inside type we're going to pass through our variable board name like so so effectively what line 17 will do is it will find the input element and it will add our board name to that input field and then we want to click the go button so we do cy dot get we grab our button element and then we do click and that will click our button so to quickly recap on line 16 we visit the home page on line 17 we find the input element and we add our board name and then on line 18 we find the button and we click it so if everything has went according to plan at this point our end to end test should be redirected to our board component and the best way for us to check that is to write some code that verifies that our board component is being displayed and the first thing we could check is of course the board title because our board title should of course contain our board name so we'll do cy.get and this time we're going to grab it by the id so we'll do or title contains our board name so the code on line 19 we'll find our board title and then check to see that that board title has the appropriate name which for us will be test board and that in itself should be enough to indicate that we've moved to the board component however for good measure we also want to check to see if our green amber and red input fields are on the page too so let's do that next so we'll do cy.get we'll grab the id which will be green item so in the input field for the green item again we want to get the placeholder and make sure it's got the right text so again we do invoke attributes placeholder and then we'll do should contain what went well and then i'm going to quickly copy this code two more times one for the amber item and one for the red item and we'll change this to amber and let's get this to the middle of the screen we'll copy this again and this time we'll change that to red and of course for the amber item we need to change the text one during about and for the red item we'll put what didn't go well like so so just to quickly recap on line 16 we visit the home page on line 17 we get our input element and we add our board name on line 18 we find our button and we click it on line 19 we check to see that our board title contains our board name and then on line 21 23 and 25 we check to see that our green amber and red columns have the correct input fields with the correct placeholders and that's a reasonable test at this stage of the game for our new board so we save that and then we go to our cypress interface we will see that both our tests are failing and again that is what i would call a successful red test so now that we have failing tests let's go ahead and reintroduce our code for both the new board form and the board component so we'll start with a home component we'll effectively get rid of the comment tags and now if we go back to our cypress test we will see that our first test has passed but at this particular moment in time our second test is still failing so let's deal with that next so we'll open up our board component and we'll delete that line and we'll delete the last line and that should fix our problem and when we go back to our test we will see that it's still failing and that's because it can't find the element with an id board title so it looks like we've maybe forgot to add id let's quickly check that and sure enough we've actually named the id board name rather than title so i will actually just change that here rather than the test like so and when we go back to our tests and we rerun all our tests we will see that they now all pass and at this point we now have two successful green tests which means that we could go ahead and refactor with confidence i.e we could make changes to the code and as long as these tests continued to stay green then we could be confident that our initial functionality is robust however for these first simple steps at the beginning of this project there isn't really any refactoring to do so that my friends is that if you found the content useful then consider hitting the like button and subscribing to the channel also if you like web games then check out my nova project where i am currently creating a web clone of the 90s macintosh game escape velocity i also have other tutorials that show you how to draw on the canvas api resize the canvas programmatically and a series of videos on how to use canvas api to create games i also do other videos related to programming videos are published every monday and last but not least thanks for watching you

Channel: David Reid

Views: 7

Keywords: writing our first e2e test with cypress, RESTful, RESTful API, Building an Angular web aplication, building a web application with Angular and .NET Core, dotnet, RESTful API service with .NET Core, How to build a RESTful API, How to build an Angular application, how to build a RESTful API with .NET Core, How to build an RESTful API with Angular and .NET Core, How to build a RESTful service with Angular and .NET Core, cypress, e2e testing, e2e testing angular, e2e testing with cypre

Id: X6MjGabJ5Eg

Length: 12min 44sec (764 seconds)

Published: Mon Dec 13 2021