This is another approach to the previous subject: Unit testing JavaScript in VisualStudio with ReSharper. I kindly encourage you to get back to it before further reading.
Referencing production code in Test project
Last time I suggested “link-referencing” files with production code. Then during the build process files were copied to the test project. This approach was a bit cumbersome:
- we had code duplication in our solution structure
- sometimes it wasn’t obvious which file was edited – original file or the file copied to the test project
- R# was complaining about missing references before the build process
- You need to prepare test project file (.csproj) to make it work
- You need to reproduce reference structure and keep it up-to-date while working with tests
Fortunately there is a cleaner approach to referencing production code. The solution is to reference files using root reference path:
In this case we get the root of the test project, go to parent folder (..) and take the files directly from the project with production code (FrontEndTools). Now the only disadvantage is that each test file should know what’s the name of the folder of the tested project and change it when the folder name is changed – but this is very rare case, isn’t it?
If your Resharper marks the referenced file red, add reference to the tested project (FrontEndTools in my case).
From now on the solution structure looks much cleaner:
Switching to Jasmine
Previously I mentioned that I prefer QUnit with its TDD style, but after some time using both I changed my mind. Here are some of my thoughts:
- Jasmine is more popular – I don’t have any statistics, this is just my feeling after browsing some open source projects and mixing with angularJS communities – I’ve just found Jasmine as a standard
- Jasmine with its beforeEach/afterEach is more similar to NUnit SetUp/TearDown
- Jasmine has own (extendable) matchers that simplifies doing even complex assertions
- Built-in mocking framework is awesome – and this is actually killer feature – in QUnit you should build mocks manually or add external libraries (like SinonJS)
- Both are supported by default (and only these two) by Resharper
- Both have very good support and community background (with plugins and extensions)
Other demo solution improvements
- jasmine.js referenced to test scenarios – Jasmine is by default supported by Resharper, but to get IntelliSense and get rid of Resharper annotations it’s good to reference proper Jasmine.js file explicitly
- added tests for ColorBoxViewModel with a sample of Jasmine mocking
Download
You can download the demo here: FrontEndTools_Jasmine.zip
chrisseroka 
Hello,
I enjoyed your article. I have been attempting to setup a similar VS solution with ReSharper and Jasmine. I am also using AngularJS and TypeScript.
I noticed a post of yours on Stack Overflow that mentioned TypeScript. I have been able to get some test cases running, but more complex scenarios where a class contains another class do not seem to work. When the test runs, the object is undefined. It may be that I am doing something wrong, since there is no documentation that I can find. I have been flying by the seat of my pants.
I have encountered a couple of scenarios where the project appeared to be corrupted. This too may have been something that I did incorrectly. Anyway, let me know if you would like a small test project in case I can get something working with more involved classes.
Regards, Warren
Hi Warren,
First of all I’d really appreciate the test project, maybe we would set up something useful.
On the other hand, do you first compile typescript to javascript and then run the tests? I reported a bug on jetbrains and they answered that typescript unit testing will be supported from version 9.0 (http://youtrack.jetbrains.com/issue/RSRP-394249). I think to run typescript tests directly from Visual Studio we have to install Chutzpah Visual Studio Extension (I haven’t tested yet).
Chris,
I have zipped up a compiled project for you to use. There is some sort of an initialization issue with ReSharper when you move a project to a new physical location. After you unzip the test project and open up the solution, you should follow the following steps to make ReSharper happy.
1. Once you open the project, right click on the test project and select Run Tests.
a. It will fail.
2. Open up the file named UtF8EncodingDecodingTest in the test project.
3. Right click on the describe line and select Run Tests.
4. Once you do this, ReSharper seems to be happy and then you can go back to the test project and right click to Run Tests.
I have done this several times and it seems to work reliably. All tests run and pass. You can uncomment some of the lines in the test code to see it fail and to look at the raw test data.
You should read my other comments in the referenceTest.ts file in the unit test project before jumping in. I cover some of the caveats/quirks that I have discovered about doing unit testing with the current version of ReSharper and Jasmine.
When I zipped the solution after cleaning the solution, the unit test project did not work initially. However, once I opened the actual test files and ran the tests after rebuilding the solution, everything seems to work fine. This is probably just another 8.1 anomaly. I am planning to use this approach for my main product development process. I really prefer Jasmine for some of the reasons that you wrote about in your article.
I set up PhantomJS in my actual project because I do not like the browser opening up a new blank page after each test. The project that I am sending you does not make use of PhantomJS, but it is quick to add a reference to it in ReSharper.
Let me know if you have any problems, I would be happy to help you with the evaluation.
Also, let me know if you get the attachment. If not, I can send directly to your email.
Regards,
Warren
When I tried setting this up with VS 2012 and R# 8.1 I had to drop the jasmine reference or tests would stall on “pending”.. Is that just something I would have to live with or can a jasmine reference somehow live peacefully with R# built-in jasmine script?
Please have a look at this post: https://chrisseroka.wordpress.com/2014/02/23/javascripttypescript-unit-testing-11-sample-projects-for-resharper-chutzpah-and-karma/
Here I used visual studio 2013 and R# 8.1 and it worked perfectly fine with jasmine reference.
I’ve just tried this myself – R# stalls on ‘pending’, but only when the referenced script is called ‘jasmine.js’ (even if it’s just an empty file). I renamed that to ‘jasmine-2.0.js’ and it worked fine.