Angry Birds of JavaScript: Green Bird - Mocking

markup.html

<form class="well">
    <label for="userName">User Name</label>
    <input id="userName" type="text" class="span3" placeholder="Enter Name Here…">
    <button type="submit" class="btn btn-primary">Get Tweets</button>
</form>
<ul class="tweets"></ul>

requests-mocked-dynamic.js

$.mockjax({
    url: "https://api.twitter.com/1/statuses/user_timeline/*",
    responseTime: 750,
    response: function() {
        var data = $.mockJSON.generateFromTemplate({
            "tweets|5-10": [{
                "id|+1": 0, 
                "created_at": "Mon Apr 11 @TIME_HH:@TIME_MM:@TIME_SS +0000 2012",
                "text": "@LOREM_IPSUM",
                "favorited|0-1": false,
                "retweeted|0-1": false,
                "user": { "name": "@MALE_FIRST_NAME @LAST_NAME" }
            }]
        });
        
        this.responseText = data.tweets;
    }
});
   

requests-mocked-static.js

$.mockjax({
    url: "https://api.twitter.com/1/statuses/user_timeline/*",
    responseTime: 750,
    responseText: [
        { id: 0, created_at: "Mon Apr 11 8:00:00 +0000 2012",  text: "Test Tweet 1",
            favorited: false, retweeted: false, user: { name: "User 1" } },
        { id: 1, created_at: "Mon Apr 11 9:00:00 +0000 2012",  text: "Test Tweet 2",
            favorited: true,  retweeted: true,  user: { name: "User 2" } },
        { id: 2, created_at: "Mon Apr 11 10:00:00 +0000 2012", text: "Test Tweet 3",
            favorited: false, retweeted: true,  user: { name: "User 3" } },
        { id: 3, created_at: "Mon Apr 11 11:00:00 +0000 2012", text: "Test Tweet 4",
            favorited: true,  retweeted: false, user: { name: "User 4" } },
        { id: 4, created_at: "Mon Apr 11 12:00:00 +0000 2012", text: "Test Tweet 5",
            favorited: true,  retweeted: true,  user: { name: "User 5" } }
    ]
});
    

twitter.js

(function( twitter, $, undefined ) {

    var channel = twitter.channel = postal.channel(),
        URL_TEMPLATE = "https://api.twitter.com/1/statuses/user_timeline/" + 
            "%(userName)s.json?count=%(count)s&include_rts=1",
        $selection = null;
        
    twitter.selector = null;

    twitter.init = function( selector ) {
        twitter.selector = selector;
        
        channel.subscribe( "tweets.available", twitter.displayTweets );    
    };
    
    twitter.displayTweets = function( tweets ) {
        var $list = $( "<ul/ >" ),
            $location = $selection || $( twitter.selector );
        
        // This would be better suited for a templating engine,
        // but that's for another Angry Bird ;)
        $.each( tweets || {}, function( index, tweet ) {
            var html = "<i>" + moment( tweet.created_at ).fromNow() + "</i>: ";
            html += "<b>" + tweet.user.name + "</b> - ";
            html += tweet.text;
            html += tweet.retweeted ? " <i class='icon-repeat'></i>" : "";
            html += tweet.favorited ? " <i class='icon-star'></i>" : "";
            
            $( "<li />", { html: html }).appendTo( $list );         
        });
            
       $location.append( $list.children() );         
    };
    
    twitter.getTweets = function( userName, count ) {
        var url = _.string.sprintf( URL_TEMPLATE, { 
                userName: userName, 
                count: count || 5 
            });

        $.ajax({
            url: url,
            dataType: "jsonp",
            success: function( tweets ) {
                channel.publish( "tweets.available", tweets );
            }
        });                
    };
    
}( window.twitter = window.twitter || {}, jQuery ));

twitter.init( ".tweets" );

$( document ).on( "click", "button", function( e ) {
    var $input = $( this ).closest( "form" ).find( "input" );
    
    e.preventDefault();                                                 
    twitter.getTweets( $input.val() || "elijahmanor" );    
});