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

  • 1,840 views
Uploaded 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, é …

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.

  • 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,840
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