Test spies in PHP

I think that I wrote my first unit tests in Ruby with RSpec, back in the day. But I learned most of my testing knowledge from working with mocha and chai in JavaScript. One of the things that I learned from these tools is that being able to express your test logic in clear, nearly-natural language brings a real comfort to the often complicated life of the test-writer.

For example, here’s a line straight from the chai home page:

expect(tea).to.have.property('flavors').with.length(3);

It’s so lovely.

When writing tests to follow the flow of code from one module to the next, it’s often useful to have Test Spies around to “spy” on the code and tell you what’s happening when. To borrow the definition from my favorite test spy library, sinon:

A test spy is a function that records arguments, return value, the value of this and exception thrown (if any) for all its calls. A test spy can be an anonymous function or it can wrap an existing function.

When brought together with sinon-chai, this allows for very expressive syntax:

expect(mySpy).to.have.been.calledWith("foo");

Because I work a lot with WordPress, I also write a lot of unit tests in PHP. There, the defacto standard is PHPUnit, which has… less natural language. That’s fine, though, its assertions are usually perfectly readable. What it seems to be lacking, for me anyway, is Spies.

Certainly there are some great ways to use PHPUnit’s built-in mocking tools, like this (hidden) behavior, but Spies are hardly a first-class citizen. And besides, even writing this feels confusing to me:

$target = $this->getMock('TargetClass');
$target->expects($spy = $this->any())->method('doSomething');

$target->doSomething("foo");
$target->doSomething("bar");

$invocations = $spy->getInvocations();

$this->assertEquals(2, count($invocations));

I would much rather write:

$target = mock_object_for('TargetClass');
$spy = $target->spy_on_method('doSomething');

$target->doSomething("foo");
$target->doSomething("bar");

expect_spy($spy)->to_have_been_called->twice();

So I ended up writing a Test Spy library for PHP. I call it Spies. My intent was to have an easy and readable way to create Test Spies, Stubs, and Mocks, and also a clear way to write expectations for them.

Creating a Spy is as simple as calling \Spies\make_spy(); (although there’s many other ways to create them). You can then call the spy and ask it questions, like this:

$spy = \Spies\make_spy();
$spy( 'hello', 'world' );

$spy->was_called(); // Returns true
$spy->was_called_times( 1 ); // Returns true
$spy->was_called_times( 2 ); // Returns false
$spy->get_times_called(); // Returns 1
$spy->was_called_with( 'hello', 'world' ); // Returns true
$spy->was_called_with( 'goodbye', 'world' ); // Returns false
$spy->get_call( 0 )->get_args(); // Returns ['hello', 'world']

Here’s a more complete example of using Spies to mock an object and test its behavior:

You can install Spies using Composer by typing composer require sirbrillig/spies in your project.

I owe quite a lot to the great library WP_Mock by 10up. Many of the concepts in Spies were inspired directly by the way that WP_Mock works, like creating global functions. WP_Mock serves a slightly different purpose, though. It’s a layer on top of Mockery, which in turn is a layer on top of PHP’s own testing tools. Also, it mocks a few things by default, like filters and actions.

Spies is intended to be more generally useful, and also to make the distinction between mocking and setting expectations more clear by breaking away from PHP’s built-in mocking concepts.

I welcome comments and suggestions at the Github page! As always, I hope it ends up being useful to other people.

An iframe without a url

Sometimes you need to display html inside an iframe, but it’s not at a URL. Perhaps you got the markup from an API endpoint or generated it yourself. Maybe the markup is from a different domain and you need to be able to manipulate its DOM without cross-origin errors. For all these reasons, I created MarkupFrame.

A React component to display raw html markup inside an iframe

In several projects I’ve worked on recently I’ve wanted to treat the contents of an iframe as data, fetching it from an API, manipulating it directly using cheerio, and directly reaching into the iframe’s DOM to adjust the elements inside without hitting cross-domain errors.

Normally iframes are set up in such a way that these things are difficult, but there’s a trick:

iframe.contentWindow.document.open();
iframe.contentWindow.document.write( content );
iframe.contentWindow.document.close();

Those three lines allow us to inject html markup directly into the iframe, where the browser will render it: CSS, scripts, and all.

MarkupFrame takes those three lines of magic and wraps them in a React component to use in your application. You can install it using npm:

npm install markup-frame

Then just use the markup prop like this (JSX syntax):

<MarkupFrame markup={ '<h1>hello world</h1>' } />

There’s also a prop called onLoad which is a function that will be called when the markup is finished loading. The callback will be passed a reference to the document object of the iframe, which lets you directly manipulate the DOM (I know: isn’t that what React is supposed to prevent? Yes, but inside the iframe it’s a whole other world.)

