Monday, April 23, 2018

Testing JavaScript on ASP.NET Core Applications

On this post, let's take an in-depth look on how to test JavaScript using ASP.NET Core.

We've been discussing .NET on this blog for some time. On this post let's addres how can we can run JavaScript tests against your ASP.NET Core web application. If you're new to JavaScript tests, please check this link for a nice intro on JavaScript testing using existing testing frameworks.

This is a long post, so please grab some coffee and read on. 😊

Introducing Chutzpah

My solution of choice for running JavaScript in .NET Core applications is Chutzpah, an open source JavaScript test runner that integrates well with Visual Studio, Visual Studio Code and the .NET stack. But Chutzpah is not a testing framework itself. It is a test runner. That said, you'll also need to choose a JavaScript testing framework. Since I've been using the Jasmine for some time and I like it, I will use it on this demo. Note that Chutzpah is unopinionated and allows you to run unit tests using other frameworks such as QUnit, and Mocha. Choose what works best for you.

Writing Jasmine Tests

Without further ado, let's jump into an example. For starters, this is what a simple Jasmine test looks like:

Don't worry about that code yet. We will cover it in detail below.

Testing JavaScript in ASP.NET Core

Now let's create a new ASP.NET Core web app and configure it to use Chutzpah and Jasmine. Basically what we will do is:

create a new asp.net core web app
add Jasmine as a NuGet package
add you JavaScript files
test them =)

Step 1.1: Create a new Asp.Net Core web app

Open your Visual Studio -> New Project -> select ASP.Net Core Web Application and enter a name. Then, select "Web Application" from the popup box:

Step 1.2: Add the Jasmine NuGet Package

Right click your web project -> References -> Manage NuGet packages. On that window (I'm using VS2017) type jasmine, click install.

Step 1.3: Add your JavaScript files

For simplicity, I'll add a simple "mathhelper.js" script that will be tested:

Step 1.4: Add your Jasmine JavaScript test file

Now, follow the same process and add your test file. I called mine "mathhelper.js"

Good. Now it's time to install Chutzpah and run your tests directly from Visual Studio and from the command line if you want to.

Running tests with Chutzpah in Visual Studio

To complete this step we need to:

Add Chutzpah as a referenced NuGet package;
Install the Chutzpah extension in Visual Studio

Step 2.1: Add Chutzpah as a referenced NuGet package

Search for "chutzpah" in the NuGet search window and add it as a reference to your project.

Step 2.2: Install the Chutzpah extension in Visual Studio

In order to make Visual Studio recognize our tests we then need to install the Chutzpah extension by doing Tools -> Extensions and Updates. After typing "chutzpah" in the search box I get:

Click Download and restart your Visual Studio. When you're back, open the Tests Window (Test -> Windows -> Test Explorer) and you should see our test there:

Running the tests in Visual Studio

Now, from Visual Studio I can run my test as a regular unit test. I will simulate a quick TDD here by making the test fail:

Now, go ahead and fix it. You'll see that if the test's correct, Visual Studio will show it green!

Debugging the tests in Visual Studio

Note that Visual Studio and Chutzpah together can bring us great benefits like debugging our JavaScript unit tests. Here's it on my machine:

Running JavaScript tests in the console

Because Chutzpah uses the PhantomJS headless browser to run your tests, the nicest thing we can do is to be able to run JavaScript tests in the console. Why is that good? Because we can then integrate the tests in our IDE/build process and gain speed and quality by doing that. And the key to that happen is the Chutzpah console tool.

The Chutzpah console tool

Remember that previously we installed the Chutzpah NuGet package? Because .Net Core stores all Nuget packages on "~/.nuget/packages" as previously described on this blog, on my Windows machine I can access it on:
C:\Users\bruno.hildenbrand\.nuget\packages\chutzpah\4.3.6\tools\chutzpah.console.exe:

Please note how many options we have available. This post only scratches the surface!

Running my tests in the console

So, in order to run our tests in the console, just invoke the chutzpah.console.exe and point to the current folder. That executable will search for JavaScript tests and run them reporting a summary in the end:

Conclusion

I'm a big fan of automated tests. I have written thousands of them in my career and recommend everyone to do the same. The more tests we have, the easier it gets to improve/refactor/extend the code base and, with confidence! On that context, JavaScript tests are extremely important. Especially because JavaScript is an interpreted language and you won't know something is broken until you run that code what's both expensive and highly risky. TypeScript solves some of those issues by transpiling your JavaScript but that does not guarantee that your logic is flawless.

All that said, my recommendation is adding automated testing to your CI/CD services to make your team more confident and increase your overall quality. We can and should integrate test runs in our release pipeline we can gain a lot of productivity and quality by doing that and the console tool is the key to do that integration.

Source Code

The source code for this post is available on my GitHub.