Test driven development for a JavaScript library - javascript

At the moment I'm working on a JS library for a webservice, you can compare it with Twitter Anywhere. Now i want to make it more test-driven.
It's not easy to test because it has to work on every site that wants to make use of it, and of course with every browser.
How can i test the library efficiently?
All the API requests and responses are in JSON, is there a good way to test these calls?
I know about Cucumber and js-test-driver.
Greetings,
Chielus

Javascript language is dynamic by nature, so it is really test-driven friendly. I've recently got a little experience with javascript testing. I've rewrote major javascript components using TDD and got clear desing and more compact code!
unit test framework of choice is qUnit. It is very easy to start with testing.
functional test framework of choise is funcunit.
I did a blog post of testing REST api with FuncUnit here.
If you need some examples of tests and implementation, you can check my github repository.
Don't ask questions, just start testing :)

If you know about jsTestDriver I think you've already found a good solution?
You can use it to automatically launch your tests in multiple browsers and return success or failure.
This sets it apart from other tools that use headless browsers, as with jsTestDriver you're running your tests in real browsers, which seems to meet your requirements.
jsTestDriver comes with its own limited assertion framework but you can plug others into it including QUnit, YUI and Jasmine.
You said above in relation to Jasmine, "I don't think i can do BDD, because it's a library that has to work with all kinds of sites.". I'm not sure what you mean by this?
Jasmine provides all the assertions to let you do the same tests as QUnit. It also lets you 'spy' on Ajax callbacks, intercept the JSON to examine or even alter it, then pass it on to your default callback. With this you could check the JSON response then check again when your UI has reacted to it in the right way.

Related

How to update JavaScript libraries without being terrified?

One of the great things about being a web developer in recent history is all the sharing that's going on, especially with JavaScript libraries. There's all these awesome tools to use: jQuery, jQuery-UI, Lightbox, bxslider, underscore.js, Backbone.js, the list goes on. Then there comes a time when one or more of these libraries need to be updated. But JavaScript runs on the client, it doesn't compile, and it's difficult or impossible to be notified when a problem occurs. What is the best technique right now to assure that after you update one or more JavaScript libraries, your web application will not start throwing JavaScript errors?
There's no way the best response to this is to just test. Especially with a complicated application it can be too difficult to go through every possibility and make sure no errors are thrown. What are other web application developers out there doing to make sure they don't have a deployment with an embarassing and crippling JavaScript bug caused by updating?
The best answer is to "just test". What you are asking, essentially, is "How do I test to make sure my software still works?". You can do all the homework you want to see what changed, but eventually you just need to test your application.
That being said, there are generic testing tools like JSLint and Selenium, but ultimately your application is going to be unique enough that you will need to have unit tests to cover the business logic and standard QA for non-standard processes.
One way to ensure that things still work functionally is to have a suite of automated browser tests (utilizing a tool like Selenium) that you run on your development environment.
I wouldn't really call this "just testing" but unit testing will help do the job. Write tests once for your app looking for the expected results (good practice either way), then when you update the plugins run these tests again.
http://qunitjs.com/
Nothing beats a good QA and browser testing though.
Plenty of other answers already include "test", so hopefully that's obvious at this point.
The other thing that you should ALWAYS do is read the release notes for every single version up to the version that you're upgrading to. I can't speak intelligently about bxslider or Lightbox, but the other major libraries that you referenced are extremely good at releasing detailed changelogs which will notify you of breaking changes. You can decide for yourself if any of these changes will have a negative effect on your app ( in addition to testing of course!).

How to do a smoke Test and Acceptance test in a Javascript Aplication?

