Your SlideShare is downloading. ×
  • Like
Criando plugins com o j query ui e testando com o jasmine
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 1,865 views
Published

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, é …

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,865
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
15
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

Transcript

  • 1. DESENVOLVENDO PLUGINS COM O JQUERY UI E TESTANDO COM JASMINE FISL 13
  • 2. QUEM SOU EU?
  • 3. Alexandre Magno na atualmente no
  • 4. PROJETOSOPEN SOURCE
  • 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. OUTROS PROJETOS... Blog Webpoint http://blog.alexadremagno.net eutro.co http://eutro.coBalloon3http://balloon3.com Salve a web por favo http://salveaweb.com/
  • 7. NAS HORAS VAGAS...
  • 8. http://www.gandhifica.com
  • 9. VAMOS FALAR DE QUÊ?
  • 10. Jasmine jQuery Plugins design Pattern Widget factory TDD javascript BDDjQuery UI Ajax Refactoring
  • 11. TUDO ISSO NA PRÁTICA?
  • 12. SIM!
  • 13. MAS ANTESVAMOS FALAR DE
  • 14. JAVASCRIPT
  • 15. fonte: http://aaroncrowder.com/
  • 16. POR QUE O JAVASCRIPT FICOU TÃO POPULAR?
  • 17. JQUERY
  • 18. “MEU PRIMEIRO CONTATO COMO JAVASCRIPT FOI COM JQUERY” Beethoven
  • 19. API
  • 20. <script type="text/javascript">! $(function(){! ! $(div).css(color, red).appendTo(body);! });</script>
  • 21. ALGUMA SEMELHANÇACOM O BRANDING DO JQUERY?
  • 22. PLUGINS
  • 23. USE OS PLUGINS JQUERY PARACRIAR COMPONENTES JAVASCRIPT https://moqups.com
  • 24. UM PLUGIN BÁSICO
  • 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. 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. <script type="text/javascript">! $(function(){! ! console.log($(body).defaultPluginName());! });</script> fonte: https://github.com/addyosmani/jquery-plugin-patterns/
  • 28. EXEMPLO MAIS REAL? JQUERY JFLOW
  • 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. Ô 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. BUG?
  • 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. <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. TEMOS UM PROBLEMA
  • 35. Plugins de jQuery são inicializados apenas uma veznão podem sermodificadosOu seja,um pluginjQuery é...
  • 36. que que é isso? STATELESS
  • 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. MEUCÓDIGOVIROU UMFRANKSTEIN
  • 39. PATTERNS
  • 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. JQUERY UI
  • 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. EU QUERY MEU WIDGET
  • 44. EU TAMBÉM!
  • 45. JQUERY UI SLIDING
  • 46. COMO FUNCIONA?
  • 47. O QUE É
  • 48. O QUE É
  • 49. O QUE É
  • 50. O QUE É
  • 51. O QUE É
  • 52. um carrossel? jQuery Cycle Plugin Isto é um carrossel!jQuery Sliding Elementos deslizantes
  • 53. LETS CODE!
  • 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. <script type="text/javascript">! $(function(){! ! $(#elemento).sliding(); $(#elemento).sliding(“goToPage”, 2);! });</script>
  • 56. <script type="text/javascript">! $(function(){! ! $(#elemento).sliding(“destroy”); $(#elemento).sliding(“option”, “items”, 3);! });</script>
  • 57. <script type="text/javascript">! $(function(){! ! $(#elemento).sliding(“refresh”); $(#elemento).sliding(“restart”);! });</script>
  • 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. E COMO TESTA ISTO?
  • 60. TESTAR MÉTODOS getCurrentPage getTotalPages $.ui.widget setTotalPages goToPage before onAppendnext remote E CALLBACKS
  • 61. USANDO O QUÊ?
  • 62. METODOLOGIA
  • 63. TDD É...FICAR VERMELHO
  • 64. PARA DEPOISFICAR VERDE
  • 65. E SUCESSIVAMENTEFICAR VERMELHO
  • 66. PARA DEPOISFICAR VERDE
  • 67. BDD
  • 68. JASMINE
  • 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. 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. 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. O QUE MAIS A JASMINE TEM DE BOM?
  • 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. POSSÍVEIS RESULTADOS
  • 75. AJAX MOCK
  • 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. 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. 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. MATCHER PARA DETECTAR QUANTOS ELEMENTOS ESTÃO SENDO EXIBIDOS
  • 80. MATCHER PARA DETECTAR QUANTOS ELEMENTOS ESTÃO SENDO EXIBIDOS
  • 81. MATCHER PARA DETECTAR QUANTOS ELEMENTOS ESTÃO SENDO EXIBIDOS
  • 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. 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. 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. 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. 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. VOCÊ SÓ VAI APRENDER FAZENDO!
  • 88. OBRIGADO! @alexanmtz