5.3 Testing With Protractor
In this video, we'll write a simple Protractor test suite, create a few simple assertions, and run them in the terminal.
1.Introduction3 lessons, 07:24
2.Scaffolding a Testable Angular App5 lessons, 46:23
3.Testing Angular Applications5 lessons, 51:44
4.Code Coverage With Istanbul3 lessons, 18:01
5.End-to-End Testing With Protractor4 lessons, 23:27
6.Adding Finishing Touches4 lessons, 23:06
7.Conclusion1 lesson, 04:05
5.3 Testing With Protractor
Welcome back. We are precisely where we left off in the last video, with the app.spec running and going to our web page. Currently we have both Selenium and our web page running in Git terminals, so make sure you have those open. If you don't, just join us by watching this section of videos from the beginning. The cool thing about protractor is you write tests in an angular style. So let's go and write some tests on our app. Let's go to our describe and after we've gotten the webpage, let's get a reference to something in our project. We'll call element.all and in Protractor use this weird syntax called by.repeater, and you pass it the string which is literally the repeater string you defined your object with, which as we'll recall, is contact in contacts. And then we'll call then as a callback to this. And this call back will be passed the contacts, so we can run assertions on the contacts. We can get the first contact by getting the first from the list. And then we can run an assertion. This is pretty naive because we know really clearly what's gonna happen in our app, but let's assert anyways that something is going to happen. So we can get the text of this object by calling the text getText function of it. So we can var text. And that'll be equal to the getTest method of first. Then we can assert what the value is. We'll expect(text).toEqual and I believe that should say Eddard E Note here we've used toEqual as one word. Chai has a similar but different toEqual. It's a little bit confusing working between Protractor and Chai, as they have incompatible, but similar looking syntaxes. There's no easy way around this. But remember that you have different test syntax to deal with when working with Protractor and working with Chai. Well we have some assertions, so let's give them a shot. Go to your Git Bash and run your Protractor tests. And, of course, we have to call done in our function. So let's remember to do that. And try running it again. And we get an error. Nice, we mixed it up. It's not Eddard E, it's Robert R, and our error tells us so. Let's change the assertion to expect it to equal Robert R. And we'll run our Protractor tests. Cool! We just ran end to end tests and ran assertions on how our code will work. Now, these are some pretty simple end to end tests. In the full version of the app, we have the functionality to add contacts to the list. Otherwise changing the list, adding many more cases for us to test. In this case though, we don't have time to go through all the fundamentals of end to end testing. I just wanted to show you how it was, and how to get it setup for your Angular app. If you've gotten this far with me, you already know a lot about how to get your end to end tests working. In the next video, we're going to automate our tests.