Angular 2

Testing Applications
Matt Raible • @mraible
Photos by McGinity Photo
Matt
Raible
http://flickr.com/photos/leecullivan/122271605/
http://flickr.com/photos/crowleymr/2530170585/
http://www.flickr.com/photos/mraible/2644737051/
http://www.travelblog.org/Photos/1597321.html
Stormpath User Management
What about YOU?
How long have you been doing web development?
Do you like JavaScript? TypeScript?
What’s your favorite JavaScript framework?
Why are you here?

Quality
“A person who knows how to fix motorcycles—with Quality—is less

likely to run short of friends than one who doesn't. And they aren't
going to see him as some kind of object either. Quality destroys
objectivity every time.”
— Zen and the Art of Motorcycle Maintenance

Software Testing
With motorcycles, you drive to test them.
With software, you can test it without driving it.
Or rather, you can automate the driving.
If you don’t automate tests, you’re still testing!

Hello World with AngularJS
<!doctype html>
<html ng-app>
<head>
<title>Hello World</title>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="name" placeholder="Enter a name here">
<hr>
<h1>Hello {{name}}!</h1>
</div>
<script src="http://code.angularjs.org/1.5.8/angular.min.js"></script>
</body>
</html>
Hello World with Angular
<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">

<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading AppComponent content here ...</my-app>
</body>
</html>
app/main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
app/app.module.ts
import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
app/app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent { name = 'Angular'; }
Easiest ways to get started
Angular QuickStart
https://github.com/angular/quickstart
Angular Seed
https://github.com/mgechev/angular-seed
Angular CLI
https://github.com/angular/angular-cli
Let’s take a look at a few things…
Angular CLI
TypeScript
Unit Tests
Integration Tests
Continuous Integration
Deployment
Angular CLI
npm install -g angular-cli ng g component
ng new ng2-demo ng g service
cd ng2-demo ng build
ng serve ng --help
ng test
ng e2e
ES6, ES7 and TypeScript
ES5: es5.github.io
ES6: git.io/es6features
ES5 ES6 ES7 TS

ES7: DRAFT
TS: www.typescriptlang.org
TypeScript
$ npm install -g typescript
function greeter(person: string) { 

return "Hello, " + person; 
} 
 
var user = "Jane User"; 
 
document.body.innerHTML = greeter(user);
$ tsc greeter.ts
https://www.typescriptlang.org/docs/tutorial.html
bus.ts
Types of Tests
Unit Tests
End-to-End Tests
Unit Test Example
bus.spec.ts
Live Coding!
What you learned
How to…
Unit test Angular services, mocking Http provider
Unit test Angular components, mocking service
Integration test Angular application
Continuously test and deploy with a CI server

Style Guides
Angular Oﬃcial Style Guide
https://angular.io/styleguide
John Papa’s AngularJS Style Guide
https://github.com/johnpapa/angular-styleguide
ng-book 2
A comprehensive guide to developing with
Angular 2
Sample apps: Reddit clone, Chat with RxJS

Observables, YouTube search-as-you-type,
Spotify Search
How to write components, use forms and APIs
Over 5,500+ lines of code!

Testing Angular 2 Applications Book
Unit testing directives, pipes, services, and routes
End-to-end testing with elements and forms
4 of 10 chapters available
Estimated publication: Spring 2017

Don’t be afraid of testing!
Stormpath SDK for Angular
Lessons Learned at Stormpath
generator-angular-library is a great tool
npm install -g yo generator-angular-library
yo angular-library
You can override templates in components with ngOutletTemplate
Write lots of tests and demos that use your library

Resources
Demo Code
https://github.com/mraible/ng-demo
Step-by-step Tutorial
http://gist.asciidoctor.org/?github-mraible/ng-demo//README.adoc
Questions?
Keep in touch!
raibledesigns.com
@mraible
linkedin.com/in/mraible
Presentations
slideshare.net/mraible
Code
github.com/mraible

Angular 2

Uploaded by

Copyright:

Available Formats

Angular 2

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Angular 2

Uploaded by

Copyright:

Available Formats

Testing Applications

Matt Raible • @mraible

Photos by McGinity Photo

Do you like JavaScript? TypeScript?

What’s your favorite JavaScript framework?

Why are you here?

“A person who knows how to fix motorcycles—with Quality—is less

— Zen and the Art of Motorcycle Maintenance

With motorcycles, you drive to test them.

With software, you can test it without driving it.

Or rather, you can automate the driving.

If you don’t automate tests, you’re still testing!

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { Component } from '@angular/core';

ng new ng2-demo ng g service

ES5 ES6 ES7 TS

function greeter(person: string) {

Unit test Angular services, mocking Http provider

Unit test Angular components, mocking service

Integration test Angular application

Continuously test and deploy with a CI server

John Papa’s AngularJS Style Guide

Sample apps: Reddit clone, Chat with RxJS

How to write components, use forms and APIs

Over 5,500+ lines of code!

End-to-end testing with elements and forms

Estimated publication: Spring 2017

generator-angular-library is a great tool

npm install -g yo generator-angular-library

You can override templates in components with ngOutletTemplate

Write lots of tests and demos that use your library

You might also like

function greeter(person: string) { 