Monday, April 23, 2018

Testing Javascript on Asp.Net Core Applications

So, we've been discussing .Net on this blog for some time. In this post I want to explain how can it be possible to run JavaScript tests against your Asp.Net Core web application.

If you're new to JavaScript tests, please check this link as I won't go in detail on JavaScript testing using the existing testing frameworks.

Introducing Chutzpah

My solution of choice for testing JavaScript in the .Net / .Net Core world is Chutzpah, an open source JavaScript test runner that integrates well with Visual Studio and the .Net and .Net Core stack.

Because Chutzpah is not a testing framework itself but a test runner, you'll need to chose 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. Please note that Chutzpah allows you to run unit tests also on QUnit, and Mocha.

Writing Jasmine Tests

A simple jasmine test looks like this:


For more info on Jasmine and more complex scenarios, please visit this page.

Testing JavaScript in Asp.Net Core

So, now let's create a new Asp.Net Core web app. Basically we will:
  1. create a new asp.net core web app
  2. add Jasmine as a NuGet package
  3. add you JavaScript files
  4. 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:
  1. Add Chutzpah as a referenced NuGet package;
  2. 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:
And fixing it!

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 here: https://github.com/hd9/code/tree/master/dotnet/Core/JsTests

See Also

Why you should start using .Net Core
Package Management in .Net Core
Exporting Html to Pdf using only JavaScript
Importing CSVs with .Net Core and C#
Exporting a CSV generated in-memory in Asp.Net with C#
Building and Running Asp.Net Core apps on Linux
Asp.Net / Asp.Net Core: Generating views in the backend

For more posts on .Net Core, please click here.

References

Chutzpah documentation
Jasmine documentation
PhantomJS