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

AngularJS Aplicado — QCon Rio 2014

Avatar for Felippe Nardi Felippe Nardi
September 25, 2014
Programming
1
200

AngularJS Aplicado — QCon Rio 2014

Construindo aplicações client-side bem testadas
Avatar for Felippe Nardi

Felippe Nardi

September 25, 2014
Tweet

More Decks by Felippe Nardi

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

Other Decks in Programming

See All in Programming
ニーリーにおけるプロダクトエンジニア
Avatar for Nealle nealle
0
740
すべてのコンテキストを、 ユーザー価値に変える
Avatar for Michiru Kato applism118
3
1.1k
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
Avatar for shimabox shimabox
2
470
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
Avatar for コドモン開発チーム codmoninc
1
6.6k
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
Avatar for どすこい daisuketakeda
1
130
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
Avatar for Takuya Katsusa takuyakatsusa
2
480
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
Avatar for lni_T lnit
3
370
Porting a visionOS App to Android XR
Avatar for Akio Itaya akkeylab
0
220
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
Avatar for Ahmed EBEN HASSINE ahmedbhs123
0
130
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
Avatar for Nealle nealle
0
120
システム成長を止めない！本番無停止テーブル移行の全貌
Avatar for さかうぇ sakawe_ee
1
160
Discover Metal 4
Avatar for rei rei315
2
110

Featured

See All Featured
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
51
8.5k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
31
1.3k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.5k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
1
400
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.9k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
28
5.4k
Adopting Sorbet at Scale
Avatar for Ufuk Kayserilioglu ufuk
77
9.4k
Visualization
Avatar for Eitan Lees eitanlees
146
16k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.7k
Navigating Team Friction
Avatar for Lara Hogan lara
187
15k

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!