Monthly Archives: May 2016

ASP.NET Core: Unit testing with NUnit

In this post I reuse my sample project (ported to ASP.NET Core RC2)  but add a new Nunit test project to it.

Nunit has no testrunner ready yet that supports testing with dotNetCore. In fact for the moment only XUnit supports the VS2015 GUI testrunner.

NUnit has a lightweight testrunner NUnitLight. DotNet Core supports only two mode, ASP.NET MVC apps and Console apps.  So, what I did is use NunitLight inside a .Net Core console.

The code can be found here: https://github.com/geobarteam/myClub/tree/1-4.Add.NUnit.TestProject

  1. You should start by adding a new .Net Core Classlibrary project and addd the NUnit & NUnitLight dependencies.
    $ yo aspnet
    yeoman
  2. Modify the project.json file
    [snippet id=”291″]
  3. Modify the program.cs file
    [snippet id=”301″]
  4. Add a Nunit test file: SampleTest.cs
    [snippet id=”311″]
  5. Start the test session with “dotnet run” , you can also launch the test project and debug it through VS2015.
    nunitdotnetrun

ASP.NET CORE: Upgrade from RC1 to RC2

RC2 of .Net Core is out, so it’s time to upgrade your apps. The official documentation on how to upgrade can be found on: https://docs.asp.net/en/latest/migration/rc1-to-rc2.html

Here is the list of things I did to upgrade my existing ASP.NET CORE RC1 apps to RC2 :

Without VS2015:

  • Updated Yeoman: yo, choose Update Generators
  • With Yeoman create a new: yo aspnet, Web Application Basic.
  • Copy the content of the project.json to my existing application
  • From inside the project folder I run from the command line: dotnet restore
  • To test if everything work file: dotnet run

With VS20015:

  • Remove all VS2015 specific files: *.sln, .vs, *.xproj, *.xproj.user
  • Delete the existing package.json and copy an existing package.json inside the project (created with file, new project, web, ASP.NET Core Web Application).
  • Open the project with Visual Studio, here VS2015 crashed!
  • I needed to copy some parts of the xproj project file created with the template. Mainly the TargetFrameworkVersion part.
  • Re-open my solution, compile, run, it worked!

I had also to do minor adaptations in my code. I had to port from the namespace Microsoft.AspNet.* to Microsoft.AspNetCore.*

If you want to target the .Net framework you need to:

  1. Change the framework part of your project.json:
    “frameworks”: {
    “net461”: {}
    },
  2. Remove: “Microsoft.NETCore.App” from the dependencies.

Asp.Net Core: Building TypeScript with Gulp

In the preceding post I show how you can compile your TypeScript files with tsc. You can also simply use Visual Studio and enable the option: “Compile TypeScipt on Build” in the Build properties of your ASP.NET Core project.
While these are valid options I generally prefer to use Gulp to setup my own workflow.
In this post I’ll explain how you can use Gulp to setup and fine tune a Typescript build.

The code is available at: https://github.com/geobarteam/myClub/tree/1-3.Build.TypeScript.With.Gulp

$ git pull https://github.com/geobarteam/myClub.git 1-3.Build.TypeScript.With.Gulp

A) Pull the Gulp packages

First we’ll need to use npm to pull down some gulp packages that will help us in setting up our Typescript build.
The npm packages we need are:
“gulp-rimraf”: “^0.2.0”,

“gulp-sourcemaps”: “^1.6.0”,

“gulp-typescript”: “^2.13.4”,

“gulp-uglify”: “1.2.0”,

“rimraf”: “2.2.8”

gulpfiles1

To install these packages you can copy paste the list here above right under the “devDependencies” of the package.json file but I prefer to use npm.
To install these packages through npm, first navigate to the root of your project and use the command:
$ npm install [packagename] –save-dev
The –save-dev option is used to update our packages.json and put the new dependencies under the “devDependencies”.

B) Create the Gulp Tasks

