Integrate NDepend into your .Net Core projects !

Introduction

In computer science and software engineering in particular, software quality is an overall assessment of software, based on many indicators.

The completeness of the features, the correction and precision of the results, the reliability, the fault tolerance, the facility and the flexibility of its use, the simplicity, the extensibility, the compatibility and the portability, the facility of correction and transformation, the performance, consistency and integrity of the information it contains are all quality factors.

In software engineering, factorization of data and code is the universal means of obtaining quality.

We will talk in this article about NDepend, a tool to help software developers to achieve a high level of quality of their programs.

What is NDepend ?

 

NDepend was created by Patrick Smacchia in 2004, it became commercial in 2007 and evolved a lot since.

It does static code analysis for .NET and you can try it free for 14 days.

NDepend can be used in standalone or integrated Visual Studio mode.

This tool gives you one-click access to many metrics in your code with a graphical representation. Interesting!

With the dashboard the most interesting feature of NDepend is the query language on which it is built: CQLinq

But before let’s take a look on the installation process.

Installation

Installing the NDepend extension for Visual Studio is really easy, download it and install like this by clicking on Visual Studio Extension Installer and then select the Visual Studio version you to install on:

The great thing about NDepend is the ease with which you can get started and the excellent documentation available in their website. There are online videos, tutorials, screenshots, step by step explanations and you cannot go wrong with it.

For more details you can go here for: https://www.ndepend.com/docs/getting-started-with-ndepend#Tuto

Running NDepend

You can run NDepend in standalone with VisualNDepend.exe executable (in the same installation directory than the Visual Studio Extension executable) or run the extension in Visual Studio from the menu:

When you expend the menu you can access to NDepend features.

Let’s see how Dashboard looks like:

On the same screen, NDepend provides many many metrics like :

  • Technical Debt
  • Lines of code
  • Comments
  • Issues
  • Programming rules
  • Code coverage
  • Quality gates
  • And more other features

It provides really huge analysis of your code, you can at anytime take a look at a little summary and recompute your dashboard by clicking on the colored circle at bottom right of your screen, very convenient!

 

Let’s see another crazy feature of NDepend:  CQLinq

CQLinq, which stands for Query Code LINQ, is a query language that you can execute on an abstract model of your code. In concrete terms, you can query your code the same way you would query the views or tables of a database. For example, to search all class constructors, I wrote the following query:

from m in Methods 
where m.IsConstructor
select m

If you want to write your query, go on the NDepend menu, select “Rules” and View “Editor Panel“:

It open a little window where you can type your query, at the same time, the result is displayed at the bottom, nice isn’t it? 🙂

 

There is also VSTS integration:

You can integrate NDepend to your TFS CI/CD process by leveraging a VSTS extension and adding it to your build definition. You can also define a Quality Gate for your project, and fail the build when code quality is not met.

There are also TeamCity, Jenkins, SonarQube and FinalBuilder integration if you don’t use VSTS.

Conclusion

I did not introduce every features of NDepend because it’s a very big and complete product, I chose the most interesting features according to me.

I didn’t precise that all NDepend results can be diff-ed since a baseline:  https://www.ndepend.com/docs/code-diff-in-visual-studio

I didn’t dig into Technical-Debt capabilities:
https://www.ndepend.com/docs/technical-debt that NDepend has facilities to explore dependencies with code graph and DSM (Dependency Structure Matrix)
https://www.ndepend.com/docs/visual-studio-dependency-graph
https://www.ndepend.com/docs/dependency-structure-matrix-dsm
https://www.ndepend.com/docs/cqlinq-features#Dependencies that NDepend can import code coverage data and use it in some rule…
https://www.ndepend.com/docs/treemap-visualization-of-code-metrics#Color

I honestly think NDepend is very powerful and very easy to use. The CQLinq language and the NDepend dashboard are in fact the best features of the tool and in addition I have found nothing equivalent at this level.

However, because NDepend doesn’t correct code for you, I suggest to keep using Resharper that can work in synergy with NDepend. There are few overlap between the NDepend and Resharper rules-sets, while Resharper is more focused on details inside methods body, NDepend focuses more on code structure and overall quality.

The NDepend team is very active and we can expect a lot of good developments in future versions.

I thank Patrick Smacchia, for giving me the opportunity to test his product that I find really excellent.

Patrick when a NDepend-like for SPAs ? 😉

Getting started with TsLint and tslint-consistent-codestyle in Angular 5+ projects, Part 2: VSTS builds integration

 

Introduction

This article will help you configure TSLINT and some more code style rules to enforce consistent code style in your Angular application.
We are using Angular 5 in Visual Studio Code for this tutorial and VSTS to run a Continuous Integration (CI) build.

Step 1

Create a build definition in VSTS.

Configure your source repository location.

Step 2

Setup your agent phase, name it and select an Agent queue:

Step 3

Install dependencies simply by selecting the “install” command:

Step 4

Configure the build using a “custom” command like this:

Step 5

Configure TsLint using a “custom” command like this:

Step 6

Run the VSTS CI build and check your log 😊

If your code doesn’t respect your TsLint rules it should make your build fail:

 

Good luck 😉

How to run unit tests in a VSTS CI build with Angular 5 and PhantomJS Part 1

Setting up Angular 5 project

You chose Angular 5 as FrontEnd framework, and you made a good choice!

As you can see, Angular 5 comes with Angular-CLI 1.5.

Angular-CLI  npm package installs Angular 5 as we said before and also a complete unit tests toolset :

  • Karma
  • Jasmine

Karma is a Javascript test runner, and Jasmine is a behavior-driven development framework for testing JavaScript code.

In this article I won’t describe how they work, but i will describe how to use then in a VSTS CI.

The critical phase we encounter is how unit tests are run: Karma need a browser to run units tests with Jasmine .

With Angular-CLI there is no issue with that because when you launch your tests with :

ng test

Karma launches automatically a browser like this :

Now we want to build a CI in VSTS but, there is no browser! what can we do ?

PhantomJS is here to help us!

PhantomJS is a so called Headless Browser (or headless WebKit scriptable, as they call it themselves). A headless browser is a browser that is just running in the background, that you can only interact with via code or a terminal. This is just what we need, so let’s make our test run on Phantom instead of Chrome.

WOW!

how does it work ?

Let’s install it and set up in our Angular 5 project!

Step 1, install PhantomJS itself and its runner for Karma

npm install phantomjs-prebuilt --save-dev
npm install karma-phantomjs-launcher --save-dev

Step 2, add them by modifying karma.conf.js

Add karma-phantomjs-launcher in plugins array :

plugins: [
 require('karma-jasmine'),
 require('karma-chrome-launcher'),
 require('karma-phantomjs-launcher'), 
 require('karma-jasmine-html-reporter'),
 require('karma-coverage-istanbul-reporter'),
 require('@angular/cli/plugins/karma')
 ],

Step 3, uncomment the big pollyfils block in pollyfils.ts :

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

import 'intl'
import 'intl/locale-data/jsonp/en'

Step 4, Add a ng test script in package.json :

"scripts": {
 "ng": "ng",
 "start": "ng serve",
 "build": "ng build",
 "test": "ng test",
 "lint": "ng lint",
 "e2e": "ng e2e",
"test-single-headless": "ng test --single-run=true --browsers=PhantomJS --reporters=progress"
 },

We are done for the PhantomJS setting up! 🙂

Let’s take a look on VSTS configuration for CI