Toby Ho: a Fun Way to Browser Test

Transcript

The following transcript was automatically generated by an algorithm.

• 00:17 : good morning I'm Doug I'm going to talk
• 00:23 : about Tootie which in my opinion is a
• 00:26 : fun way to browser test my name is Toby
• 00:29 : ho and I want to thank my employer data
• 00:33 : track for making it possible for me to
• 00:35 : be here this is me i'm outside in the
• 00:42 : parking lot taking a picture of myself
• 00:45 : just after getting a haircut from super
• 00:48 : walmart in preparation for coming here
• 00:52 : to this conference to give this
• 00:54 : presentation so now that you know my
• 00:58 : qualifications let's begin i'm going to
• 01:04 : show off a side project which i've been
• 01:06 : working on since the end of last year it
• 01:09 : is called Tootsie Tootsie is an Italian
• 01:12 : word that means all together you may
• 01:15 : have seen it in musical scores where it
• 01:18 : is used as a signal to the band to play
• 01:22 : all together Tootsie the project is a
• 01:29 : JavaScript console that is capable of
• 01:32 : executing JavaScript on multiple web
• 01:34 : browsers simultaneously so the website
• 01:40 : is to tjs calm in order to get started
• 01:45 : first you create a room a room is just a
• 01:48 : way in which I keep everybody separate
• 01:50 : separate so that everybody is an
• 01:53 : executing JavaScript on everybody else's
• 01:55 : browsers so I'm going to go ahead and
• 01:58 : create a room and at this point I'm
• 02:02 : dropped into a JavaScript show where I
• 02:07 : can execute any arbitrary JavaScript
• 02:12 : this you're out here is associated with
• 02:15 : the room that it is connected to so if
• 02:18 : you want to connect another browser you
• 02:21 : would just copy and paste the URL into
• 02:23 : that one as well so I'm going to update
• 02:26 : it to the room that I just created
• 02:30 : so now that both Safari and chrome are
• 02:35 : connected to this room any JavaScript
• 02:38 : that you execute here will be executed
• 02:42 : by both browsers and the results of both
• 02:45 : will be displayed so I'm going to
• 02:51 : connect a few more browsers now to start
• 02:54 : start off
• 03:02 : I have a Firefox 4 and I'm going to tack
• 03:08 : on a cup of IE instances as well I want
• 03:13 : IE 8 as well as I 7 so to emulate ie7 I
• 03:21 : will go into developer tools and put it
• 03:24 : into a e7 milk so now we can use the
• 03:31 : browser's command to see the set of
• 03:34 : browsers that are connected to this room
• 03:36 : right now also i want to mention there's
• 03:43 : just three comments that are available
• 03:45 : in this console the help will print the
• 03:48 : help message browsers as you just saw
• 03:50 : and reset will reset the javascript
• 03:54 : sandbox which basically means it
• 03:57 : destroys the iframe that you're running
• 03:59 : your code in and creates anyone so
• 04:01 : everything is blown away you start a
• 04:04 : fresh so let me let me just put all
• 04:12 : these windows side by side here arrange
• 04:15 : them okay and I'm going to use chrome as
• 04:19 : the driver so in general any javascript
• 04:26 : most for the most part you throw some
• 04:30 : javascript at these browsers they will
• 04:32 : give you the same at same answer but not
• 04:37 : always so sometimes browsers just cannot
• 04:43 : agree on what to do for some edge cases
• 04:48 : for example let's say I were to create
• 04:56 : an input element and set the value to a
• 04:59 : multi-line strength if i get the value
• 05:03 : back the browser's do not agree some
• 05:07 : will just concatenate the lines others
• 05:10 : will put a space in between and some
• 05:12 : others some other older browsers
• 05:15 : will preserve that new life so if you
• 05:20 : ask them who they are they will give you
• 05:26 : extremely long names differentiating
• 05:29 : themselves from each other but then
• 05:37 : again maybe just maybe they're not all
• 05:41 : that different from each other so this
• 05:47 : is just a brief demo of 2t the web-based
• 05:51 : version but that is not all there's also
• 05:55 : a command line version of 2t which you
• 06:00 : can install using NPM install 2d so once
• 06:09 : you do that you can start it by saying
• 06:12 : 2d and then giving it the room URL and
• 06:16 : now there's to the right in your console
• 06:19 : and here basically anything you can do
• 06:24 : in the web version you can do here with
• 06:28 : the exception that since this is not
• 06:30 : actually a browser it's not responsible
• 06:33 : for executing any JavaScript it just
• 06:35 : sends them out so I forgot to mention
• 06:40 : console if you if you do a console that
• 06:46 : log then it will render it in blue
• 06:50 : instead of green and the green the green
• 06:53 : is the actual return value of this
• 06:56 : statement that you just execute it and
• 06:59 : then the blue is any council messages
• 07:01 : that you print em so you can use exit to
• 07:05 : accept that now also comes with that NPM
• 07:09 : package is a JavaScript driver which you
• 07:14 : can use to script all the browsers that
• 07:17 : are connected to the room so i will show
• 07:21 : you how to is this tool oh by the way
• 07:24 : should i make it a little
• 07:27 : maybe all right I'm going to show you
• 07:31 : how to use it use the library so first
• 07:33 : you require to t inside which there is a
• 07:38 : 2d constructor so you call the 2d
• 07:46 : constructor again with the URL of the
• 07:50 : room you want to connect to the first
• 07:55 : thing you want to do is register our
• 07:57 : binding to the message event this will
• 08:02 : tell you of any messages that the
• 08:05 : browser's are passing to you so I'm just
• 08:08 : going to console lock this message for
• 08:11 : now so once you do that you can start
• 08:16 : using the eval method to send the
• 08:20 : browser JavaScript
• 08:27 : so I send the browser's some JavaScript
• 08:30 : all of them executed and it sent me back
• 08:34 : these replies some of them are the
• 08:37 : console messages others are the replies
• 08:40 : which give you the return value of the
• 08:43 : statement you could also has in the
• 08:51 : function here if you like and then that
• 08:57 : would also just get executed in the
• 08:59 : browser and but with the library there's
• 09:04 : an added capability now you can load
• 09:08 : some local you can load some local files
• 09:13 : and have the files get executed in the
• 09:17 : browsers as well which I'll show to you
• 09:20 : right now
• 09:30 : so so I have a test suite that's written
• 09:38 : in jasmine or risk using jasmine which
• 09:42 : jasmin have been using it for a while
• 09:47 : and i highly recommend it it's very
• 09:49 : full-featured and very solid so i have a
• 09:55 : test suite and i want to run it how am I
• 09:58 : gonna run it well I'll just write a
• 10:01 : script using the 2d driver so this is
• 10:04 : that script first we connect to reuse
• 10:11 : the driver to connect to the 2t server
• 10:13 : here I'll just update it with our URL
• 10:17 : for the room I have a display function
• 10:23 : that will print out any console log
• 10:26 : messages that come back from the
• 10:28 : browsers and right now I'm only
• 10:30 : interested in the console log and any
• 10:32 : errors that come out essentially the
• 10:36 : result of the tests is going to be
• 10:39 : locked to the council in this example
• 10:42 : and so once i am connected first I want
• 10:46 : to reset the sandbox to get a
• 10:48 : predictable environment then I just load
• 10:51 : the file the set of files that I need so
• 10:55 : first there's Jasmine the testing
• 10:58 : framework Jasmine console Jasmine
• 11:01 : reporter is the reporter that i wrote to
• 11:04 : print the test results into the console
• 11:08 : instead of displaying it in HTML and
• 11:12 : then there's the implementation file and
• 11:14 : the test file and then at the end i'm
• 11:18 : just going to use eval to kick off the
• 11:20 : test suite at the end i'm just going to
• 11:23 : exit out of this program but before that
• 11:26 : I want to wait for the console message
• 11:29 : to come in because that's what tells us
• 11:32 : the test results so let's try running
• 11:36 : that now
• 11:37 : I saw it reset the sandboxes and tada so
• 11:51 : offer so it ran the tests in our five
• 11:56 : browsers but for completeness I'm going
• 11:58 : to show you a felling test I'm just
• 12:01 : going to mess up this code and run it so
• 12:07 : that's that's what it might look like
• 12:10 : with fouling tests now if you do TDD you
• 12:16 : might notice that it's sometimes it's
• 12:18 : tedious having to switch back and forth
• 12:20 : between your editor and your console all
• 12:23 : the time so but with no Jas is kind of
• 12:27 : easy to write a script that or monitor
• 12:30 : any changes in your source file and then
• 12:33 : rerun the tests automatically so I have
• 12:37 : a script that does that
• 12:48 : so now this time i just have the
• 12:50 : required scripts in an array and then i
• 12:54 : just say for each script going to do a
• 12:57 : watch file on it for modification and
• 12:59 : then anytime it's modified any of them
• 13:03 : I'll just rerun the tests pretty simple
• 13:07 : and i'm just going to demo for you the
• 13:13 : the workflow of doing TDD using this oh
• 13:23 : I better update update the script to
• 13:27 : come to the right one okay
• 13:39 : ok the first first time around it just
• 13:43 : it just ran on all five browsers that
• 13:46 : there weren't any tests yet because
• 13:48 : these are empty files so for this
• 13:51 : exercise I'm just going to write a shim
• 13:53 : for the array prototype dot map method
• 13:59 : so i'm going to say describe array map
• 14:05 : it should know
• 14:14 : and i'm going to say expect if I map 1 2
• 14:18 : 3 2 i just multiply everything by 2 then
• 14:25 : I should get a value equal to 2 4 6 here
• 14:30 : I save it and it sees the changes and
• 14:33 : automatically rerun the tests so it
• 14:36 : passed in Safari Firefox and Chrome but
• 14:40 : not in IE because I e doesn't support
• 14:42 : that method so i guess i'll just have to
• 14:46 : write the method myself so i'm going to
• 14:54 : say if it doesn't exist and I'll just
• 14:57 : use my own implementation
• 15:07 : so I need a returning array and a cache
• 15:11 : the length
• 15:23 : at the end return and yep and so yay it
• 15:37 : passed everything it passed it for all
• 15:38 : the browsers that I'm interested in so
• 15:47 : now that that's a gross simplification
• 15:49 : of the map method obviously I could go
• 15:53 : further and make it more correct but I'm
• 15:55 : not going to so the point of this is
• 15:58 : just to show you what how TDD might work
• 16:02 : using the tootsie driver but the 2d
• 16:13 : driver you can use it for other things
• 16:14 : too not just testing and i'm going to
• 16:20 : show you i'm gonna build a browser
• 16:25 : feature comparison table using the 2d
• 16:28 : driver so i wrote a script
• 16:44 : update it to the room that I just
• 16:47 : created arrow script that will it'll
• 16:51 : first load modernizer the feature
• 16:54 : detection library and then it will
• 16:58 : basically loop through the moderniser
• 17:01 : object for each of the features that it
• 17:04 : detects and it'll built a print awesome
• 17:10 : table headers and it'll it'll and then
• 17:15 : it'll out the row for that browser but
• 17:18 : it will just put an X in the rows up in
• 17:22 : the column it'll put an X in the column
• 17:25 : where that corresponds to the feature
• 17:28 : that that browser supports so I don't go
• 17:32 : line by line through this script but
• 17:34 : i'll just show you what it does here no
• 17:38 : so if i say like run it oh that's not
• 17:45 : very okay i'll put it into a file let it
• 17:53 : come
• 17:56 : okay hopefully it's working we missed I
• 18:05 : seven somehow but you get the idea so
• 18:08 : it's a textual table like this so table
• 18:15 : in ascii essentially but also happened
• 18:17 : to have some code lying around that will
• 18:19 : convert that ASCII table into HTML so I
• 18:24 : run the script that does the whole thing
• 18:26 : now
• 18:36 : ok
• 18:40 : ouch we lost a couple of browsers let me
• 18:46 : see if I can get them back
• 18:54 : sure
• 18:56 : Oh
• 19:02 : okay yay so yeah just by running that
• 19:07 : script now have generated this feature
• 19:11 : comparison table nice okay so last thing
• 19:16 : I want to show you is you can also do
• 19:22 : npm install to t server so in case to
• 19:34 : tjs com goes down maybe because I'm I
• 19:38 : can't afford to have it stay up so once
• 19:43 : you install this you just run to t
• 19:46 : server and it will serve to tea on port
• 19:49 : 8080 so you can access it directly
• 20:02 : access directly on port 8080 this is
• 20:08 : running in standalone mode which there
• 20:11 : is only one room there are no multiple
• 20:13 : rooms because presumably you're just
• 20:16 : running it on your own so but you can
• 20:19 : use this top-level URL in any of the
• 20:22 : places that I show in the demo so this
• 20:31 : is still early days for this project if
• 20:34 : you play with it and you come across any
• 20:37 : issues please report it please report
• 20:39 : them to get up that is it for me thank
• 20:44 : you for your attention