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
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
Avatar for MIKIO KUBO mickey_kubo
1
240
PicoRuby on Rails
Avatar for makicamel makicamel
2
140
AWS Summit Japan 2024と2025の比較／はじめてのKiro、今あなたは岐路に立つ
Avatar for Satoshi Kaneyasu satoshi256kbyte
0
120
PipeCDのプラグイン化で目指すところ
Avatar for Warashi warashi
1
300
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
Avatar for Manfred Steyer manfredsteyer
PRO
0
390
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ～継続的な取り組みを添えて～
Avatar for Takuya TAKAHASHI takutakahashi
4
1.3k
코딩 에이전트 체크리스트: Claude Code ver.
Avatar for nacyot nacyot
0
930
AIともっと楽するE2Eテスト
Avatar for Yohei Maeda myohei
8
3k
生成AI時代のコンポーネントライブラリの作り方
Avatar for touyou touyou
1
290
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
Avatar for Kuu fumiyakume
9
4.1k
Android 16KBページサイズ対応をはじめからていねいに
Avatar for mine2424 mine2424
0
440
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
Avatar for uutan1108 ohmori_yusuke
1
130

Featured

See All Featured
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
830
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
50
5.5k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.7k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
25
1.7k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.6k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
44
2.4k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.5k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
278
23k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
32
2.4k
Adopting Sorbet at Scale
Avatar for Ufuk Kayserilioglu ufuk
77
9.5k

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!