Testing AJAX with Web Component Tester -- Polycasts #37

Key Takeaways

hey there podcasters Rob here today on the show we're going to be looking at how to test elements that require Ajax to talk to their backend using web component tester that made no sense let me back up a little today on the show we're going to be continuing our series on web component tester by looking at how to test elements that require Ajax now if you go check out the documentation for web component tester you'll see up there at the top there's a list of libraries that come with web component tester itself so we've got mocha that is our testing framework uh we've got chai which is our assertion library and we'll be talking about that in a bit we got async and low Dash these are libraries they're just sort of like utilities they help us do things like manage callbacks and do fancy functional stuff and lastly we've got sinon and sinon is a little library that lets you uh mock xhr request create fake servers do really anything you'd want to do if you want to to simulate an actual server and rather than like create some brand new component or anything like that I'm just going to write unit test for a pre-existing element so I'm actually going to use one of the polymer teams elements iron Ajax and I'm just going to write test against that so that way I don't have to come up with like a weird contrived example because I'm lazy so what I'm going to do in my test file is start off by importing iron Ajax and then I'm going to write a little test fixture for it so inside this test fixture I'm calling iron Ajax or I've got a little iron Ajax tag I should say and its URL is set to responds to get with Json all right and then after that I'm going to create the suite that's going to hold all of my unit tests so I'm just going to call my sweet iron Ajax just so it's kind of like a nice General thing and I'm going to create some Global variables in here uh these are just going to keep track of the iron Ajax tag of the request as we're sending it out of the sonon server we're going to setup nothing too fancy here after that is created I'm going to call a setup function and this is where I'm going to go ahead and start to build my sinon server so I'll call sonon fake Server create that's going to return an instance of the server and then I can call this respond with method and what that's going to let me do is basically set up routes that I want the fake server to respond to so what I'm saying here is when there's a get request for the route response to get with Json I want it to respond with status code 200 I want it to send back those response headers that I created up at the top and lastly I want to send back this little Json payload that says success true yay so I've got that squared away next thing I'm going to do is create a little tear down function and in this tear down function I'm going to tell the server to restore itself which basically means like clean up after yourself you know if you if you created Global variables if there's any shared State anything like that just get rid of that so when we run the next test it'll be a nice Clean Slate okay so I've got that squared away now I can write the suite that's actually going to hold my unit tests inside of here I will call a setup function I'm going to grab my test fixture and sort it in that Ajax variable that I created and my first test here is just going to verify that the iron HX request is going out and that I'm getting a response back and that the data in that response looks correct the test message is going to be has seen defaults that love you because it does love you so my request object is going going to call Ajax generate request and then I can just call server. respond and this is kind of one of the cool Parts about working with sonon normally you would have to if this was like a real server you'd have to wait some amount of time set up an event listener do some sort of like async test thing to get that response here we can treat it like it's synchronous and that's really nice it means our tests are going to be really fast and after that I can use expect to inspect the response object that I got back now the last video I used assert to inspect my objects this time we're using expect and basically because we're using chai we have a few different assertion types that we can use a few different assertion libraries if you will you can go check out the documentation for chai maybe I should like include a link to that or something expect just another flavor of assertion really not too different what we're doing here is we're first checking that the response is okay and that means that it wasn't an error it wasn't null we got something back we're checking that it's an object right that's what we're expecting to see and lastly we're checking that the success property is set to True okay this looks okay to me uh let's switch over to the terminal and we're going to run the wct command all right things are happening things are happening and we get our test back awesome all right everything's green looking good I want to do some more testing though I want to test a PO post request so I'm going to create a brand new test fixture and this time I'm again using an iron Ajax element I'm setting the method to post and the URL is response to post with Chason just like we did for the get request we will set up a route in our sinon fake server so we're going to say that we want it to listen for post request on the route response to post the Chason and when it hears that it should send back a 200 same response headers as last time and this time the object it sends back is going to say post request is true yay over here in our test I'll write a brand new suite for making simple post requests the first test I'm actually just going to uh verify that when I set that method to post that that is actually setting the xhr method so I'm not even calling sin on here I'm just verifying that under the hood the element does what it expects after that I'm going to go ahead and actually ping the S on server now I'm going to test uh that the response is okay I'm going to test that it is an object and I'm going to test that post success is equal to True right let's switch over to our terminal we will run component tester and we will wait waiting on things to happen great so we got all of our tests are passing everything's green now what if those tests weren't passing though what if one of them failed what if it was just like one browser that failed or something weird like that what would we do this is where I'm going to show you a little trick here when we run the web component tester command we can actually pass it the- P flag and what this is going to do is it's going to leave all the browser windows open and this is really useful because it means we can open up the console for those different browsers we can inspect them and if there were errors they're going to show up there so here I've got Firefox I'm going to zoom in I'm going to open the Firefox Dev tools so I'm going to enhance this and you'll see that I've got my test listed here but if there were any errors they would show up there as well so pretty pretty helpful little feature there all right that covers testing with Ajax with sonon there's actually a lot more you can do with sinon but I've definitely given you enough to get started there's a lot more that I want to cover with weapon component tester though so if there's segments that you are interested in seeing please leave a comment down below that way we can try and make some of those episodes happen also consider clicking that like button or the Subscribe button if you truly love me and if you have some questions you can ping us on a social network of you're choosing at # askpolymer as always thank you so much for watching and I'll see you next time turn your phones [Music] off Gotham needs me response [Music] codes I got ahead of myself