How can I debug node modules? - debugging

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

Related

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.

How to find a bug that only happens in the Javascript version of a Dart program?

I've written a program that runs perfectly in Dart but fails to run in the transpiled Javascript version. I suspect it's an infinite loop (because CPU usage goes up). Has anybody experienced such a behavior before? Maybe even more important, how can I find out the problem?
Yes; this is a big part of my day job.
First, understand that you are most likely dealing with a dart2js bug, not a bug in your code. Your immediate goal is to work around the problem. The end goal, though, is to construct a small test case that you can file on dartbug.com.
Checked mode is your friend
If you are really lucky, enabling checked mode will throw an assertion that will point to the problem. If not, you'll need to dig into the JS.
Using pub serve or pub build --mode=debug will give you more readable code. I usually set my pubspec.yaml up like so:
transformers:
- $dart2js:
minify: false
checked: true
(or checked=false if I'm chasing a performance issue). Then running pub build (without any arguments) will produce to desired output.
Produce a smaller use-case
If you can get Angular out of the mix, the Dart Team will have a much easier time debugging. Failing that, generate a AngularDart application that shows the error on page load.
Print statements
Adding print statements in Dart help you understand the execution flow, but also make it easy to search the dart2js output for good places to add breakpoints.
I find that source maps only confuse things and always disable them.
git bisect
Once you have a small enough use-case that triggers on page load, using git bisect to search your history for the breaking change is quick and impresses your friends.
Dart can generate source maps since a while which makes it quite easy to debug generated JS.
With source maps the browsers show Dart code and stack traces when debugging built JS code.
Source maps need to be enabled in the browser (see https://www.dartlang.org/tools/dart2js/ for details) and in the $dart2js transformer (see https://www.dartlang.org/tools/pub/dart2js-transformer.html for details)
You can get readable JavaScript by running dart2js in debug mode. If you are using pub build you need to use pub build --mode=debug.

Sharing Specflow Feature Files with Multiple Applications

My goal is to be able to write core testing that I can use within a unit testing framework as well as UI testing with selenium.
For simple test like:
Scenario: Add two numbers
Given I have entered 50 into the calculator
And I have entered 70 into the calculator
When I press add
Then the result should be 120
I would create both unit tests to prove that my core API would pass as well as a Selenium test that would prove my UI is doing the correct thing as well.
I briefly tried to find anyone doing something similar through Google, but couldn't find any examples. So I guess my question is, has anyone here done anything similar?
On approach I had thought of was simple adding the feature files to a project or directory and using the add existing item as link as the solution.
Update: Adding feature files to a common directory and adding them as a link appears to be working great. The feature bindings regenerates for each project the feature file was included in so I can run unit tests in one and Selenium UI tests in the other.
First, lets start with why you might want to do this. Its laziness of the good kind.
The quality that makes you go to great effort to reduce overall energy expenditure. It makes you write labor-saving programs that other people will find useful, and document what you wrote so you don't have to answer so many questions about it. Hence, the first great virtue of a programmer. Also hence, this book. See also impatience and hubris. (p.609)
Larry Wall, Programming Perl
Except it isn't, because we aren't going to reduce our overall energy expenditure.
When you are using SpecFlow, the easy part to keep up to date is the plain text. You will find yourself refactoring the [Binding]s again and again, but the scenarios tend to be quite easy to work with, and need very little revision once they have been agreed.
In addition the [Binding]s are global. Load them in from any assembly and they are available to the SpecFlow runner. In respect of what you are trying this actually makes things harder as you need to put effort in to keep the UI bindings from being mixed up with the non-UI bindings.
Also consider the way that SpecFlow actually runs the tests from feature files. It's a two stage process.
When you save the .feature file the SpecFlow VS plugin generates a .feature.cs file.
When you run your test engine (e.g. NUnit) it ignores the plain text and uses compiled code from .feature.cs
So if you start using linked .features I have no idea if the SpecFlow plugin will generate .feature.cs for both instances of the file. (If you try this please let us know)
Second lets consider the features themselves. I think you will constantly finding yourself compromising your tests to make them fit the other place they are used. Already in the example you have given you have on the screen. If you are working with just the core API then there won't be a screen, so do we change this to fit better in a non-UI scenario?
Finally you have another thing to consider, just how useful will your tests be. If you have already got a test that tests the Core API, then what will it mean to run same test via Selenium. All you will really test is the UI layer. In my current employment we have a great number of regression tests that perform this very kind of testing, running up a client that connects to a server and manipulating the UI to get the desired scenarios enacted. These are the most fragile tests we have due to their scale. They constantly break and we basically have to check our entire codebase to find the line that broke them. Often something like 10-100 of them break just for a one line change. If these tests weren't so important to the regression cycle then the effort in maintaining them would just be too much. In my own personal projects I tend to remove these tests completely and instead with UIs, I avoid testing the View layer. With WPF MVVM, I execute Commands and test for results in ViewModels. If somebody then decides the TextBox should be a ComboBox or that it will work better in mauve, then my testing is isolated.
In short, there is a reason you can't find anything about this on Google :-)
In general (see http://martinfowler.com/bliki/TestPyramid.html), one should limit the number of automated tests that test the UI directly, and prefer tests that start at the presentation layer (just below the view layer), or below.
SpecFlow is agnostic; the tests can be implemented using e.g. Selenium at the UI layer or just MSTest or NUnit at any of the layers below.
However having said that I appreciate that you will have situations where you are doing ATDD and want to implement SpecFlow scenarios to match each of the acceptance criteria. Some of the criteria will be perfectly fine to test at a lower architectural level, but one or two of them may be specific to the GUI-- for example testing Login and ensuring that the user is redirected to the home page after successful login. If using Angular2 or React routing (see https://en.wikipedia.org/wiki/Single-page_application), that redirect is likely done in the GUI layer itself.
I don't have a perfect answer yet, but as a certified SpecFlow trainer, I have a vested interest in this! The way I am currently leaning is to use a complementary tool like CucumberJS for the front-end specific tests (such as testing React router redirects) and SpecFlow for tests at lower architectural layers. Our front-end uses Node.JS/Express and our backend is .NET Core. The idea is that the front-end tests mostly use the front-end only with mocked out AJAX calls to the backend (see sinonjs), and the back-end tests use EF Core with the in-memory option (see docs.efproject.net/en/latest/providers/in-memory/. So the tests all run fast.
Of course, you still need a few tests that actually go all the way through, but those are different-- we should call those integration tests. I do not believe that acceptance tests need to be integration tests. That way, you have a suite of acceptance tests from doing ATDD, plus a relatively small set of integration tests that test all the way front-to-back. The integration tests run more slowly and require more maintenance, so you separate them out into a different part of the CI/CD build chain.
I hope this makes sense. It is not so much solving the problem as avoiding the problem.

Watin and Telerik Controls

I would like to ask if anybody knows an easy way to test Telerik controls with Watin.
We are about to start using it but before we do I wanted to see if there is anything I would need to know.
The problem that I can see we will be having is that if even smallest thing changes then all our tests will also break.
Any suggestion is greatly appreciated.
The problem that I can see we will be having is that if even smallest thing changes then all our tests will also break.
This could/will be true of all portions of your pages, including Telerik controls, depending on your test structure. Ideally, your elements will have IDs assigned and you'll use Page classes and custom control objects to remove all HTML references from your actual test code. Then if something changes on the webpage (or in a control), you verify the change is expected, then you change the WatiN page code (or control code) and re-run your tests.
The WatiN page class primer is here: http://watinandmore.blogspot.com/2009/06/introducing-page-class.html
Basically, you want to have your test code look like myPage.PickDate("3/29/2012") and not like ie.Tables[3].TableRows[2].TableCells[4].Textbox(Find.ByClass("datePicker")).TypeText("3/29/2012")
Changes can, do and should result in failing tests, however, I can attest that with a good page (or control) class setup that abstract away the HTML DOM and other specifics leaving non-HTML-filled test code, means that when changes do happen they are most often easy to get working again.
Note: Selenium also has a Page class concept, but I have not used it very much as of right now. Bottom line: If you write a lot of tests that reference the HTML DOM directly in test code, you're setting yourself up for a maintenance headache regardless of if you go with WatiN or Selenium or whatever.
Added: As to your original question: Can you work with Telerik controls in WatiN? Yes you can most likely, but depending on the control you may need to get a bit creative, possibly even calling javascript methods from within your test (page object ;) ). I've been stumped by a couple controls (non-Telerik) but most I've eventually figured out.
I realize you asked about WatiN, and I know I'll probably get downvoted into oblivion, but I might recommend Selenium instead. It seems to be more widely used and when we were evaluating the two we found Selenium easier to work with because of the Firefox plugin to record/generate the tests. This meant that our non-technical folks could set up the tests.
Since then we've successfully used Selenium to test ASP.NET sites that utilize Telerik controls. I only ran into one issue, with the RadNumericTextBoxes, which I've documented a fix for here: http://www.msigman.com/2012/02/entering-radnumerictextbox-selenium-webdriver-1-6-0/.
I'm currently in the process of writing a how-to guide for doing it: http://www.msigman.com/2012/03/automated-testing-asp-net-web-application/ (shameless plug).
You should also consider evaluating Telerik's Test Studio, our functional automation test tool. (Disclosure: I'm their evangelist for Test Studio.)
Test Studio really shines when you're working with Telerik controls. You'll get some great additional functionality around being able to dive deeper in to verifications and actions around the controls.
Even more importantly, Test Studio handles centralizing locators and pages by default, so you don't need any additional effort to best manage your UI changes.

xHTML markup checker integrated in Selenium

Recently, I thought about how can I improve the quality of the projects, by using Continuous checking of xHTML source at Continuous Integration machine.
Look, we have a project
http://sourceforge.net/projects/jtidy - jTidy
JTidy is a Java port of HTML Tidy, a HTML syntax checker and pretty printer.
It can validate the xHTML through a command-line interface. Or this tool can be extended in the way we need, because all source code are open.
We can overwrite every Selenium validation method, such as assertTextPresent, or any other, so it will be calling the jTidy(by providing current state's HTML source), and if some errors or warnings will occur - it can be saved to Continuous Integration machine build's logs - so any project's related can see this info.
We can not to rewrite all the Selenium methods, to integrate this call on every step, but to make this calls where we want(after DOM manupulations).
Yes, we can use W3C markup validators for our sites, but there isn't any possibility to validate not initial state of page's source with this validators. After page creation, there might be lots of DOM manipulations which can produce markup errors/warnings - we can find it immediately with this scheme.
One of the benefits of using Continuous integration is that you have quick feedback from code - how it integrates with existing code base, test whether unit and functional tests pass. Why not to get an additional useful info, such as instant xHTML markup validation status. The earlier we identify the problem, the easier to fix it.
I haven't found anything on this theme in google yet.
And want to know, what do you think about this idea?
Seems like a worthwhile idea.
I've done two similar things with CI before:
I've used Ant's XMLValidate task to validate static xhtml files as part of the build process
I've used httpunit to pull pages that I then parsed as xml
But the idea of tying into Selenium to validate the content inherently during a functional test run is novel to me.
I think, that idea is brilliant but it is very hard to implement it from scratch.
But this idea is like evolution of build/quality validation process, so it will be released as ready-to-use tool with documentation someday.
Good idea! - in fact I just had exactly the same idea and was just checking to see if anyone had done it before - argh! Looks like you beat me to it :)
I was thinking along the lines of capturing and auto-submitting each page hit by selenium to the w3c HTML and CSS validtors (by file rather than link so state is held) - failing on any errors. I like the jtidy idea though.
Great in principle, but I'm not quite sure how to call it from Selenium. I'd love to see documentation explaining how to run it from Selenese, or from PHPUnit.

Resources