Javascript Unit Tests on Team Foundation Service with Chutzpah

Javascript Unit Tests on Team Foundation Service with Chutzpah

Rate This
  • Comments 54

Significant investments were made in Visual Studio 2012 Unit Testing to make it extensible. A number of frameworks and test runners have built adapters for Visual Studio. Peter Provost maintains a list of Plugins here. For Javascript Unit Testing in Visual Studio, Matthew Mannela has released Chutzpah, an open source Javascript Test Runner.  Chutzpah has a test adapter for Visual Studio 2012. With this adapter, you can run QUnit & Jasmine tests in Visual Studio.

 

To run javascript unit tests in Visual Studio Unit Test Explorer, you just need to install the Chutzpah Test Adapter for Visual Studio 2012 from the Extensions & Updates dialog.

image

 

This article describes the steps required to enable running of these Javascript unit tests on Team Foundation Service [Hosted Build Agent].

 

1. Download Chutzpah.VS2012.vsix from VS Gallery.

Rename it to Chutzpah.VS2012.zip.

Extract all its contents.

2. Check in the following extracted files into source control in Team Foundation Service.

a. Chutzpah.dll

b. Chutzpah.VS2012.dll

c. Chutzpah.VS.Common.dll

d. Chutzpah.VisualStudio.Settings.dll

e. Phantomjs.exe

f. StructureMap.dll

g. JSrunners/ChutzpahRunner.js

h. JSRunners/Qunitrunner.js

i. Chutzpah.VS2012.TestAdapter.dll

j. Microsoft.VisualStudio.TestPlatform.ObjectModel.dll

k. SassAndCoffee.Core.dll

l. SassAndCoddee.Javascript.dll

m. ServiceStack.Text.dll

n. TestFiles/qunit/qunit.css

o. TestFiles/qunit/qunit.html

p. TestFiles/qunit/qunit.js

q. TestFiles/jasmine/* if you are using jasmine tests.

3. In Visual Studio, Open Team Explorer & connect to Team Foundation Service.

    Bring up the Manage Build Controllers dialog. [Build –> Manage Build Controllers]

    Select Hosted Build Controller

    Click on Properties button to bring up the Build Controller Properties dialog.

 

4. Change Version Control Path to custom Assemblies to refer to the folder where you checked in the binaries in step 2.

image

 

5. In Team Explorer, go to the Builds section and Edit your Build Definition which will run the javascript tests.

       Click on the Process tab

       Select the row named Automated Tests.

        Click on … button next to the value.

6. Select the Tests to Run and click Edit. Change the Test assembly specification to **\*.js

 

image

NOTE: If you want to have a mix of C# unit tests and javascript unit tests, you can add another Test Run and use **\*.dll as its Test Assembly file specification.

7. Create your Web application in Visual Studio and add your Qunit or Jasmine unit tests to them. Make sure that the js files (that contain the tests) are getting copied to the build output directory.

image

 

8. Check in your project and the unit tests into Team Foundation Service. Add this project to the build which you modified in step 5.

     Now go ahead and queue your build.

     After the build completes, you will see that the javascript tests have been run and their results reported in the Build Summary.

image

 

Mathew Aniyan

Program Manager – Visual Studio ALM.

Leave a Comment
  • Please add 3 and 5 and type the answer here:
  • Post
  • This is perfect news Mathew!

  • Cool... well done

  • does this work using Visual Studio 2012 & TFS 2010 or do I need TFS 2012?

  • This requires Visual Studio 2012 and Team Foundation Server 2012.

  • Any change for an update for the new chutzpah?

  • Hi Mathew,

    I've been working on this and I can't get it to work.

    The first problem occurs when extracting the "Chutzpah.VS11.vsix" as this file is called "Chutzpah.VS2012.vsix". Also the contents are not the same as you list in this how-to. The items that I'm missing in the extracted dir are:

    - Chutzpah.VS11.dll  (But I've used "Chutzpah.VS2012.dll" for it, not sure if this is OK)

    - HtmlAgilityPack.dll

    - Newtonsoft.Json.dll

    I check-in all the files in TFS2012 and I make a JS testfile with 4 tests in them and one will fail. I also check-in my testproject which must be build.

    The next step is setting up the build definition like you described in this how-to. I did make a small difference in the automated tests section of the build definition... "Fail build on test failure" is set to YES.

    Now when all is checked-in and the build is run the build just completes and at the 'test section' doesn't give any notification that tests are runned, exact text is "No Test Results".

    I'm using TFS2012 and VS2012 Premium.

    Any help would be much appreciated.

    PS: Chutzpah itself is installed in VS2012 and the testproject runs perfectly when running the tests in 'Test Explorer' (one of the 4 tests is failing like it should)

  • @Ferdy & @Nadav

    I have updated the article to refer to the VS 2012 version of CHutzpah.

    The key difference is that you need to checkin the files under TestFiles folder.

  • Matthew,

    Thanks for the post.  I have followed the instructions here for Visual Studio 2012 and TFS 2012, and I get the following message:

    No test is available in C:\Builds\4\..\Scripts\Test\site\tests.  Make sure that installed test discoverers & executors, platform & framework version settings are appropriate and try again.

    I checked on the server, and the files are there, any ideas?

  • I also posted this to the Chutzpah CodePlex site as a discussion.

    chutzpah.codeplex.com/.../400818

  • Gregg,

    Please try and disable antivirus on the build machine. A bing search indicates that other folks who hit similar issues were able to work around it by disabling antivirus. The antivirus tool may be blocking phantomjs.exe.

  • The specific version control path you suggest appears to be a subfolder under the actual unit test project, in the solution being built. Is there a specific reason you chose that path, or is it arbitrary?

  • @Rex

    The path to version control control assemblies can be any arbitrary path.

  • Although Chutzpah supports TypeScript, it doesn't appear like it's possible to specify **\*.ts in the "Test assembly file specification" text box and have it run your tests.  I guess this sort of doesn't make sense because at the end of the day Chutzpah is going to compile your TypeScript files to JavaScript before it runs your tests.

  • @Vinnie

    Here is the response from Matthew Manela for your query:

    "Include a .runsettings file with the following contents:

    <?xml version="1.0" encoding="utf-8"?>

    <RunSettings>

     <ChutzpahAdapterSettings>

       <TestingMode>All</TestingMode>

     </ChutzpahAdapterSettings>

    </RunSettings>

    This will tell Chutzpah to looks for all types of files."

  • This feature work with git repository? I cann't set .runsettings file. It proceeds @Mathew?

Page 1 of 4 (54 items) 1234