How to debug tests with karma.js + require.js - requirejs

I have a setup basically described here - http://karma-runner.github.io/0.8/plus/RequireJS.html
Problem is that I can't see source files of my tests in Chrome dev tools. So I can't debug it. Adding debugger; works but it is very uncomfortable, almost unusable since I can't browse any other file except the one with debugger; currently fired
Seems like karma load files, parse them, wrap each test and then unload files before run.

ng-boilerplate has a grunt build that will put all your plain js files into a build directory for testing and debugging.
Take a look at the Gruntfile and karma/karma-unit.tpl.js for how this is done.
Running grunt watch will leave your browser in a state where you can debug all your tests. Just click the debug button, set your break point(s) and reload the page.
Suddenly, you are debugging any or all your js files.

If you need to debug your test deeply, this is generally an indicator of badly organized code or badly made unit test. If you follow a TDD workflow, taking small step will help you prevent any major issue with your code. I warmly recommend you watch this video: http://blog.testdouble.com/posts/2013-10-03-javascript-testing-tactics.html?utm_source=javascriptweekly&utm_medium=email (it doesn't use Karma, but you should watch it for the workflow/the principles presented)
Then, if you really want to debug your test code, nothing beat the browser. As so, you should set up your test in a manner it can be runned both in Karma and the browser. We implemented this for QUnit, Jasmine and Mocha on the Backbone-Boilerplate. Feel free to base yourself on these settings to set up your own environment.

Related

Can Jest be used as browser based testing tool?

I understand that Jest is a unit testing tool for developers used for JavaScript. Is Jest a browser based testing tool similar to Selenium or a functional testing tool?
As you mention, Jest is meant to be a unit testing tool. Normally you'd write small tests for parts/components of a web-page. I'm not exactly sure what you mean by "Is Jest can be used as Browser based Testing tool?" but I've found there are two relevant areas where Jest can come into contact with browser based testing
You can use a virtual DOM (like JSDOM) to render your components and test them in an environment similar to a browser. These are still unit tests but you'll have access to window and document and can test things like document click, window navigation, focused element etc.
You can debug your Jest tests in browser. Follow the instructions here if that is what you want. I've tried this but it was really slow and not very useful for me so I wouldn't recommend it
You can probably render your entire application and test it with Jest, but I wouldn't recommend that either. Jest tests should be designed to run fast and should only tests small units of your code. If you try and build tests that take a long time to run then there is an argument stating that your unit tests will become useless and developers will eventually not run them anymore.
If you are looking for tests that start an actual browser and click around like a user then have a look at Selenium which I would think is the most common approach these days
This npm library can be integrated with your jest tests to run them in a browser :) :
https://www.npmjs.com/package/jest-browser
I can't say how good it is/what the cons are but it looks like it is worth a try!
Yes, you can use Jest Preview (https://github.com/nvh95/jest-preview) to debug your Jest test in a browser like Google Chrome.
You don't have to debug a long HTML text when using Jest Preview anymore.
Read more at https://www.jest-preview.com/docs/getting-started/intro

Having nodemon and debugging both working in a WebStorm run configuration

This is a problem I have never really been able to sort and have come across a few times so I thought I'd ask on here to see if there is a solution.
I am currently building a NodeJS(koa) application using babel to transpile the ES6 code. I have setup a run configuration which looks like this:
This setups a debug configuration in order for me to debug my ES6 code.
This works great but I want the debugger to be able to run using nodemon so that when i make changes to the code, the run configuration restarts the server but keeps the debugging functionality. Is this possible from a run configuration or does it have to be done from the command line? At the moment I can only run the debugger OR nodemon... not both at the same time.
Thanks!

Visual Studio 2015: Bug setting TestFramework to Mocha for unit test files in NodeJS Project

I'm working on a Typescript project in Visual Studio (2015 Community edition) build server side unit tests using Mocha.
I however read that NodeJS Tools supports running within the VS Test Runner, and even Typescript unit tests. You have to set the TestFramework property of the file to 'Mocha'. The project I'm working on even already has existing tests which this is set for. However I don't get a dropdown option in the GUI to set it, it's just empty:
I'm using NTVS v1.1 (and Typescript 1.7). Am I missing something in my Visual Studio setup? The build type of the test .ts file is also already set to TypeScriptCompile. Perhaps more of a specific VS question than a programming question, but the environment/tools is so programmer's specific that I thought somebody here can help me.
PS Running tests manually each time is driving me crazy, and I bumped into too many problems with using a HTML spec runner which I tried first, because this server side tests (e.g. CommonJS require and import statements that my browser doesn't get) and also because it's TypeScript.
But alternative solutions are also welcome. I'm using grunt and am also experience using Gulp, I'm just hoping for a full solution, not something that'll cost me half a day to script together, debug and document..
Note: I DO get the dropdown to select Mocha Testframework for .js files (after including in VS project), but NOT for .ts files :S.
Hmm... pretty silly, but it seems indeed a GUI issue:
You simply have to type Mocha into the property field yourself manually.
In the case of Typescript there doesn't appear a dropdown (e.g. caret) on hoover in the 'TestFramework' field. My expectation was really fixed on the dropdown' experience beause it DOES do that for Javascript files and in so many other fields in the 'Properties' window.
So a short overview of things to do:
type yourself and make sure you don't type Mohca or something:).
Install Mocha locally
Make sure the BuildAction of the .ts file is set to TypeScriptCompile
I'm off fixing other issues, this Typescript is nice, but the tools and language are evolving too fast for the 'Google-based development' I have to rely too really work well :S.

Node.js and Mocha Tests from the Browser

This is probably a really dumb question, but I'm not sure. If I have a node.js application and a much of tests built with Mocha, I can run them on my server no problems, using mocha. However, is there any way to invoke the unit tests through a browser and just pipe the results to the page? For development, I'd like to have a page on my website that shows the results of the tests.
Every time I search for how to do this, it's testing the actual browser code I'm finding (the dom, the UI etc), but it's actually just that I want to see the results of the tests run server-side but from the browser!
Thanks in advance!
Sure, create a route in Express that executes mocha and returns the result to the browser. Take a look at child_process.fork to execute mocha: http://nodejs.org/api/child_process.html#child_process_child_process_fork_modulepath_args_options
And don't forget to turn it off before going into production!
Separately, I would highly recommend to you the concept of continuous deployment, and specifically the service CircleCI, which for $19 automatically runs all of your tests every time you push to Github.

Is it possible to integrate Jasmine into cruise control.net

Is it possible to automatically run a jasmine test suite as part of a cruise control.net build?
And If so how?
My server code is C# and I already had my CI server running lots of unit tests. So I added a unit test that uses Watin to launch a browser to run the Jasmine tests and check the results. It took a morning to get all the pieces playing happily together.
An alternative might be to investigate NJasmine -- I saw this was available on NuGet but didn't pursue this myself partly due to lack of documentation.
Also, if you're using ReSharper, you might like to look at their integration with QUnit: http://blogs.jetbrains.com/dotnet/2011/03/resharper-6-introduces-support-for-javascript-unit-testing/ (there's every chance they'll integrate it with Jasmine too). Although this is aimed at running JS UTs within Visual Studio, you might find it offers you a "hook" to run them from your CI server too.

Resources