JavaScript Mocha test debugging in WebStorm - mocha.js

I've just started using Mocha (+Chai) in WebStorm IDE for my Node.js project.
And I found out that I can't find familiar console pane, where I can type in expressions.
Also I see no easy way to re-run failed unit-test code in plain node.js (without mocha, because I need header with imports and Chai and I need to remove "describe", "it"...), so I can fix the code.
WebStorm is quite popular, Mocha and TDD too, so my question is:
How do you do TDD in WebStorm? How do you solve this problem?
Maybe I'm missing some button in IDE which opens console
Or maybe there is a way to simply run this unit-test separately in Node.js
somehow.
Or maybe you just live with this as it is and just
copy-paste code to some 'test.js' manually?

Related

How to setup a Jasmine / Chutzpah unit tests project running TypeScript files?

I have tried setting up a unit-tests project to cover front-end code in TypeScript with Jasmine and Chutzpah, but have a hard time figuring out what I'm doing wrong.
I have created a sample ASP.NET projet in which I have extracted and included the default jasmine tests. Pressing F5 opens a browser and makes the tests pass.
I have then converted all the tests to TypeScript and included its definitely typed definitions. Pressing F5 opens a browser and makes the tests pass.
I have finally installed Chutzpah with its Visual Studio extension, but I'm not able to either make the tests pass using the Visual Studio/Resharper Unit Tests window or the default chutzpah console. At this stage, pressing F5 still opens a browser and makes the tests pass.
That's the last step I'm struggling with. For clarity of the discussion, I have setup a sample projet on GitHub to reproduce my problem. I'm sure it must be something really simple but I just cannnot figure it out.
The project can be found at the following location:
https://github.com/springcomp/TypeScript.Jasmine.Chutzpah.Sample
This doesn't really answer the 'Why', I'm still trying to get my head round this myself. However it might get you a bit further forward..
I saw the same behavior when I pulled down your project. If I put the below reference paths in at the top of the PlayerSpec.ts :
///<reference path="../src/Player.ts"/>
///<reference path="../src/Song.ts"/>
///<reference path="../spec/SpecHelper.ts"/>
///<reference path="../Scripts/typings/jasmine/jasmine.d.ts"/>
After this Resharper runs the tests successfully with them passing.
I can't explain why - maybe resharper doesn't use the SpecRunner file for picking up references?

Debugging cucumber steps in WebStorm

I'm experimenting with Cucumber/WebdriverIO UI tests using Webstorm (NodeJs platform). At certain steps I would really love to stop it in debug mode, check the retrieved element and see what can I do with it.
But unfortunately the Debug button is disabled and I couldn't find anything specific in Webstorm documentation as well.
If I can achieve my original goal (stopping a step and experimenting with the elements) without using Webstorm's Debug mode, that's totally fine for me.
Debugging Cucumber specs is not currently supported, please vote for WEB-15146
I'm not sure how this would work with Cucumber but WebdriverIO now has a debug command you can use

Debugging bundled javascript in WebStorm

Is there a way to debug a bundled javascript in WebStorm setting breakpoints in the files that are source for bundling, instead of the bundle itself?
I use browserify as bundling package, but I can consider using other ones. The only limitation is that I use grunt as a task runner. Seems there is something that could be a solution here, but it us for gulp. There mentioned vinyl-source-stream as a part of the solution, but I am not sure if it is worth trying with grunt.
What I tried is
using browserify: { options: { debug: true; } }
using mold-source-map and some other related things found here on SO
using uglify as source map generator
some other things that are not worth mentioning
Any one- or two-step things I tried just did not work.
Seems it is too sophisticated to search the way consciously, only try-and-error would work, but I don't have enough time for it.
What I hope to find is a working example of the web storm project where I can set a breakpoint in source js before debugging. But any hint or direction would be appreciated.
Well, if nobody helps me and I find the solution later, I'll surely blog it out as step-by-step instruction. But I am not sure that this is possible due to people who understand more than me in browser debugging told that source map cannot be generated so as to point to the files other that actually executing in browser js engine. So the answer with more detailed explanation why it is not possible can also be accepted.

WebStorm and PHP syntax highlighting in WebStorm

I have WebStorm and really like it. I don't use PHP very often, but I'm working on a project that uses it...
So, I'm trying to get basic syntax highlighting in WebStorm.
I've tried using this plugin already (incompatible):
http://plugins.jetbrains.com/plugin/6610
And I've followed the steps in these threads:
Webstorm: how to extend to handle PHP files or even just higlight code correctly?
Is it possible to get Ruby syntax highlighting in PHPStorm?
I am using this textmate bundle:
https://github.com/textmate/php.tmbundle
It's being recognized by WebStorm, and the proper files are being associated with TextMate bundles, yet I still have no syntax highlighting.
At this point, I've just written all the stuff without the highlighting, but it seems a bit ridicules that I cannot get it to work.
I sent an email to technical support, and they just pointed me back to those resources and then suggested that I buy PHPStorm. And the IDE keeps suggesting that I buy IntelliJ IDEA Ultimate.
Has anybody else run into this problem?
https://github.com/textmate/php.tmbundle bundle uses non-documented 'injection' - feature that's not currently supported - thus no highlighting is actually recognized. See RUBY-14273

How can I debug node modules?

I am looking into getting involved with the rather exciting node.js, but I'm trying to find ways to replace my current development environment.
At present, my best friend in PHPLand is FirePHP module for Firebug, which is a god send as far as debugging your PHP goes. What methods do I have at my disposal for debugging node code? Does it output errors and warnings like PHP can be set to?
There are multiple ways to debug node.
node debug app.js
node-inspector
console
util
Personally I use a lot of well place console.log, console.dir and util.inspect statements throughout my code and follow the logic that way.
Of course unit tests come hand in hand with debugging. Write tests that assert your code work. The unit tests will cover catching most of the bugs.
You must write unit tests for your node.js code. nodeunit is great for general testing.
If your using express as your web engine then use expresso

Resources