Testing Angular Applications - Jfokus 2017

Testing Applications Photos by McGinity Photo Matt Raible • @mraible

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

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 ﬁx 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 new ng2-demo cd
ng2-demo ng serve ng test ng e2e ng g component ng g service ng build ng --help

ES6, ES7 and TypeScript TS ES7 ES6 ES5 ES5: es5.github.io
ES6: git.io/es6features 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

Keep in touch! raibledesigns.com @mraible linkedin.com/in/mraible Presentations slideshare.net/mraible Code github.com/mraible
Questions?

Testing Angular Applications - Jfokus 2017

Testing Angular Applications - Jfokus 2017

Matt Raible
PRO

More Decks by Matt Raible

Other Decks in Technology

Featured

Transcript

Testing Applications Photos by McGinity Photo Matt Raible • @mraible

Blogger on raibledesigns.com UI Architect and Java Champion Father, Skier,

Stormpath User Management

What about YOU? How long have you been doing web

Quality “A person who knows how to ﬁx motorcycles—with Quality—is

Software Testing With motorcycles, you drive to test them. With

Hello World with AngularJS <!doctype html> <html ng-app> <head> <title>Hello

Hello World with Angular <!DOCTYPE html> <html> <head> <title>Angular QuickStart</title>

app/main.ts import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule

app/app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule

app/app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'my-app',

Easiest ways to get started Angular QuickStart https://github.com/angular/quickstart Angular Seed

Let’s take a look at a few things… Angular CLI

Angular CLI npm install -g angular-cli ng new ng2-demo cd

ES6, ES7 and TypeScript TS ES7 ES6 ES5 ES5: es5.github.io

TypeScript $ npm install -g typescript function greeter(person: string) {

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

Style Guides Angular Oﬃcial Style Guide https://angular.io/styleguide John Papa’s AngularJS

ng-book 2 A comprehensive guide to developing with Angular 2

Testing Angular 2 Applications Book Unit testing directives, pipes, services,

Don’t be afraid of testing!

Don’t be afraid of testing!

Don’t be afraid of testing!

Stormpath SDK for Angular

Lessons Learned at Stormpath generator-angular-library is a great tool npm

Resources Demo Code https://github.com/mraible/ng-demo Step-by-step Tutorial http://gist.asciidoctor.org/?github-mraible/ng-demo//README.adoc

Keep in touch! raibledesigns.com @mraible linkedin.com/in/mraible Presentations slideshare.net/mraible Code github.com/mraible