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.
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.
Share Improve this question edited Sep 14, 2014 at 13:19 Alec Teal asked Sep 14, 2014 at 12:45 Alec TealAlec Teal 5,9483 gold badges25 silver badges50 bronze badges 7- Debugging in the browser is inevitable. Install Firebug if you don't like the native Firefox tools, or try Chrome. – Pointy Commented Sep 14, 2014 at 12:48
- grunt w/ livereload - on save, it auto refreshes the browser your code is loaded in and you can do your testing there. – NG. Commented Sep 14, 2014 at 12:48
- I use the chrome developer mode, Its awsome, you can use brackets as JS IDE – yossico Commented Sep 14, 2014 at 12:49
- @Pointy I'll look into it, I have heard of "Greasemonkey" and such, but I must confess I dismissed it, I saw it as IDLE (the Python IDE written in Python) pared to say PyDev (what I'm looking for) - thanks, really. – Alec Teal Commented Sep 14, 2014 at 12:51
- Greasemonkey won't do you any good; it's for creating browser extensions. Firebug is an improved developer tool (DOM inspector, JavaScript console, network inspector, etc). – Pointy Commented Sep 14, 2014 at 12:52
6 Answers
Reset to default 1Firefox 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.
Step one; static analysis: http://www.jslint./
Step two; testing: Automatic tests in Eclipse for JavaScript
Step three: JavaScript The Good Parts
I would remend you to use chrome developer mode or you can use firebug
for firefox.
Grab firebug from here
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 mand 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 remend 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./
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:
- 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.
- If the Button changes the UI, you could use Selenium or any other Tool that is designed to test GUIs
Take a look at Grunt, it's a mand line "JavaScript task runner" that helps with automating things like minification, pilation, 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 mand (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
mand in bination 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 plex pages that are generated on the server side and only some javascript it may not suit your needs.