Slide 1
Slide 1 text
Testing Applications
Photos by McGinity Photo
Matt Raible • @mraible
Slide 2
Slide 2 text
Blogger on raibledesigns.com
UI Architect and Java Champion
Father, Skier, Mountain
Biker, Whitewater Rafter
Web Framework Connoisseur
Who is Matt Raible?
Bus Lover
Stormpath Developer Evangelist
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Stormpath User Management
Slide 5
Slide 5 text
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?
Slide 6
Slide 6 text
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
Slide 7
Slide 7 text
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!
Slide 8
Slide 8 text
Hello World with AngularJS
Hello World
Name:
Hello {{name}}!
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
Hello World with Angular
Angular QuickStart
System.import('app').catch(function(err){ console.error(err); });
Loading AppComponent content here ...
Slide 11
Slide 11 text
app/main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
Slide 12
Slide 12 text
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 { }
Slide 13
Slide 13 text
app/app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
Hello {{name}}
`, }) export class AppComponent { name = 'Angular'; }Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
Let’s take a look at a few things…
Angular CLI
TypeScript
Unit Tests
Integration Tests
Continuous Integration
Deployment
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Angular CLI
npm install -g angular-cli
ng new ng2-demo
cd ng2-demo
ng serve
ng test
ng e2e
ng g component
ng g service
ng build
ng --help
Slide 18
Slide 18 text
ES6, ES7 and TypeScript
TS
ES7
ES6
ES5
ES5: es5.github.io
ES6: git.io/es6features
ES7: DRAFT
TS: www.typescriptlang.org
Slide 19
Slide 19 text
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
Slide 20
Slide 20 text
bus.ts
Slide 21
Slide 21 text
Types of Tests
Unit Tests
End-to-End Tests
Slide 22
Slide 22 text
Unit Test Example
Slide 23
Slide 23 text
bus.spec.ts
Slide 24
Slide 24 text
Live Coding!
Slide 25
Slide 25 text
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
Slide 26
Slide 26 text
Style Guides
Angular Official Style Guide
https://angular.io/styleguide
John Papa’s AngularJS Style Guide
https://github.com/johnpapa/angular-styleguide
Slide 27
Slide 27 text
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!
Slide 28
Slide 28 text
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
Slide 29
Slide 29 text
Don’t be afraid of testing!
Slide 30
Slide 30 text
Don’t be afraid of testing!
Slide 31
Slide 31 text
Don’t be afraid of testing!
Slide 32
Slide 32 text
Stormpath SDK for Angular
Slide 33
Slide 33 text
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
Slide 34
Slide 34 text
Resources
Demo Code
https://github.com/mraible/ng-demo
Step-by-step Tutorial
http://gist.asciidoctor.org/?github-mraible/ng-demo//README.adoc
Slide 35
Slide 35 text
Keep in touch!
raibledesigns.com
@mraible
linkedin.com/in/mraible
Presentations
slideshare.net/mraible
Code
github.com/mraible
Questions?