I want to do a smoke test in order to test the connection between my web app and the server itself. Does Someone know how to do it? In addition I want to do an acceptance tests to test my whole application. Which tool do you recommend?
My technology stack is: backbone and require.js and jquery mobile and jasmine for BDD test.
Regards
When doing BDD you should always mock the collaborators. The tests should run quickly and not depend on any external resources such as servers, APIs, databases etc.
The way you would want to make in f.e. Jasmine is to declare a spy that pretends to be the server. You then move on to defining what would be the response of the spy in a particular scenario or example.
This is the best aproach if you want your application to be environment undependent. Which is very needed when running Jenkins jobs - building a whole infrastructure around the job would be hard to reproduce.
Make spy/mock objects that represent the server and in your specs define how the external sources behave - this way you can focus on what behavior your application delivers under specified circumstances.
This isn't a complete answer, but one tool we've been using for our very similar stack is mockJSON. It's a jQuery plugin that does a nice job both:
intercepting calls to a URL and instead sending back mock data and
making it easy to generate random mock data based on templates.
The best part is that it's entirely client side, so you don't need to set up anything external to get decent tests. It won't test the actual network connection to your server, but it can do a very good job validating that type of data your server would be kicking back. FWIW, we use Mocha as our test framework and haven't had any trouble getting this to integrate with our BDD work.
The original mockJSON repo is still pretty good, though it hasn't been updated in a little while. My colleagues and I have been trying to keep it going with patches and features in my own fork.
I found a blog post where the author explain how to use capybara, cucumber and selenium outside a rails application and therefore can be use to test a javascript app. Here are the link: http://testerstories.com/?p=48

functional test for JavaScript

I really need your assistance.
I am developing a project and most of the code is written on JS (backbone.js and jquery).
Could you please recommend me a tool/framework for functional testing?
I don't think that qunit or Jasmine meet the requirements of functional testing.
I would like something like cucumber for Rails but which could handle a lot of JavaScript.
You could use http://casperjs.org/ a nice little library created for headless browser PhantomJS. It's a full webkit, so you have almost 100% real browser interaction.
If you prefer running it on Selenium, with multiple real browser instances, check geb : http://www.gebish.org/
Note that most of the JS test frameworks have problems with alert() and confirm() windows (some really dirty hacks are used to handle them), so you may need to resort to pure Selenium http://seleniumhq.org/. I'm still testing it, but SeleniumIDE handles alerts very well, so I think this will also be true for Selenium WebDriver. Selenium has bindings in many popular languages (no JS though), so I guess you'll find something that suits you.
If you consider using a framework for it, try JavascriptMVC:
http://javascriptmvc.com/
It does:
Unit testing
Functional testing
Code cleaning
Code generating
Dependency management
And uses jQuery as a backbone. It's typically useful for middle to large JavaScript projects.

What JavaScript UI testing framework should I use for a simple HTML5 + jQuery app?

I'm about to write a simple HTML5 + JavaScript (jQuery) app in my spare time in order to keep up with the latest web technologies (at work it's more advanced C# backend stuff).
I'd like to develop in the same fashion that I've done for the last ten years or so, namely TDD style.
Being new to the TDD/BDD/AcceptanceTDD world in HTML/JavaScript, my question is: is there a great framework or the like for writing test against a web page in a browser (out-of-the-box support for many browsers being a definitive plus)?
The reason I'd like to use JavaScript is two-fold. 1. I'd like to learn more JavaScript, and 2. I'd like to use the same language(s) for the tests as I do for development.
Otherwise, I could simply use my C# skills and use Selenium, WatiN, or a similar framework.
I've found Jasmine, QUnit, and a homegrown solution using jQuery at MSDN, but don't get a feel for the flow nor complexity, so recommendations and first hand experiences are more than welcome.
JS Test Driver is the framework recommended by the Javascript TDD book from O'Reilly that I'm reading right now. I haven't actually had a chance to play with it much yet, but:
A dude who wrote a book on JS testing recommends it
It has a very nice feature set (automated test running across multiple browsers being key)
It comes from Google (love 'em or hate 'em, they have a lot of smart JS people working there)
So at the very least it's worth checking out I think.
At this point, I'd recommend Jasmine. I've used it successfully on a few projects. I haven't really run up against too many frustrating situations where I just couldn't get something done (unlike other tools). It can be set up in different configurations, depending on your preference-- it can be as simple as opening a page in a browser, or it can be "served" dynamically.
There are dozens of tools out there in general usage-- and so far-- no clear winner. I've tried a quite a few of them, and-- as John Resig points out-- creating a simple testing framework isn't that complicated. But adding some tools to make it convenient is important. Jasmine is the most complete one I've used, but it's not bloated.
Important considerations:
set up: don't adopt a tool that doesn't work easily out of the box
style: use a tool that makes sense to you in the context of the rest of your testing tools. For example, if you use BDD tools, find a BDD Javascript framework. This is probably the biggest variance in the frameworks-- might as well pick one that has a syntax you like.
cross-browser: the tests should work across browsers
automation: you should be able to script the running of the tests in one or multiple browsers
testing time-based code-- if you Javascript has behavior tied to the clock (as in animations), having a testing framework the facilitates this is nice
mocking: jasmine has a nice mocking support that really helps
You really do not need to use Selenium for simple unit tests-- it complicates the configuration and is a more difficult programming model than a simple unit testing framework.
I've struggled with this a lot. I think Selenium is your best bet especially since it sounds like you've used it before. The other stuff for JS is mostly unit testing.
Not to diminish machineghost's answer, JS Test Driver rocks for unit testing.
I ended up using QUnit since I found it very simple to just insert the PUT (Page Under Test) in an <iframe>, and use jQuery to access it from the unit tests.
That way I don't need any other external dependencies other than the browser itself (the logic resides 100% in the client) and any text editor.
Turboframework uses javascript, jasmine, selenium and runs with node. You can literally create a test project and run web automated tests in less than 10 minutes. To avoid repeating the documentation that is already available, here's the link to a quick start guide:
https://turboframework.org/en/blog/2021-03-03/automate-your-web-application-tests-in-less-than-ten-minutes

