Skip to content

TDD

Jump to bottom
frawa edited this page May 3, 2012 · 10 revisions

UNDER CONSTRUCTION

Test Driven Development (TDD)

This page describes a setup suited for TDD, using Eclipse JSDT and Chrome Development Tools for remote debugging.

Prepare Eclipse

Prerequisits

  • Download Eclipse, for example the Eclipse IDE for JavaScript Web Developers

  • Install 'Eclipse EGit', from http://download.eclipse.org/egit/updates

  • Install all in 'Google Chrome Developer Tools', from http://chromedevtools.googlecode.com/svn/update/dev/

  • Install 'JS Test Driver', from http://js-test-driver.googlecode.com/svn/update/

  • Optional, install 'm2e - Maven integration for Eclipse', from http://download.eclipse.org/technology/m2e/releases/. This requires the JDT feature.

Import project

Use Import wizard

  • Import Project > Git > Projects from Git > URI
  • git://github.com/frawa/TestCodeMirror2.git
  • select only 'master' branch
  • import as General project

An alternative is to use Maven:

  • Import Project > Maven > Checkout Maven projects from SCM
  • install m2e-egit connector, if missing
  • git://github.com/frawa/TestCodeMirror2.git

Configure JSDT

In the Script Explorer, right click the new project and select 'Configure > Convert to JavaScript project'

Configure JSTestDriver

In 'Window > Preferences', point 'JS Test Driver' to your browsers' executable files.

Discover jsTestDriver

  • Open the 'jsTestDriver' view, using 'Window > Show View ...' menu.
  • Start the server
  • Do not connect Chrome browser yet.

Discover launch configurations

You will find several useful launch configurations in test/launch/ folder.

External tool 'chrome DEBUG JSTestDriver'

This will connect Chrome to the jsTestDriver server, ready for remote debugging. Basically, this launch configuration invokes chrome with these arguments

--remote-debugging-port=9222 --user-data-dir=remote-profile http://127.0.0.1:42442/capture

Debug Configuration 'chrome REMOTE TestCodeMirror2'

This one connects Eclipse to Chrome for debugging.

It has brings two important configuration peaces

  1. On the 'Remote' tab: Only short filenames are used
  2. On the 'Source' tab: A JavaScript Source Name Mapper. The TestCodeMirror2 project is added.

NOTE There is currently a bug in chromedevtools. It is fixed on trunk, but was not yet released. For now, you will have to run Eclipse with local build of the debugger, see HowToBuild for details.

Run Configuration 'jsTestDriver'

This ones launches tests as configured by test/jsTestDriver.conf file.

You will use the 'Rerun last configuration' button during your TDD cycles.

TDD

We are all set up.

Setting breakpoints

Open the Debug perspective and enable V8 breakpoint type, via 'Run > Breakpoint Types > Chrome/V8 breakpoints'.

For example, set a breakpoint on line 421 in file modelstest.js.

Launch jsTestDriver tests, via Run Configuration 'jsTestDriver', or the 'Run last configuration' button in the jsTestDriver View.

Debugging

Enjoy debugging. See EclipseDebuggerFeatures for details.

Modified source files can be hot replaced in Chrome browser, using context menu 'V8 Debugging > Push Source Changes to VM'.

Another TDD scenario

Instead of using chromedevtools Eclipse Debugger with hot code replacement, you might want to go with the debugger in your browser.

Read DebuggingWithJsTestDriver to get started.

In the description above simply skip all steps related to chromedevtools.

Clone this wiki locally