Gabo Esquivel - Javascript Developer Software Developer and Web Technology Consultant

Unit Testing: Mocks, Stubs and Spies

In unit testing isolation is key. The class/object/function you are testing is called the System Under Test (SUT) and the SUT often interacts with other part of the system, these parts are called Collaborators or Depedencies. When testing the simulation of the collaborators/dependencies and behaviors of these dependencies allows you to to test the units in isolation. Gerard Meszaros author of xUnit Test Patterns uses the term “Test Double” as the generic term for any kind of pretend object used in place of a real object for testing purposes. The name comes from the notion of a Stunt Double in movies.

Mocks, Stubs, Spies, Dummies and Fakes are types of test doubles that will help you to accomplish the goal of isolation. There are several libraries that provide tools to easily create these objects in your tests. Sinon.js is a javascript library that provides standalone test spies, stubs and mocks with no dependencies that work with any unit testing framework.

Software Unit Testing

Testing a web application is critical to ensure the program does what is supposed to do and that new functionality and changes don’t brake existing parts of the application. Well-tested applications are more easily extended.

Testing can be defined as:

Taking measures to check the quality, performance, or reliability of (something), especially before putting it into widespread use or practice.

“Oxford Dictionary”

There are 3 main levels of testing and they are complementary:
Scenario Testing / End-to-End Testing (E2E) : test the whole application by pretending to be a user.
Functional Tests / Medium Level Tests: a piece of functionality is tested in isolation, by simulating external dependencies.
Unit Tests: focused on application logic, tests the smallest unit of functionality, typically a method/function.

Unit testing works by isolating small “units” of code so that it can be tested from every angle. Any kind of dependency that is slow, untested, hard to understand or initialise should be stubbed or mocked so you can focus on what the unit of code is doing, not what its dependencies do. Tests should ideally be written by developers, the same person who writes the functionality, not a QA team. Demoting unit testing to a lower level of priority is almost always a mistake.

In-Place Editing With Contenteditable and AngularJS

In-place editing provides an easy way to let the user edit parts of a page without having to be redirected to an edit page. Instead, the user can just click around on a page an edit the elements he or she wishes to change – without reloading the page. When the user hovers over an editable area, the background color of the element changes. When clicked, the text becomes editable.

You can make an element editable by adding the contenteditable attribute in your markup. This attribute has three possible values: true, false, and inherit. Specifying inherit will make the element editable if it’s immediate parent is editable.

<div class="editable" contenteditable="true"></div>

The following directive uses contenteditable attribute and ng-model for data binding.

See the Pen Editing Page Elements with contenteditable by Gabo Esquivel (@gaboesquivel) on CodePen.


Node.js HTTPS and SSL Certificate for Development

HTTPS is the HTTP protocol over TLS/SSL and HTTPS is required to protect your data. It is the most popular network protocol for establishiing secure connections for exchanging documents on the internet. It is basically HTTP carried over a TCP socket, which has been secured using SSL. Transport Layer Security (TLS) and Secure Sockets Layer (SSL) are cryptographic protocols designed to provide communication security. In this post I’ll show how to create a self-signed SSL certificate and set up an express 4.0 project that uses it for local development purposes.

Self-Signed SSL Certificate

There are two kinds of certificates: those signed by a ‘Certificate Authority’, or CA, and ‘self-signed certificates’. A Certificate Authority is a trusted source for an SSL certificate, and using a certificate from a CA allows your users to be trust the identity of your website. In most cases, you would want to use a CA-signed certificate in a production environment – for testing purposes, however, a self-signed certicate will do just fine.

Reasons to Use AngularJS in Web Applications



First, a quick introduction. AngularJS is an open-source web application framework for creating single page web apps. It was created by Miško Hevery and Adam Abrons back in 2009 and it’s now maintained by Google and community.

AngularJS is built around the belief that declarative programming should be used for building user interfaces and wiring software components, while imperative programming is excellent for expressing business logic. The framework adapts and extends traditional HTML to better serve dynamic content through two-way data-binding that allows for the automatic synchronization of models and views. As a result, AngularJS de-emphasizes DOM manipulation and improves testability & performance.

AngularJS is winning the frontend framework war. There are other high quality alternatives out there, but few have gained so much developer support, they love developing with it. Even conservative companies now see Angular as an investment and they are paying for AngularJS trainings and tools. This graph of Google Search Trends shows the interest over time:

Differences Between TDD, ATDD and BDD

Test-driven development (TDD) is a technique of using automated unit tests to drive the design of software and force decoupling of dependencies. The result of using this practice is a comprehensive suite of unit tests that can be run at any time to provide feedback that the software is still working.

