AngularJS Aplicado — QCon Rio 2014

Construindo aplicações client-side bem testadas

Transcript

1. AngularJS aplicado Construindo aplicações client-side bem testadas @FelippeNardi
2. Objetivos ! • Elementos essenciais! • Testes: e2e e unitários • Mindset AngularJS
3. Felippe Nardi Front-end Engineer e Designer
4. client-side web apps
5. client-side web apps
7. Service Controller View
8. Angular vai te ajudar: • Organizar o javascript • Criar sites responsivos •Testar com facilidade
9. Framework Javascript
10. Extensão do HTML
12. <input type=“text” autofocus>
13. Service Controller View Directives Expressions
14. ng-model <input ng-model="teste">! Hello {{ teste }}!
15. AngularJS Digest Loop
16. Iniciando a aplicação <html ng-app>! !<!-- (...) -->! </html>!
17. <input ng-model="teste"> Hello {{ teste }}! <span ng-hide="!teste">! ! </span>
18. <input ng-model="teste"> <span ng-show="teste">! ! </span> Hello {{ teste }}!
19. Recapitulando • Directives • {{ Expressions }} • Digest Loop
20. Service Controller View Directives Expressions
21. Service Controller View Directives Expressions Filters
22. Filters {{"Olá"}}!
23. Filters {{"Olá"|uppercase}}!
24. Filters {{"Olá"|lowercase}}!
25. Filters <input ng-model="busca">! ! {{users|filter:busca}}!
26. Recapitulando • {{ expression | filter }} • Array • String
27. I18n {{1228212|number}}!
28. I18n {{12.82|currency}}!
29. {{1411676100000! |date}}! I18n
30. Suporte pt-BR <script src="angular.js">! <script src="angular- locale_pt-br.js">! Todos os arquivos de locale do Angular
31. {{1228212|number}}! I18n
32. {{12.82|currency}}! I18n
33. {{1411676100000! |date}}! I18n
34. Indo além angular-translate github.com/angular-translate/angular-translate
35. Service Controller View Directives Expressions
36. function MyCtrl($scope){! !$scope.teste ="Olá!";! };! Controllers
37. <div! ng-controller="MyCtrl">! !{{ teste }}! </div>! function MyCtrl($scope){! !$scope.teste ="Olá!";! };!
38. Directives Essenciais
39. ng-repeat <li ng-repeat="name in names">! !{{ name }}! </li>! $scope.names = [! !"Antônio", "Carlos", "Souza"! ];!
40. ng-pluralize <ng-pluralize count="names"! when="{'0':'Nenhum nome',! ! '1':'Só um nome',! ! 'other': '{} nomes'}">! </ng-pluralize>!
41. ng-pluralize <ng-pluralize count="names"! when="{'0':'Nenhum nome',! ! '1':'Só um nome',! ! 'other': '{} nomes'}">! </ng-pluralize>!
42. Recapitulando • Controllers • $scope • ng-controller
43. Service Controller View Directives Expressions
44. function MyCtrl( ){! ! };! $scope $scope.teste ="World!";! Service
45. $filter('uppercase') ("Hello");! {{"Hello"|uppercase}}! Service
46. $http({ method: 'GET',! url: '/home' })! XMLHttpRequest ou JSONP .then(! ! ! ); !function() { /*...*/ },! !function() { /*...*/} Service
47. Recapitulando: • Data-binding! • Digest Loop! • Dependency Injection
48. Unit Tests! no AngularJS
49. TestRunner.html: • jasmine-all.js • angular.js • angular-mocks.js • arquivos javascript • arquivos de test
50. moourl.com/tryangular
51. 2 exemplos! Service Controller
53. github.com/felippenardi/ mini-lero-lero
54. Nomeando o App var leroLeroApp = angular.module('leroLeroApp', []);! app.js
55. <html ng-app="leroLeroApp">! !<!-- (...) -->! </html>! Nomeando o App index.html
56. Carregando as frases app.js
57. Service app.js
58. leroLeroApp.factory('geradorDeFrases',! ! function ($http) {! ! var promise =! ! ! $http.get('frases.json')! .then(function (response) {! return response.data;! });! ! return {! get: function() {! return promise;! }! };! });
59. Syntax Jasmine describe('Descrição', function() {! ! beforeEach(function() {! ! ! // Roda antes de cada teste! });! ! afterEach(function() {! ! ! // Roda depois de cada teste! });! !
60. Testando o Service appSpecs.js
61. }); describe('Service: Gerador De Frases', function() {! ! ! ! ! ! ! ! ! ! ! ! ! ! var geradorDeFrases,! ! ! ! httpBackend,! ! ! ! frases; beforeEach(module('leroLeroApp')); ! ! beforeEach(inject(! ! ! ! ! ! ));! ! ! function(_geradorDeFrases_,! ! ! ! ! ! ! ! ! $httpBackend) {! ! ! ! ! } ! ! ! geradorDeFrases = _geradorDeFrases_;! ! ! ! httpBackend = $httpBackend;
62. }); describe('Service: Gerador De Frases', function() {! ! ! ! ! ! ! ! ! ! ! ! ! ! var geradorDeFrases,! ! ! ! httpBackend,! ! ! ! frases; beforeEach(module('leroLeroApp')); ! ! beforeEach(inject(! ! ! ! ! ! ));! ! ! function(_geradorDeFrases_,! ! ! ! ! ! ! ! ! $httpBackend) {! ! ! ! ! } ! ! ! geradorDeFrases = _geradorDeFrases_;! ! ! ! httpBackend = $httpBackend;
63. }); afteEach(function() {! ! ! httpBackend! .verifyNoOutstandingExpectation();! httpBackend! .verifyNoOutstandingRequest();! }); ! ! ! ! ! ! ! ! ! beforeEach(inject(! ! ! ! ! ! ));! ! ! function(_geradorDeFrases_,! ! ! ! ! ! ! ! ! $httpBackend) {! ! ! ! ! } ! ! ! geradorDeFrases = _geradorDeFrases_;! ! ! ! httpBackend = $httpBackend;
64. }); ! ! ! ! ! ! ! ! ! ! beforeEach(inject(! ! ! ! ! ! ));! ! ! function(_geradorDeFrases_,! ! ! ! ! ! ! ! ! $httpBackend) {! ! ! ! ! } ! ! ! geradorDeFrases = _geradorDeFrases_;! ! ! ! httpBackend = $httpBackend; afteEach(function() {! ! ! httpBackend! .verifyNoOutstandingExpectation();! httpBackend! .verifyNoOutstandingRequest();! });
65. it('fornece frases', function() {! ! ! ! ! ! ! ! ! ! ! ! ! }); httpBackend! .expectGET('frases.json').respond([! "Frase 1", "Frase 2", "Frase 3"! ]); geradorDeFrases.get()! .then(function(response) {! frases = response;! }); expect(frases)! .toEqual(jasmine.any(Array)); expect(frases.length).toBe(3);
67. it('fornece frases', function() {! ! ! ! ! ! ! ! ! ! ! ! ! }); httpBackend! .expectGET('frases.json').respond([! "Frase 1", "Frase 2", "Frase 3"! ]); geradorDeFrases.get()! .then(function(response) {! frases = response;! }); httpBackend.flush(); expect(frases)! .toEqual(jasmine.any(Array)); expect(frases.length).toBe(3);
69. Recapitulando • Carregar a aplicação • Injetar serviços • Usar variáveis para armazenar os serviços
70. Mostrando as frases index.html
71. frase.gerar()
72. Expor objeto frases pra view app.js
73. Controller app.js
74. leroLeroApp.controller('MainCtrl',! ! function ($scope, geradorDeFrases) {! ! ! ! var i = 0, frases;! geradorDeFrases.get()! .then(function(response){! frases = response;! $scope.frase.gerar();! });! $scope.frase = {! gerar: function() {! $scope.frase.atual = frases[i];! i < frases.length - 1? i++ : i = 0;! }! };! });
75. Testando o Controller appSpecs.js
76. describe('Controller: MainCtrl',! function() {! var scope, MainCtrl, geradorMock, q;! ! beforeEach(module('leroLeroApp'));! ! beforeEach(inject(! function($controller, $rootScope, $q) {! q = $q;! scope = $rootScope.$new();! ! MainCtrl = $controller('MainCtrl', {! $scope: scope,! geradorDeFrases: geradorMock! });
77. ! beforeEach(inject(! function($controller, $rootScope, $q) {! q = $q;! scope = $rootScope.$new();! ! MainCtrl = $controller('MainCtrl', {! $scope: scope,! geradorDeFrases: geradorMock! }); ! scope.$apply();! }! ));!
78. geradorMock = {! get: function() {! var frases = q.defer();! frases.resolve(["A","B","C"]);! return frases.promise;! }! };! ! it('começa com uma frase', function() {! expect(scope.frase.atual)! .toEqual(jasmine.any(String));! });
79. ! it('começa com uma frase', function() {! expect(scope.frase.atual)! .toEqual(jasmine.any(String));! }); ! it('gera nova a frase', function() {! var primeiraFrase = scope.frase.atual;! ! scope.frase.gerar();! ! var segundaFrase = scope.frase.atual;! ! expect(primeiraFrase)! .not.toEqual(segundaFrase);! });
80. it('gera infinitas frases', function() {! var i = 4;! do { scope.frase.gerar() } while (--i);! ! expect(scope.frase.atual! ! ! .toBeDefined();! });! });! ! scope.frase.gerar();! ! var segundaFrase = scope.frase.atual;! ! expect(primeiraFrase)! .not.toEqual(segundaFrase);! });
82. frase.gerar()
83. <div ng-controller="MainCtrl">! ! <h1>Lero Lero</h1>! ! <a ng-click=" ">! Gerar frase! </a>! ! <blockquote>! ! </blockquote>! ! </div>! <div ng-controller="MainCtrl">! ! <h1>Lero Lero</h1>! ! <a ng-click="frase.gerar()">! Gerar frase! </a>! ! <blockquote>! {{ frase.atual }}! </blockquote>! ! </div>!
85. Recapitulando • Mesma estrutura básica! • Sobrescrever serviços! • Simular promessas
86. Testes Unitários! prontos
87. Vamos para os Testes End to End!
90. 1 teste:! gera frase
91. Setup do Protractor $ npm install -g protractor $ webdriver-manager update $ webdriver-manager start
92. $ webdriver-manager start http://localhost:4444/wd/hub
93. Arquivo de configuração // conf.js! exports.config = {! seleniumAddress:! ' ',! ! }! $ protractor conf.js http://localhost:4444/wd/hub specs: ['spec.js']!
94. beforeEach(function() {! browser.get('http://localhost:8000/');! });! ! describe('Frase', function() {! ! it('gera frase', function() {! var frase1,! frase2;! ! element(by.binding('frase.atual')).getText()! .then(function(frase) {! frase1 = frase;! });! ! element(by.id('gerar-frase')).click();
95. it('gera frase', function() {! var frase1,! frase2;! ! element(by.binding('frase.atual')).getText()! .then(function(frase) {! frase1 = frase;! });! ! element(by.id('gerar-frase')).click(); element(by.binding('frase.atual')).getText()! .then(function(frase) {! frase2 = frase;! expect(frase1).not.toBe(frase2);! });! });! });
99. Recapitulando • Rodar servidor selenium! • Preparar arquivo conf.js! • Rodar protractor conf.js
100. Seus próximos passos:
101. github.com/felippenardi/mini-lero-lero
103. moourl.com/tryangular
105. moourl.com/tryangular
106. angular.github.io/protractor/
107. angular.github.io/protractor/
108. jasmine.github.io
109. jasmine.github.io
110. moourl.com/angularjs
111. youtube: A Tiny Piece of AngularJS
112. egghead.io
113. @felippenardi Obrigado!