Jasmine: Testing AJAX calls that manipulate the DOM

Here is a Javascript function reloadUsers() that fetches a HTML snippet from the server using AJAX and replaces the current .users container in the DOM:

window.reloadUsers = ->
  $.get('/users').then (html) ->

Testing this simple function poses a number of challenges:

  • It only works if there is a <div class="users">...</div> container in the current DOM. Obviously the Jasmine spec runner has no such container.
  • The code requests /users and we want to prevent network interaction in our unit test…

PostgreSQL: WITH Queries (Common Table Expressions)

PostgreSQL's Common Table Expressions can be used to extract sub-queries from bulky SQL statements into a temporary table to be referenced instead.

This is most useful to avoid ugly joins or sub-selects. CTEs can be used for SELECT, INSERT, UPDATE or DELETE.

Example (from the PostgreSQL docs):

WITH regional_sales AS (
SELECT region, SUM(amount) AS total_sales
FROM orders
GROUP BY region
), top_regions AS (
SELECT region
FROM regional_sales
WHERE total_sales > (SELECT SUM(t…

chromedriver-helper gem in Gemfile might break you selenium tests (of other projects)

Summary: Don't add chromedriver-helper to the Gemfile

  • the executables might break your tests in projects where chromedriver-helper is not in the Gemfile
  • developers with different chrome versions will have problems using the same chromedriver-helper version


If you install the chromedriver-helper gem, but don't have it in you Gemfile, your selenium tests might fail with:

Selenium::WebDriver::Error::WebDriverError: unable to connect to chromedriver

The reason is that chromedriver-helper o…


How to tell ActiveRecord how to preload associations (either JOINs or separate queries)

Remember why preloading associations "randomly" uses joined tables or multiple queries?

If you don't like the cleverness of this behavior, you can explicitely tell ActiveRecord how to preload associations with either JOINs or separate queries:

  • joins will join the given association so you can order or add conditions.


Valuable Chrome DevTools Shortcuts

In the DevTools settings, there's a "Shortcuts" section. Found these keyboard shortcuts there:


Toggle drawer
CTRL + ~ or CTRL + `
Show console in drawer


SHIFT + up/down
Change number by 10
CTRL + up/down
Change number by 100


Toggle "visibility:hidden!important" (useful when debugging page repaint times)
CTRL + hover above element in the DOM list
Don't show the yellow dimensions tooltip (useful when the tooltip covers just the area you need to see).
Drag & Drop
You can actu…

Git: Switch back to the previous branch

With "git checkout -" you can switch back to the branch you previously worked on.

(master) $ git checkout foobar
Switched to branch 'foobar'
(foobar) $ git checkout -
Switched to branch 'master'
(master) $

This also works with other commands like git merge:

(master) $ git checkout foobar
Switched to branch 'foobar'
(foobar) $ git merge -
Merged branch 'master'

PostgreSQL's OVERLAPS operator is not fully inclusive

PostgreSQL supports the SQL OVERLAPS operator. You can use it to test if two date ranges overlap:

=> SELECT ('2001-02-16'::date, '2001-12-21'::date) OVERLAPS
          ('2001-12-20'::date, '2002-10-30'::date);


An important caveat is that the date ranges are defined as start <= time < end. As such the later date is not included in the range:

=> SELECT ('2001-02-16'::date, '2001-12-21'::date) OVERLAPS
          ('2001-12-21'::date, '2002-10-30'::date);


Also compar…

Inspecting Angular 1.x UI Router

If your Angular app has some decent complexity, it will not be easy to use UI Router straight away. Here are some hints on how to get around.

Accessing the UI Router $state service from the browser console
$state = angular.element(document.body).injector().get('$state'): Retrieves the Angular injector and asks it for the $state service.
Inspecting the current state
Inspecting params of the current state

Git: creating and deleting a tag

Git has two kind of tags:

  • annotated
  • lightweight

Annotated tags are stored as full objects in the Git database. They’re checksummed; contain the tagger name, email, and date; have a tagging message; and can be signed and verified with GNU Privacy Guard (GPG)

The following command will create a (lightweight) tag:

git tag v0.1

An annotated tag is created by:

git tag -a v0.1 -m "a special tag message"

A normal git push will not push the tag. So in order to publish your (local) tags, you have to

git push –tags


CSS has a well-supported :empty selector

All browsers + IE9 know the CSS :empty selector. It lets you hide an element when it has no content, i.e. not even white space.

For instance, you have a badge displaying the number of unread messages in a red bubble with white text:

.unread-messages-bubble {
  background-color: red;
  border-radius: 10px;
  padding: 10px;
  color: white;

To hide that bubble entirely when there are no new messages:

.unread-messages-bubble:empty {
  display: none;

Note that the element must be…


Cucumber: Identifying slow steps that drag down your test speed

In most projects I know, Cucumber test suite speed is not an issue. Of course, running 350 features takes its time, but still each test for itself is reasonably fast. There is nothing you can do to fundamentally speed up such a test (of course, you should be using parallel_tests).

However, in projects that go beyond clicking around in a web GUI and checking results, there might be various measures to speed things up. Katapult tests for example could be sped up more than 4 times by re…


How to quickly inspect an Angular scope in your webkit browser

Current webkit browsers like Chrome and Safari have a special variable in their consoles that refers to the selected DOM node in the elements panel. This lets us easily inspect Angular scopes.

  1. Right click in the page and click "Inspect" to open the Dev Tools
  2. Select the element you're interested in from the elements panel
  3. Focus the console (in Chrome, hit ESC)
  4. Get the scope object and store it

    // That is:
    element = $0 // Store element
    $element = $(element) // Wrap with j...

RSpec: run a single spec (Example or ExampleGroup)

RSpec allows you to mark a single Example/ExampleGroup so that only this will be run. This is very useful when using a test runner like guard.

Add the following config to spec/spec_helper.rb:

RSpec.configure do |config|
# These two settings work together to allow you to limit a spec run
# to individual examples or groups you care about by tagging them with
# :focus metadata. When nothing is tagged with :focus, all examples
# get run.
config.filter_run_including :focus => true

Heads up: Angular may break links to the current URL (e.g. when using ngInclude)

Angular's location provider stalls links to the current URL, i.e. window.location. As soon as the $location service is activated in an Angular app, it will intercept links. The click event handler is registered in $LocationProvider.$get().

The motivation is reasonable, as they want to keep the Browser history clean when Angular is controlling it. However, when Angular is NOT controlling your interaction with the browser history (i.e. you're just using Angular as JS sugar on your page), Angular will create the above issue as soon as you u…


Preloaded associations are filtered by conditions on the same table

When you eagerly load an association list using the :include option, and at the same time have a :condition on an included table, two things happen:

  1. Rails 2, 3, 4, 5 tries to load all involved records in a huge single query spanning multiple database tables.
  2. The preloaded association list is filtered by the :condition, even though you only wanted to use the :condition to filter the containing model.

The second case's behavior is mostly unexpected, because pre-loaded associations usually don't care about the circumstances unde…

Turning off VCR when stubbing with Webmock

Sometimes when working with VCR you still want to use webmock. Since VCR hooks into webmock and fails when an unknown request is happening, you have to turn it off in order to use webmock like you are used to. Here is how to do this in rspec.

RSpec.configure do |config|
  config.around do | example |
    if example.metadata[:turn_off_vcr]
3409 cards