S. J. Lewis 365 Solutions

Jasmine with Visual Studio and SharePoint Apps – Part 1

App for SharePoint project​

This blog does no​t describe how to perform JavaScript ​TDD (test-driven development) or BDD (behaviour-driven development). It does however describe how to set-​​up Visual Studio and configure an App for SharePoint project to get you started.

1. Install VS Extensions

Open Visual Studio 2013 > TOOLS > Extensions and Updates…

Within the Left panel, click on Online and search for Chutzpah Test

Download:

  • Chutzpah Test Adaptor for the Test Explorer
  • Chutzpah Test Runner Context Menu Extension

And then restart Visual Studio

2. Configure Test Explorer

Open Visual Studio 2013 > TEST > Windows > Test Explorer and pin the window to suite your preference…

Top left of the Test Explorer window, click on the button  “Run Test After Build” Run Test After Build

Create a new App for SharePoint Project​

Now that we have Visual Studio configured and ready to go, we need an App for SharePoint project to work with.

Create a new App for SharePoint project​

App for SharePoint project​

Choose where to debug the App and the type: Provider-hosted

Choose where to debug the App and the type

The type for project to create: ASP.NET MVC Web Application

ASP.NET MVC Web Application

And finally the authentication model: Windows Azure Access Services

Windows Azure Access Services

And finally You will then be prompted to sign into the portal your specified earlier.​

Adding Jasmine JS to a Project​

Now that we have an App for SharePoint project lets add Jasmine.

1. Install NuGet Package

Open Visual Studio 2013 > TOOLS > NuGet Package Manager > Manage NuGet Packages for Solution…

Within the Left panel, click on Online and search for SharePoint Jasmine Test Runner and click download.​

Search for SharePoint Jasmine Test Runner and click download

Note: the SharePoint Jasmine Test Runner package was created by Thorston Hans and at the time of writing this blog it was at version 0.0.1 and contained Jasmine 2.0. My reason for choosing SharePoint Jasmine Test Runner over Jasmine Test Adapter was because it did not include the VMC files which are not required if you plan to testing your code directly in Visual Studio.​

2. Configure Files/Package

Navigate to the Scripts folder for each of projects you added the package too and you will notice a folder containing JS files called  jasmine-samples. You do not need this scripts or this folder, so select the it and right click to see the context menu and then click either Delete or “Exclude from Project“.

3. Other Files

The Content folder contains a new folder called jasmine containing a single CSS file, don’t need to do anything with this.​

4. How to use Jasmine

After adding the SharePoint Jasmine Test Runner package, start by adding a “spec” file to your scripts folder. Spec files are where you will  describe your application and are the basis of your tests. After writing each test, you will immediately write the code (e.g. a function) within your “source” file fore fill the spec and therefore cause the test to pass. You repeat this process over and over again until you have written one or possible more spec that describes your JavaScript Application. Once all the tests pass have successfully passed then your development is finished (in theory).

5. Naming Convention

Depending on the size and complexity of your project, you many have one or more spec and source files. I would recommend pairing up the files so that a spec file always as a source file and vice versa.

For example:

  • filename_spec.js              contains the specs used to test the code.
  • filename.js                         contains the source code used by the application

4. What to look out for

  • Keep your spec and source files paired up and within the same folder.
  • If you are seeing duplicated tests then make sure that spec files are not being referenced. For example check the _references.js file and remove any reference: 
    /// <reference path="_tests/filename_spec.js" />
  • Visual Studio add automatically adds references to the _references.js file every time a new JS file is added to the Scripts folder. You will need to open the _references.js file​ and remove spec file​ references each time a new JS file is added.
  • If your test continue to fail even when they look correct, make sure that your spec file has a reference to its related source file:​ 
    /// <reference path="filename.js" />
  • To enable your test to run every time you save a file, click on the button “Run Test After Build” located at the top left of the Test Explorer window.

Jasmine with Visual Studio and  SharePoint Apps​ – Part: 1, 2, 3

Useful links
Video Tutorials

Siôn Lewis

, , , , , ,
, , ,