Monthly Archives: July 2013

Testing Strategies for Angular JS – Protractor @ YouTube

http://www.youtube.com/watch?v=UYVcY9EJcRs

This screencast explains some tools for AngularJS testing. Already popular Testem and Jasmine are well covered in other screencasts, but Protractor example was interesting.

Protractor is built on top of WebDriverJs, but also it provides angular-aware features like “By.binding” or “By.repeater” selectors as in the examples.

The document is limited, but it seems the basic interface is the same as WebDriverJs, and the protractor.js source-code can be used to identify the additional definitions in “ProtractorBy.prototype” parts.

Nice.

Notes

  • Default testing file defined in “myConf.js” is “spec/testAppSpec.js”, which needs to be created for your tests.
  • “Appendix A: Setting up a standalone selenium server” in the github page covers the webdriver setup, and then running “node_modules/.bin/protractor myConf.js” works.

It’s pretty much basic one, but the following is what I tried for testAppSpec.js.

var protractor = require('../node_modules/protractor/lib/protractor.js');
require('../node_modules/protractor/jasminewd');

describe('login', function() {
  var ptor = protractor.getInstance();

  it('should remain in the sign-in page if the password is invalid', function() {
    ptor.get('http://localhost:3000');

    ptor.findElement(protractor.By.id("user_email")).sendKeys("xxx@yyy.com")
    ptor.findElement(protractor.By.id("user_password")).sendKeys("XXX")

    ptor.findElement(protractor.By.tagName("button")).click();

    ptor.findElement(protractor.By.tagName('h3')).getText().then(function(text) { expect(text).toEqual('Sign in'); });
    ptor.findElement(protractor.By.id("user_email")).getText().then(function(text) { expect(text).toEqual(''); });
    ptor.findElement(protractor.By.id("user_password")).getText().then(function(text) { expect(text).toEqual(''); });
  }, 10000);
});
Advertisements

Elixir – TCP Server Example

It’s the Elixir version, following after the Ruby(EventMachine) and Go ones. Basically it ended up to similar as Go, due to the similarity of go’s channel and Elixir’s spawn/receive statements. There seems some differences in error handling between the two, but it’s not covered here.

Notes

  • Good
    • Elixir’s pattern matching provides polymorphic mechanism. After getting used to this functional concept (no if statement and no loops), it might gets interesting to write codes.
    • Calling Erlang’s library is not so difficult. It provides some sense of comfort when facing issues (there would be some reasonable solutions).
  • Bad
    • Error messages are sometimes cryptic. When child process dies with error, error is presented in weired form, though it has information of locations of error.

Server

$ elixir -r lib/tcpserver.ex -e "Tcpserver.listen(3000)"
2013/7/28 15:11:57 Completed in 5 second(s) with param = A
2013/7/28 15:11:59 Completed in 5 second(s) with param = B
2013/7/28 15:12:0 Completed in 5 second(s) with param = C
2013/7/28 15:12:5 Completed in 1 second(s) with param = E
2013/7/28 15:12:8 Completed in 5 second(s) with param = D
2013/7/28 15:12:10 Invalid command is specified

Client

$ telnet localhost 3000
Trying ::1...
telnet: connect to address ::1: Connection refused
Trying 127.0.0.1...
Connected to localhost.
Escape character is '^]'.
LARGE A
LARGE B
LARGE C
Completed in 5 second(s) with param = A
Completed in 5 second(s) with param = B
Completed in 5 second(s) with param = C
LARGE D
SMALL E
Completed in 1 second(s) with param = E
Completed in 5 second(s) with param = D
xxx
Invalid command is specified

SouceCode (tcpserver.ex)

defrecord LargeJob, name: "" do
  def run(record) do
    :timer.sleep(5000)
    "Completed in 5 second(s) with param = #{record.name}"
  end
end

defrecord SmallJob, name: "" do
  def run(record) do
    :timer.sleep(1000)
    "Completed in 1 second(s) with param = #{record.name}"
  end
