qcon 2014 simplificado -...
TRANSCRIPT
![Page 1: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/1.jpg)
AngularJS aplicadoConstruindo aplicações client-side
bem testadas
@FelippeNardi
![Page 2: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/2.jpg)
Objetivos!
• Elementos essenciais!• Testes: e2e e unitários • Mindset AngularJS
![Page 3: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/3.jpg)
Felippe NardiFront-end Engineer e Designer
![Page 4: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/4.jpg)
client-side web apps
![Page 5: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/5.jpg)
client-side web apps
![Page 6: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/6.jpg)
![Page 7: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/7.jpg)
Service
Controller
View
![Page 8: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/8.jpg)
Angular vai te ajudar:
• Organizar o javascript • Criar sites responsivos •Testar com facilidade
![Page 9: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/9.jpg)
Framework Javascript
![Page 10: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/10.jpg)
Extensão do HTML
![Page 11: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/11.jpg)
![Page 12: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/12.jpg)
<input type=“text” autofocus>
![Page 13: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/13.jpg)
Service
Controller
ViewDirectives Expressions
![Page 14: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/14.jpg)
ng-model
<input ng-model="teste">!Hello {{ teste }}!
![Page 15: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/15.jpg)
AngularJS
Digest Loop
![Page 16: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/16.jpg)
Iniciando a aplicação
<html ng-app>!!<!-- (...) -->!</html>!
![Page 17: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/17.jpg)
<input ng-model="teste">Hello {{ teste }}!<span ng-hide="!teste">!!
</span>
![Page 18: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/18.jpg)
<input ng-model="teste"><span ng-show="teste">!!
</span>Hello {{ teste }}!
![Page 19: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/19.jpg)
Recapitulando
• Directives • {{ Expressions }} • Digest Loop
![Page 20: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/20.jpg)
Service
Controller
ViewDirectives Expressions
![Page 21: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/21.jpg)
Service
Controller
ViewDirectives Expressions
Filters
![Page 22: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/22.jpg)
Filters
{{"Olá"}}!
![Page 23: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/23.jpg)
Filters
{{"Olá"|uppercase}}!
![Page 24: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/24.jpg)
Filters
{{"Olá"|lowercase}}!
![Page 25: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/25.jpg)
Filters<input ng-model="busca">!!
{{users|filter:busca}}!
![Page 26: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/26.jpg)
Recapitulando
• {{ expression | filter }} • Array • String
![Page 27: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/27.jpg)
I18n
{{1228212|number}}!
![Page 28: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/28.jpg)
I18n
{{12.82|currency}}!
![Page 29: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/29.jpg)
{{1411676100000!|date}}!
I18n
![Page 30: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/30.jpg)
Suporte pt-BR
<script src="angular.js">!<script src="angular-locale_pt-br.js">!
Todos os arquivos de locale do Angular
![Page 31: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/31.jpg)
{{1228212|number}}!
I18n
![Page 32: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/32.jpg)
{{12.82|currency}}!
I18n
![Page 33: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/33.jpg)
{{1411676100000!|date}}!
I18n
![Page 34: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/34.jpg)
Indo alémangular-translate
github.com/angular-translate/angular-translate
![Page 35: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/35.jpg)
Service
Controller
ViewDirectives Expressions
![Page 36: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/36.jpg)
function MyCtrl($scope){!!$scope.teste ="Olá!";!};!
Controllers
![Page 37: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/37.jpg)
<div!ng-controller="MyCtrl">!!{{ teste }}!</div>!
function MyCtrl($scope){!!$scope.teste ="Olá!";!};!
![Page 38: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/38.jpg)
Directives Essenciais
![Page 39: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/39.jpg)
ng-repeat
<li ng-repeat="name in names">!!{{ name }}!</li>!
$scope.names = [!!"Antônio", "Carlos", "Souza"!];!
![Page 40: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/40.jpg)
ng-pluralize<ng-pluralize count="names"!when="{'0':'Nenhum nome',!! '1':'Só um nome',!! 'other': '{} nomes'}">!</ng-pluralize>!
![Page 41: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/41.jpg)
ng-pluralize<ng-pluralize count="names"!when="{'0':'Nenhum nome',!! '1':'Só um nome',!! 'other': '{} nomes'}">!</ng-pluralize>!
![Page 42: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/42.jpg)
Recapitulando
• Controllers • $scope • ng-controller
![Page 43: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/43.jpg)
Service
Controller
ViewDirectives Expressions
![Page 44: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/44.jpg)
function MyCtrl( ){!!
};!
$scope$scope.teste ="World!";!
Service
![Page 45: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/45.jpg)
$filter('uppercase')("Hello");!
{{"Hello"|uppercase}}!
Service
![Page 46: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/46.jpg)
$http({ method: 'GET',!url: '/home' })!
XMLHttpRequest ou JSONP
.then(!!
!
);
!function() { /*...*/ },!!function() { /*...*/}
Service
![Page 47: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/47.jpg)
Recapitulando:
• Data-binding!• Digest Loop!• Dependency Injection
![Page 48: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/48.jpg)
Unit Tests!no AngularJS
![Page 49: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/49.jpg)
TestRunner.html:• jasmine-all.js
• angular.js
• angular-mocks.js
• arquivos javascript
• arquivos de test
![Page 51: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/51.jpg)
2 exemplos!Service
Controller
![Page 52: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/52.jpg)
![Page 54: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/54.jpg)
Nomeando o App
var leroLeroApp = angular.module('leroLeroApp', []);!
app.js
![Page 55: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/55.jpg)
<html ng-app="leroLeroApp">!!<!-- (...) -->!</html>!
Nomeando o Appindex.html
![Page 56: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/56.jpg)
Carregando as frasesapp.js
![Page 57: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/57.jpg)
Serviceapp.js
![Page 58: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/58.jpg)
});
leroLeroApp.factory('geradorDeFrases',!! function ($http) {!!
var promise =!! ! $http.get('frases.json')! .then(function (response) {! return response.data;! });!!
return {! get: function() {! return promise;! }! };!});
![Page 59: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/59.jpg)
Syntax Jasmine
describe('Descrição', function() {! ! beforeEach(function() {!! ! // Roda antes de cada teste! });! ! afterEach(function() {!! ! // Roda depois de cada teste! });! ! it('Descrição do teste', function() {!
![Page 60: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/60.jpg)
Testando o ServiceappSpecs.js
![Page 61: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/61.jpg)
});
describe('Service: Gerador De Frases', function() {!!
!
!
!
!
!
!
!
!
!
!
!
! var geradorDeFrases,!! ! ! httpBackend,!! ! ! frases; beforeEach(module('leroLeroApp'));!
! beforeEach(inject(!!
!
!
!
!
));!
! ! function(_geradorDeFrases_,!! ! ! ! ! ! ! ! $httpBackend) {!!
!
! ! }
! ! ! geradorDeFrases = _geradorDeFrases_;!! ! ! httpBackend = $httpBackend;
![Page 62: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/62.jpg)
});
describe('Service: Gerador De Frases', function() {!!
!
!
!
!
!
!
!
!
!
!
!
! var geradorDeFrases,!! ! ! httpBackend,!! ! ! frases; beforeEach(module('leroLeroApp'));!
! beforeEach(inject(!!
!
!
!
!
));!
! ! function(_geradorDeFrases_,!! ! ! ! ! ! ! ! $httpBackend) {!!
!
! ! }
! ! ! geradorDeFrases = _geradorDeFrases_;!! ! ! httpBackend = $httpBackend;
![Page 63: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/63.jpg)
});
afteEach(function() {!! ! httpBackend! .verifyNoOutstandingExpectation();! httpBackend! .verifyNoOutstandingRequest();! });
!
!
!
!
!
!
!
!
!
beforeEach(module('leroLeroApp'));!
! beforeEach(inject(!!
!
!
!
!
));!
! ! function(_geradorDeFrases_,!! ! ! ! ! ! ! ! $httpBackend) {!!
!
! ! }
! ! ! geradorDeFrases = _geradorDeFrases_;!! ! ! httpBackend = $httpBackend;
![Page 64: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/64.jpg)
});
!
!
!
!
!
!
!
!
!
!
beforeEach(module('leroLeroApp'));!
! beforeEach(inject(!!
!
!
!
!
));!
! ! function(_geradorDeFrases_,!! ! ! ! ! ! ! ! $httpBackend) {!!
!
! ! }
! ! ! geradorDeFrases = _geradorDeFrases_;!! ! ! httpBackend = $httpBackend;
afteEach(function() {!! ! httpBackend! .verifyNoOutstandingExpectation();! httpBackend! .verifyNoOutstandingRequest();! });
![Page 65: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/65.jpg)
});
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);
![Page 66: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/66.jpg)
![Page 67: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/67.jpg)
});
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);
![Page 68: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/68.jpg)
![Page 69: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/69.jpg)
Recapitulando
• Carregar a aplicação • Injetar serviços • Usar variáveis para armazenar os serviços
![Page 70: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/70.jpg)
Mostrando as frasesindex.html
![Page 71: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/71.jpg)
frase.gerar()
![Page 72: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/72.jpg)
Expor objeto frases pra view
app.js
![Page 73: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/73.jpg)
Controllerapp.js
![Page 74: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/74.jpg)
});
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;! }! };!});
![Page 75: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/75.jpg)
Testando o ControllerappSpecs.js
![Page 76: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/76.jpg)
});
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! });
![Page 77: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/77.jpg)
});
!
beforeEach(inject(! function($controller, $rootScope, $q) {! q = $q;! scope = $rootScope.$new();! ! MainCtrl = $controller('MainCtrl', {! $scope: scope,! geradorDeFrases: geradorMock! });!
scope.$apply();! }! ));!
![Page 78: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/78.jpg)
});
));! 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));! });
![Page 79: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/79.jpg)
});
));! };!!
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);! });
![Page 80: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/80.jpg)
});
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);! });
![Page 81: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/81.jpg)
![Page 82: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/82.jpg)
frase.gerar()
![Page 83: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/83.jpg)
});
<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>!
![Page 84: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/84.jpg)
![Page 85: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/85.jpg)
Recapitulando
• Mesma estrutura básica!• Sobrescrever serviços!• Simular promessas
![Page 86: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/86.jpg)
Testes Unitários!prontos
![Page 87: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/87.jpg)
Vamos para os Testes End to End!
![Page 88: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/88.jpg)
![Page 89: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/89.jpg)
![Page 90: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/90.jpg)
1 teste:!gera frase
![Page 91: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/91.jpg)
Setup do Protractor$ npm install -g protractor
$ webdriver-manager update
$ webdriver-manager start
![Page 92: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/92.jpg)
$ webdriver-manager start
http://localhost:4444/wd/hub
![Page 93: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/93.jpg)
Arquivo de configuração
// conf.js!exports.config = {! seleniumAddress:! ' ',! !}!
$ protractor conf.js
http://localhost:4444/wd/hubspecs: ['spec.js']!
![Page 94: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/94.jpg)
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();
![Page 95: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/95.jpg)
! 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);! });! });!});
![Page 96: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/96.jpg)
![Page 97: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/97.jpg)
![Page 98: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/98.jpg)
![Page 99: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/99.jpg)
Recapitulando
• Rodar servidor selenium!• Preparar arquivo conf.js!• Rodar protractor conf.js
![Page 100: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/100.jpg)
Seus próximos passos:
![Page 102: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/102.jpg)
![Page 104: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/104.jpg)
![Page 106: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/106.jpg)
angular.github.io/protractor/
![Page 107: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/107.jpg)
angular.github.io/protractor/
![Page 109: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/109.jpg)
jasmine.github.io
![Page 112: Qcon 2014 simplificado - qconrio.comqconrio.com/rio2014/system/files/presentation-slides/AngularJSAplic… · ng-pluralize](https://reader035.vdocuments.co/reader035/viewer/2022062602/5ee3314fad6a402d666d385b/html5/thumbnails/112.jpg)
egghead.io