GIT Tutorial: Fetching and Testing Pull Request Branches Locally

Leave a comment Standard

There are a lot of times when you’re using Git and BitBucket in a work environment and you want to be able to test someone’s PR branch without having to download a patch or clone it. Here’s a nifty trick that will allow you to fetch and checkout PR branches on your master repo without having to clone or patch from BitBucket.

1. Add your remote master as an upstream

git remote add upstream ssh://user@myrepo.git

2. Change your new remote to fetch from your pull requests instead of regular branches

git config --add remote.upstream.fetch '+refs/pull-requests/*/from:refs/remotes/upstream/pr/*'

3. Now fetch the PR branches that are currently available in your repo

git fetch upstream

4. Finally, you can use the ID of the PR you want (the ID will be available in the URL of the link to the PR) and simply checkout the PR with that ID number by replacing ID with the number of the PR in the code snippet below.

git checkout upstream/pr/ID

5. Voila! You’ve now downloaded a PR branch to your local git instance and can run it like you would for any other branch.

Advertisements

Jasmine Tutorial: Unit Testing Promises In Angular Services

Leave a comment Standard

So recently I’ve been doing a lot of Angular unit tests with Jasmine and Grunt. I have to say, testing promises is extremely frustrating and most of the examples I found out there either 1) didn’t work or 2) wouldn’t allow you to test content in a then block if you had multiple chained promises, or if you had a promise being called from and returned from another service. After many hours of frustrating trial and errors I found a solution I’m happy with so I want to share.

Let’s assume this is your controller:

'use strict';

angular.module('myModule').controller('myCtrl', ['$scope', 'api',
function ($scope, $api) {

  $scope.data = null;
  $scope.message = null;

  /**
  * Load some data from the API service
  * @return boolean
  **/
  $scope.loadData = function () {

    var config = {
      method: 'GET',
      url: 'http://api.domain.com/someRESTfulEndpoint',
      headers: {'Content-Type': 'application/json'},
      data: null
    };

    return $api.load(config).then(function (request) {
      if (request) {
        $scope.message = 'Your data was successfully loaded';
        $scope.data = request.response;
        return true;
      } else {
        $scope.message = 'The API service failed';
      }
      return false;
    });
  };
}]);

And here is the service making your API calls:

'use strict';

angular.module('myModule').service('api', ['$rootScope', '$http',
  function ($rootScope, $http) {

    /**
    * Makes the $http request given the proper configuration options
    * @param Object configruation for the $http request
    * @return Object $http promise that resolves to request payload or error
    **/
    this.load = function (options) {
      return $http({
        method: options.method || 'GET',
        url: options.url || 'http://api.domain.com/someDefaultEndpoint',
        headers: options.headers || null,
        data: options.data || null
      }).then(
        function (request) {
          //we got a response back, return just the API payload data
          if (request.status === 200 && request.data) {
            return request.data;
          } else {
            return {
              results: false,
              message: 'API request error',
              response: request
           };
         }
       }
     );
   };
}]);

Finally, this is your working unit tests:

'use strict';