end

defrecord InvalidJob, name: "" do
  def run(_record) do
    "Invalid command is specified"
  end
end

defmodule Job do
  def handle_request(sender, command) do
    command = String.replace(command, "\r\n", "")
    job = parse(String.split(command, " "))
    sender <- {:ok, job.run()}
  end

  defp parse(["LARGE", name]) do
    LargeJob.new name: name
  end

  defp parse(["SMALL", name]) do
    SmallJob.new name: name
  end

  defp parse([_]) do
    InvalidJob.new
  end
end

defmodule Tcpserver do
  def listen(port) do
    tcp_options = [:list, {:packet, 0}, {:active, false}, {:reuseaddr, true}]
    {:ok, listen_socket} = :gen_tcp.listen(port, tcp_options)
    do_listen(listen_socket)
  end

  defp do_listen(listen_socket) do
    {:ok, socket} = :gen_tcp.accept(listen_socket)
    spawn(fn() -> do_server(socket) end)
    do_listen(listen_socket)
  end

  defp do_server(socket) do
    case :gen_tcp.recv(socket, 0) do
      {:ok, data} ->
        responder = spawn(fn() -> do_respond(socket) end)
        spawn(Job, :handle_request, [responder, list_to_binary(data)])
        do_server(socket)

      {:error, :closed} -> :ok
    end
  end

  defp do_respond(socket) do
    receive do
      {:ok, response} ->
        :gen_tcp.send(socket, "#{response}\n")
        Logger.log(response)
    end
  end
end

defmodule Logger do
  def log(message) do
    {{year, month, day}, {hour, min, sec}} = :erlang.localtime
    IO.puts "#{year}/#{month}/#{day} #{hour}:#{min}:#{sec} #{message}"
  end
end

Programming Elixir

