Click here to Skip to main content
Click here to Skip to main content
Go to top

Getting started with Jasmine tests in FubuMVC applications

, 21 Feb 2012
Rate this:
Please Sign up or sign in to vote.
Jasmine is one of the most popular BDD-style JavaScript testing frameworks.

Jasmine is one of the most popular BDD-style Javascript testing frameworks. I decided to use it for my new project, Chpokk, built on top of FubuMVC. Here are the steps that I made, together with some for-dummies explanations.

Adding Jasmine to your project

is as easy as adding the FubuMVC.TestRunner NuGet package to your project. After that, navigate to /testing/suites/whatever, and see a greenish almost empty page that says "0 specs". Jasmine is installed.

What's under the hood?

After you add the package, you discover a zip file named fubumvc-testrunner.zip in your fubu-content folder. This file is a "bottle", a piece of functionality that adds itself to the main application. With the first Web request, the zip is extracted ("exploded") to a subfolder. Let's see what we have there.

The WebContent folder is mapped to the root of your application. The Shared subfolder contains the Application.spark file, which is going to be the master page for all test pages, and the bindings file.

Take a look at the following snippet from the Application.spark file:

    <Stylesheet href="jasmine.css" />
    <Script src="fubumvc-testrunner" />
These tags look unfamiliar. Their meaning is explained in the bindings file:
  <element name="Stylesheet">#this.Asset('@href');</element>
  <element name="Script">#this.Asset('@src');</element>
this.Asset() is a method that adds a script/css to the list of assets of the page. Note that it produces no output; in order to write all scripts (together with their dependencies), you have to call
this.WriteScriptTags()
or, using our bindings, just
<Scripts />

The actual View is called Run.spark, and located in the suites folder. It's very simple:

<viewdata model="FubuMVC.TestRunner.Suites.RunSuiteViewModel" />
<content:title>${Model.Suite}</content:title>
<content:scripts>
  <Script src="${Model.Suite}" />
</content:scripts>
There are two content areas: one is the page title, the other just adds a script (or a set of scripts, see later) to the page. How do we decide which script to add? We take it from the Url. Because of some model binding magic (plus internal Fubu processing), the last part of the Url is mapped to the Suite property of the model.

Adding the first test

In order to use the Fubu's Asset Pipeline, I put my test script into the /Content/scripts folder of my Web.

Here is my sampletest.js:

describe("First test", function() {
    it("should fail", function() {
        expect(true).toBeFalsy();
    });
});

As a real TDD practitioner, I'm creating a failing test first. Mom would be proud of me!

After saving this file, I navigate to /testing/suites/sampletest.js, and I see a failing test. WIN!

Dealing with a Real World Problem

Having all your code in the tests is fine, but at some point a manager might want you to move some of it to the production files. So, we'll need to include several files in our tests. Let's see how to do it.

Let's create another file called realstuff.js, and put it into the Content/Scripts folder:

function arewegood() {
    return false;
}
Next, let's create a plain text file, named tests.script.config, and place it in the root of our application. This file will hold our script set definitions. Right now, we'll put the following line there:
tests includes realstuff.js, sampletest.js

Now, we'll use the name of the set in the URL: /testing/suites/tests. If we look at the source, we'll see that both scripts are loaded. We can put another script set in our config file, and we'll be able to run a different suite with a different Url.

The last step is to modify our test so that it depends on the "production" code:

describe("First test", function() {
    it("should fail", function() {
        expect(arewegood()).toBeTruthy();
    });
});

That's it for today, I still have to make this test pass.

Update

@jmarnold pointed me that Serenity does all that and lots of other great stuff. I guess I'll have to delete all this and start from scratch. In the next post, I'll tell you what happened.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Artem Smirnov
Software Developer Freelancer
Russian Federation Russian Federation
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web04 | 2.8.140921.1 | Last Updated 21 Feb 2012
Article Copyright 2012 by Artem Smirnov
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid