Brian Riley brianmriley

Better Jasmine Tests With `this`

On the Refinery29 Mobile Web Team, codenamed "Bicycle", all of our unit tests are written using Jasmine, an awesome BDD library written by Pivotal Labs. We recently switched how we set up data for tests from declaring and assigning to closures, to assigning properties to each test case's this object, and we've seen some awesome benefits from doing such.

The old way

Up until recently, a typical unit test for us looked something like this:

describe('views.Card', function() {

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

This afternoon I encountered a race condition in an Angular app I'm working on. Essentially my controller was pushing some values to an Array on its scope and something (I wasn't sure what) was asynchronously overriding the Array's contents. The Array was being used by a custom directive- written by someone else- as well as an ngModel and it wasn't clear who was making the change.

I ended up trying something I had not done before and it worked well enough that I thought I'd post it here in case it helped anyone else.

First I enabled The "Async" option in Chrome's "Sources > Call Stack" panel.

Next I set a breakpoint in my controller where I was modifying the Array. When I hit that breakpoint, I ran the following code in my console:

Object.observe(this.theArray, function(changes) {

	/// <reference path="../typings/tsd.d.ts" />

	import db = require('../db/db');
	import IAuthorDocument = require('../db/IAuthorDocument');

	class Author {
	private _author:IAuthorDocument;

	constructor(author:IAuthorDocument) {
	this._author = author;

	#!/bin/sh

	# To the extent possible under law, Viktor Szakats
	# has waived all copyright and related or neighboring rights to this
	# script.
	# CC0 - https://creativecommons.org/publicdomain/zero/1.0/
	# SPDX-License-Identifier: CC0-1.0

	# THIS SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
	# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,

	//
	// Implementation using express-jwt middle
	//
	var express = require('express'),
	ejwt = require('express-jwt'),
	jwt = require('jsonwebtoken'),
	passport = require('passport'),
	bodyParser = require('body-parser'),
	LocalStrategy = require('passport-local').Strategy,
	BearerStrategy = require('passport-http-bearer').Strategy;

	let map = new Map();
	map.set("a", 1);
	map.set("b", 2);
	map.set("c", 3);

	let obj = Array.from(map).reduce((obj, [key, value]) => (
	Object.assign(obj, { [key]: value }) // Be careful! Maps can have non-String keys; object literals can't.
	), {});

	console.log(obj); // => { a: 1, b: 2, c: 3 }

	{
	"name": "literasee-editor",
	"version": "1.0.0",
	"description": "",
	"scripts": {
	"clean": "rimraf public",
	"build:webpack": "webpack --config webpack.config.prod.js",
	"build": "npm run clean && npm run build:webpack",
	"postinstall": "npm run build",
	"start": "nodemon server.js"

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title> - jsFiddle demo</title>
	</head>
	<body>
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>
	<script>

Brian Riley brianmriley

Better Jasmine Tests With this

The old way

The introduction to Reactive Programming you've been missing

This tutorial as a series of videos

Better Jasmine Tests With `this`