How to configure Visual Studio Code with Visual Studio Team Services?

You work with the amazing Visual Studio Code and you want to manage your source code in Visual Studio Team Services?, I’ll show you how to!

1- If you don’t have it, you need to subscribe to Visual Team Services, here is the Microsoft documentation:

https://www.visualstudio.com/en-us/docs/setup-admin/team-services/sign-up-for-visual-studio-team-services

2- Download Visual Studio Team Services in Visual Studio extensions search menu :

3- Close / Open Visual Studio Code (if Visual Studio Code doesn’t reload after installation of Team Services), you should see this menu on the left bottom of VS Code :

4- Go online to your Visual Studio Team Services account, in top right , open the your account menu and click on “Security” :

5-  You have to configure a security token access for your Visual Studio Code :

  • Select “Personal acces tokens”
  • Set a description
  • Select an expiracy delay (1 year is the max)
  • Select your account in the list if you have more than one account
  • Select all scopes if you want to ;amange everything with this access token, else choose what want to allow

 

6- Save your settings, then save the displayed token, the token will be displayed once for security reasons

7- In Visual Studio Code, click on “Teams” on the bottom left and paste in the input box that appears in the top your token :

8- Now you might be able to deal with your code, your repository (project in Visual Studio Team Services) will appear and replace “Teams” button

For example if you are using GIT, you will be able to Clone, Pull, Commit etc….

 

WallabyJs, a smart unit tests runner!

Wallaby.js is a smart runner JavaScript tests and it’s super fast, it runs continuously your tests.

It reports the results directly into your code editor immediately when you change your code, we take example by Visual Studio 2.1 and the Jasmine framework for testing.

Step 1: Install WallabyJs

In our case, we’ll use Visual Studio 2013 to download the addon for Visual Studio WallabyJs here.

Caution : must have at least 4 update for Visual Studio 2013 to be compatible.

Step 2: Configuring WallabyJs

To set the execution environment of WallabyJs, configure three things:

– The path to the JavaScript files functions you want to test

– The path to the Javascript test files

– Javascript framework you want to use (WallabyJs supports Jasmine, Mocha, QUnit)

To do so we must create a json file to the root of your web project, I recommend naming like this: wallaby-jasmine.json, this will visually easily identify our configuration file :

{ 
   "files": [ "Scripts/*.js" ], 
   "tests": [ "Scripts/tests/*.spec.js" ], 
   "testFramework": "jasmine@2.1.3" 
}

The properties “files” and “tests” are arrays, you can put as many files as you want to test, “files” for files containing the test, “tests” for files of unit tests to execute.

You can also select with * all files in a directory you want.

Finally, the framework used in the latest WallabyJs Jasmine is version 2.1.3, you can check here syntax Jasmine.js 2.1 here: http://jasmine.github.io/2.1/introduction.html

Note: With the Framework Jasmine, the name of test file must end with .spec.js

Overview of web project:

Conversion.js (library to be tested)

var Conversion = { 
   livreVersKilo: function (livres) { 
      if (isNaN(livres)) { 
         throw "ValeurLivreIncorrecte"; 
      } 
      return livres / 2.2; 
   } 
};

conversion.spec.js (fichier de tests)

/// <reference path="../conversion.js" /> 
// Specs 
describe("The conversion library", function () { 
   describe("Pound to kilogram conversion", function () { 
      it("Should multiply the number of pounds per 2.2", function () { 
         expect(Conversion.livreVersKilo(22)).toBe(10); 
      }); 
      it("Should not multiply the number of pounds per 2.2", function () { 
         expect(Conversion.livreVersKilo(22)).not.toBe(9); 
      }); 
      it("Should throw an exception if the input is not numeric", function () { 
         var foo = function () { 
            Conversion.livreVersKilo("abc"); 
         }; 
         expect(foo).toThrow("ValeurLivreIncorrecte"); 
      }); 
      it("Should throw an exception if the input is not numeric", function () { 
         var foo = function () { 
            Conversion.livreVersKilo("1"); 
         }; 
         expect(foo).toThrow("ValeurLivreIncorrecte"); 
      }); 
   }); 
});

cap9

Step 3: Start Wallaby Js
To do this, stand on the wallaby-jasmine.json file, right-click and do “Start WallabyJs” :

cap2

If the boot fails, you will be notified in this case to verify the information your configuration file, otherwise if successful the following message:

cap3

From the start, WallabyJs will execute unit tests, the files tests will show green or red square (+ red message on failure) based on the test results:

cap6

Step 4: Add, edit tests

Once you edit your files from unit tests, WallabyJs will restart the tests without any action from you, same as you change your Javascript functions to be tested, WallabyJs will detect this and will also run unit tests.

To see a demo of WalabyJs in action watch the video here

Bonus for those with ReSharper :

Happy owners of ReSharper will be able to enjoy an additional feature:

Indeed other icons will appear in your test files, much like NCrunch, it is possible to launch the unit test in windowed mode :

cap7

cap8

So, what do you think? 🙂

Important detail : it’s not free unfortunately!

For the price, it’s here.

I’m using Angular CLI beta, how to update to Angular CLI RC and Angular 4 ?

Like many developers, you were impatient to try and adopt Angular 2 with Typescript.
Just like me you probably used Angular CLI, but it was in beta version.
For a few days Angular CLI RC has been released and Angular 4 with it and you want to migrate …..

Here’s how.

In this whole article i’m using Visual Studio Code.

First check your version like this :

ng -v

ng-v

 

Scenario 1, you are using angular-cli-1.0.0-beta.28 or earlier

You need to uninstall it (angular-cli package) before  and to scenario 2 after :

npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli

 

Scenario 2, you are using a more recent version than angular-cli-1.0.0-beta.28 (like beta.32)