Just trying out Elixir (http://elixir-lang.org/) using above book and screencast, as part of my concurrency series.

It’s functional programming language. I had been avoiding the purely functional languages after I studied Lisp at school, and only relationship with them was copy-pasting emacs lisp.

However, Elixir seems reasonably well structured for beginners with the essence of Ruby, while keeping the power of underlying Erlang VM. The official documents are still limited, but the book “Programming Elixir” provides a good guidance for understanding the interesting paradigm of this language.

Then the “Meet Elixir” screencast presented by José Valim describes good insights of background philosophy of Elixir, which is pretty much interesting and quite different from the standard object-oriented ones. The contents are relatively presented fast, so maybe it’s good to start from the book.

The power of Elixir would come out on the concurrency part – featured by Erlang VM. The following example (it’s from the book, though slightly modified) spawns 10000 processes, and each process counts up one. It just takes sub-second, interesting.

$ elixir chain.exs
time = 122ms, msg = Result is 10000

chain.exs

defmodule Chain do
  @moduledoc """
  Spawns Erlangs's lightweight processes for counting up numbers.
  """

  # When receiving a number from the previous process, 'receive' block is executed with number 'n'.
  # Then, propagate the 'n + 1' to the next process.
  def counter(next_pid) do
    receive do
      n -> next_pid <- n + 1
    end
  end

  # Creates 'n' number of processes to count upto 'n'
  def create_processes(n) do
    # loop 'n' times to spawn processes, then returns the process id of last one, which comprises
    # of 'n' process chain starting from 'self' process.
    last = Enum.reduce 1..n, self,
             fn(_, send_to) -> spawn(Chain, :counter, [send_to]) end

    # send the initial number 0 to the last process.
    last <- 0

    # wait for the 'n' length propagation to complete back to 'self'
    receive do
      final_answer when is_integer(final_answer) ->
        "Result is #{inspect(final_answer)}"
    end
  end

  # Execute the process creation with the timer count.
  def run(n) do
    {time, msg} = :timer.tc(Chain, :create_processes, [n])
    IO.puts "time = #{div(time, 1000)} milliseconds, msg = #{msg}"
  end
end

# spawning 10000 processes which each counts up one.
Chain.run(10000)

Understanding Computation @ Book

Understanding Computation: From Simple Machines to Impossible Programs

This book covers fundamental mechanism of computation, like automaton or turing machine. Though it’s a kind of text-book topic, this book brings a fun out of it through implementing interpreters for a simple language, using Ruby.

Ruby is popular for implementing DSL, but this book is going further on implementing programming language itself. I once learned this kind of topic while I was in university, but I’ve almost forgotten most of them. One of the reason was maybe I felt a little boring at the time, just with mathematical theories.

Actual code works.

It’s a lot of information covered in this book, and I haven’t been able to read through the book yet. But, I definitely would like to take time to try-out each of the examples.

Magic Tricks of Testing @ YouTube

Sandi Metz – Magic Tricks of Testing – Ancient City Ruby 2013

It’s a nice talk about testing.

The costs for testing takes major part of the development, and also there’s no way to verify the 100% complete. Therefore, identifying the method that maximize the cost-performance is crucial. This session talks about the practical way to limit the scope of unit-testing, based on the message types (query and command), their directions (outgoing and incoming).

Good part of the unit-tests is that they perform the important role on quickly identifying the mistakes in the code. However, there is also a bad part that the maintenance costs (especially for the flaky ones) can prevent the fast development. This kind of scoping is a good one to apply.

Also, I found the following viewpoints interesting.

  • Deleting extra tests (which easily brakes) can be an option.
  • Temporarily adding extra tests (for private methods, etc.) can be an option.

Too much focus on enforcing basic rules could reduce the productivity, and it may be good to have this kind of exception under some conditions and rules.

There are many scenarios that simple rules cannot cover the real situations, like existing code-base that doesn’t have tests, or some difficult codes to test. Technically speaking, most of the cases may have solution, but sometimes it’s not practical, due to various reasons (lack of time, lack of skills, etc). Putting a decent fallback plan over the fundamental rules would be an important factor.

Notes

  • Test incoming query message by asserting the query result.
  • Test the interface not the implementation.
  • Test command message by making assertions about direct public side effects.
  • Don’t test private method, as it’s redundant and easier to break. However, temporally breaking this rule can save your time.
  • For outgoing command message, confirm the message is sent using “expect” of mocks.

AngularJS and Firebase @ YouTube

Realtime Web Apps with AngularJS and Firebase

It’s amazing. As indicated, AngularJS’s 2-way binding is extended into multi-clients by just adding a hook for Firebase. The Firebase nicely handles both persistence and notification with a simple interface. There’re some applauses in the demonstration (around 10:00-11:00), and I would make a similar response.

Code

Just made some modification to the previous server/client communication code, and it just worked as advertised.

<html ng-app="app">
  <head>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="https://cdn.firebase.com/v0/firebase.js"></script>
    <script src="angularFire.js"></script>

    <style>
      body { margin-top: 10px; }
      input.message { height: 30px; }
    </style>

    <script>
      var app = angular.module('app', ['firebase']);

      function AppCtrl($scope, angularFire) {
        var url = 'https://<my-firebase>.firebaseio.com/items'
        $scope.items = angularFire(url, $scope, 'items');

        $scope.send = function() {
          $scope.items.push($scope.text);
        }

        $scope.clear = function() {
          $scope.items.length = 0;
        }
      }
    </script>

  </head>
  <body ng-controller="AppCtrl">
    <form class="form-inline">
      <input type="text" ng-model="text" placeholder="input message to send" class="message"></input>
      <button ng-click="send()" class="btn">send</button>
      <button ng-click="clear()" class="btn">clear</button>
    </form>

    <table class="table table-striped">
      <tr ng-repeat="item in items">
        <td>{{item}}</td>
      </tr
    </table>
  </body>
</html>

GoLang – TCP Server Example

http://golang.org/

One more concurrent server topic, following to the previous post – EventMachine – UDP Server Example. As I sometimes hear that GoLang (Go Programming Language) is good for concurrent programming, I just tried on the similar logic.

After struggling on the fact that “learning a new language is tough”, I could manage to make the code work as follows (I was looking for some ways to simplify the code, but I gave up…).

Server

% go run server.go
2013/07/17 00:41:23 Completed in 5 second with param = A
2013/07/17 00:41:24 Completed in 5 second with param = B
2013/07/17 00:41:26 Completed in 5 second with param = C
2013/07/17 00:41:31 Completed in 1 second with param = E
2013/07/17 00:41:34 Completed in 5 second with param = D
2013/07/17 00:41:36 Invalid command is specified

Client

% telnet localhost 5000
Trying ::1...
Connected to localhost.
Escape character is '^]'.
LARGE A
LARGE B
LARGE C
Completed in 5 second with param = A
Completed in 5 second with param = B
Completed in 5 second with param = C
LARGE D
SMALL E
Completed in 1 second with param = E
Completed in 5 second with param = D
xxx
Invalid command is specified

SouceCode

package main

import (
  "io"
  "log"
  "net"
  "bytes"
  "bufio"
  "strings"
  "time"
)

type JobInterface interface {
  run() string
}
type Job        struct { param string }
type SmallJob   struct { Job }
type LargeJob   struct { Job }
type InvalidJob struct { Job }

func (job SmallJob) run() string {
  time.Sleep(1 * time.Second)
  return "Completed in 1 second with param = " + job.param
}

func (job LargeJob) run() string {
  time.Sleep(5 * time.Second)
  return "Completed in 5 second with param = " + job.param
}

func (job InvalidJob) run() string {
  return "Invalid command is specified"
}

func job_runner(job JobInterface, out chan string) {
  out <- job.run() + "\n"
}

func job_factory(input string) JobInterface {
  array := strings.Split(input, " ")
  if len(array) >= 2 {
    command := array[0]
    param   := array[1]

    if command == "SMALL" {
      return SmallJob{Job{param}}
    } else if command == "LARGE" {
      return LargeJob{Job{param}}
    }
  }
  return InvalidJob{Job{""}}
}

func request_handler(conn net.Conn, out chan string) {
  defer close(out)

  for {
    line, err := bufio.NewReader(conn).ReadBytes('\n')
    if err != nil { return }

    job := job_factory(strings.TrimRight(string(line), "\n"))
    go job_runner(job, out)
  }
}

func send_data(conn net.Conn, in <-chan string) {
  defer conn.Close()

  for {
    message := <- in
    log.Print(message)
    io.Copy(conn, bytes.NewBufferString(message))
  }
}

func main() {
  psock, err := net.Listen("tcp", ":5000")
  if err != nil { return }

  for {
    conn, err := psock.Accept()
    if err != nil { return }

    channel := make(chan string)
    go request_handler(conn, channel)
    go send_data(conn, channel)
  }
}

‘Personal’ Impression

The language is interesting, but there’re some good/bad parts. Actually, I haven’t been able to find the good spot to use this language yet. It would be more concise than Java/C++, but not sure if the good parts are large enough to switch from script languages like JavaScript or Ruby.

  • Good
    • Rigid static analysis of codes, which catches many errors at the beginning. For example, if the imported package or defined variables is never used, it throws an error (rather than warning).
    • Fast compile time. It’s fast enough to start executing, which may be comparable to script languages (not the same, but good enough).
    • Concept of asynchronous/concurrent execution is interesting, and built-in features (go/channel/defer) would work nicely once we get the concept.
  • Bad
    • Though basic language concept is similar as standard C++/Java based language, there’re too many small differences (keywords, statements, etc.). It may be better than Objective-C, but may not be enough to get accustomed to it easily.
    • Object Oriented Programming is supported (GoLang Tutorials), and inheritance/polymorphism can be applied. However, the separation between data (struct) and methods makes me feel like it’s not fully integrated. For example, JavaScript doesn’t have class concept, but it can be defined like class (variable and methods) through some idioms (or use CoffeeScript).
    • In the if/else statement “} else if”, putting line-break between “}” and “else” throws “unexpected semicolon or newline before else” error. I personally don’t like this style.

