Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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...
Stormpath User Management
What about YOU?
How long have you been doing web development?

Do you like JavaScript? TypeScript?

What’s your favorite J...
Quality
“A person who knows how to fix motorcycles—with Quality—is less
likely to run short of friends than one who doesn't...
Software Testing
With motorcycles, you drive to test them.

With software, you can test it without driving it.

Or rather,...
Hello World with AngularJS
<!doctype html>
<html ng-app>
<head>
<title>Hello World</title>
</head>
<body>
<div>
<label>Nam...
Hello World with Angular
<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<meta charset="UTF-8">
<meta name...
app/main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.m...
app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
imp...
app/app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<h1>Hello {{na...
Easiest ways to get started
Angular QuickStart

https://github.com/angular/quickstart 

Angular Seed

https://github.com/m...
Let’s take a look at a few things…
Angular CLI

TypeScript

Unit Tests

Integration Tests

Continuous Integration

Deploym...
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 ...
ES6, ES7 and TypeScript
TSES7ES6ES5
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 = "J...
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...
Style Guides
Angular Official Style Guide

https://angular.io/styleguide 

John Papa’s AngularJS Style Guide

https://github...
ng-book 2
A comprehensive guide to developing with
Angular 2

Sample apps: Reddit clone, Chat with RxJS
Observables, YouTu...
Testing Angular 2 Applications Book
Unit testing directives, pipes, services, and routes

End-to-end testing with elements...
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 install -g yo generator-angular-library
yo ang...
Resources
Demo Code

https://github.com/mraible/ng-demo 

Step-by-step Tutorial

http://gist.asciidoctor.org/?github-mraib...
Keep in touch!

raibledesigns.com

@mraible

linkedin.com/in/mraible

Presentations

slideshare.net/mraible

Code

github....
Testing Angular Applications - Jfokus 2017
Testing Angular Applications - Jfokus 2017
Testing Angular Applications - Jfokus 2017
Upcoming SlideShare
Loading in …5
×

Testing Angular Applications - Jfokus 2017

973 views

Published on

The best reason for writing tests is to automate your testing. Without tests, you'll likely be testing manually. This manual testing will take longer and longer as your codebase grows. In this session, you’ll learn how to test an Angular 2 application. You'll learn how to use Jasmine to unit testing components and Protractor for integration testing. We’ll also take a look at code coverage options and explore continuous integration tools.

Tutorial: https://github.com/mraible/ng-demo/blob/master/README.adoc
Source code: https://github.com/mraible/ng-demo

Published in: Technology
  • Be the first to comment

Testing Angular Applications - Jfokus 2017

  1. 1. Testing Applications Photos by McGinity Photo Matt Raible • @mraible
  2. 2. 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
  3. 3. Stormpath User Management
  4. 4. 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?
  5. 5. 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
  6. 6. 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!
  7. 7. 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>
  8. 8. 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"> <!-- Polyfill(s) for older browsers --> <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>
  9. 9. app/main.ts import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule);
  10. 10. 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 { }
  11. 11. app/app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>`, }) export class AppComponent { name = 'Angular'; }
  12. 12. 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
  13. 13. Let’s take a look at a few things… Angular CLI TypeScript Unit Tests Integration Tests Continuous Integration Deployment
  14. 14. 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
  15. 15. ES6, ES7 and TypeScript TSES7ES6ES5 ES5: es5.github.io ES6: git.io/es6features ES7: DRAFT TS: www.typescriptlang.org
  16. 16. 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
  17. 17. bus.ts
  18. 18. Types of Tests Unit Tests End-to-End Tests
  19. 19. Unit Test Example
  20. 20. bus.spec.ts
  21. 21. Live Coding!
  22. 22. 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
  23. 23. Style Guides Angular Official Style Guide https://angular.io/styleguide John Papa’s AngularJS Style Guide https://github.com/johnpapa/angular-styleguide
  24. 24. 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!
  25. 25. 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
  26. 26. Don’t be afraid of testing!
  27. 27. Don’t be afraid of testing!
  28. 28. Don’t be afraid of testing!
  29. 29. Stormpath SDK for Angular
  30. 30. 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
  31. 31. Resources Demo Code https://github.com/mraible/ng-demo Step-by-step Tutorial http://gist.asciidoctor.org/?github-mraible/ng-demo//README.adoc
  32. 32. Keep in touch! raibledesigns.com @mraible linkedin.com/in/mraible Presentations slideshare.net/mraible Code github.com/mraible Questions?

×