DESENVOLVENDO PLUGINS COM  O JQUERY UI E TESTANDO       COM JASMINE         FISL 13
QUEM SOU EU?
Alexandre Magno                  na                       atualmente no
PROJETOSOPEN SOURCE
Twitter Bootstrap BR                     jQuery slidinghttps://github.com/alexanmtz/bootstrap                             ...
OUTROS PROJETOS...  Blog Webpoint  http://blog.alexadremagno.net   eutro.co                                   http://eutro...
NAS HORAS VAGAS...
http://www.gandhifica.com
VAMOS FALAR DE QUÊ?
Jasmine                      jQuery            Plugins                               design                 Pattern      W...
TUDO ISSO NA PRÁTICA?
SIM!
MAS ANTESVAMOS FALAR DE
JAVASCRIPT
fonte: http://aaroncrowder.com/
POR QUE O JAVASCRIPT FICOU TÃO POPULAR?
JQUERY
“MEU PRIMEIRO CONTATO COMO JAVASCRIPT FOI COM JQUERY”                      Beethoven
API
<script type="text/javascript">! $(function(){! ! $(div).css(color, red).appendTo(body);! });</script>
ALGUMA SEMELHANÇACOM O BRANDING DO JQUERY?
PLUGINS
USE OS PLUGINS JQUERY PARACRIAR COMPONENTES JAVASCRIPT                        https://moqups.com
UM PLUGIN BÁSICO
// Create the defaults once    var pluginName = defaultPluginName,        defaults = {            propertyName: "value"   ...
Plugin.prototype = {                init: function() {           this.yourOtherFunction(this.element, this.options);      ...
<script type="text/javascript">! $(function(){! ! console.log($(body).defaultPluginName());! });</script>       fonte: htt...
EXEMPLO MAIS REAL?  JQUERY JFLOW
"   >                                 sc ript                      xt/ java                   JQUERY JFLOW                ...
Ô NÓ, Eu quero usar o jflow emmeu projeto, mas a minha listagemvai ser dinâmica, com possibilidadede novos itens serem adic...
BUG?
<scrip                                                        t type                        avasc r i p t" >        ! $(fu...
<scrip                                                        t type                        avasc r i p t" >        ! $(fu...
TEMOS UM PROBLEMA
Plugins de jQuery são inicializados apenas uma veznão podem sermodificadosOu seja,um pluginjQuery é...
que que é  isso?  STATELESS
r"><div i    d = "c o n t a i n e! ul> <                                                     Métodos de classe            ...
MEUCÓDIGOVIROU UMFRANKSTEIN
PATTERNS
STATELESS     Basic pluginNamespace                                                  Prototypal                           ...
JQUERY UI
p t" >                         java                              s    cri                                                 ...
EU QUERY MEU WIDGET
EU TAMBÉM!
JQUERY UI SLIDING
COMO FUNCIONA?
O QUE É
O QUE É
O QUE É
O QUE É
O QUE É
um carrossel?                                  jQuery Cycle Plugin                 Isto é um carrossel!jQuery Sliding     ...
LETS CODE!
// widget factory    $.widget( “ui.sliding”, {        options: {           items: 5           // mais opcoes        },    ...
<script type="text/javascript">! $(function(){! ! $(#elemento).sliding();    $(#elemento).sliding(“goToPage”, 2);! });</sc...
<script type="text/javascript">! $(function(){! ! $(#elemento).sliding(“destroy”);    $(#elemento).sliding(“option”, “item...
<script type="text/javascript">! $(function(){! ! $(#elemento).sliding(“refresh”);    $(#elemento).sliding(“restart”);! })...
// widget factory    $.widget( “ui.sliding”, {           _setOption: function(key, value) {             // alguma logica, ...
E COMO TESTA ISTO?
TESTAR MÉTODOS                          getCurrentPage  getTotalPages                  $.ui.widget   setTotalPages     goT...
USANDO O QUÊ?
METODOLOGIA
TDD É...FICAR VERMELHO
PARA DEPOISFICAR VERDE
E SUCESSIVAMENTEFICAR VERMELHO
PARA DEPOISFICAR VERDE
BDD
JASMINE
sliding / tests / spec / SlidingSpec.jsdescribe("Sliding", function() {  beforeEach(function(){    jQuery.fx.off = true;  ...
JQUERY UI WIDGETsliding / jquery.sliding.js// widget factory    $.widget( “ui.sliding”, {           _create: function() { ...
SPECsliding / tests / spec / SlidingSpec.jsit("should get the currentPage and check if is last one", function(){ $(contain...
O QUE MAIS A JASMINE    TEM DE BOM?
JASMINE JQUERYsliding / tests / spec / SlidingSpec.js it("should the first page should have previous button disabled", fun...
POSSÍVEIS RESULTADOS
AJAX MOCK
MOCK DO DATA              VINDO DO AJAXsliding / tests / spec / SlidingSpec.js describe("remote sliding", function(){     ...
E COM ISSO...sliding / tests / spec / SlidingSpec.jsit("should make a ajax request for second page", function(){        $(...
MATCHERSsliding / tests / spec / SpecHelper.jsbeforeEach(function() {  this.addMatchers({   beInRange: function(start, end...
MATCHER PARA DETECTAR  QUANTOS ELEMENTOS ESTÃO SENDO EXIBIDOS
MATCHER PARA DETECTAR  QUANTOS ELEMENTOS ESTÃO SENDO EXIBIDOS
MATCHER PARA DETECTAR  QUANTOS ELEMENTOS ESTÃO SENDO EXIBIDOS
CHAMADAS AJAXsliding / tests / spec / SlidingSpec.jsit("should not make ajax request when is going to previous page",funct...
CHAMADAS AJAXsliding / tests / spec / SlidingSpec.jsit("should pass extra parameters in the request", function(){       $(...
SPIES PARA                  CALLBACKSsliding / tests / spec / SlidingSpec.jsit("should call loading callback when request ...
CLOCK.TICKsliding / tests / spec / SlidingSpec.jsbeforeEach(function() {    jasmine.Clock.useMock();});it("Should set curr...
FIXTURESsliding / tests / spec / SlidingSpec.jsbeforeEach(function() {   loadFixtures("list.html");});spec / javascript / ...
VOCÊ SÓ VAI APRENDER     FAZENDO!
OBRIGADO!  @alexanmtz
Criando plugins com o j query ui e testando com o jasmine
Criando plugins com o j query ui e testando com o jasmine
Upcoming SlideShare
Loading in...5
×

Criando plugins com o j query ui e testando com o jasmine

1,939

Published on

O jQuery UI é uma evolução do pattern de desenvolvimento de plugins para o jQuery. Com o Widget factory é possível ter plugins mais flexíveis para o jQuery e usando o Jasmine como ferramenta de BDD, é possível desenvolver melhores componentes jQuery com testes automatizados e ter uma aplicação web mais rica com menos bugs.

Published in: Technology, Art & Photos
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,939
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
16
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Criando plugins com o j query ui e testando com o jasmine

    1. 1. DESENVOLVENDO PLUGINS COM O JQUERY UI E TESTANDO COM JASMINE FISL 13
    2. 2. QUEM SOU EU?
    3. 3. Alexandre Magno na atualmente no
    4. 4. PROJETOSOPEN SOURCE
    5. 5. Twitter Bootstrap BR jQuery slidinghttps://github.com/alexanmtz/bootstrap http://www.github.com/alexanmtzjQuery Destaque WP-Agenda https://github.com/alexanmtz/wp-agenda https://github.com/globocom/destaque
    6. 6. OUTROS PROJETOS... Blog Webpoint http://blog.alexadremagno.net eutro.co http://eutro.coBalloon3http://balloon3.com Salve a web por favo http://salveaweb.com/
    7. 7. NAS HORAS VAGAS...
    8. 8. http://www.gandhifica.com
    9. 9. VAMOS FALAR DE QUÊ?
    10. 10. Jasmine jQuery Plugins design Pattern Widget factory TDD javascript BDDjQuery UI Ajax Refactoring
    11. 11. TUDO ISSO NA PRÁTICA?
    12. 12. SIM!
    13. 13. MAS ANTESVAMOS FALAR DE
    14. 14. JAVASCRIPT
    15. 15. fonte: http://aaroncrowder.com/
    16. 16. POR QUE O JAVASCRIPT FICOU TÃO POPULAR?
    17. 17. JQUERY
    18. 18. “MEU PRIMEIRO CONTATO COMO JAVASCRIPT FOI COM JQUERY” Beethoven
    19. 19. API
    20. 20. <script type="text/javascript">! $(function(){! ! $(div).css(color, red).appendTo(body);! });</script>
    21. 21. ALGUMA SEMELHANÇACOM O BRANDING DO JQUERY?
    22. 22. PLUGINS
    23. 23. USE OS PLUGINS JQUERY PARACRIAR COMPONENTES JAVASCRIPT https://moqups.com
    24. 24. UM PLUGIN BÁSICO
    25. 25. // Create the defaults once    var pluginName = defaultPluginName,        defaults = {            propertyName: "value"        };    // The actual plugin constructor    function Plugin( element, opt ) {        this.element = element;        this.options = $.extend( {}, defaults,opt );        this._defaults = defaults;        this._name = pluginName;        this.init();    }
    26. 26. Plugin.prototype = {                init: function() {           this.yourOtherFunction(this.element, this.options);        },                yourOtherFunction: function(el, options) {            // some logic        }    };    $.fn[pluginName] = function ( options ) {        return this.each(function () {            if (!$.data(this, plugin_ + pluginName)) {                $.data(this, plugin_ + pluginName);                new Plugin( this, options ));            }        });    }
    27. 27. <script type="text/javascript">! $(function(){! ! console.log($(body).defaultPluginName());! });</script> fonte: https://github.com/addyosmani/jquery-plugin-patterns/
    28. 28. EXEMPLO MAIS REAL? JQUERY JFLOW
    29. 29. " > sc ript xt/ java JQUERY JFLOW = "t e type (){ ript ction ) .jfl ow() ; PATTERN DE PLUGIN BÁSICO< s c fun nto leme https://github.com/alexanmtz/jflow $( ! ( # e ! ! $ ! }); t> p </ scri ao clicar aqui Os elementos se mo vem e aqui
    30. 30. Ô NÓ, Eu quero usar o jflow emmeu projeto, mas a minha listagemvai ser dinâmica, com possibilidadede novos itens serem adicionados, porém não está funcionando!
    31. 31. BUG?
    32. 32. <scrip t type avasc r i p t" > ! $(fu = "t e x t /javas text/j nction (){ c r i p t" t type=" ! ! $ (#ele ><scrip ction(){ flow({ mento2 $(fun .j ).jfl! e nto1) items: ow({ ( #elem s: 5 4 ! ! $ item ! }); }); }); </scri pt> ! }); t> < /scrip e aquiao clicar aqui
    33. 33. <scrip t type avasc r i p t" > ! $(fu = "t e x t /javas text/j nction (){ c r i p t" t type=" ! ! $ (#ele ><scrip ction(){ flow({ mento2 $(fun .j ).jfl! e nto1) items: ow({ ( #elem s: 5 4 ! ! $ item ! }); }); }); </scri pt> ! }); t> < /scrip e aquiao clicar aqui
    34. 34. TEMOS UM PROBLEMA
    35. 35. Plugins de jQuery são inicializados apenas uma veznão podem sermodificadosOu seja,um pluginjQuery é...
    36. 36. que que é isso? STATELESS
    37. 37. r"><div i d = "c o n t a i n e! ul> < Métodos de classe li>! < ! li> item 1</ i>! <l i> item 2</l ! > item 3</li > Atributos data ! <li ! /li> !! <li> item 4< ! /ul> < </div> w({ $(#conta iner).jflo ! tens: 3, i , ta i n e r u l l i i t e m : # c o n Como chamar método zon t a l s? ! mode: hori }); preciso executar u ma ação ow_metodo( ); //no! $(#contai n e r ) . j f l $(#container ).jflow.meto do(); //wtf
    38. 38. MEUCÓDIGOVIROU UMFRANKSTEIN
    39. 39. PATTERNS
    40. 40. STATELESS Basic pluginNamespace Prototypal inheritance Widget factory bridgeCustom events Widget factory Highly configurable Best options Extend skeleton “UMA SOLUÇÃO GERAL REUSÁVEL DE UM PROBLEMA RECORRENTE” Wikipedia fonte: https://github.com/addyosmani/jquery-plugin-patterns/
    41. 41. JQUERY UI
    42. 42. p t" > java s cri ; COM O WIDGET FACTORY t/ ) " tex ete( ype= ){ c ompl pt t ion( auto< scri unct o). ( f e ment ! $ $( # e l ! ! ; ) ! } ipt> < /scr ... ) }) ( ete , { toc ompl $.u i.au p t" > " , cri se arch t/j avas ui. auto " tex h(); " ype= ){ earc get( s id pt t ion( auto $.w < scri unct o). (f e ment ! $ $(#el ! ! ; TEMOS HERANÇA ! }) ipt> < /scr
    43. 43. EU QUERY MEU WIDGET
    44. 44. EU TAMBÉM!
    45. 45. JQUERY UI SLIDING
    46. 46. COMO FUNCIONA?
    47. 47. O QUE É
    48. 48. O QUE É
    49. 49. O QUE É
    50. 50. O QUE É
    51. 51. O QUE É
    52. 52. um carrossel? jQuery Cycle Plugin Isto é um carrossel!jQuery Sliding Elementos deslizantes
    53. 53. LETS CODE!
    54. 54. // widget factory    $.widget( “ui.sliding”, {        options: { items: 5 // mais opcoes }, pages: 0, _create: function() {           this._enclose();        },        _enclose: function() {            // enclose envolve o elemento deslizante // this.options são as opções        }        goToPage: function(page) {            // logica de ir para pagina // this.element é o elemento // this.options são as opções        } });
    55. 55. <script type="text/javascript">! $(function(){! ! $(#elemento).sliding(); $(#elemento).sliding(“goToPage”, 2);! });</script>
    56. 56. <script type="text/javascript">! $(function(){! ! $(#elemento).sliding(“destroy”); $(#elemento).sliding(“option”, “items”, 3);! });</script>
    57. 57. <script type="text/javascript">! $(function(){! ! $(#elemento).sliding(“refresh”); $(#elemento).sliding(“restart”);! });</script>
    58. 58. // widget factory    $.widget( “ui.sliding”, { _setOption: function(key, value) {            // alguma logica, depois $.Widget.prototype._setOption.apply( this, arguments );        },        enable: function() {            // logica de habilitar // this.options são as opções        },        disable: function() {            // logica de desabilitar // this.element é o elemento // this.options são as opções        } });
    59. 59. E COMO TESTA ISTO?
    60. 60. TESTAR MÉTODOS getCurrentPage getTotalPages $.ui.widget setTotalPages goToPage before onAppendnext remote E CALLBACKS
    61. 61. USANDO O QUÊ?
    62. 62. METODOLOGIA
    63. 63. TDD É...FICAR VERMELHO
    64. 64. PARA DEPOISFICAR VERDE
    65. 65. E SUCESSIVAMENTEFICAR VERMELHO
    66. 66. PARA DEPOISFICAR VERDE
    67. 67. BDD
    68. 68. JASMINE
    69. 69. sliding / tests / spec / SlidingSpec.jsdescribe("Sliding", function() {  beforeEach(function(){    jQuery.fx.off = true;  });  it("should load the instance of the plugin",function() {    expect($.ui.sliding).toBeTruthy();  });});
    70. 70. JQUERY UI WIDGETsliding / jquery.sliding.js// widget factory    $.widget( “ui.sliding”, { _create: function() {            // codigo da inicializacao        },        options: { // objeto de opções        },        isLastPage: function() {            return this.getCurrentPage() ==this.getTotalPages();        } });
    71. 71. SPECsliding / tests / spec / SlidingSpec.jsit("should get the currentPage and check if is last one", function(){ $(container).sliding(goToPage, 2); var currPage = $(container).sliding.(getCurrentPage);  expect(currPage).toBe(2); expect($(container).sliding(‘isLastPage’)).toBeTruthy();});
    72. 72. O QUE MAIS A JASMINE TEM DE BOM?
    73. 73. JASMINE JQUERYsliding / tests / spec / SlidingSpec.js it("should the first page should have previous button disabled", function(){  expect($(.ui-sliding-prev).get(0)).toHaveClass(disabled);  expect($(.ui-sliding-next).get(0)).not.toHaveClass(disabled); });
    74. 74. POSSÍVEIS RESULTADOS
    75. 75. AJAX MOCK
    76. 76. MOCK DO DATA VINDO DO AJAXsliding / tests / spec / SlidingSpec.js describe("remote sliding", function(){      var newData = ;      beforeEach(function(){        newData = createUnorderedList(30, true);        spyOn($, ajax).andCallFake(function(options){          options.success(newData);        });     });
    77. 77. E COM ISSO...sliding / tests / spec / SlidingSpec.jsit("should make a ajax request for second page", function(){        $(container).sliding({          next: .test-next,          prev: .test-prev,          url: foo/test,          items: 15 // one page        });        $(container).sliding(setTotalPages, 3);        $(.test-next).trigger(click);        expect($(container).get(0)).beInRange(15,30); // Next     });
    78. 78. MATCHERSsliding / tests / spec / SpecHelper.jsbeforeEach(function() {  this.addMatchers({   beInRange: function(start, end) {       var isIn = 0;        var current_width = $(this.actual).width();        var container_pos = $(this.actual).position();        var final_pos = current_width + container_pos.left;        $(this.actual).find(li).slice(start,end).each(function(i, el){            var el_pos = $(this).position();            if (el_pos.left < final_pos && el_pos.left >=container_pos.left) {                isIn++;            }        });        return isIn == $(this.actual).sliding(option,items);    }  });});
    79. 79. MATCHER PARA DETECTAR QUANTOS ELEMENTOS ESTÃO SENDO EXIBIDOS
    80. 80. MATCHER PARA DETECTAR QUANTOS ELEMENTOS ESTÃO SENDO EXIBIDOS
    81. 81. MATCHER PARA DETECTAR QUANTOS ELEMENTOS ESTÃO SENDO EXIBIDOS
    82. 82. CHAMADAS AJAXsliding / tests / spec / SlidingSpec.jsit("should not make ajax request when is going to previous page",function(){       $(container).sliding({          next: .test-next,          prev: .test-prev,          url: foo/test2,          items: 15        });        $(container).sliding(setTotalPages, 3);        $(container).sliding(goToPage, 2);        $(.test-prev).trigger(click);        expect($.ajax.callCount).toEqual(1);     });
    83. 83. CHAMADAS AJAXsliding / tests / spec / SlidingSpec.jsit("should pass extra parameters in the request", function(){       $(container).sliding({         next: .test-next,         prev: .test-prev,         url: foo/test3,         items: 15,         params: {           extra : foo         }       });       $(container).sliding(goToPage, 2);       expect($.ajax.mostRecentCall.args[0]["data"]).toEqual({extra:foo});     });
    84. 84. SPIES PARA CALLBACKSsliding / tests / spec / SlidingSpec.jsit("should call loading callback when request starts", function() {     var callback = jasmine.createSpy();     $(container).sliding({       next: .test-next,       prev: .test-prev,       url: foo/test2,       before: callback,       items: 15     });     $(container).sliding(setTotalPages, 3);     $(container).sliding(goToPage, 2);     expect(callback).toHaveBeenCalled();});
    85. 85. CLOCK.TICKsliding / tests / spec / SlidingSpec.jsbeforeEach(function() {    jasmine.Clock.useMock();});it("Should set current page just when animation over", function(){ $(‘#container’).sliding({ speed: 200 });   $(‘#container’).sliding(‘goToPage’, 2);   jasmine.Clock.tick(200);   expect($(‘#container’).sliding(‘getCurrentPage’)).toBe(2);});
    86. 86. FIXTURESsliding / tests / spec / SlidingSpec.jsbeforeEach(function() {   loadFixtures("list.html");});spec / javascript / fixtures / list.html<ul id=”list”> <li>item 01</li> <li>item 02</li></ul>sliding / tests / spec / SlidingSpec.jsdescribe(“usando fixtures”, function() {   expect($(‘#list’).length).toBe(1);});
    87. 87. VOCÊ SÓ VAI APRENDER FAZENDO!
    88. 88. OBRIGADO! @alexanmtz
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×