EventMachine – WebSocket + AngularJS

One more EventMachine. Just tried to write a simple chat server using “em-websocket” gem (WebSocket server written over EventMachine). Client part is a simple HTML with AngularJS. It’s just wrapped around the native WebSocket object (couldn’t provide strong interaction with AngularJS).

Screenshot

websocket_example

Code

The following is the result of my trial.

Server (server.rb)

require 'em-websocket'

index = 1
connections = {}

def login_names(connections)
  connections.map {|ws, name| name}.join(", ")
end

EM.run do
  EM::WebSocket.run(:host => "0.0.0.0", :port => 8000) do |ws|
    ws.onopen do |handshake|
      name  = "Guest#{index}"
      connections[ws] = name
      index += 1

      ws.send "[Server] Hello #{name}"
      ws.send "[Server] Members are: #{login_names(connections)}"
    end

    ws.onclose do
      connections.delete(ws)
    end

    ws.onmessage do |msg|
      sender = connections[ws]

      connections.each do |cws, name|
        cws.send "[#{sender}] #{msg}"
      end
    end
  end
end

Client (client.js)

var app = angular.module('app', []);

app.factory('ChatService', function() {
  var service = {};

  service.connect = function() {
    if(service.ws) { return; }

    var ws = new WebSocket("ws://localhost:8000/socket/");

    ws.onopen = function() {
      service.callback("Succeeded to open a connection");
    };

    ws.onerror = function() {
      service.callback("Failed to open a connection");
    }

    ws.onmessage = function(message) {
      service.callback(message.data);
    };

    service.ws = ws;
  }

  service.send = function(message) {
    service.ws.send(message);
  }

  service.subscribe = function(callback) {
    service.callback = callback;
  }

  return service;
});


