Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chutzpah configuration for running TypeScript tests in both Visual Studio and Visual Studio Team Services build

We have a Visual Studio 2013 solution for an AngularJS application, written in TypeScript. There is a separate test project for the Jasmine unit tests, also written in TypeScript.

What we are having trouble with is finding a build/Chutzpah configuration that allows us to run the tests on development machines via the Chutzpah test adapter, and also as part of our CI build on Visual Studio Team Services.

When we run the tests on dev machines, it appears that by default the tests run in the source tree, so the dependencies on .d.ts and application .ts files are set up relative to the source directory. So far so good. However when we run the Visual Studio Team Services build (set up following this blog post) the tests seem to run in the bin directory (looking at the Visual Studio Team Services logs). This means the references for dependencies are wrong, so the tests fail as they cannot find the required .d.ts or application .ts files.

The best solution to this we have found so far is this:

  • Have Chutzpah.json set to 'Copy always' so it copies to bin dir
  • Have all test .ts files set to TypeScriptCompile/Copy always
  • Have all test .d.ts file set to Content/Copy always (e.g. jasmine.d.ts)
  • Have all .ts files in the application project set to TypeScriptCompile/Copy always
  • Update test file dependencies to include additional chutzpah_reference that will be correct for bin dir (using chutzpah_reference means that the VS local build will still complete without errors)

We can then run the tests in VS in two ways:

  1. from the VS test runner as normal
  2. by showing all files, locate the bin/Tests directory and right click and 'Run JS Tests' (this is a pretty good indicator that the tests will run correctly on TFS assuming the build def, CI & .runsettings are correctly set up).

We also tried redirecting the JS output to the bin dir, which worked ok in VS, however the VS Team Services build failed to copy the .js files for some reason.

Ideally we would like:

  • to avoid having to copy .ts files to the output dir
  • to avoid having to add in additional references specifically for the bin dir.
  • to use the Chutzpah Compile Mode External (as VS already compiles our TypeScript)
like image 344
Nick Baker Avatar asked Sep 30 '22 13:09

Nick Baker


1 Answers

I don't know if this answer is still relevant to you but it can also be useful for others. Well lets start with TypeScript and Team Services. Ideally you only want your TypeScript files checked in into Team Services. Team Services needs to build the TypeScript to JavaScript, which can be simply achieved by just adding a Visual Studio Build step of the according project. Note that projects that contain TypeScript also got additional TypeScript settings in their csproj file. This also applies for your unit tests. You should build the unit tests in Team Services to regular JavaScript.

The second thing you got to do it to set up the test environment right. That means that you have to download 2 extensions, namely the Chutzpah Test Adapter and Chutzpah Test Runner. These extensions allow you to run(with code coverage) and debug your unit tests. Chutzpah uses PhantomJS as a in memory browser to run your unit tests. Well these extensions got nothing to do with Team Services. These extensions only apply on your local dev environment. Well thats a problem. We can fix that by installing the Chutzpah NuGet package. This NuGet package downloads all the depedencies into your package folder, that means that it downloads PhantomJS, but also QUnit, Jasmine and code coverage libraries. That means that you don't have to reference them in your project anymore. Just delete them from your project. You can then add a chutzpah.json configuration file. In that file you can setup your test framework(jasmine, qunit, etc) and the referenced files for your unit tests. But also files that should be excluded for code coverage, mostly your libraries such as jQuery and Angular. When you've done that you should still be able to run your unit tests on your dev environment, so far so good. We didn't setup anything for unit testing in Team Services.

Well thats the last part. In your build flow you should add an additional step for JavaScript unit testing. You can't merge it with .NET unit testing since a different adapter is used, also other assemblies are referenced as test assemblies. In that build step you got to define 3 things, namely the Test assembly, VS Test version and the Path to custom Test adapters. You should insert the following values:

  1. Test assembly should be: **\*.tests.js

All files that end with .tests.js are marked as test file.

  1. VS Test version: Latest

Only the latest test version of Team Services supports the new Test adapters.

  1. Path to custom Test adapters: $(Build.SourcesDirectory)\packages

This is the folder where your NuGet packages are downloaded to. The Chutzpah Test adapter is in a sub folder of this folder.

Well thats about it, hopefully this helps.

like image 177
Dibran Avatar answered Oct 10 '22 13:10

Dibran