Test-driven development: Write better code in less time by Evan Dorn. Unit Test like a Secret Agent with Sinon.js. The following content comes from the forth module of my Pluralsight course entitled: Front-End First: Testing and Prototyping JavaScript Apps.
The rest of the course covers an introduction to Unit Testing, Examples of Hard to Test Code, Mocha (a JavaScript test runner), Grunt (a JavaScript task runner), Mockjax (a way to mock Ajax requests), mockJSON (a way to generate semi-random complex objects for prototyping), and more. Introduction “Standalone test spies, stubs and mocks for JavaScript. No dependencies, works with any unit testing framework.” Sinon.js is a really helpful library when you want to unit test your code. Extending Your jQuery Application with Amplify.js. As your application grows you will find that it is important to abstract the various pieces of your implementation to help you easily extend the functionality and make it less painful to maintain. appendTo has recently released a set of JavaScript components that can assist with common problems in front-end development.
The library was developed to "Amplify" your current jQuery skills and provide some missing components that are important for developing scalable web applications. Sample Application In order to exercise these components it is sometimes easier to see how they are used in a sample application, so I'll be creating a simple aggregator of Hacker News. We will first look at a working example of this application that works, but is tightly coupled and brittle. We will use the following HTML in all the examples that will be used in the rest of this article. The above HTML represents a jQuery Mobile page. You can view, run, and edit the above source code from jsFiddle. Publish API.
Test-Driven Development with JavaScript. To shorten the development cycle of your Web application you need to start testing it on the early stages of the project.
It seems obvious, but many enterprise IT organizations haven’t adopted agile testing methodologies, which costs them dearly. JavaScript is dynamically typed interpreted language - there is no compiler to help in identifying errors as it’s done in compiled languages like Java. Introduction to JavaScript Source Maps. Have you ever found yourself wishing you could keep your client-side code readable and more importantly debuggable even after you've combined and minified it, without impacting performance?
Well now you can through the magic of source maps. Basically it's a way to map a combined/minified file back to an unbuilt state. When you build for production, along with minifying and combining your JavaScript files, you generate a source map which holds information about your original files. When you query a certain line and column number in your generated JavaScript you can do a lookup in the source map which returns the original location.
Developer tools (currently WebKit nightly builds, Google Chrome, or Firefox 23+) can parse the source map automatically and make it appear as though you're running unminified and uncombined files. Demo: Get original location The above demo allows you to right click anywhere in the textarea containing the generated source. Real world So... Potential XSSI issues. Node.js. QUnit. PhantomJS. Seamless javascript code coverage. Sinon.JS - Versatile standalone test spies, stubs and mocks for JavaScript. Grunt: The JavaScript Task Runner. User Interfaces and Unittesting with the QUnit framework and jQuery / MICHEL GOTTA. Just a while ago I checked out QUnit.
I fiddled around with it, wrote some simple tests and I thought, this could be very useful. When writing code you always add some new features into existing functionality and that’s where the errors and regressions appear, especially when it gets complex. As we know, unit testing is great for frameworks with a lot of different functions depending on each other (that’s one reason the jQuery-team developed or uses QUnit for testing). But how about testing user interfaces or simulating user interaction on websites? On websites we sometimes use small bits of code responding to the interaction or the input of a user, for example hiding or toggling elements or dynamicaly change content. There is one way to test parts of your interface without modifing your existing code (I don’t know if this is the best way but it’s one way to run tests in a simple way). 1. When you download QUnit, it comes with a basic test environment we can use. . [...] 2. . [...] 3. Tdd.
Complete Coverage and Unit Testing for Jenkins. At the Labs I have been putting a lot of focus on automated unit testing and code coverage lately.
We had found solutions for our Node.js based server and our Groovy-based server but were still lacking something that would work well for front end UI code. We needed a solution that would allow for interactive coverage analysis as well as automated coverage analysis and would also integrate well with Jenkins. Everyone is really heads-down on a big release right now, so I decided to roll up my sleeves and find/build a solution that the team can use. We use jQuery for most of our web UI, so I needed a solution that works well with that. I did some research and there seemed to be 2 viable solutions - JSCover and Blanket. Unit Test like a Secret Agent with Sinon.js.