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

DESENVOLVENDO PLUGINS COM
O JQUERY UI E TESTANDO
COM JASMINE

FISL 13

Alexandre Magno
na

atualmente no

Twitter Bootstrap BR jQuery sliding

https://github.com/alexanmtz/bootstrap
http://www.github.com/alexanmtz

jQuery Destaque WP-Agenda

https://github.com/alexanmtz/wp-agenda
https://github.com/globocom/destaque

OUTROS PROJETOS...
Blog Webpoint
http://blog.alexadremagno.net eutro.co
http://eutro.co

Balloon3
http://balloon3.com

Salve a web por favo
http://salveaweb.com/

Jasmine
jQuery
Plugins
design
Pattern
Widget
factory
TDD
javascript BDD
jQuery UI

Ajax
Refactoring

fonte: http://aaroncrowder.com/

POR QUE O JAVASCRIPT
FICOU TÃO POPULAR?

“MEU PRIMEIRO CONTATO COM
O JAVASCRIPT FOI COM JQUERY”
Beethoven

ALGUMA SEMELHANÇA

COM O BRANDING DO JQUERY?

USE OS PLUGINS JQUERY PARA
CRIAR COMPONENTES JAVASCRIPT

https://moqups.com

// 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();
    }

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 ));
            }
        });
    }

! $(function(){
! ! console.log($('body').defaultPluginName());
! });
</script>

fonte: https://github.com/addyosmani/jquery-plugin-patterns/

EXEMPLO MAIS REAL?

JQUERY JFLOW

" >
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

Ô NÓ, Eu quero usar o jﬂow em
meu projeto, mas a minha listagem
vai ser dinâmica, com possibilidade
de novos itens serem adicionados,
porém não está funcionando!

<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 aqui
ao clicar aqui

Plugins de jQuery são inicializados apenas uma vez

não podem ser
modiﬁcados
Ou seja,
um plugin
jQuery é...

que que é
isso?

STATELESS

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

MEU
CÓDIGO
VIROU UM
FRANKSTEIN

STATELESS
Basic plugin
Namespace Prototypal
inheritance
Widget factory
bridge
Custom events

Widget factory

Highly conﬁgurable
Best options

Extend skeleton

“UMA SOLUÇÃO GERAL REUSÁVEL DE
UM PROBLEMA RECORRENTE”
Wikipedia

fonte: https://github.com/addyosmani/jquery-plugin-patterns/

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

um carrossel?
jQuery Cycle Plugin

Isto é um carrossel!

jQuery Sliding

Elementos deslizantes

// 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
        }

});

! $(function(){
! ! $('#elemento').sliding();
$('#elemento').sliding(“goToPage”, 2);
! });
</script>

! $(function(){
! ! $('#elemento').sliding(“destroy”);
$('#elemento').sliding(“option”, “items”, 3);
! });
</script>

! $(function(){
! ! $('#elemento').sliding(“refresh”);
$('#elemento').sliding(“restart”);
! });
</script>

// widget factory
_setOption: function(key, value) {
            // alguma logica, depois
$.Widget.prototype._setOption.apply( this, arguments );
        },
        enable: function() {
            // logica de habilitar
        },
        disable: function() {
            // logica de desabilitar
// this.element é o elemento
        }

});

TESTAR MÉTODOS
getCurrentPage
getTotalPages

$.ui.widget setTotalPages

goToPage
before

onAppend
next remote

E CALLBACKS

E SUCESSIVAMENTE

FICAR VERMELHO

sliding / tests / spec / SlidingSpec.js

describe("Sliding", function() {

  beforeEach(function(){
    jQuery.fx.off = true;
  });

  it("should load the instance of the plugin",
function() {
    expect($.ui.sliding).toBeTruthy();
  });
});

JQUERY UI WIDGET
sliding / jquery.sliding.js
// widget factory
_create: function() {
            // codigo da inicializacao
        },
        options: {
// objeto de opções
        },
        isLastPage: function() {
            return this.getCurrentPage() ==
this.getTotalPages();
        }

});

SPEC

it("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();

});

O QUE MAIS A JASMINE

TEM DE BOM?

JASMINE JQUERY

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');

});

MOCK DO DATA
VINDO DO AJAX

describe("remote sliding", function(){
      var newData = '';
      beforeEach(function(){
        newData = createUnorderedList(30, true);
        spyOn($, 'ajax').andCallFake(function(options){
          options.success(newData);
        });
     });

E COM ISSO...

it("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

     });

MATCHERS
sliding / tests / spec / SpecHelper.js
beforeEach(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');
    }
  });
});

MATCHER PARA DETECTAR
QUANTOS ELEMENTOS
ESTÃO SENDO EXIBIDOS

CHAMADAS AJAX
it("should not make ajax request when is going to previous page",
function(){

          next: '.test-next',
          prev: '.test-prev',
          url: 'foo/test2',
          items: 15
        });

        $('.test-prev').trigger('click');

        expect($.ajax.callCount).toEqual(1);

     });

CHAMADAS AJAX

it("should pass extra parameters in the request", function(){

         next: '.test-next',
         prev: '.test-prev',
         url: 'foo/test3',
         items: 15,
         params: {
           'extra' : 'foo'
         }
       });

       expect($.ajax.mostRecentCall.args[0]
["data"]).toEqual({'extra':'foo'});

     });

SPIES PARA
CALLBACKS

it("should call loading callback when request starts", function() {
     var callback = jasmine.createSpy();

       next: '.test-next',
       prev: '.test-prev',
       url: 'foo/test2',
       before: callback,
       items: 15
     });


     expect(callback).toHaveBeenCalled();
});

CLOCK.TICK

    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);

});

FIXTURES

loadFixtures("list.html");
});
spec / javascript / fixtures / list.html

<ul id=”list”>
<li>item 01</li>
<li>item 02</li>
</ul>


describe(“usando fixtures”, function() {
expect($(‘#list’).length).toBe(1);
});

VOCÊ SÓ VAI APRENDER

FAZENDO!

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

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

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

Notes de l'éditeur