The concept is to “get something working now and perfect it later.” After each test, refactoring is done and then the same or a similar test is performed again. The process is iterated as many times as necessary until each unit is functioning according to the desired specifications. Test-driven development is part of a larger software design paradigm known as Extreme Programming (XP).

more on TDD

ATDD stands for Acceptance Test Driven Development, it is also less commonly designated as Storytest Driven Development (STDD). It is a technique used to bring customers into the test design process before coding has begun. It is a collaborative practice where users, testers, and developers define automated acceptance criteria. ATDD helps to ensure that all project members understand precisely what needs to be done and implemented. Failing tests provide quick feedback that the requirements are not being met. The tests are specified in business domain terms. Each feature must deliver real and measurable business value: indeed, if your feature doesn’t trace back to at least one business goal, then you should be wondering why you are implementing it in the first place.

more on ATDD

Behavior-Driven Development (BDD) combines the general techniques and principles of TDD with ideas from domain-driven design. BDD is a design activity where you build pieces of functionality incrementally guided by the expected behavior. The focus of BDD is the language and interactions used in the process of software development. Behavior-driven developers use their native language in combination with the language of Domain Driven Design to describe the purpose and benefit of their code.

A team using BDD should be able to provide a significant portion of “functional documentation” in the form of User Stories augmented with executable scenarios or examples. BDD is usually done in very English-like language helps the Domain experts to understand the implementation rather than exposing the code level tests. Its defined in a GWT format, GIVEN WHEN & THEN.

more on BDD


TDD is rather a paradigm than a process. It describes the cycle of writing a test first, and application code afterwards – followed by an optional refactoring. But it doesn’t make any statements about: Where do I begin to develop? What exactly should I test? How should tests be structured and named? .When your development is Behavior-Driven, you always start with the piece of functionality that’s most important to your user.

TDD and BDD have language differences, BDD tests are written in an english-like language.

BDD focuses on the behavioural aspect of the system unlike TDD that focuses on the implementation aspect of the system.

ATDD focuses on capturing requirements in acceptance tests and uses them to drive the development. (Does the system do what it is required to do?)

BDD is customer-focused while ATDD leans towards the developer-focused side of things like [Unit]TDD does. This allows much easier collaboration with non-techie stakeholders, than TDD.

TDD tools and techniques are usually much more techie in nature, requiring that you become familiar with the detailed object model (or in fact create the object model in the process, if doing true test-first canonical TDD). The typical non-programming executive stakeholder would be utterly lost trying to follow along with TDD.

BDD gives a clearer understanding as to what the system should do from the perspective of the developer and the customer.

TDD allows a good and robust design, still, your tests can be very far away of the users requirements. BDD is a way to ensure consistency between requirements and the developer tests.

FullStack Development Plugins for Sublime Text

Have You Sharpened Your Axe? Your text editor is the most important tool you have for software development. It is important that you take the time known it well, learn how to use the features available and customize it with extensions and snippets. Mastering your text editor pays off, it will save you a lot of time.

Here’s a list of useful plugins you may want to install if you are using Sublime Text.

Package Control

The Sublime Text package manager that makes it exceedingly simple to find, install and keep packages up-to-date. This should be the first plugin to install.

It helps discovering, installing, updating and removing packages. It features an automatic upgrader and supports GitHub, BitBucket and a full channel/repository system. It’s like apt-get for Ubuntu, pip for Python and npm for node.js.


A is a full-featured code intelligence and smart autocomplete engine for JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP.

Provides the following features:

Jump to Symbol Definition – Jump to the file and line of the definition of a symbol. Imports autocomplete – Shows autocomplete with the available modules/symbols in real time. Function Call tooltips – Displays information in the status bar about the working function.

Node.js Application Frameworks

Speed in software development is key for building a successful product and one of the tools that helps to deliver faster is an application framework. The app development framework provides an structure, handles repetitive tasks and alleviates the overhead associated with common activities allowing you to focus on feature development. Good frameworks will enforce good practices and code reuse (modules).

In this post I’ll list some of the most popular NodeJS frameworks and their characteristics.

Sails – Realtime MVC Framework for Node.js

An MVC web framework with a modern twist, supporting WebSockets, streams, and a data-driven API.

Sails.js is designed to mimic the MVC pattern of frameworks like Ruby on Rails, but with support for the requirements of modern apps: data-driven APIs with scalable, service-oriented architecture. It’s especially good for building chat, realtime dashboards, or multiplayer games.

