 So I'm Corey and I'm Justin And so so I write Ruby and I'm interested in JavaScript, but I want to apply the same sort of processes and level of craftsmanship to my JavaScript code that I do With my Ruby code Right, and I had a hard time with that. I found it to not be a very easy process And so I talked to Justin and We worked on some stuff We started talking around this idea that you know in Ruby. We're really focused on craftsmanship and in JavaScript, you know the equivalent is Something else and I'm fortunate enough to not really be gonna turn me down maybe a little bit I'm not really in the Rails community as much as I'd like to be I'm working in a lot of other environments But a year and a half ago I had a client who needed some really complex JavaScript and I was scared because I hated JavaScript So I started testing it and I started learning JavaScript and I started liking it and I started building really cool complex things So I'm just kind of here today to share some of the insights that I've learned and and hopefully will be able to Help show you guys some actionable steps that you can take to start testing your JavaScript But first we want to talk about why people aren't Testing their JavaScript Why aren't you testing your JavaScript? Well, I'll tell you I'm not testing mine because I'm really really good at like convincing myself That these things are valid reasons, right? It's a bunch of really weak rationalizations But I'm just the type of self-deceived individual who will buy into my own nonsense So these are all things that you know I had a lot of conversations with people in this room today and other Rubyists that I know one of them that Hit home with me was the reason I hadn't been doing it till that project demanded I do was no one else expects me to do it the craftsmanship community I think a lot of it's professionalism and peer pressure, you know that that drives us to Figure out which practices are really important So so if I submit Ruby code without a spec, right? I can pretty much expect a certain result, right? I'm gonna submit a pull request and somebody's gonna say Where's your spec? But if I submit a pull request for your JavaScript project and I don't have any test coverage I'm so used to that now. I'll just look at it. I'll say thank you I'll write some specs and then I'll re-implement what you did for me, but I won't Yeah, I think that that's terrible and You know, we all know why right craftsmanship is craftsmanship code is code We should apply the same level of diligence and care To every part of our system. Yeah, and so when we hear things like that, you know TDD for JavaScript isn't worth it or it's just glue code It's disappointing because I think it has real consequences which are Well, one of the conferences consequences I think is that The browser can do really cool things now and JavaScript is the only language that runs there So if you want to build a quality user experience, I think you just have to be able to grapple with JavaScript You can't really run from it Well, so what I usually do is you know, I'll just push this logic somewhere else, right? I'll push this functionality into a controller or into a view or a helper somewhere that it's easy to test With our spec and like the rest of my Ruby app. Yeah, what's so what's so bad about that? Well, I think that You know Chris Nelson wrote a blog post recently where he said that this is the late Cambrian age for server-side MVC frameworks And I like that image because rail solved the real special problem in 2005 where Dynamic content wasn't easy to do and now we're in a stage where dynamic interaction isn't really easy to do And so I think applying the same Practices that made a successful with our server-side code could really serve as well and get offer us a competitive advantage Especially as a voice in the community to start applying those same practices to our clients I'd craft man Why so serious? Why so serious, right? So Cory, I've seen application.js is where I've heard tell of application.js files that look a little like this You think that's fair. I thought I made this repo private Yeah, yeah, that looks about right big ball of mud Chris Powers would probably call it tangled. Yeah. Yeah a lot of anonymous stuff You know code that rewrite yesterday Anthony told us all the code you write as an API But if it doesn't even have a name, I don't know if that's true if you just have anonymous functions and event holding Yeah, so so so naming your methods is usually step one to testing. It's like the the API equivalent of no sequel like no Oh Holy smokes. Okay, so when you don't have tests, yeah, one of the things that I've I've been taught now You know, I embrace this is that a ton of comments in your code is kind of like not the way to go When I try to apply that sort of line of reasoning to this We pull out all the comments and I have a really really tough time looking at that and like Immediately intuiting what it does and anybody else my loan here. Is that like obvious and I'm missing it Yeah, so if all the code in the code base looks like that or if you're used to fighting with JavaScript Do you want to be doing it every day? Not that so I'll just stick to the back end stuff then I'll let the I'll let the you know The big brains like you like work on the front end stuff and the designy guys Who are like way smarter than me like figure out how all this crap works? What what's so bad about that? Yeah, and so Maybe maybe ultimately, it's true. Maybe JavaScript isn't right for you But but I think that at least giving it a shot giving it the old college try and trying to build enough experience to make an informed decision is is Really a commitment that we can all make This week. There was a blog post that I think was very apt Blog post by Jay Fields and in there I grabbed the most provocative looking quote. I could find I basically never pair So Jay Fields, I mean he's pretty well regarded, right? He must know what he's talking about So I guess it's safe for me to assume then pairing has no value, right? I don't I don't need to do it Is that well my takeaway? I may have taken it slightly out of context cuz I didn't really say that he more said I've got all this experience with pairing and here's all the context of my current situation And it's not necessarily really providing me a lot of return on investment right now And here's some caveats, and I had Michael Feathers look at it first Before I posted it. Well, that makes more sense. This makes more sense like But You know so saying I don't do JavaScript. I Should probably have that same sort of informed perspective And I don't mind when I hear it as long as people have given it a shot and realize it's not for them But but I used to say this a year and a half ago, and I can't believe how much I've learned since So showed hands not including Justin who has the context in the experience and has decided not to do JavaScript or not to test JavaScript anybody Wow good on you. All right, cool. So I'm with you so far Make some compelling points So at this point we just want to say, you know No one raise their hand. So just please you know start testing your JavaScript before you quit testing your JavaScript Cool. Thank you. We can make that commit. Thank you. All right. Goodbye. Oh Oh Yeah So, all right, so so I'm gonna start testing my JavaScript, right? Maybe you're not crazy Sure, but but I tried right I tried I tried a bunch of different Jasmine runners I tried a bunch of different, you know blog posts to do a setup and it was fail after fail after fail And it was painful right and especially when in Ruby world I can just like now open up my gem file and say, you know gem our spec and like get a great test stack No effort. I Looked all over the place and I couldn't find that So let's let's just make a quick pivot here with Dave Caruso and start talking about Some real codes and just talk about first steps So first let's talk about our spec. Nobody got that I Thought that that was like gonna be the best thing that we had. I'm a little disappointed I'm sorry. We've let you down disappointed you in crowd So show of hands, who knows our spec this better be everybody Thank you sweet. We didn't ask whether you like our spec or prefer it over anything else, but we're just talking about familiarity Just look familiar Yes, yes, we lost this guy over you sleeping. Yeah, so well, sorry, what if I told you that this was Jasmine That looks like our spec and and actually having this this looks really familiar Yes, congratulations everybody. All right. It was a good time. Hey, thank you very much everybody. Oh So so so it wouldn't I Think we should at least take a stab at that one problem that we saw of unnamed anonymous functions, but I know Jasmine So let's take a real-world example of some real code of yours Okay, and then just try to see what it would be look like what it would look like if we wrote some specs for it Can you please stop pulling examples for my crappy untested JavaScript code? Sorry, can you explain what this is trying to do for us Corey? Yeah, I mean it's two lines. It looks pretty simple, right? We're doing something. We're clicking. We're running some code new task Step three profit Yeah, so when I when I see code like this and I'm sure that a lot of you have seen jQuery But if you work with jQuery event bindings that look a little like this My question is yeah Well, what's the concern? Well, what's the concern with this chunk of code? JavaScript You are the finding TLA's Or is it that app behavior that's occurring right there? Or is it maybe like the gluing of that event and that behavior? So you can see there's there's several things kind of going on at once even though it's only a few lines That gives me the uh-oh feeling And when you when you don't separate concerns is that Wayne So when you don't separate concerns one thing that it seems like it can lead to in a lot of cases is stuff like this Yeah, yeah, so that one wasn't so bad, but I'm not a big fan of the neighbors here. That's ugly Right. I hope okay So so how let's just start with that application behavior If you didn't see what it does it just looks at this and then gets a jQuery results object of it And it adds a new div that says new tasks. It's not easy enough sure. So let's look at a Jasmine spec of that code Hey, that looks like ours, but oh we did that one Pretty straightforward. We're adding a task. We have some setup. We have some behavior. We have some assertions Okay, I'm with you. Yeah, sweet So and one of the questions that I get right off the bat when I first start talking to people about Testing the JavaScript is they'll say well, how would I test that jQuery or that DOM interaction? And there's a lot of tools out there and helpers to Jasmine that can really help you do that The one that we used here is called Jasmine jQuery and you can use that URL to be find it But it provides a lot of custom matchers that are really really powerful For instance that container is a jQuery results object So I get the matcher to contain you know and then a jQuery selector and it'll go and you know verify that one Is there so you should have taken our JavaScript craftsmanship Ruby craftsmanship like idea and done that with Jasmine jQuery and our spec rails Right because it seems like they're doing similar things providing matches, right? So it's not that different What else you got? Well, so so so that spec drove out a new function that's named and more focused I mean this looks good to me because I can tell what it does by looking at the name And it's a one-line method where I come from You know, that's smiles times. You know, this this is good. We like this. I like this. Do you like this? Well, it's not the whole story Cory, right the event binding is the hard part but is there anybody at this point who wants to go back to the Four-line method with all the crazy stuff going on Because there's the door a total straw man. That's no fair Okay So we'll continue now now no one no one be scared of this one Describing some stuff doing some setup talking about behavior trigger an event handler buying Prevent that's kind of long I'll say dude that is way scarier on this great big screen and it was on your monitor Okay, so what can we do to fix this? So there's a lot of visual cruft to start off with right if you do a lot of nesting You're typing the word function so fast that you can just hammer it out Lots of semicolons and curlies. I mean, that's how we roll in JavaScript land, right? You're supposed to have like function function function. Didn't we see that in an earlier story? No bad. Okay So what happens we take this out? Yeah, so earlier today It was mentioned that Rails 3.1 with the asset pipeline includes coffee Support out of the box and even if you don't choose to use coffee script for your production code right away for whatever reason There's nothing stopping you from using it for your test code So Jasmine, I think looks a lot better a lot cleaner. I mean you can look at this and tell that we're talking about a clicker You know, we're setting things up and we're clicking a button Triggering our handler binding to the result Preventing the default behavior. It's doing the same thing, but this is less long I'll say there's a little bit. So that spec drove out a more reusable function And this one we can just you know, we called it clicker you give it any jQuery selector you give it any success callback and It prevents default for you. It sets up the live handle. I Think it's an improvement so what we started with up there was we had you know all these combined concerns that was probably gonna lead to some Duplication and it just became an easy little one-liner that's hopefully readable maintainable And if we change how we do our click event binding, you know, then We only have to do it in one place. I Like that. I like that a lot. What else you got? So let's talk about just like next steps. We don't have very much time left but but there's We'd be remiss if we just finished here and then didn't point you in the direction of some new stuff to do Sink or swim Rubyists. Yeah, so so I've been spending a lot of the last year if you follow me on github or anything Half of my repos are about little Jasmine toys and demos. I built a little Web app that lets you just try Jasmine out in your browser without any downloads or any setup at this URL on Heroku What does it look like? It looks a little like this So it's hopefully not too threatening You just type some specs in here and some source down here and hit the button or the keyboard shortcut to fill it out Kind of looks familiar. Is that Yeah, so so it uses the the ace boxes here to draw out Yeah, so so github recently is using the same really really slick editor with the syntax highlighting And I was proud that I was there first, so let's take that Tim Clem That's all we have on Tim So what else can I do? I tried jasmine. You got me. So how do I add it to my rails project? Cory and I had trouble coming up with good slides at first and so we just spent the day hacking on a rails gem Jasmine rails is a real simple gem that wraps up a couple other tools We like one of them is Jasmine headless webkit and the other one is The core Jasmine gem just a new runner that respects the new asset pipeline so that you can use coffee script Asset pipeline and head the specs tell me more. Yeah, so you you can run it headlessly With a real, you know, the wet the Nokia webkit widget that looks like our spec Or you can run it in your browser and this is especially helpful for debugging and they both drive off the same jasmine Yeah, we'll config file. So so they should be in sync. It looks like try jasmine So either way Cory prefers it this way. Cool. I prefer it that way anything else one last thing So we actually we were talking about this and wanted to give a little bit more of an in-depth thing Because there's obviously a lot to go into here. There's Dom Interactivity. There's callbacks Ajax There's so much stuff that we're not familiar with in Ruby land It's kind of unique to JavaScript in Jasmine So what we wanted to do was get together with everybody who is either testing JavaScript or wants to test JavaScript Let's all hang out talk about what the issues are that we're having and figure out how to work through them together So we can all learn and grow and get way better at you know improving the quality and the craftsmanship around Our JavaScript code and in addition to loving you so much. We made a gem We also have a coupon code. So definitely take advantage of that. It's in Denver. It's add-on cube CJ If you don't know about that. Yeah, and even if you can't make it next week, especially if you're flying home Find either of us on Twitter and we'll try our best to answer your question Help you with a gist or kick it back up to DW Frank and the awesome guys at the middle labs who made Jasmine for us So big thanks to them, especially because they're sponsoring today Thank all of you for writing crappy JavaScript code and inspiring us to give this talk