Downloaded 14 times
![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 { }](https://image.slidesharecdn.com/testingangularapplications-jfokus2017-170208140923/75/Testing-Angular-Applications-Jfokus-2017-12-2048.jpg)
Uploaded byMatt Raible
Testing Angular Applications - Jfokus 2017
This document contains information from a presentation on testing Angular applications. It discusses various testing strategies like unit testing, end-to-end testing, and continuous integration/deployment. It also covers tools like Angular CLI, TypeScript, setting up tests, mocking dependencies. Examples of unit testing Angular services and components are provided. Resources like style guides, books, and the presenter's contact details are listed at the end.
More Related Content
Similar to Testing Angular Applications - Jfokus 2017
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/vibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg?width=640&height=640&fit=bounds)
![Coded Agents – with UiPath SDK + LangGraph [Virtual Hands-on Workshop]](https://cdn.slidesharecdn.com/ss_thumbnails/codedagentsdeck-251215155422-5497c599-thumbnail.jpg?width=640&height=640&fit=bounds)
Testing Angular Applications - Jfokus 2017
- 1. Testing Applications Photos byMcGinity Photo Matt Raible • @mraible
- 2. Blogger on raibledesigns.com UIArchitect and Java Champion Father, Skier, Mountain Biker, Whitewater Rafter Web Framework Connoisseur Who is Matt Raible? Bus Lover Stormpath Developer Evangelist
- 4.
- 5. What about YOU? Howlong have you been doing web development? Do you like JavaScript? TypeScript? What’s your favorite JavaScript framework? Why are you here?
- 6. Quality “A person whoknows 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
- 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!
- 8. Hello World withAngularJS <!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>
- 10. Hello World withAngular <!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>
- 11. app/main.ts import { platformBrowserDynamic} from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule);
- 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 { }
- 13. app/app.component.ts import { Component} from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>`, }) export class AppComponent { name = 'Angular'; }
- 14. Easiest ways toget started Angular QuickStart https://github.com/angular/quickstart Angular Seed https://github.com/mgechev/angular-seed Angular CLI https://github.com/angular/angular-cli
- 15. Let’s take alook at a few things… Angular CLI TypeScript Unit Tests Integration Tests Continuous Integration Deployment
- 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
- 18. ES6, ES7 andTypeScript TSES7ES6ES5 ES5: es5.github.io ES6: git.io/es6features ES7: DRAFT TS: www.typescriptlang.org
- 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
- 20.
- 21. Types of Tests UnitTests End-to-End Tests
- 22.
- 23.
- 24.
- 25. What you learned Howto… 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
- 26. Style Guides Angular OfficialStyle Guide https://angular.io/styleguide John Papa’s AngularJS Style Guide https://github.com/johnpapa/angular-styleguide
- 27. ng-book 2 A comprehensiveguide 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!
- 28. Testing Angular 2Applications 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
- 29. Don’t be afraidof testing!
- 30. Don’t be afraidof testing!
- 31. Don’t be afraidof testing!
- 32. Stormpath SDK forAngular
- 33. Lessons Learned atStormpath 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
- 34. Resources Demo Code https://github.com/mraible/ng-demo Step-by-stepTutorial http://gist.asciidoctor.org/?github-mraible/ng-demo//README.adoc
- 35.