Testing Angular 2 Applications - Rich Web 2016
•3 likes•3,497 views
Report
Share
Download to read offline
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 test components and Protractor for integration testing. We’ll also take a look at code coverage options and explore continuous integration tools.
Recommended
More Related Content
What's hot
What's hot(20)
Viewers also liked
Viewers also liked(15)
Similar to Testing Angular 2 Applications - Rich Web 2016
Similar to Testing Angular 2 Applications - Rich Web 2016(20)
More from Matt Raible
More from Matt Raible(20)
Recently uploaded
Recently uploaded(20)
Testing Angular 2 Applications - Rich Web 2016
- 1. Testing 2 Applications Photos by McGinity Photo Matt Raible • @mraible
- 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. 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?
- 4. 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
- 5. 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!
- 6. 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. Hello World with Angular 2 <html> <head> <title>Angular 2 QuickStart</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <!-- 1. Load libraries --> <!-- Polyfills, 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/reflect-metadata/Reflect.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> </head> </html>
- 9. Hello World with Angular 2 <!-- 2. Configure SystemJS --> <script> System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } } }); System.import('app/main') .then(null, console.error.bind(console)); </script> </head> <!-- 3. Display the application --> <body> <my-app>Loading...</my-app> </body> </html>
- 10. app/main.ts import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppComponent } from './app.component'; platformBrowserDynamic().bootstrapModule(AppComponent);
- 11. app/app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) export class AppComponent { }
- 13. Easiest ways to get started Angular 2 QuickStart https://github.com/angular/quickstart Angular 2 (and beyond) Seed https://github.com/mgechev/angular-seed Angular CLI https://github.com/angular/angular-cli
- 17. Let’s take a look at a few things… Angular CLI TypeScript Unit Tests Integration Tests Continuous Integration Deployment
- 19. 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
- 20. ES6, ES7 and TypeScript TSES7ES6ES5 ES5: es5.github.io ES6: git.io/es6features ES7: DRAFT TS: www.typescriptlang.org
- 22. 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
- 23. bus.ts
- 24. Types of Tests Unit Tests End-to-End Tests
- 26. bus.spec.ts
- 27. Demo Time!
- 28. What you learned How to… Unit test Angular 2 services, mocking Http provider Unit test Angular 2 components, mocking service Integration test Angular 2 application Continuously test and deploy with a CI server
- 29. Learn more about Angular CLI https://www.youtube.com/watch?v=obbdFFbjLIU
- 30. Style Guides Angular 2 Official Style Guide https://angular.io/styleguide John Papa’s AngularJS Style Guide https://github.com/johnpapa/angular-styleguide
- 31. 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!
- 32. 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
- 34. Don’t be afraid of testing!
- 35. Don’t be afraid of testing!
- 36. Don’t be afraid of testing!
- 37. Stormpath SDK for Angular 2
- 38. Lessons Learned at Stormpath generator-angular-library is a great tool npm install -g yo generator-angular-library yo angular-library Override templates in components with ngOutletTemplate Write lots of tests and demos that use your library
- 40. Resources Demo Code https://github.com/mraible/ng2-demo Step-by-step Tutorial http://gist.asciidoctor.org/?github-mraible/ng2-demo//README.adoc
- 42. When will Angular 3 be released?