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:
{
"version""0.2.0",
"configurations": [
{
"type""chrome",
"request""launch",
"name""Launch Chrome against localhost",
"webRoot""${workspaceRoot}"
},
{
"type":"chrome",
"request""launch",
"name""Launch Chrome against Karma",
"webRoot""${workspaceRoot}"
}
]
}
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', () => {
expect(true).toBe(true);
});
it('should be false', () => {
expect(false).toBe(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", () => {
expect(x).toEqual(1);
});
it("can have more than one expectation", () => {
expect(x).toEqual(1);
expect(true).toEqual(true);
});
});

Expect Matching


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

Spies

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() {
expect(SuperAwesomeModule.featureA(2)).toBe(5);

// matchers for spies
expect(SuperAwesomeModule.coolHelperFunction).toHaveBeenCalled();
expect(SuperAwesomeModule.coolHelperFunction).toHaveBeenCalledTimes(1);
});
});
});
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
https://www.youtube.com/watch?v=yG4FH60fhUE
Unit Testing Recipes for Angular 2
http://slides.com/victormejia/unit-testing-ng2#/ 

Example karma.conf.js


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

// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html

module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular/cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular/cli/plugins/karma')
],
client:{
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

Links

Usage

Installation
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>

Videos

How to get productive immediately on Angular 2 with Angular-CLI
https://www.youtube.com/watch?v=sc8wAwn4dn4&t=1s
Simple Angular 2 App With Angular CLI
https://www.youtube.com/watch?v=QMQbAoTLJX8

Tutorials

The Ultimate Angular CLI Reference Guide
https://www.sitepoint.com/ultimate-angular-cli-reference/
Angular 2 Tutorial: Create a CRUD App with Angular CLI
https://www.sitepoint.com/angular-2-tutorial/

Cheat Sheets

Yarn Package Manager Resources

Overview


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.
Benefits
  • 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. https://www.youtube.com/watch?v=yksxtxqORvY
  • 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 😎

Setup

Install Yarn
https://yarnpkg.com/en/docs/install 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.
yarn

Videos

Chris Courses: Intro to Yarn
https://www.youtube.com/watch?v=7n467QmiANM
Coding The Smart Way: Yarn Package Manager
https://www.youtube.com/watch?v=6JxSYFnW4rc

Tuitorials


Cheat Sheets