How to write Data Driven tests in Javascript

I know how to write "Parameterized tests" in Java and Data Driven tests in Groovy using Spock framework. But how to write in JavaScript? Now I try to show how to make it working using mocha framework.

Data Driven tests in Mocha is called "Dynamically generated tests", based on the API documentation, there are 2 steps:
  1) Create a test data array;
  2) Iterate the test data, generate the test case dynamically,  the test case name in "it" block is also generated dynamically, which is quite similar with Spock framework.

The implementation is pretty straight forward. Here is the example of my implementation in the Tennis Game Kata:
  https://github.com/stevez/TennisGame-solution/blob/master/javascript/test/Tennis-test.js
 The javascript example project is here:
 https://github.com/stevez/TennisGame-solution/tree/master/javascript

Next step I will look at how to work it using Jasmine framework.

Debug Karma Unit tests using visual Studio code

Debugging JavaScript is not easy, especially outside the browser.

VS Code is so powerful for JavaScript debugger. I managed to get it working under Jasmine/Karma unit tests.

Pre-Requisite

• Install the karma chrome-launcher to your project
• Install the vs code chrome debugger extensions

Steps

1.  Config your kama.conf.js, make sure you can launch chrome with remote-debugging-port 9222
   Add the following in to your karma.conf.js

   1 2 3 4 5 6

   customLaunchers: {       Chrome_with_debugging: {         base: 'Chrome',         flags: ['--remote-debugging-port=9222']       }  },

2. Launch the browser custom launcher through gulp task, also we need to disable the JavaScript preprocessors, which purpose is magnifying for the test coverage
   gulp script

   1 2 3 4 5 6 7 8 9 10 11 12 13

   gulp.task('debug-karma', function (done) {   new Server({     configFile: __dirname + '/karma.conf.js',     browsers: ['Chrome_with_debugging'],     preprocessors: {           'components/**/*.js': [],           'lib/crl/**/*.js' : [],           'lib/rapidlab/**/*.js' : []     },     singleRun: false,     autoWatch: true,   }, done).start(); });

3. Update launch.json file in the .vscode folder
   launch.json

   {     "version": "0.2.0",     "configurations": [         {             "name": "Launch Karma debug page",             "type": "chrome",             "request": "launch",             "url": "http://localhost:9876/debug.html",             "sourceMaps": false,             "webRoot": "${workspaceRoot}/src/main/webapp"         },         {             "name": "Attach without source map",             "type": "chrome",             "request": "attach",             "port": 9222,             "sourceMaps": false,             "webRoot": "${workspaceRoot}"         }     ] }

4. In the IDE, run task debug-karma, make sure the chrome browser is launched.
5. Click the Debugger button,select Chrome, choose "Attach without source map", click start button
6. Refresh chrome browser, or in the debugger console, type 
   location.reload();

Sample Project  

Please check this sample JavaScript project: https://github.com/stevez/KataFizzBuzz/tree/master/javascript

You can import this project to launch the chrome debugger inside your VS Code IDE.

Resources

1. http://bahmutov.calepin.co/debugging-karma-unit-tests.html
2. https://github.com/Microsoft/vscode-chrome-debug
3. https://github.com/karma-runner/karma-chrome-launcher

Debug Mocha tests using Visual Studio Code IDE

It is amazing that we could easily debug Mocha javascript test code in Visual studio Code IDE.
Here is the launch.json file:

Click the Debug button, press F5, then you will see the debugger running.
The detail file is also in github:
https://github.com/stevez/kata-Yatzy-solution/blob/master/javascript/.vscode/launch.json

You can check my sample code in github for details:
 https://github.com/stevez/kata-Yatzy-solution/tree/master/javascript

Be careful "this" in Javascript Object

Consider the following javascript code:
What if I remove the this in method increment()?, like this:

I must admit at first I wrote the code like the second, But it was wrong.
As a Java programmer, I thought keyword this in javascript will like java this always refer to the object owner, so this can be omitted. But I was wrong, the code above is wrong, because javascript requires you to use this keyword explicitly, otherwise it will treat variable value as undefined. It seems javascript will treat variable value as local variable, except you specify this explicitly.

From this mistake, I understand that the experience in java is not working in javascript, if you want to access the class level variable in javascript method, you have to explicitly using this. Be careful for "this"!