function AppCtrl($scope, ChatService) {
  $scope.messages = [];

  ChatService.subscribe(function(message) {
    $scope.messages.push(message);
    $scope.$apply();
  });

  $scope.connect = function() {
    ChatService.connect();
  }

  $scope.send = function() {
    ChatService.send($scope.text);
    $scope.text = "";
  }
}

Client (client.html)

<html ng-app="app">
  <head>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="client.js"></script>

    <style>
      body { margin-top: 10px; }
      input.message { height: 30px; }
    </style>
  </head>
  <body ng-controller="AppCtrl">
    <form class="form-inline">
      <button ng-click="connect()" class="btn">Connect</button>
      <input type="text" ng-model="text" placeholder="input message to send" class="message"></input>
      <button ng-click="send()" class="btn">send</button>
    </form>

    <table class="table table-striped">
      <tr ng-repeat="message in messages">
        <td>{{message}}</td>
      </tr
    </table>
  </body>
</html>

Referenced Documents

EventMachine – UDP Server Example

Just made some trials on “EventMachine” as I got interested in the job-handling in the server/client model, after the investigation for the previous post (Code Smells @ YouTube).

Regarding the EventMachine, the following is the excerpt from the README.

http://eventmachine.rubyforge.org/

What is EventMachine

EventMachine is an event-driven I/O and lightweight concurrency library for Ruby. It provides event-driven I/O using the Reactor pattern, much like JBoss Netty, Apache MINA, Python’s Twisted, Node.js, libevent and libev.

PeepCode has nice screencasts for the EventMachine, and I coded some examples based on that.

The previous post was about a simple UDP server to handle user-specified jobs. I wrote similar feature using EventMachine as follows. The server accepts jobs like “SMALL” or “LARGE” which takes several seconds to complete, and then responds with a message. In the following example, standard “nc” command is used for the client part.

With EventMachine, asynchronous job handling can be simply implemented with the event-driven model. It also just works concurrently. It’s nice.

