How do you develop in Javascript using unit tests and having some sort of IDE

Question

I do not like saving files, switching to a web-browser and refreshing and seeing if it worked.

That is why I am asking.

When I must touch PHP I use Eclipse, and I can create unit tests and make sure it works properly, I don't write a bit, test then write a bit and test. So I expect to "develop" Javascript the same way, write a chunk, make sure it works, but I'm not sure how I can test actions triggered by a button say.

I've searched for "Javascript development" and other terms, I get the expected slews of crap on ... well hello world Javascript snippits really.

Can someone point me in the right direction? I currently use Eclipse (Eclipse CDT, PyDev, Eclipse PHP, so forth) and I can debug. I could make do without the step-by-step debugging for Javascript, but I'd really like unit tests.

The other problem I have is the difficulty finding out what went wrong, Even PHP can give you a call trace, I'm stuck with Firefox's annoying-to-access error thing in the web-developer settings.

There must be a better way, but I'm struggling to find it.

Answer 1

Take a look at Grunt, it's a command line "JavaScript task runner" that helps with automating things like minification, compilation, linting and unit testing.

There are a lot of plugins for many other tools and frameworks. If you don't use a framework or a framework that doesn't supports unit tests, you should use a testing framework. There are a look, here is a list of (mostly tdd style) frameworks: JavaScript unit test tools for TDD

Tests are usually run "headless" in the console via grunt test. Depending on the test framework there may also is a nicer looking generated web page that shows you the latest test results. You could setup a button/hotkey/action in your IDE to run this console command (most editors also have this feature) to start your unit test.

I've used grunt as part of Yeoman (which adds a package manager and scaffolding and some grunt plugins), where the most useful feature I've found was that you can grunt act on files changes. This means you don't even need to setup your IDE or text editor to use grunt. You simply save a file and grunt will run tasks like unit tests automatically. Another useful feature was the grunt serve command in combination with the livereload plugin, which will start a server that automatically reloads the page in your browser when you save a file.

The downside is that it seems to be more focused on single page webapps. If you have complex pages that are generated on the server side and only some javascript it may not suit your needs.

Answer 2

I am using jasmine.js for unit-testing.

My Editor is Brackets which has a build-in webserver. Brackets open your html-page which contains the JS code in i.e. Chrome and reloads the page automatically every time you save a js-file that is loaded by the html-file.

Combined with jasmine I have a setup where my unit-tests run always when I save a js-file.

But this doesn't really help if you want to test the functionality of a Button. I think there are two possibilities:

1. If your Button starts some code that does not change the UI, then you should split the businiesslogic from the event-handler, so that you can call the bussinesslogic from a unit-test without the ui.
2. If the Button changes the UI, you could use Selenium or any other Tool that is designed to test GUIs

Answer 3

If you want Unit tests, you are talking about QUnit, Jasmine, or Mocha/Chai. (I use Mocha/Chai). The tricky part is testing without a browser. Your first option is to use CasperJs and PhantomJs. These are headless browsers that can run JavaScript without needing to be in a live browser, so all your tests can be automated from the command line. If you also add in Karma, you can test in as many browsers as you specify in a headless manner.

If you are using PHP, you can install Codeception from a Packagist repository. Under the modules for Integration tests, add Selenium. This will then ask you what Browsers you want it to launch. This is the nicest way to test using PHP with JavaScript (if you use PhpBrowser, another package that's the default, it's much faster, but it does not recognize javaScript), but it has a high performance cost because it will actually open up a bunch of different browsers and do each of the tests. I don't recommend that except as a final part of your build process.

If you want to learn how to test JavaScript thoroughly, here's your guy:

http://www.letscodejavascript.com/

Answer 4

I would recommend you to use chrome developer mode or you can use firebug for firefox.

Grab firebug from here

Answer 5

Step one; static analysis: http://www.jslint.com/

Step two; testing: Automatic tests in Eclipse for JavaScript

Step three: JavaScript The Good Parts

Answer 6

Firefox does have a plugin called firebug. If that is not the annoying Firefox tool you are talking about, you should check it out to see if that will help you.