What are some JavaScript unit testing and mocking frameworks you have used? [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
My main JavaScript framework is jQuery, so I would like my unit test and mocking frameworks to be compatible with that. I'd rather not have to introduce another JavaScript framework.
I am currently using QUnit for unit testing and Jack for mocking, but I am pretty new to the whole unit testing of JavaScript.
Is there a better tool to suggest? What has worked for you?
I think that Jack is the best mocking framework for JavaScript as of the time of this writing. The main reason is that what's right for JavaScript is not likely what is right for a strongly typed language such as Java.
Many JavaScript mocking frameworks are inspired by Java mock frameworks (such as the excellent JsMockito, for example). But the problem with these is that they require dependency injection, because that's about the only reasonable way to use mocking in Java. But in JavaScript, there are many ways to use mocking, and you are not forced into using dependency injection everywhere.
For example, with JsMockito, you have to make mocks and then pass those mocks into your software-under-test (SUT). The SUT has to directly call the mocks. Therefore, you're forced to code the SUT as a constructor or function that takes in all its dependencies as parameters. (Sometimes, that's a fine way to implement it, but not in every case. The tail is wagging the dog if your mocking framework's design forces your implementation approach.)
In JavaScript, it's very easy to "hijack" any function. Therefore, there are tons of ways to build something such that you can mock parts of it without explicitly injecting its dependencies into it. For example, Jack lets you mock any function, whether it is public or on a local object. From there you can spy on it, stub it, or express expectations on it. The key point is this: once you've mocked a function, any calls to that original function will instead be directed to your mock. In other words, your mocks will still get used even though the original, un-mocked function was called. As a result, you are not forced to inject dependencies, although you certainly can do so in those cases which call for it.
JavaScript is a different language than Java (and C#, etc.). It allows for different implementation idioms. Dependency injection is still one valuable tool in the toolbox in JavaScript, but it is not the only game in town any more. Your mocking framework needs to know and respect that fact. Jack and a couple of others do, but of the ones that do, Jack appears to be the most mature and feature-rich.
QUnit
jqUnit
Writing JavaScript tests with QUnit and jqUnit
QUnit is the unit testing framework for the jQuery JavaScript framework. The testing framework itself uses the jQuery library, but the tests can be written for any JavaScript and do not require the code to use jQuery.
jqUnit is a modified version of QUnit that adds in the setup, teardown, and assert functions that are more typical of an xUnit framework, and encapsulates everything in one global variable.
The visual interface of the testrunner page is nice, allowing you to drill down and see each assert in every test method. Writing tests is fairly easy, and you can run the test code directly on the testRunner page [8]. This allows for easy and visible DOM testing.
QUnit: MIT or GPL (choose) jqUnit: MIT License
Pros
Asynchronous support
Good for DOM testing
Tests always run sequentially in the order they are added to a suite
Debug on test page using firebug
Syntax is similar to JUnit if using jqUnit, but simple to learn if using QUnit
Cons
Automation would be difficult to implement
I'm not sure why no one has mentioned JsTestDriver! It has to be the one of the only JavaScript testing tools that actually work like you'd expect them to if you've used unit testing tools in other languages.
Running tests can be done without touching a browser, you can integrate it with IDE's, and you can integrate it with Continuous integration systems... Oh, and it's fast, and can run tests in multiple browsers at the same time.
You can also use other testing frameworks like YUITest with it, making it even better.
YUI Test
TDD With YUI Test
YUI Test is the test framework for Yahoo’s User Interface (YUI) library. It is used by Yahoo to test its own library, and has syntax similar to JUnit.
Like jsUnit, YUI Test comes with its own logging console that can output information, warnings and errors in addition to the results of each test.
YUI also provides the ability to send reports on the results in either JSON or XML format.
YUI Test is BSD licensed.
Pros
Really good documentation
Active community
Regular releases
Syntax is similar to JUnit (test suites, asserts and setup/teardown)
Asynchronous support
Good for DOM testing
Tests always run sequentially in the order they are added to a suite
Cons
Automation not trivial to implement, but less difficult than other frameworks
Also check out
http://sinonjs.org/
It has test spies, test stubs, mocks, fake timers, fake XMLHttpRequest (XHR), fake server, sandboxing, and assertions
It does work along with QUnit and that has been a plus so far.
This is a pretty good review of mocking frameworks available for JavaScript:
http://testdrivenwebsites.com/2010/05/06/java-script-mock-frameworks-comparison
I use the Screw Unit test framework and I've written my own mocking library called jsMocha which has been in heavy use in the company I work at for over 6 months.
For mocking in JavaScript, take a look at qMock, a framework a colleague and I wrote to complement our use of QUnit. Although the latter is great for unit tests, it doesn't allow for very effective async/business logic testing. We haven't 'tagged' any release as stable, but there's some decent documentation on there, and if you checkout the SVN repository you'll see qmock itself has unit tests behind it which are fairly self-explanatory.
Oh, and to automate testing as part of the build, we used a simple Selenium script to navigate through our testsuite (one testing page per JavaScript file), and 'listened' for a pass or fail CSS class (added by QUnit). This works headless as well for Internet Explorer and Firefox 2, AFAIK.
For Firefox development, I have fallen in love with UXU, based on MozUnit, but it is still active. It has nice features, like a mock server and sleep / yield methods.
CrossCheck seemed extremely powerful when I looked at it, but we've not incorporated it into our build process at this time. It has the advantage of being browserless, and thus should work well in an automated build-and-test scenario.
http://thefrontside.net/crosscheck
I know you are asking for jQuery-compatible frameworks, but I want to throw script.aculo.us into the mix for completeness. They have a unit test suite that isn't bad.
JsUnit is run from either the browser, through its Eclipse plug-in, or automatically through an Ant task. You create an HTML page with a bunch of test functions, which must be named with the prefix ‘test’, include the JavaScript file you are testing. When any assert within a function fails, the entire function fails and stops executing. There is no guaranteed order in which these tests are run. You can create setup() and teardown() functions.
License: GPL, GLPL, and MPL
Pros
Automation is relatively easy to implement
A lot of functionality
Syntax is similar to JUnit
Cons
Not great for DOM testing since it runs tests inside an iFrame.
No guarantee that tests will be run in the order they are written.
Can’t use Firebug on the testrunner page. Need to have another tab open with the actual test code.
We've been using jsspec. It's very nice if you like rspec and BDD. I just saw an article by Justin Gehtland on using it "headless" as well.
You could try HtmlUnit which had a jQuery compatible release over a year ago.
The advantage of HtmlUnit is that it isn't driving a browser, so it is fast.
The downside is that it isn't driving a browser so there are some JavaScript things that won't work. But offsetting that they can run the jQuery tests so the JavaScript support might be good enough for what you need.

Categories