Thursday, June 1, 2017

Debugging Jasmine Tests with Karma and Visual Studio Code

  1. The Visual Studio Code Debugger only works with specific combinations of the Debugger for Chrome, Visual Studio Code, Angular CLI and Angular.  Make sure you are using the latest version of all libraries, extensions and tools or you will get the dreaded Breakpoint ignored because generated code not found.  For example, Angular 4.0 with the 1.0 version of Angular CLI does not work but Angular 4.1.3 with Angular CLI 1.0.6 works fine.
  2. Install the Visual Studio Code Extension, Chrome Debugger by clicking on the extensions icon on the left in Visual Code, searching for Chrome and clicking Install.
  3. On the Debug menu, click Open Configurations.

4. Modify your .vscode\launch.json to be this:
"configurations": [
"name""Launch Chrome against localhost",
"name""Launch Chrome against Karma",
5.  CLOSE ALL Chrome Browsers
6.  Run npm start at the command line in the directory for your application.

7. Run karma start at another command window in the directory for your application
8. Click the Debug icon on the left
9. Set a breakpoint
10. Choose Launch Chrome against Karma.  After the browser comes up, refresh it.

Friday, April 28, 2017

Jasmine Examples

Example of a Simple Test

describe('a super simple test', () => {
it('should be true', () => {
it('should be false', () => {

Setup and Teardown

describe("A set of tests using beforeEach and afterEach", () => {
var x = 0;
beforeEach(function() {
x += 1;
afterEach(function() {
x = 0;
it("is just a function, so it can contain any code", () => {
it("can have more than one expectation", () => {

Expect Matching

expect(myValue).toBe(true); // Use JS strict equality
expect(myValue).toEqual(482); // Use deep equality, recursive search through objects
expect(myValue).toBeTruthy(); // Boolean cast testing
expect(myValue).toContain('sometext'); // Find item in array
expect(x).toBeCloseTo(y, 2); // x to be close to y by 2 decimal points
Exception Matching
expect(function() {
MyMethod(1, '2')
expect(function() {
MyMethod(1, '2')
}).toThrow(new Error('Invalid parameter type.')


Spies can stub any function and tracks calls to it and all arguments.
A spy only exists in the describe or it block in which it is defined, and will be removed after each spec.

describe('SuperAwesomeModule', function() {
beforeEach(function() {
// track all calls to SuperAwesomeModule.coolHelperFunction()
// and also delegate to the actual implementation
spyOn(SuperAwesomeModule, 'coolHelperFunction').and.callThrough();
describe('featureA', function() {
it('should ...', function() {

// matchers for spies
Spies: and.returnValue
Useful when you want to stub out return values
describe('SuperAwesomeModule', function() {
beforeEach(function() {
spyOn(SuperAwesomeModule, 'coolHelperFunction').and.returnValue('myValue');

Karma Resources

Karma is a test runner for testing JavaScript and TypeScript.  
Install Karma
yarn global add karma-cli
Run all tests
karma start 
Testing Angular 2 Apps with Jasmine and Karma
Unit Testing Recipes for Angular 2 

Example karma.conf.js

This file uses the new Angular CLI (the namespace has changed).  

// Karma configuration file, see link for more information

module.exports = function (config) {
basePath: '',
frameworks: ['jasmine', '@angular/cli'],
plugins: [
clearContext: false // leave Jasmine Spec Runner output visible in browser
files: [
{ pattern: './src/test.ts', watched: false }
preprocessors: {
'./src/test.ts': ['@angular/cli']
mime: {
'text/x-typescript': ['ts','tsx']
coverageIstanbulReporter: {
reports: [ 'html', 'lcovonly' ],
fixWebpackSourcePaths: true
angularCli: {
environment: 'dev'
reporters: config.angularCli && config.angularCli.codeCoverage
? ['progress', 'coverage-istanbul']
: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false

Thursday, April 13, 2017

Angualar CLI Resources



npm install -g @angular/cli
New Project
ng new <project-name>
Generate a component
ng generate <component-name>
Run the server on http://localhost:4200
ng serve <project-name>


How to get productive immediately on Angular 2 with Angular-CLI
Simple Angular 2 App With Angular CLI


The Ultimate Angular CLI Reference Guide
Angular 2 Tutorial: Create a CRUD App with Angular CLI

Cheat Sheets

Yarn Package Manager Resources


Yarn is a node package manager for your code that is better than npm or bower. Yarn is created by Facebook in collaboration with Google, Exponent, and Tilde.
  • Faster than npm. It is around 3 to 4 times faster than npm without any cache. It downloads the dependencies in parallel. It is much faster once it is cached.
  • Deterministic. It will install the same consistent reproducable package dependencies and versions. npm depends on the install order and is non-deterministic (it may download a new minor or patch version) which could break your project.
  • Works offline
  • Supports other repos/formats
  • Backward compatible to npm.
  • Has Emojies 😎


Install Yarn OR npm install -g yarn

Configure Proxy
yarn config set proxy http://username:password@yourproxyserver:8080/
yarn config set https-proxy http://username:password@yourproxyserver:8080/

Change Angular CLI to use yarn
ng set = --global packageManager=yarn
Migrating from npm. Run this in your project directory.


Chris Courses: Intro to Yarn
Coding The Smart Way: Yarn Package Manager


Cheat Sheets

Tuesday, March 21, 2017

Angular 2 Material Design Resources

Material Design components for Angular apps

Main Sites


Elad Bezalel - Angular Material 2 | AngularUP 2016
Angular 2 Material - First Look
Material Design With Angular 2 Tutorial
Angular 2 Material Design - Tutorial For Running the Official Demo App Using The Angular 2 CLI


Node Package Manager Resources

npm is the package manager for JavaScript. Find, share, and reuse packages of code from hundreds of thousands of developers — and assemble them in powerful new ways.

Main Sites

Install node and NPM

Configuring the Proxy


What is npm? In 2 minutes

NPM Playbook

Getting started with npm


Node.js - NPM

Cheat Sheets

MOQ Resources

The most popular and friendly mocking framework for .NET

Main Site


Mocking With Moq

Introduction to MOQ

How to Use MOQ With C# For Test Driven Development

Creating Mock Objects for C# Unit Tests, using Moq



Moqing quick reference

Beginning Mocking With Moq 3

Cheat Sheet

Friday, March 17, 2017

Testing Angular 2 with Jasmine


Testing Angular 2 with Jasmine

Testing JavaScript with Jasmine and TypeScript

TDD with Angular 2


Unit Testing Recipes for Angular 2

Testing Components in Angular 2 with Jasmine

Setting up Angular 2 Testing Environment with Karma and webpack

Testing Angular 2.0.x Services and Http with Jasmine and Karma

A Test-Driven Development Introduction to Angular 2

Angular 2 Testing In Depth: Services

TDD with Angular 1 (Good overview of TDD) 

Cheat Sheet

Microsoft Test Resources


Unit Testing with MSTest



Cheat Sheet

Tuesday, March 14, 2017

Protractor Resources

Protractor allows Selenium to test Angular Web Applications.  Without Protractor, Selenium cannot see the Angular DOM.  Protractor.NET is a wrapper around Selenium Web Driver.  Protractor.NET differs from regular Protractor in that Protractor.NET can be used within C# instead of JavaScript.  

Main Sites


Developing Protractor Tests in C#

Introduction to Protractor

Testing with Protractor

Writing End to End Tests with Protractor

Protractor.JS Example



Pluralsite: Introduction to Protractor

QAShahin: AngularJS Protractor

Jim Lavin:  An Introduction to AngularJS End to End Testing with Protractor

Julie Ralph End to End Angular Testing with Protractor

HellowWorldSeries: Introduction to Protractor

David Mosher:  Testing Strategies for Angular JS

Tony Alicea: Programming AngularJS and Protractor

Monday, March 13, 2017

Selenium References

Selenium is a user interface testing framework that works with C# and Java.

Main Site


UI Test Automation for Browsers and Apps Using the WebDriver Standard

How To Create a Test Automation Framework Architecture With Selenium

Execute Automation: Introduction to Selenium in C#


Quick References

JIRA References

AgileZen is no longer taking any new customers so I have been forced to use something else.  While JIRA is not as good as AgileZen, it is probably the most popular.

JIRA Documentation


How To Use JIRA tool For Scrum Projects

JIRA Tutorial: A Complete Guide for Beginners

Scrum Development with Jira & JIRA Agile

JIRA Fundamentals

Kanban Development With Jira Agile

Cheat Sheets

JIRA Shortcuts

JIRA Cheat Sheet

Monday, February 20, 2017

LESS References

LESS transpiles into CSS.  Here are some resources:

Main Site



TheNewBoston:  YouTube Video Course

Entity Framework Resources


Microsoft Virtual Academy

Fabio Scopel: Intro to Entity Framework 5.0

kudvenkat:  Entity Framework Tutorial

SeeSharpCode:  Entity Framework

Jamie King:  .NET Entity Framework

Ripon Datta:  ASP.NET MVC 5 with Entity Framework

Quick Reference

C# and .NET Resources

I have been using C# and .NET Since it was in beta.  The overwhelming reason why it is so popular is the great Visual Studio with it's intellisense and compile time checking.  If I had to start from scratch from nothing, here are a couple sites that are extremely useful for beginners.

CSS Resources

Cascading Style Sheets (CSS) is used on every every website.  Below are some good resources:

Good reference sites:

Examples of how CSS can completely change the look and layout of a page:



CSS Jump Start

HTML5 & CSS3 for Absolute Beginners

CSS Quick References

Bootstrap References

Bootstrap is a grid based responsive design framework that makes it easy to turn your website into something that can look good on everything from a large TV to a tiny smart phone.

Main Site

Bootstrap Glphicons


Video Courses

TheNewBoston Bootstrap course on YouTube

Bootstrap Tutorial

Bootstrap Tutorial For Beginners - Responsive Design with Bootstrap 3 - Responsive HTML, CSS

Bootstrap Beginner Crash Course

Building Responsive UI with Bootstrap

Cheat Sheets

Bootstrap V4 Cheat Sheet

Bootstrap Cheat Sheet

Angular 1 Resources

Angular 2 is out but if you need to maintain your Angular 1 code, here are some great resources.

This is the version 1.0 site for Angular:

1.6.x is the latest version of Angular 1 before the rewrite of Angular 2
Go here to reference Angular 1:


Angular 1 Course on YouTube

Pluralsight Angular Fundamentals

Pluralsight Angular Fundamentals Github Reposotory

Visual Studio Code for Angular developers

TypeScript & Angular

On a Cloud

Angular 1 Quick References

Friday, February 17, 2017

JavaScript Resources

According to a survey on Stack Overflow, JavaScript was the most used Language for Developers in 2016.

Here are some resources to learn JavaScript as a beginner or become an advanced JavaScript developer.

Good reference Sites

Testing JavaScript Online


Beginner JavaScript Courses

JavaScript for Experienced Developers

JavaScript Fundamentals for Absolute Beginners

TheNewBoston JavaScript Course on YouTube JavaScript Course on YouTube

Brice Wilson JavaScript Module Fundamentals

Jesse Liberty JavaScript from Scratch

Advanced JavaScript Courses

JavaScript Promises and Async

Advanced JavaScript

JavaScript Closures

CodeAcademy Advanced JavaScript

Chris Hawkes Advanced JavaScript

Tech CBT Advanced JavaScript

Kyle Simpson Advanced JavaScript

Write Fast JavaScript

Jim Cooper JavaScript Objects and Prototypes

Best Practices

O'Reilly Maintainable JavaScript

Ava Luci: JavaScript Best Practices

Jonathan Mills JavaScript Best Practices

Quick References

Wednesday, February 15, 2017

TypeScript Resources


TypeScript is a superset of JavaScript.  It improves upon JavaScript by adding type safety, namespaces, and scope.  You can actually rename a .js JavaScript file to .ts and it will function the same.  TypeScript will transpile into JavaScript.  TypeScript is created by the great Anders Hejlsberg who created TurboPascal, Delphi, and C#.  You will find it feels similar to C#, although the syntax is different, a lot of the concepts and keywords are the same.

Main Site

Try Out TypeScript online!



Andres Hejlsberg:  Introducing TypeScript

Why use TypeScript instead of just using JavaScript?

TypeScript Jump Start

TypeScript: From Zero to Hero

What's New in TypeScript

Anders Hejlsberg on TypeScript 2

TypeScript Fundamentals

TypeScript and Angular 2

TypeScript Definition Files

Quick References

Tuesday, February 14, 2017

Angular 2 Resources

There is a steep learning curve with Angular 2.  Fortunately there are a lot of resources out there to ramp up.

Main Site

The main site for Angular is  It has documentation and a quick start which are semi-useful.

Video Courses

Course:  Angular 2, The Force Awakens


Video:  Bootstrapping an Angular 2 Application in Visual Studio Code using Yeoman

Video:  Web.Dev 2: Getting Started with Angular 2.0

Video:  Introduction to Angular 2

Video:  Web Development 4: Front End Web Development

Video:  Angular 2 Course on YouTube