Sails.js is database agnostic. Its ORM, Waterline, provides a simple data access layer that works, no matter what database you’re using. It automatically generates a RESTful JSON API for your app and provides basic security and role-based access control by default, and you can add as many custom policies as you like.

It is built on Express (for routing), EJS (for templating) and (for cross-platform WebSockets with graceful degredation) with a convention-over-configuration philosophy, just like Ruby on Rails.

Express – Sinatra Inspired Web Development Framework for Node.js.

Express.js is minimal and flexible web application framework, providing a robust set of features for building single and multi page, and hybrid web applications.

It has a myriad of HTTP utility methods and Connect middleware at your disposal for creating a robust user-friendly API quick and easy. It also has a thin layer of features fundamental to any web application, without obscuring features that you know and love in node.js. The pluggable middleware in the framework provides a great way to add elements, such as passport.js, as you need them.

Hapi – A Rich Framework for Building Applications and Services

Hapi enables developers to focus on writing reusable application logic instead of spending time building infrastructure.

It shines with essential built-in features that your API server or webpage mostly needs. Hapi was built by Walmart labs (Spumko, Eran Hammer) and it is configuration-centric, more declarative. Pretty well battle tested by their mobile app customers.

Koa – Next Generation Framework for Node.js

Koa.js is new web framework designed by the team behind Express, which aims to be a smaller, more expressive, and more robust foundation for web applications and APIs.

Through leveraging generators Koa allows you to ditch callbacks and greatly increase error-handling. Koa does not bundle any middleware within core, and provides an elegant suite of methods that make writing servers fast and enjoyable.

There are many other NodeJS frameworks, you can find a categorized list at

Get Started With Command Line and Z Shell

A quick introduction… To develop a web application tooling and workflow are very important. Taking the time to learn and master command line is not only highly recommended but it is required to make use of tools that will help you develop faster and gain more control of your workflow.

This post summarizes what you need to know to get going with command line as well sharing some personal recommendations on the setup of the command prompt on MAC OS X, but it applies to *nix as well.

What is a Shell?

The Shell is an application that offers interactive console or terminal access to a computer system. It lets you interact with applications on your computer through command line. A command-line interface (CLI) is a mechanism for interacting with a computer operating system or software by typing commands to perform specific tasks, a command-line interpreter then receives, parses, and executes the requested user command.

Most operating systems offer a command line interface, but that doesn’t mean the built-in version is best. MAC OS X comes with Terminal, however there’s a terminal emulator for Mac OS X that is more customizable and does amazing things out-of-the-box, it’s called iTerm. If you are using a windows machine I’d recommend you installing cygwin.

In order to use the command line prompt you will need to memorize commands. Start with the basic system commands, once you mastered that you’ll catch up quickly with other tools such as gulp.js.

Introduction to Gulp.js – Code Over Configuration

Automation of repetitive and critical tasks is key to develop a successful software product. Automated tasks will minimize software cost, reduce software delivery time as well as improving the product quality and reduce human error. Investing time in automating tasks will allow you to focus on developing features.

“War is of vital importance to the state; hence it is a subject of inquiry which can on no account be neglected”
– Sun Tzu, Art of War

In this post I will introduce you to Gulp.js, a javascript task runner that helps you automate your development process.

Setting Up your Web App Build System

When developing modern web applications there are critical tasks you want to automate:

  • testing: code linting, unit testing, e2e tests
  • css preprocessing ( sass, less, …)
  • optimization: concatenating and minifying css and scripts, compressing new or modified images, …
  • deploying updates to a staging or production server

There are many tools that will help you automate these tasks. Which one to choose? Grunt, Gulp, Brunch, Broccoli,…

Back in 2012 Grunt.js came out and it was quickly adopted by the community, plugins started to proliferate and it became king for task automation on the client side, playing well with Bower and Yeoman. Like many other developers I’ve been using Grunt on my projects and it gets the job done but recently I started to use Gulp, another open source project with faster build times and a Unix/Node philosophical approach to solve problems.

Gulp.js focuses on code over configuration. By harnessing the power of Node streams, it enables faster build times by avoiding the need to write temporary files to disk. This is one of the main differences with Grunt. Stream instances are basically Unix pipes. They can be readable, writable or both and are easy to reason about — you can pipe a readable stream to a writable stream by doing readableStream.pipe(writableStream).

“Streams come to us from the earliest days of unix and have proven themselves over the decades as a dependable way to compose large systems out of small components that do one thing well.
You can then plug the output of one stream to the input of another and use libraries that operate abstractly on streams to institute higher-level flow control.”

– substack