Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AngularJS Aplicado — QCon Rio 2014

Felippe Nardi
September 25, 2014
Programming
1
190

AngularJS Aplicado — QCon Rio 2014

Construindo aplicações client-side bem testadas

Felippe Nardi

September 25, 2014
Tweet

More Decks by Felippe Nardi

See All by Felippe Nardi
Trabalhando Remoto como Desenvolvedor Web
felippenardi
2
170

Other Decks in Programming

See All in Programming
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
960
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
350
TypeScriptでライブラリとの依存を限定的にする方法
tutinoko
3
690
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
Generative AI Use Cases JP (略称:GenU)奮闘記
hideg
1
300
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
220
聞き手から登壇者へ： RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
130
CSC509 Lecture 13
javiergs
PRO
0
110
Macとオーディオ再生 2024/11/02
yusukeito
0
370
レガシーシステムにどう立ち向かうか　複雑さと理想と現実/vs-legacy
suzukihoge
14
2.2k
役立つログに取り組もう
irof
28
9.6k
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
100

Featured

See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
GitHub's CSS Performance
jonrohan
1030
460k
How to Ace a Technical Interview
jacobian
276
23k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
900
Optimizing for Happiness
mojombo
376
70k
Documentation Writing (for coders)
carmenintech
65
4.4k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k

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

  6. None

  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

  11. None

  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

  52. None

  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);
  66. None

  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);
  68. None

  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);! });
  81. None

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

  85. Recapitulando • Mesma estrutura básica! • Sobrescrever serviços! • Simular

    promessas

  86. Testes Unitários! prontos

  87. Vamos para os Testes End to End!

  88. None
  89. None

  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);! });! });! });
  96. None
  97. None
  98. None

  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

  102. None

  103. moourl.com/tryangular

  104. None

  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!