Intro to Client-Side Testing

Video in TIB AV-Portal: Intro to Client-Side Testing

Formal Metadata

Intro to Client-Side Testing
Title of Series
Part Number
Number of Parts
CC Attribution 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Release Date

Content Metadata

Subject Area
Intro/Background Example Project Getting Started with Selenium Navigating pages Finding elements Waiting on actions Unittesting with QUnit Why QUnit? Tests and assertions Test fixtures Additional Resources Q&A
Statistical hypothesis testing Server (computing) Group action Computer file Token ring Code INTEGRAL Latin square View (database) Multiplication sign Source code Execution unit Parameter (computer programming) Drop (liquid) Twitter Workload Single-precision floating-point format Projective plane Debugger Maxima and minima Special unitary group Representational state transfer Line (geometry) Word Process (computing) Password Routing
Statistical hypothesis testing Building Code Java applet State of matter INTEGRAL View (database) Mehrplatzsystem Multiplication sign System administrator Execution unit 1 (number) Set (mathematics) Client (computing) Parameter (computer programming) Mereology Front and back ends Web 2.0 Fluid statics Coefficient of determination Mathematics Computer configuration Cuboid Software framework Endliche Modelltheorie Error message Social class Scripting language Area Covering space Binary decision diagram Email Software developer Unit testing Instance (computer science) Type theory Web application Process (computing) Software repository Website output Right angle Web page Slide rule Server (computing) Existence Functional (mathematics) Service (economics) Vapor barrier Perfect group Computer file Link (knot theory) Device driver Web browser 2 (number) Element (mathematics) Goodness of fit Utility software Form (programming) Default (computer science) Focus (optics) Distribution (mathematics) Standard deviation Key (cryptography) Weight Projective plane Interactive television System call Graphical user interface Integrated development environment Query language Personal digital assistant Logic Password Video game Window
Statistical hypothesis testing Web page Group action Server (computing) Computer file Drag (physics) State of matter View (database) Patch (Unix) Execution unit Drop (liquid) Mereology Event horizon Declarative programming Element (mathematics) Endliche Modelltheorie Module (mathematics) Interactive television Bit Instance (computer science) Unit testing System call Demoscene Digital watermarking Process (computing) Personal digital assistant Right angle Object (grammar) Library (computing)
Scripting language Statistical hypothesis testing Suite (music) Vapor barrier Drag (physics) Computer file Projective plane Execution unit Electronic mailing list Drop (liquid) Web browser Unit testing Event horizon System call Data transmission Bookmark (World Wide Web) Quicksort Reading (process) Task (computing)
Statistical hypothesis testing Web page Slide rule Computer file Execution unit Insertion loss Web browser Coma Berenices Event horizon Formal language Element (mathematics) Direct numerical simulation Mathematics Sign (mathematics) Different (Kate Ryan album) Descriptive statistics User interface Dot product Keyboard shortcut Interactive television Line (geometry) Unit testing Frame problem Digital photography Computer animation Personal digital assistant
but but that the of the time and the and and the and the and the PPLR Ch what does repeal all of the things they just said I I work for cactus group but and I co-author of a language and go and you can find me on Twitter and Dr. 0 yes I'm and Latin on github and the rest of the Internet but if you can tell me acquire them land and Twitter account would come see me after the interested of so with the with the goal of this talk i the goal of this talk is to get you started writing tests of from a practical standpoint this is going to be an in-depth review of all available jobs testing tools and by here to convince you to do testing like that argument I don't think needs to be made more and firstly on this this community so the workload is and I show you a little example project I'm going to show you some integration test for that project and then we'll go through some unit tests but for that project so what are we in a test today this is a project that lives on file API and when that word and the source code is available on my get have account of it's a minimal REST API using J. Sun when tokens for off but it does dragon drop file uploads there's a limit please on trying upload like Harrogate's my server please a the front end users backbone I'm not assure you any of the code for the views any the backbone code more initially the test if you wanna take the time and and review the project code itself do so in it looks like this you log in as a guest log n we'll after you log in you see this blob and an empty line because it in Spanish any time styling this of you drag a file it's there and there's little x and you can delete that's what the project looks like on the back and it looks like this there's not that many views there's the other API route which renders the single-page there is a an endpoint to exchange an API token of the username password for an API took and you can get uploads to list all uploads you can post a new upload you can get uploads by details for single uploading and we can upload no put for updating and yeah it's Huber restful we use a don't care about
rest by users don't care about how RESTful back and it's they why do things on the site they 1 log into the site they were navigate around they wanna submit data they wanna see their data and so those are the things that you want to test to make sure that this works as expected and that's what selenium is really good at selenium drives a browser and you can interact with the Don you can fill in data you can click links you can assert things about the current state of the some basic selenium set up this almost come straight out of the GenGO doctors to use the utilize static server test case and do some set up terror down of the selenium web driver but this setup and teardown can be a little slow that's what's done once per class rather than per test that that means you don't get perfect type tests isolation and it can lead to problems and I like phantom JS for the driver it's a headless webkit browser you can install with PM but you could replace it with Firefox or Chrome right here you may wanna run your test against all of them that's all available options of phantom JS also works well not installed by default on travesty so we integrate well with CI environments the yeah a selenium test looks something like this you tell the browser to get a page and then you assert something about that age so say when I get the page I should see the long and form and so I find that 1 informed by each e-mail ID and I look for that little Don element that's the file upload and they should the user should not be older see that if they have a lot it moving on to that you can fill out the forms so we have a long and form we know it's there we find it and we get the inputs by their name there's a username and input and there's password input and you send keys to emulate by user typing in the form you can also make us work with you select boxes of file input to do all those things you can fill them out and it the nice thing about selenium and the reason you need uses the static life server test case to get really meaningful tests is that if you try to do interactions like filling in forms and that formal meant 1 isn't found an error but more so if the form element is in the DOM but it's not visible to the user it will air but which may give you something of for more meaningful than what like Jane goes test client can give you not just that it's in the dog but that's actually visible to a user they can submit forms by the submitting the form element or by but you know it we could have found the submit button and hit hit it this is a little helper method this isn't actually test itself at test for this might look something like this I want you call my little helper log n and then I need to wait for the browser I had to wait until something happens I'm in a traditional Web application this might be like a redirect to another page 19 the weight after that redirect to happen in my single-page I need to wait for the API calls to go to the server and come back and then the Don is gonna change and I'm asserting how I expected down to change this case underweight until I can see the upload it should now be visible and wait 5 seconds and it'll error if it takes more than 5 seconds for that to happen and then again on the server things and so the file upload area should be visible and noun along and shouldn't be visible to use that's what I'm certain here other also implicit weights that are available and selenium a and those just wait for a set amount of time a sometimes writing these assertions on how it should explicitly weight can build tricky and it's like a cheap fall back to just wait but if you just say wait for a 2nd and you start doing this in a lot of test you've added a 2nd to each test run in the new that another 2nd DHS right and it really starts to add up of it can really you and useless time tear test running and the Cezanne are particularly fast to begin with so if you follow the Zen of Python explicit weights are better than implicit weights by users are always right and so other things you might wanna service linear would be like they fill in their password they miss a character and they should see an error and you make sure that you're rendering the errors correctly these are great and the end test but they're slow and they can be fragile if you're thinking about how a building these assertions they were finding elements by HTML ID refining elements by class name but if a front-end developer designer comes in weeks of the class names now this test fails even though like the functionality should still work my test fails of or if the error message change slightly and so you wanna use these as they couple well and pair well with other tests in your tests these are integration style test was talk about you pure java script testing but it for edge cases really tricky logic it's hard to be like isolated unit tests and sometimes goes out the window we write java script is where primarily type on focus but I feel good Django community really values testing but and maybe the reason is you people don't know what tools are out there and and part why it's hard to know what tools are out there is that in the time I've been talking about this slide I think like 8 more testing frameworks have been written for jobs and so I'll tell you about the ones that were in existence but when I started my talk about some of the popular ones RQ unit I'm OK Jasmine karma protractor I mean you know the sound like testing frameworks and you probably would google common thought like yeah definitely like that Jasmine doubts what I was thinking of I so nothing is in trouble and tell you to just use q unit amid tell you why and if you don't agree with my wife check out when these how the ones I I like unit because it has a familiar X. units style that style that everyone is ripped off from small talk since the beginning of history I there are other frameworks that choose to do a morally BDD style like that lenders cucumber style and we have Python of those would be like Jasmine and Moeka is actually really where they're like just choose how everyone write your tests because I want things to be a little more opinionated or I like things to be a little more opinionated so and Jasmine is is a very popular BDD style testing framework if you like units the that's a a B or high barrier for some people feel like X. units I use Jr i used by large projects and like j query and 300 a out of his here thank you he's added this to Django 1 9 are fantastic work to cover unit test for the admin and the setting up q unit I is about creating a static HTML page which includes all of the the I. Q. unit pieces there's some CSS for q unit and there's 2 q unit of John script itself so for my project for the project I'm showing you here so there's the code that we wanna test which is the models and their views a backbone models and view that Django multi user and the user's backbone so it depends on backbone which depends on underscoring depends on japery so those are all included then at the very bottom I have 2 new files that's the test models and tests views have I know that step and script tags are missing of a weird error with reveal js which 1 is my slides so please script tags and their there in the Repo on Our 1st q unit
test use is q unit . test which means the test and then has the test function itself the test function is given a single argument which is the assertion pieces it so and it has all the assertion API you kind of expect from X unit like expect are assert equals or research OK or research not OK or not equals what In this case and you don't have to know too much about backbone I hope to release read where this test is doing I creating an instance of a backbone model similar to a general model and I'm asserting that a method called URL so that the method called returns the URL that I expect that's that's really a so again pretty standard unit test create an instance of a class call 1 method assert 1 thing and just we want from unit testing things you're also
privately with from unit testing are things like setup and teardown we we were looking at setup and teardown and for selenium they don't collosal setup and teardown anymore the colour before each after each of a it uses a Q unit module this is the thing that I hate the most about unit it but the module groupings of tests are implicit by watering so any test declared after this is part of the module and they're all part of a module until the the fire lands or until there's another module declaration which is clearly not quite our so in this case but so I wanna start testing was Sir testing my backbone views and so before each test and create an instance of that view and I inserted into the dialog and then after each test a repeat of the dance so for every test that's gonna running a fresh a copy of my view them at test any state that you attach to this I will be available using this inside of any test in the module so any tests after this module has access to this stuff view because everyone understands how jobs this works yeah and so here's a test that has this view the I again I want to call a method on my view my view as a method called and file and it takes an instance of a model so I create an instance of the model I call method and I assert that there's a new DOM elements but and I could assert more things about that Don element is pretty minimal like assert like the text of the DOM element or I could have what at scene have how the DOM element relates to the the model itself but yeah there's there's no user interaction has no user right there's no clicks for API calls this is just calling methods on objects and asserting what happens when you do yeah as a little
bonus of unit doesn't come with any mocking but it does play well with a library called sigh on JS thinkin pronouncing that right also super Googleable and so in this case the watermark the thing I this view is of the view I wanna test actually handles the dragon drop so when the file gets dropped it makes an API call the server to post and the server is not running when you look this page so I need to mark that call so in my set up teardown you know not Senator down but my before each after each I create an instance of the view an patch the collections create method and again with a little bit of backbone to know here but collection create actually does that post to the server and then a test which might use this is again I want to fake like a user did a drag and drop so I create a fait DOM events called dropped and then digging deep into how drag drop works
in java script when there's a drag and drop there's a data transfer and data-transfer contains a list of files of the user's dragging but i'm again constructing it light a user just collect and created this event and then by I call the drop callback which would be called in this case and assert that create would have been called the API call would have been called and I can assert again more things about what that called would be and there's some harbor stayed there after the dragon drop indicates asserted here as well but that thoroughly problem mocking but
to run to unit test you just load that file in your browser and looks like this but you know highlights all things as they run they run usually pretty fast of the command line tools to automate this you know you can use your favourite node task runner like grunt or gold reading just use phantom on her own but of course we also know a cheap way to automate things in a browser Python called selenium so we can just load this file with selenium and then assert that there weren't any failures by reading the Don the Scott a cheap way of I don't know that I would do this if I had a huge test suite of 2 unit but it lowers the barrier of entry like grunt and gold are like non trivial things to add your stack but you have to really be committed to add them so this is a way the sort of you get started with Q unit test and you without all those tooling pieces so it so for this project
we run them all these things run the there are selenium tests which drive this browser interaction there are or of unit test which cover the client-side interaction are actually are any Python you test an for all the of you code but those are pretty those will be hard right I'm just too lazy the but this actually get something like there's like 2 or 3 lines that are covered and this case which are like all the 404 0 for handling like you ask for a file it doesn't exist like user can't do that in the user a like in the user interface the user can have easily do that losses are covered the the as a
resources Isely gender documentation testing is you your 1st go to place and the Python selenium bindings also have great great descriptions of all those API methods for waiting on events there's different ways to find and attacked of when the Don changes in my case as I was waiting for the visibility of an element you can wait for of the title of the page to change the way forward things to disappear or reappear and there's there's lots of different ways you can use that and the q unit dots and the cyan JS stocks are also very helpful photos flicker frame commons thank you very much and my slides are available on this extraordinary along language how to read out the news Libyan DNS bitly . com had to do it so we have a book signing and 250 as well we actually do have like 5 minutes so I would take questions in our then where everyone can run in its lunch or find out who won the Microsoft test thank you the but if my or