describe('testing myModule', function () {

  beforeEach(module('myModule'));

  var $controller, $rootScope, $scope, $api, $httpBackend, $q;

  beforeEach(
    inject(function (_$controller_, _$rootScope_, api, _$httpBackend_, _$q_) {
      $controller = _$controller_;
      $rootScope = _$rootScope_;
      $httpBackend = _$httpBackend_;
      $q = _$q_;
      $api = api;
      $scope = $rootScope.$new();

      $httpBackend.when('GET').respond('test http GET call');
      $httpBackend.when('POST').respond('test http POST call');

      $controller('myCtrl', {
        $scope: $scope,
        $api: $api
      });
    })
  );

  it('has a $scope.loadData() function', function() {

    var testConfig = {
      method: 'POST',
      url: 'http://api.domain.com/endpoint',
      data: { some: 'data'}
    };

    var fakeData = { data: 'is fake' };

    //we spy on the API service and also return a fake promise call
    spyOn($api, 'load').and.callFake(
      function() {
        var deferred = $q.defer();
        deferred.resolve({result: true, response: fakeData});
        return deferred.promise;
      });
    });

    $scope.loadData(testConfig); //call the function we're testing in the controller
    $scope.$apply(); //we have to call this so Angular will try and resolve the promise
    expect($api.load.calls.count()).toEqual(1); //make sure it's called the api service
    expect($scope.message).toEqual('Your data was successfully loaded');
    expect($scope.data).toEqual(fakeData);
  });

  it('returns an error if the API fails', function() {

    var testConfig = {
      method: 'POST',
      url: 'http://api.domain.com/endpoint',
      data: { some: 'data'}
    };

    spyOn($api, 'load').and.callFake(
      function() {
        var deferred = $q.defer();
        deferred.resolve({
        result: false,
        message: 'api error'
      });
      return deferred.promise;
    });

    $scope.loadData(testConfig);
    $scope.$apply();
    expect($scope.message).toEqual('api error');
    expect($api.load.calls.count()).toEqual(1);
  });
});

Continue reading

HTML5 Tutorial: Simple Music Player

Leave a comment Standard

So this is a pretty simple example but I was playing around with flash for my chat room and this was byproduct of that experimentation. It’s funny how even when I’m trying to learn something new I do my best to make it useful for other situations which is a good habit to get into if you’re not doing it already.

Try out the working demo or download the code

Caveats

This will only work on a browser that is HTML5 compliant and has support for audio. That means older browsers and most versions of Internet Explorer are not supported. Firefox, Chrome and Opera work as well as the newest versions of Internet Explorer.

The Audio Tag

If you’re familiar with HTML then most of the index file below will look pretty familiar. The thing you really have to pay attention to is the new <audio> tag. It looks like this:

<audio id="rock" src="http://whiteoakstables.net/chat/audio/rock.wav" preload="auto"></audio>

You may notice that it looks a whole lot like a hyperlink with the src that defines the location of the file. Preload is an optional attribute, it tells your browser to start downloading the file as soon as the DOM, or page elements, have finished loading. In addition to setting preload to true I’ve added an ID attribute so I can reference this particular song in my music player.

The Index File

<!DOCTYPE html>
<html>
 <head>
 <script data-require="jquery@*" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
 <link data-require="bootstrap-glyphicons@*" data-semver="3.2.1" rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/img/glyphicons-halflings.png" />
 <link data-require="bootstrap@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
 <script data-require="bootstrap@*" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
 <link rel="stylesheet" href="style.css" />
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="text-center">Bootstrap HTML5 Music Player</h1>
 <audio id="rock" src="http://whiteoakstables.net/chat/audio/rock.wav" preload="auto"></audio>
 <audio id="blues" src="http://whiteoakstables.net/chat/audio/blues.wav" preload="auto"></audio>
 <audio id="electronica" src="http://whiteoakstables.net/chat/audio/electronica.wav" preload="auto"></audio>
 <audio id="classical" src="http://whiteoakstables.net/chat/audio/classical.wav" preload="auto"></audio>
 <audio id="latin" src="http://whiteoakstables.net/chat/audio/latin.wav" preload="auto"></audio>
 <audio id="indie" src="http://whiteoakstables.net/chat/audio/indie.wav" preload="auto"></audio>
 <div class="audiocontroller">
 <i class="audio-logo glyphicon glyphicon-headphones"></i>
 <i class="dynamiclink glyphicon glyphicon-play" id="play"></i></a>
 <i class="dynamiclink glyphicon glyphicon-pause" id="pause"></i>
 <select id="currentTrack">
 <option value="rock">Rock</option>
 <option value="blues">Blues</option>
 <option value="electronica">Electronica</option>
 <option value="classical">Classical</option>
 <option value="latin">Latin</option>
 <option value="indie">Indie</option>
 </select>
 <i class="dynamiclink glyphicon glyphicon-stop" id="stop"></i>
 </div>
 <p class="text-center">
 <a id="author" href="http://design1online.com" target="_blank">by Design1online.com, LLC</a>
 </p>
 </body>
