Asynchronous Testing with Protractor’s ControlFlow

Protractor is an end-to-end testing framework for AngularJS applications that uses a real browser, just as a real user would. It is built on top of NodeJS and WebDriverJS and taps into the internals of Angular to know when Angular is done processing and updating bindings.

The joy of Protractor and WebDriverJS is that we can write our tests in a synchronous style, and still have the added benefits of asynchronous code. Read more on Asynchronous Testing with Protractor’s ControlFlow…

What You Should Already Know about JavaScript Scope

If you are a novice JavaScript programmer, or if you’ve been messing around with JQuery to pull off a few animations on your website, chances are you’re missing a few vital chunks of knowledge about JavaScript.

One of the most important concepts is how scope binds to “this”.

For this post, I’m going to assume you have a decent understanding of JavaScript’s basic syntax/objects and general terminology when discussing scope (block vs. function scope, this keyword, lexical vs. dynamic scoping). Read more on What You Should Already Know about JavaScript Scope…

Serving Static Assets with DropWizard

Over the last few months, I’ve had the opportunity to do a lot of work with DropWizard, an awesome Java web framework for developing RESTful web services.

I was recently prototyping a small application, and I wanted to serve static files directly from DropWizard. While this isn’t what DropWizard is primarily designed to do, I didn’t want to go through the process of setting up another web server just to serve static assets for a prototype. While DropWizard has some out-of-the-box support for serving static assets, I found the documentation surrounding it to be incomplete and confusing. It actually took me a couple hours of debugging to figure out how to do exactly what I wanted, So I thought I would document what I learned here.

My end goal was to serve a small single page JavaScript app on the root of my DropWizard application, while having my DropWizard REST endpoints available at /api. The limited documentation around serving assets in DropWizard suggest that setting up an AssetsBundle for / and changing the application context path in your config file should be enough to achieve this, but that did not work for me. I had to do the following steps: Read more on Serving Static Assets with DropWizard…

AngularJS: Adding One Resolve to All Routes

$routeProvider doesn’t come with the functionality to include a resolve in every single route on an application. But universal resolves can be added in using angular.extend(), an angular method that copies one object into another.

A quick refresher on resolves in Angular routes: a resolve is a dependency that should be injected into the controller for a route. The main difference between using a resolve and just requiring the dependency in the controller is that promises in resolves are completed before Angular renders the controller. If there are any errors in completing the promise, the $routeChangeError event triggers. Resolves take the complexity of completing a promise and checking for errors out of the controller itself. (You can read more on $routeProvider and resolves in the Angular docs.)

Read more on AngularJS: Adding One Resolve to All Routes…

Marionette.js Behaviors, Part 2: Testing Behaviors

This post is a follow-up to Al’s high-level introduction to Marionette Behaviors, published yesterday. As Al said, Marionette.Behaviors are an abstraction for sharing UI code between different views. They are a recent addition to the Marionette toolbelt (added in version 1.7). Prior to the introduction of behaviors, code sharing between views in Marionette had to be handled at the Javascript language level with inheritance or by delegating to external modules.

Read more on Marionette.js Behaviors, Part 2: Testing Behaviors…

Marionette.js Behaviors, Part 1: The Basics

Part 2: Testing Behaviors is available here

Marionette is a Javascript application framework built on top of Backbone. It provides great features missing from core Backbone like collection views, subview management, and abstractions for building event driven applications.

Extracting Duplicate Code with Behaviors

Marionette.Behaviors are an abstraction for sharing UI code between different views. They are a recent addition to the Marionette toolbelt (added in version 1.7). Prior to the introduction of behaviors, code sharing between views in Marionette had to be handled at the Javascript language level with inheritance or by delegating to external modules.

Behaviors are designed to be loosely coupled and injectable. A behavior knows about the view it is injected into, but the view does not know the details of the behavior. This helps to keep behaviors abstract and reusable between views. Lets take a look at a couple simple Backbone views and how they could be refactored using Marionette behaviors. Read more on Marionette.js Behaviors, Part 1: The Basics…

Requiring All Page Objects for Angular Protractor Specs

You’ve got an Angular app and an accompanying test suite. You’ve followed the recommendations about using Page Objects, but it’s cumbersome to require each of them you’d like to use in each spec. Wouldn’t it be nice to automate that?

Page What Now?

If you happen to be writing “E2E” tests for your Angular app with Protractor but you aren’t using Page Objects yet, here’s a quick intro:

Once you’re convinced of their benefit and you’ve seen some nice examples of using them, you go and build a few. And then your app grows… and grows. Now you have a mess of page objects that have to be manually required in each spec that uses them. Read more on Requiring All Page Objects for Angular Protractor Specs…

Eliminating Multiple-Style Classes with @extend and SCSS

SCSS has numerous beneficial features, include one that I really came to love during my last project. The @extend feature really took the cake, and I think will help me along my path as a maker! It has a couple downfalls in practice, but it is such a great feature that I want to convince you to give it a try on your next project.

What is @extend?

Extend is a lot like inheritance in programming. It lets you import css styles from a previously defined css rule into another rule.

Let’s say you have three elements on the DOM that you want to style. Each element will look the same except each element’s border color will be different. Using the @extend feature, one approach to solving the styling of the elements is to define one class for the structure of the element. We will call the class .element, and define the height, width, background color, border thickness, etc. Read more on Eliminating Multiple-Style Classes with @extend and SCSS…