1- You need to upgrade you global and local packages :

Global package

npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest

Local project folder

rmdir node_modules
npm install --save-dev @angular/cli@latest
npm install

2- You need to modify angular-cli.json file :

  • Rename the file to .angular-cli.json (with a dot)
  • Add $schema property before project property :
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  • Depending your version you need or not to add an entry for polyfills between main and test :
    "polyfills": "polyfills.ts",
  • You need to modify environments entry :
    Before :

    "environments": {
      "source": "environments/environment.ts",
      "dev": "environments/environment.ts",
      "prod": "environments/environment.prod.ts"
    }

    After:

    "environmentSource": "environments/environment.ts",
    "environments": {
      "dev": "environments/environment.ts",
      "prod": "environments/environment.prod.ts"
    }
  • You have to create these 3 files :
    src/tsconfig.app.json:

    {
      "compilerOptions": {
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [
          "es2016",
          "dom"
        ],
        "outDir": "../out-tsc/app",
        "target": "es5",
        "module": "es2015",
        "baseUrl": "",
        "types": []
      },
      "exclude": [
        "test.ts",
        "**/*.spec.ts"
      ]
    }

    src/tsconfig.spec.json:

    {
      "compilerOptions": {
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [
          "es2016"
        ],
        "outDir": "../out-tsc/spec",
        "module": "commonjs",
        "target": "es6",
        "baseUrl": "",
        "types": [
          "jasmine",
          "node"
        ]
      },
      "files": [
        "test.ts"
      ],
      "include": [
        "**/*.spec.ts"
      ]
    }

    e2e/tsconfig.e2e.json:

    {
      "compilerOptions": {
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [
          "es2016"
        ],
        "outDir": "../dist/out-tsc-e2e",
        "module": "commonjs",
        "target": "es6",
        "types":[
          "jasmine",
          "node"
        ]
      }
    }
  • You need to modify also the lint entry :
    "lint": [
      {
        "project": "src/tsconfig.app.json"
      },
      {
        "project": "src/tsconfig.spec.json"
      },
      {
        "project": "e2e/tsconfig.e2e.json"
      }
    ],
  • You need to replace defaults and spec entries :
    Before :

    "defaults": {
      "styleExt": "css",
      "prefixInterfaces": false,
      "inline": {
        "style": false,
        "template": false
      },
      "spec": {
        "class": false,
        "component": true,
        "directive": true,
        "module": false,
        "pipe": true,
        "service": true
      }
    }

    After :

    "defaults": {
      "styleExt": "css",
      "component": {
        "inlineTemplate": false,
        "spec": true
      }
    }
    
  • You have to delete these files : e2e/tsconfig.json and src/tsconfig.json and put this into apps entry :
    "tsconfig": "tsconfig.app.json",
    "testTsconfig": "tsconfig.spec.json",
  • Finally, update protractor.conf.js file :
    beforeLaunch: function() {
      require('ts-node').register({
        project: 'e2e'
      });
    },
    

3- You need to modify package.json file :

  • Add these entries :
    "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
    },
    

4- You need to modify karma.conf.js file :

  • Replace the frameworks entry
    frameworks: ['jasmine', 'angular-cli']

    by

    frameworks: ['jasmine', '@angular/cli'],
  • Replace the plugins entry by this :
    plugins: [
          require('karma-jasmine'),
          require('karma-chrome-launcher'),
          require('@angular/cli/plugins/karma'),
          require('karma-jasmine-html-reporter'),
          require('karma-coverage-istanbul-reporter')
        ]
  • Add client before files entry :
    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    
  • Replace preprocessors entry by this :
    preprocessors: {
      './src/test.ts': ['@angular/cli']
    },
    
  • Replace remapIstanbulReporter entry by this one :
    coverageIstanbulReporter: {
      reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    },
    
  • Remove config property from angularCli entry :
    angularCli: {
      environment: 'dev'
    },
    
  • Replace the whole reporters entry by this :
    reporters: config.angularCli && config.angularCli.codeCoverage
              ? ['progress', 'coverage-istanbul']
              : ['progress', 'kjhtml'],
    

5- You need to modify protractor.conf.js file :

  • Replace this line
    var SpecReporter = require('jasmine-spec-reporter');

    by this one :

    const { SpecReporter } = require('jasmine-spec-reporter');
  • Remove useAllAngular2AppRoots entry
  • Update beforeLaunch entry by this :
    beforeLaunch: function() {
      require('ts-node').register({
        project: 'e2e'
      });
    },
    
  • Update onPrepare like this :
    onPrepare() {
      jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
    }
    

6- Finally you need to modify tslint.json file :

  • Add this entries :
    "callable-types": true,
    "import-blacklist": [true, "rxjs"],
    "import-spacing": true,
    "interface-over-type-literal": true,
    "no-empty-interface": true,
    "no-string-throw": true,
    "prefer-const": true,
    "typeof-compare": true,
    "unified-signatures": true,
    
  • Update no-inferrable-types with this :
    "no-inferrable-types": [true, "ignore-params"]
    

 

Now you can try to build and check your current version :

angular-cli updated

As you can see , you sucessfully upgraded your Angular CLI version !

Note that your current app is still using Angular2 version, i will show after how to upgrade your app to Angular4.

For the new apps that you will create (by using g new my-new-app), the default version used of Angular is 4.0.0!

 

To finish,  as I said the migration to Angular CLI 1.0.0 did not upgrade my app to Angular4, what to do now ?

Just do this into your local project :

npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save

Now your app is also upgraded :

updated to angular4

Nice isn’it ? 🙂

If you have issues with the upgrade of your app, check this Url : https://angular-update-guide.firebaseapp.com/

 

Source of this tutorial : https://github.com/angular/angular-cli/wiki/stories-rc-update