</html>

The Javascript File

//Simple HTML5 Music Player by design1online.com, LLC

var currentTrack = null;
var paused = false;

$(document).ready(function() {
 currentTrack = $('#currentTrack').val();
 
 $("#play").click(function() { play(); });
 $("#stop").click(function() { stop(); });
 $("#pause").click(function() { pause(); });
});

function play() {

 //set the track back to the beginning
 if (!paused) {
 stop();
 currentTrack = $('#currentTrack').val();
 
 //make sure track starts from the begining each time
 document.getElementById(currentTrack).load();
 }

 //play the track
 document.getElementById(currentTrack).play();
}
 
//stop playing the current track
function stop() {
 if (currentTrack) {
 document.getElementById(currentTrack).pause();
 paused = false;
 }
}

//stop the track but don't go back to the beginning
function pause() {
 paused = true;
 document.getElementById(currentTrack).pause();
}

How It All Works

So now let’s talk about the javascript file. At first glance it looks relatively simple because it is! When you want to select a track you simply ask for it using getElementById and then you tell it to play or to pause. One thing that is sadly lacking is a stop() functionality. With html5 you can only pause an audio file — which does stop the playback but it also keeps the audio file at the same position as when you called pause on it. This means that if you wanted to play the audio file from the beginning again and you just called play() it would continue playing from where it left off. That’s where the load() function comes into play — this will tell the audio track to start loading if it wasn’t set to preload and it will reset the track back to the beginning.

The only other thing to mention is the currentTrack variable. I use this to keep track of which of the songs is currently selected and the user wasn’t to listen to.

Linux Tutorial: Fix Heartbleed on Ubutntu 14.04

Leave a comment Standard

I’ll keep this short and sweet!

sudo apt-get update && sudo apt-get install --only-upgrade bash

PHP Tutorial: Number Guessing Game (no database required)

Comments 4 Standard

Wow I guess it’s been a while since I’ve posted anything. I’ve been busy moving and working on my games but I did find a few minutes to make this little game. This randomly picks a number and then lets the player try to guess the number. If you like this game you might also like my Ajax Tic-Tac-Toe game or Ajax Hangman game. This assumes that you’ve already done some of my other game tutorials so you are familiar with my game manager and how it works. You can read the code below or you can be lazy and can download the code or view a working example.

<?php
/***
* File: oop/class.guessnumber.php
* Author: design1online.com, LLC
* Created: 8.21.2014
* License: Public GNU
***/

class guessnumber extends game
{
    var $guesses;              //int - maximum guesses per game
    var $randomNumber = null;  //int - the random number they're trying to guess
    var $min = 50;             //int - the lowest value the random number can have
    var $max = 500;            //int - the highest value the random number can have

    /**
    * Purpose: default constructor
    * Preconditions: none
    * Postconditions: parent object started
    **/
    function guessnumber()
    {
        /**
        * instantiate the parent game class so this class
        * inherits all of the game class's attributes 
        * and methods
        **/
        game::start();
    }
    
    /**
    * Purpose: start a new guessing game
    * Preconditions: maximum number of guesses
    * Postconditions: game is ready to be displayed
    **/
    function newGame($max_guesses = 5, $min = null, $max = null)
    {
        //set the min and max values for the random number
        if (!$min)
            $min = $this->min;
         else
            $this->min = $min;
            
        if (!$max)
            $max = $this->max;
        else 
            $this->max = $max;
            
        //setup the game
        $this->start();
        
        //generate the random number
        $this->randomNumber = rand($min, $max);
            
        //set how many guesses they get before it's a game over
        if ($max_guesses)
            $this->setGuesses($max_guesses);
    }
    