Here we’ll use gulp-typescript to compile automate the typescript build. The documentation can be found here. Open the gulpfile.js and modify as follows:

  1. Require the packages
    [snippet id=”221″]
  2. Add following path variables
    [snippet id=”231″]
  3. As we’ll use the tsconfig.json file to set the build properties we’ll create a project:
    [snippet id=”241″]
  4. Write the typescript build task
    [snippet id=”251″]
  5. Write the clean tasks
    [snippet id=”261″]
  6. If you use VS2015 you can bind the gulp tasks with your VS build. The clean tasks should run before our build and after our build we should run first the ‘tsbuilld’ and then the ‘min’ task.
    gulpfiles2gulpfiles3
  7. Write a watch task if you want that the ts build is triggered when a ts file changes.
    [snippet id=”271″]
  8. If needed, modify your angular script links. As the predefined min:js gulp task minifies all js files we can choose to use the minified app.js file in production.
    [snippet id=”281″]

ASP.NET Core: Modify an Angular App to use Typescript

In this step we’ll modify our Angular 1.x app to use typescript.

Code can be found on: https://github.com/geobarteam/myClub

Branch: 1-2.Add.Typescript

Configure a Typescript Build

First install the latest Typescript compiler:

npm install -g typescript

Add a script folder to your project, this will be the home for your typescript files:

scriptfolder

Add a tsconfig.json file right under the scripts folder.

tsconfigs

The tsconfig.ts file contains the build options for the typescript compiler, it allows to run the Typescript compile process without specifying arguments.  To compile from the command line you should navigate inside the script folder and run: tsc

tsconfig.ts:
[snippet id=”181″]

Configure Typings

Typings allow to simply manage and install TypeScript definitions.

Install typings globally via npm:

npm install typings –global

To install typing definitions for angular 1.x, and Jquery use the command:

typings install angular jquery –ambient –save

 

Migrate the Angular scripts to use typescript

Move all your javascript angular scripts into the “scripts” directory and rename their suffix to “xxxxx.ts”.

tsconfigs

Add the “any” type to all your parameters and variables.
This is only required because we   used the “noImplicitAny”: false setting.  I like to use it as it makes clear that I should type all variables.
[snippet id=”191″]

You should now modify the tsconfig.ts to add the files to compile and set an output file:
[snippet id=”201″]

Inside _Layout.cshtml modify the angular scripts link to use the app.js script file:
[snippet id=”211″]

When compiling the app in VS2015 or running tsc from the command line inside the script folder;  you should end up with a app.js file inside the wwwroot/app directory:

prscr

Test the app, it should still run exactly as before.

ASP.NET Core: Create an Angular App


aspnetcore

Here I’ll start a series of little tutorials on how to build from scratch a new Angular application with ASP.NET Core and MVC5.

The code used in these tutorials can be found under my git hub project: myClub

Every post has his own dedicated branch, so you can just use  “git checkout <branchname>” to find all the source code of the post you’re interesting in.

1) Create a new MVC core project

To generate a new project we’ll use Yeomen.  Open a commend prompt/bash shell or powershell shell on the location you want to put your new project =>

mkdir myClub

cd myClub

yo aspnet

yeomen

Choose Web Application Basic and provide a name.


 

2)          Add Angular to the MVC app

1)      Add Angular, from command line inside you project dir:
bower install angular angular-ui-router –save

Add angular to _layout.cshtml :

<script src=”~/lib/angular/angular.min.js”></script>


 

3) Create two js scripts under wwwroot:

app.config.js

[snippet id=”111″]

app.module.js

[snippet id=”121″]

printscreenvscode


 

4) Add two controllers

myTeam.controller.js & home.controller.js

[snippet id=”131″]


 

5) Add the two html pages inside the angular app

home.html

[snippet id=”141″]

myTeam.html

[snippet id=”171″]


 

6)  Reference the js scripts in _layout.cshtml

[snippet id=”151″]


 

7)      Add the angular app inside idex.cshtml and move the navbar from _layout.html

index.cshtml

[snippet id=”151″]


 

8)      Test the application

testpage