...
render: function() {
  var onLoad = function( previewDocument ) {
    previewDocument.querySelector( 'h1' ).innerHTML = 'hello markup-frame';
  };
  return <MarkupFrame markup={ '<h1>hello world</h1>' } onLoad={ onLoad } />;
}
...

This has certainly been helpful to me. I hope it’s helpful to you too! The GitHub repo is here if you want to report any issues or contribute!

Caveat Lector:

Some JavaScript rendered inside an iframe like this doesn’t work correctly since it often makes assumptions about the page having a URL.

Following (clicking) on a link inside an iframe like this will load the resulting page inside the iframe, but then the iframe contents will probably no longer be accessible via its contentWindow.document object without throwing a cross-domain error. For this reason it’s recommended to disable clicking on links using the onClick prop.

Declarative vs. Imperative Soup

I remember not too long ago (I think this was about the time that React first came out) I was trying to understand what people meant when they said that it was “declarative” vs. “imperative”. Looking up the terms at the time didn’t enlighten me much. Mostly articles seemed to focus on the difference between Object-Oriented or Procedural languages and Functional languages. Since I was looking for an explanation within one (Procedural) programming language, that answer was not helpful.

Since then I’ve become a proponent of many functional programming concepts which, I think, have made my code easier to read and understand. If I had to summarize my progress, I would probably say that I’ve learned to to program more declaratively. So even if my definition is slightly different, here’s what Declarative programming means to me.

If I were to ask a chef to make me some soup, I might ask:

Could you make me some roasted butternut squash soup, please?

The chef would likely have little trouble cutting, peeling, roasting, blending, and spicing that dish. On the other hand, if I asked the same question to a past version of myself when I was in university, I would have had absolutely no idea what to do. Why? Because I’d never roasted a squash before.

On the other hand, what if I prepared a full recipe?

Could you make me some roasted butternut squash soup as described in these 10 steps?

The chef would probably look at the recipe and be able to follow it with just a glance. My teenaged self would have to examine each and every line, but he’d probably also be able to make the soup without burning anything.

The difference is that the first question is Imperative; it implies a whole subset of knowledge about cooking that not everyone will have. The second question is Declarative; it makes far fewer assumptions about the knowledge of the person on the other end and thus is more universal. Even if the chef was the one preparing the dish, it’s more likely that the soup will turn out the way I want if I provide a recipe. Because who knows? Maybe the chef likes to add heavy cream to all their soup, and that’s not something I want to eat!

Writing declarative code involves a lot of dependency injection and “pure” functions; you provide the computer all the data it needs to perform a calculation, rather than assuming it will go find that data on its own. For me, this leads to fewer bugs and easier modifications, not to mention more readable code. If you’ve ever had to trace the path of a variable around ten different files, you know what I mean.

I’m still writing imperative code; I still use classes and objects, but I also use immutable data, dependency injection, and partial application. There’s no wrong way to use a programming language, but there is always room for improvement. I can’t wait to see what I’ll learn next.

JavaScript: Mocking Window

When I code in JavaScript I try to avoid using the window or document objects as much as possible, but sometimes there’s just no getting around them. Bootstrapping data from a server (eg: WordPress’s wp_localize_script), manipulating the DOM directly (eg: jQuery), or listening to viewport resize events all require touching the global window object.

Why is this trouble? Because it makes testing a real challenge. The easiest code to test is a pure function, which generally means a function without side-effects, but it also means a function which gets all its data from its arguments and not from some overarching state. Any global variable, like window, is effectively global state.

Fortunately for us, it’s relatively easy to mock a window object. If you’re bootstrapping data, you can just use a plain object. If you’re doing DOM things, you can use a library like jsdom. But let’s say you have a bunch of modules all accessing window in different places? As soon as we start requiring those modules in our tests, we’ll see failures because window will be null.

My answer, as seems to be the case a lot these days, is dependency injection. That is, directly providing our window object to the code before it runs. It might be awkward to pass window to every function which might want to use it, so instead we can create a module something like the following:

var windowObj = null;

module.exports = {
    setWindow: function( newWindowObj ) {
        windowObj = newWindowObj;
    }

    getWindow: function() {
        if ( ! windowObj && ! window ) {
            throw new Error( 'No window object found.' );
        }
        return windowObj || window;
    }
};

Now in other modules that need a window we write:

var getWindow = require( './helpers/window' ).getWindow;

function getSomethingFromTheDOM() {
    return getWindow().document.querySelector( '.something' );
}

By itself, that will work just as well as using window directly, and when we want to test the code, we can write this in a test helper:

var jsdom = require( 'jsdom' ).jsdom;
var setWindow = require( './helpers/window' ).setWindow;
setWindow( jsdom().defaultView ); 

Now all the calls to getWindow() will use our mock window object instead.