JasmineJs integration with ReSharper & TeamCity

JasmineJs is a great framework for testing JavaScript code.

We'll discuss here how to integrate it with other amazing products: ReSharper 7 & TeamCity.

Download

You can download standalone example here(with additional files to run tests from ReSharper & TeamCity).

This package contains two folders: SpecRunner and YourWebSite. We’ll need them later.

JasmineJs + ReSharper 7 = Friends

To run client-side tests without dependency on your browser we can use PhantomJs WebKit.

Put files from downloaded SpecRunner folder somewhere in your solution.

For example, in my solution these files are located in MyProject/Testing/Client/ folder.

Now we can configure ReSharper to use PhantomJs:

Now we can create JS-files with tests, and run them directly from Visual Studio(thanks to ReSharper) without running our browser(thanks to PhantomJs):

You need to include necessary scripts(scripts to be tested + their dependencies) using reference syntax.
However, note that we don’t need to include JasmineJs scripts, because ReSharper has it’s own inside.

JasmineJs + TeamCity = Friends

Preparing project for running JS-tests from TeamCity 

Put downloaded YourWebSite/lib/ folder in Scripts/Jasmine/ folder of your Web project.

Put downloaded YourWebSite/SpecRunner.htm file in the root of your Web project.

For example:

Then you need to configure SpecRunner.htm to include all necessary scripts:

• JasmineJs scripts(ReSharper doesn’t need them, but TeamCity does); 
• Source files to be tested + their dependencies; 
• Spec files with tests; 
• jasmine.teamcity_reporter.js 

Note, that we include jasmine.teamcity_reporter.js that is needed for integration with TeamCity.

Example of SpecRunner.htm:

Configuring TeamCity for running JS-tests from our project

We need to create additional Build Step in TeamCity:

Note, that we specify Working directory as Testing/Client/ folder of our solution(where we put downloaded files from SpecRunner folder).

Safe forms without captcha - hybrid approach

Captcha is very annoying for users. How can we make safe forms without captcha?

Today's popular approaches are:

• CSS technique. Idea about this is to create invisible field(hidden via CSS) in form. Silly spambots don't know that people can't see this field and fill it out. So, on server side you should make sure that this field is empty. 
• Javascript technique. Idea about this is to generate and fill out some field using javascript. Silly spambots can't process javascript. So, on server side you should make sure that this field is not empty. This approach is good, but it has big disadvantage: if real user has javascript turned off he will not get this generated field, so he will not fill it out. Real user with disabled javascript = Silly spam bot. 

Problem with this approaches: What if spam bot is Not Silly ?

First approach is great in its simplicity, but i think that it is more easily for spam bots to overcome this obstacle, than second one. Javascript processing requires more brains in spambot head. So i like second approach more, but i do not like the fact that poor people with disabled javascript will suffer.

I want not to bother user with captcha if he has javascript enabled. But if poor user has javascript disabled, he will get captcha(and spambot will get captcha too).

So, my hybrid approach is to use captcha block(captcha image+ input field) wrapped in <noscript/> tags. And then use javascript to hide captcha block, remove <noscript/> tags, and fill out captcha with valid value.

As result, we have captcha that is showing for users that have javascript disabled(as well as spambots). If user has javascript turned on, then captcha will be hidden and filled out using javascript. 

On server side we just check if captcha is valid- it is not matter for us whether user has javascript enabled!