Testing Angular Applications - Jfokus 2017

YouTube: https://www.youtube.com/watch?v=TksyjxipM4M

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

Transcript

1. Testing Applications
   Photos by McGinity Photo
   
   Matt Raible • @mraible
   

   View Slide

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
   

   View Slide

3. View Slide

4. Stormpath User Management
   

   View Slide

5. 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?
   

   View Slide

6. 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
   

   View Slide

7. 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!
   

   View Slide

8. Hello World with AngularJS
   
   
   
   Hello World
   
   
   
   Name:
   
   
   Hello {{name}}!
   
   
   
   
   

   View Slide

9. View Slide

10. Hello World with Angular
    
    
    
    Angular QuickStart
    
    
    
    
    
    
    
    
    <br/>System.import('app').catch(function(err){ console.error(err); });<br/>
    
    
    Loading AppComponent content here ...
    
    
    

    View Slide

11. app/main.ts
    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    import { AppModule } from './app.module';
    platformBrowserDynamic().bootstrapModule(AppModule);
    

    View Slide

12. 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 { }
    

    View Slide

13. app/app.component.ts
    import { Component } from '@angular/core';
    @Component({
    selector: 'my-app',
    template: `Hello {{name}}`,
    })
    export class AppComponent { name = 'Angular'; }
    

    View Slide

14. 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
    

    View Slide

15. Let’s take a look at a few things…
    Angular CLI
    
    TypeScript
    
    Unit Tests
    
    Integration Tests
    
    Continuous Integration
    
    Deployment
    

    View Slide

16. View Slide

17. 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
    

    View Slide

18. ES6, ES7 and TypeScript
    TS
    ES7
    ES6
    ES5
    ES5: es5.github.io
    
    ES6: git.io/es6features
    
    ES7: DRAFT
    
    TS: www.typescriptlang.org
    

    View Slide

19. 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
    

    View Slide

20. bus.ts
    

    View Slide

21. Types of Tests
    Unit Tests
    
    End-to-End Tests
    

    View Slide

22. Unit Test Example
    

    View Slide

23. bus.spec.ts
    

    View Slide

24. Live Coding!
    

    View Slide

25. 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
    

    View Slide

26. Style Guides
    Angular Official Style Guide
    
    https://angular.io/styleguide
    
    John Papa’s AngularJS Style Guide
    
    https://github.com/johnpapa/angular-styleguide
    

    View Slide

27. 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!
    

    View Slide

28. 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
    

    View Slide

29. Don’t be afraid of testing!
    

    View Slide

30. Don’t be afraid of testing!
    

    View Slide

31. Don’t be afraid of testing!
    

    View Slide

32. Stormpath SDK for Angular
    

    View Slide

33. 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
    

    View Slide

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

    View Slide

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

    View Slide