I decided to start a new asp.net mvc project with web api and use a bit of angularjs functionality. I had heard about mocha testing library which you can use do a tdd style development for my angularjs codes. I saw this pluraral sight course AngularJS for .NET Developers by Joe Eames, and Jim Copper; which has a topic on Creating a Test in AngularJS. But, the video shows how to use jasmine testing library instead of mocha which is what I wanted to use.
I searched for mocha in nuget package manager and only found one package called blah blah which downloads and sets up mocha tests in an already existing asp.net mvc project. I wasn’t really impressed by this package as it was creating the files in your mvc project. you do not want your testing code to reside within your production code.
mocha from here, sinon from here, chai.js file from
here, and sinon-chai can be downloaded from here.
All the site recommend using
npm to download the libraries and I agree with
them. It is easy to do, and you can also get the latest version each time or
target a specific version. But, it requires you to have nodejs and npm installed
on your computer. Node.js can be installed on your machine from here.
Install node package manager (npm) using guidelines from here.
executing this line of code from command prompt should install it for you.
I prefer downloading each file manually from the links above. If you want to
install it using
npm, the command to install using node package manager is
npm install --save mocha sinon chai sinon-chai. This will download the
libraries needed into the
Then you can add the files mocha.js, sinon.js, chai.js, and sinon-chai.js from
the node_modules folder into your test project. Beware that if you want stubs
and spy methods, you will have to include the
sinon/libs/stub.js etc files.
you can get the html runner template from
mocha/template.html. The code is
To add client side test into you solution as a separate project, follow these
steps: Open you asp.net mvc project, and create a new project in your solution
by selecting an Empty Project Template and name it something like
".ClientSideTests". I like to keep all of my test projects in
a folder called
In my asp.net mvc project, I have a file called
app.js with a
homeCtrl and a
courseRepository with the following code
Add an html document to your
".ClientSideTests" project. I
called mine testrunner.html and add the following lines of code.
Please note that the order you include the scripts matter. Your testrunner.html file needs to know about angular.js, angular-routes.js, and angular-mocks.js files. I am linking to the angular files from my mvc project here so make sure you have these files in your project. Referencing the same version of angularjs files is recommended as you wont have any issues with using different versions of angularjs libraries.
And finally, create a tests.js file in your
".ClientSideTests" project and add a simple test such as the
Your solution structure should look like the following screenshot
And finally right click testrunner.html file and choose “View in Browser”. and watch your first test pass.