Server

% ruby server.rb
2013-07-14T00:40:00+09:00 : Received LARGE A
2013-07-14T00:40:02+09:00 : Received LARGE B
2013-07-14T00:40:03+09:00 : Received LARGE C
2013-07-14T00:40:05+09:00 : Completed in 5 second with param = A
2013-07-14T00:40:07+09:00 : Completed in 5 second with param = B
2013-07-14T00:40:08+09:00 : Completed in 5 second with param = C
2013-07-14T00:40:35+09:00 : Received LARGE D
2013-07-14T00:40:36+09:00 : Received SMALL E
2013-07-14T00:40:37+09:00 : Completed in 1 second with param = E
2013-07-14T00:40:40+09:00 : Completed in 5 second with param = D
2013-07-14T00:40:54+09:00 : Received XXX
2013-07-14T00:40:54+09:00 : Invalid command is specified

Client

% nc -u 0.0.0.0 9000
LARGE A
LARGE B
LARGE C
Completed in 5 second with param = A
Completed in 5 second with param = B
Completed in 5 second with param = C
LARGE D
SMALL E
Completed in 1 second with param = E
Completed in 5 second with param = D
XXX
Invalid command is specified

SourceCode

require 'rubygems'
require 'eventmachine'
require 'date'

class Job
  def initialize(param = "")
    @param = param
  end

  def run(defer)
    throw "This method needs to be implemented in subclasses"
  end

private
  def process(defer, time, message)
    EM.defer do
      sleep(time)
      defer.succeed(message)
    end
  end
end

class SmallJob < Job
  def run(defer)
    process(defer, 1, "Completed in 1 second with param = #{@param}")
  end
end

class LargeJob < Job
  def run(defer)
    process(defer, 5, "Completed in 5 second with param = #{@param}")
  end
end

class InvalidJob < Job
  def run(defer)
    process(defer, 0, "Invalid command is specified")
  end
end

class RequestHandler
  JOBS = {
    "SMALL" => SmallJob,
    "LARGE" => LargeJob
  }
  JOBS.default = InvalidJob

  def self.parse(command)
    type, param = command.split
    JOBS[type].new(param)
  end
end

class UDPHandler < EM::Connection
  def receive_data(command)
    command.chomp!
    log("Received #{command}")
    RequestHandler.parse(command).run(callback)
  end

private
  def callback
    EM::DefaultDeferrable.new.callback do |response|
      send_data(response + "\n")
      log(response)
    end
  end

  def log(message)
    puts "#{DateTime.now.to_s} : #{message}"
  end
end

EM.run do
  EM.open_datagram_socket('0.0.0.0', 9000, UDPHandler)
end

Code Smells @ YouTube

MountainWest RubyConf 2013 Code Smells: Your Refactoring Cheat Codes by John Pignata

https://github.com/jpignata/mwrc

It’s great presentation which talks about refactoring the code by showing examples. The actual refactoring part is 20-minutes or something, but it has a lot of nice viewpoints. Defining the roles of modules and their interactions are the key factor of designing maintainable codes. Always, actual example-code works well understanding the concept.

One concern point (which I felt) is some of the classes are cross-communicating each other, making the class relationship a little complex.

(e.g.)

  1. PushDaemon <-> UDPServer
  2. UDPServer <-> Client <-> Job
  3. Worker <-> Job

These classes are arbitrarily calling the other one’s method. As ruby’s duck typing doesn’t define the specific interface, it’s a little difficult to identify the method call-graph. Maybe, at least for the 1st item, instead of calling pre-fixed method each other, apply observer pattern (subscribe/notify) from one side makes it clear about their relationship?

require "observer"

class Server
  include Observable

  def start
    sleep 1
    changed
    notify_observers("sample response")
  end
end

class Daemon
  def initialize
    @server = Server.new
    @server.add_observer(self, :call)
  end

  def run
    @server.start
  end

  def call(message)
    puts "called by listener with message: " + message
  end
end