Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

AngularJS Aplicado — QCon Rio 2014

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Felippe Nardi Felippe Nardi
September 25, 2014
Programming
210
1

AngularJS Aplicado — QCon Rio 2014

Construindo aplicações client-side bem testadas

Avatar for Felippe Nardi

Felippe Nardi

September 25, 2014

More Decks by Felippe Nardi

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

Other Decks in Programming

See All in Programming
Go のフラットな パッケージに 「ファイル単位の private」を 〜Linter “declscope” を作った話〜
Avatar for mpyw mpyw
0
250
What We Talk About When We Talk About XP
Avatar for seki at druby.org m_seki
2
610
LLMは4年分のCompose移行を再現できるのか？実プロダクト279件のXMLで探る自動化の境界線
Avatar for makun makun
0
810
AI に Inclusive UI を書かせよう — Design Rules Skill で Compose UI を作り直す
Avatar for テオリア・テクノロジーズ theoriatec2024
1
490
モジュールの視点からSwiftを読み解く #iosdc
Avatar for Shigure Shimotori s_shimotori
0
160
LoopHub - ローカルで動く GitHub で、AI と共同開発
Avatar for jugyo jugyo
1
540
AHC070解法紹介
Avatar for eijirou eijirou
0
110
新人はどこまで自力でやり、どこからAIに頼るべきか／エンジニア育成に向き合う_先輩たちの悩みと知見共有会
Avatar for TOPPAN ict toppan_digital_dev
1
610
Webの地図
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
6
4.4k
AWS Step Functions 大規模並列の壁を越える / jaws-sonic-2026-niigata-step-functions
Avatar for kasacchiful kasacchiful
PRO
1
450
The Good Stuff, Not the Slop: Engineering High-Quality Android Apps with Modern AI Tooling
Avatar for danybony danybony
1
250
仕様駆動開発による爆速プロダクト開発 / Bakusoku Spec Driven Development
Avatar for Keisuke Kobayashi kobakei
0
110

Featured

See All Featured
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
2.1k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.4k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
74
42k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
A Soul's Torment
Avatar for Nat Ma seathinner
7
3.6k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
420
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
500
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
370
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
68
57k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
800

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!