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
生成AIでGitHubソースコード取得して仕様書を作成
shukob
0
550
Внедряем бюджетирование, или Как сделать хорошо?
lamodatech
0
660
Cloudflare MCP ServerでClaude Desktop からWeb APIを構築
kutakutat
1
580
iOS開発におけるCopilot For XcodeとCode Completion / copilot for xcode
fuyan777
1
270
CQRS+ES の力を使って効果を感じる / Feel the effects of using the power of CQRS+ES
seike460
PRO
0
170
Beyond ORM
77web
9
1.3k
PHPUnitしか使ってこなかった 一般PHPerがPestに乗り換えた実録
mashirou1234
0
350
「とりあえず動く」コードはよい、「読みやすい」コードはもっとよい / Code that 'just works' is good, but code that is 'readable' is even better.
mkmk884
4
930
create_tableをしただけなのに〜囚われのuuid編〜
daisukeshinoku
0
290
20年もののレガシープロダクトに 0からPHPStanを入れるまで / phpcon2024
hirobe1999
0
860
どうして手を動かすよりもチーム内のコードレビューを優先するべきなのか
okashoi
3
640
LLM Supervised Fine-tuningの理論と実践
datanalyticslabo
7
1.6k

Featured

See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
2
300
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Statistics for Hackers
jakevdp
796
220k
Writing Fast Ruby
sferik
628
61k
Making the Leap to Tech Lead
cromwellryan
133
9k
Unsuck your backbone
ammeep
669
57k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
The Invisible Side of Design
smashingmag
298
50k
Reflections from 52 weeks, 52 projects
jeffersonlam
347
20k
A Philosophy of Restraint
colly
203
16k
Testing 201, or: Great Expectations
jmmastey
41
7.1k

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!