    /**
    * Purpose: set or retrieve maximum guesses before game over
    * Preconditions: the data submitted from the form
    * Postconditions: guess is calculated
    **/
    function playGame($postdata)
    {
        //player pressed the button to start a new game
        if ($postdata['newgame'] || empty($this->guesses))
            $this->newGame();
            
        //player is trying to guess a number
        if (!$this->isOver() && $postdata['number'])
            echo $this->guess($postdata['number']);
                
        //display the game
        $this->displayGame();
    }
    
    /**
    * Purpose: set or retrieve maximum guesses they can make
    * Preconditions: amount of guesses (optional)
    * Postconditions: guesses has been updated
    **/
    function setGuesses($amount = 0)
    {        
        $this->guesses += $amount;
    }
    
    /**
    * Purpose: display the game interface
    * Preconditions: none
    * Postconditions: start a game or keep playing the current game
    **/
    function displayGame()
    {
        //while the game isn't over
        if (!$this->isOver())
        {
            echo "<div id=\"range\">I'm thinking of a number from " . number_format($this->min) . " to " . number_format($this->max) . ".</div>
                  <div id=\"select_number\">
                        Your Guess:
                        <input type=\"text\" name=\"number\" />
                        <input type=\"submit\" name=\"submit\" value=\"Guess\" />
                  </div>";
        }
        else
        {
            //they've won the game
            if ($this->won)
                echo successMsg("Congratulations you guessed my number $this->randomNumber! You've won the game.<br/>
                                Your final score was: $this->score");
            else if ($this->health < 0)
            {
                echo errorMsg("Game Over! Good try, my number was $this->randomNumber.<br/>
                                Your final score was: $this->score");
            }

            echo "<div id=\"start_game\"><input type=\"submit\" name=\"newgame\" value=\"New Game\" /></div>";
        }
    }
    
    /**
    * Purpose: guess a number in this word
    * Preconditions: a game has started
    * Postconditions: the game data is updated
    **/
    function guess($number)
    {            

        if ($this->isOver())
            return;

        if (!$number || !is_numeric($number))
            return errorMsg("Oops! Please enter a number.");
            
         if ($number < $this->min)
            return errorMsg("You must enter $this->min or higher.");
            
         if ($number > $this->max)
            return errorMsg("You must enter $this->max ot lower.");

        
        //if the word contains this number
        if ($number == $this->randomNumber) {
            $this->won = true;
        }
        else //word doesn't contain the number
        {
        
            //reduce their health
            $this->setHealth(ceil(100/$this->guesses) * -1);
            
            //calculate 1/6 the random number to get a distance factor
            $distance = floor($this->randomNumber / 8);
            

            if ($this->isOver())
                return;
            else {
                if ($number < $this->randomNumber - ($distance * 4) || $number > $this->randomNumber + ($distance * 4))
                    return errorMsg("So cold.");
                else if ($number < $this->randomNumber - ($distance * 3) || $number > $this->randomNumber + ($distance * 3))
                    return errorMsg("You're getting warmer...");
                else if ($number < $this->randomNumber - ($distance * 2) || $number > $this->randomNumber + ($distance * 2))
                    return errorMsg("Warm, Warm, Warm.");
                else if ($number < $this->randomNumber - $distance || $number > $this->randomNumber + $distance)
                    return errorMsg("You getting hot!");
                else
                    return errorMsg("You're really hot!!");
            }
        }
    }
}

Angular Autocomplete with Complex Object Arrays — NO JQUERY

Leave a comment Link

There are many times when you want to perform an autocomplete that works by searching all of the object properties and not just a single field or the key. If so you’ll enjoy this plunker.

Angular-UI Tutorial: Unique Filter on Object Arrays

Comments 2 Link

This plunker will show you how to use the unique filter included in the Angular UI utilities to strip out duplicates in an object array. Enjoy!