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