Unit testing in WordPress

Posted January 1, 2016 by chris & filed under Open source software, Web development, WordPress.

One of the things I really appreciate about developing in the .Net stack is the fantastic unit test support. Using mocking libraries like moq and leaning on the power of nunit to handle my dependencies means I can write unit tests that truly do test just the unit under test. True unit tests are useful for three very important reasons:

That the code is doing what it should
That the code handles unexpected inputs correctly
That after refactoring the code continues to do what it did before

A robust, extensive suite of tests – both unit and integration tests – are crucial for good quality software and, fortunately, have been pretty common in the .Net development world for a long while.

When developing for WordPress, however, it’s not always been that way. I remember not so many years ago that test of any kind wasn’t something often talked about in the WordPress community. I guess we were focussed on getting code shipped.

Things have changed, and automated testing is now a recognised part of the WordPress development workflow. One of the problems with the WordPress Unit Test Suite, as pointed out by Greg Boone, is that it’s not actually a suite of unit tests – it has dependencies like a MySQL database, so would be more correctly called a suite of integrations tests. Pippin also calls these kind of tests “unit”, but they are definitely integration tests.

I’m at risk of over-egging this point, so please read this good description of the difference between unit and integration tests.

To ensure the large WordPress plugin I’m currently building is as good as it can be I want to build a suite of (true) unit tests. That means I need way of mocking WordPress functions (such as do_action, apply_filters and wp_insert_post) and globals such as $current_user and – crucially – $wpdb. It turns out there are a few options, which I’ve briefly investigated. I’ll be using WP_Mock and the PHPUnit test double features.

The well-known WP_Mock from the clever guys at 10up is the backbone of mocking WordPress. It allows you to mock any WordPress function with some simple syntax:

\WP_Mock::wpFunction( 'get_permalink', array(
            'args' => 42,
            'times' => 1,
            'return' => 'http://example.com/foo'
        ) );

This will mock the get_permalink method when the only argument is the integer 42, ensuring it is only called once, and returning the string ‘http://example.com/foo’. Clever stuff.

There are other static methods in the WP_Mock class which allow you to:

Mock a method which returns the same value (a pass-through method)
Mock the calling of filters and actions
Mock the setting of actions and filters

Mocking $wpdb turns out to be pretty simple, as I can use the built-in test double functionality in PHPUnit. Sample code in the MockPress project wiki shows I can do this:

// in my test setUp method:
global $wpdb;
unset($wpdb);

// whenever I want to mock a $wpdb function I set up the method to mock:
$wpdb = $this->getMock('wpdb', array('get_var'));
// and set the value I want to be returned from my mock method:
$wpdb->expects($this->once())->method('get_var')->will($this->returnValue(1);

// now I can check the mock returns what I want:
$result = $wpdb->get_var("select anything from anywhere");
$this->assertEquals(1, $result);

I now just have to ensure my code is written in such a way as to make unit testing easy! I can highly recommend The Art of Unit Testing by Roy Osherove if you want to get into this deeply.

WordPress Calypso

Posted November 24, 2015 by chris & filed under WordPress.

Recently Automattic have announced the release of Calypso, a next-generation interface to manage WordPress.com or Jetpack-enabled sites. It’s a very ambitious project, but I believe they have some of the best developers in the world. Plus Andy Peatling, who I’ve had a huge amount of respect for since he initiated the BuddyPress project, ran the team.

The interesting thing for developers is their choice of technology stack. Calypso is a single-page app, powered by Facebook’s React library, node.js, with data coming from the WordPress REST API. All mod cons, and the interface is certainly beautiful, easy to use and very fast.

But I have to admit I have concerns about single-page apps, and the “modern” approach of total reliance on JavaScript to power a UI. JavaScript is the least robust of the Holy Trinity of web technologies (HTML, CSS and JavaSscript) as it does not gracefully handle errors. Many sites fall into the trap of thinking they can rely on JavaScript when they can’t. CSS is in the same boat, although if you get *some* CSS then whatever you get will be used to style the page. If you get just *some* JavaScript the likelihood is that nothing will work. It’s clear that the only resource which we can really count on – and even then, it’s not 100% guaranteed – is the HTML.

So, using my favourite progressive enhancement testing tool (turning off JavaScript), what do you see in Calypso when javaScript fails? This:

Unfortunately there’s nothing there, just the WordPress logo. Perhaps showing the “unsupported” message by default would be better, as this is what the Calypso app redirects to wordpress.com/browsehappy if the browser doesn’t support some modern JavaScript APIs or is iOS version 5 or earlier.

Here’s the (JavaScript) code that checks whether the browser cuts the mustard, with comments from me:

(function() {
    function isSupported() {
        var ios, version, ua;
        ua = window.navigator.userAgent;
        // check if the browser supports window.history, which allows changing the displayed URL without refreshing the page
        if ( ! window.history ||
            ! window.history.pushState ||
            ! window.history.replaceState ||
            ! ( '__proto__' in Object.prototype )
        ) {
            return false;
        }
        function getFirstMatch( regex ) {
            var match = ua.match( regex );
            return ( match && match.length > 1 && match[1] ) || '';
        }
        ios = getFirstMatch( /(ipod|iphone|ipad)/i ).toLowerCase();
        version = getFirstMatch( /version\/(\d+(\.\d+)? )/i );
        // check if the browser looks like iOS version 5 or earlier
        if ( ios && version < 6 ) {
        // disable for now because it is breaking Chrome on iOS
        //return false;
        }
        // if we get here we know we can run the app
        return true;
    }
    if ( ! isSupported() ) {
        window.location = 'https://wordpress.com/browsehappy?url=' + encodeURIComponent( window.location );
    }
})();

And this is the “unsupported” message (with cute Nessie image):

OK, on to performance. As I’ve mentioned Calypso feels really fast. One of the principles for the project was speed, and it shows. It’s also responsive, which for a powerful “app” such as this is no mean feat.

The resource stats show that it’s pretty big, however (this is from Google Chrome dev tools for a new post edit page):

The breakdown of requests shows a large amount of JavaScript (as you’d expect) and quite a lot of CSS:

Resource type	Requests	Total filesize
All	93	1.9mb
HTML	1	2.2kb
CSS	22	322kb
JavaScript	17	1.4mb
Images	12	13.5kb
Fonts	17	137kb

I was surprised at the amount of web fonts, which led me to look at the dependencies on other domains. Here’s how that breaks down (again, this is for a edit post page):

Domain	Requests	Description
gravatar.com	7	Avatars
fonts.googleapis.com	5	Web font stylesheets
fonts.gstatic.com	11	Web fonts
wp.com	34	Stats collection, jQuery, stylesheets, favicons and widget HTML
wordpress.com	13	Stylesheets, main JavaScript files
google-analytics.com	2	Analytics tracking
olark.com	1	Chat facility, presumably for customer support

I ignored subdomains and XHR requests (which are the requests to the API to get data) for this table.

Better stats that don’t rely on me manually counting rows in dev tools could be got from WebPageTest, and I may do that when I figure out how to get WebPageTest to log in to Calypso.

My conclusion from this very quick investigation is that while Calypso is a very slick web app (whatever “web app may mean) its total reliance on JavaScript means it could easily break for users on low-powered devices or using it dodgy network conditions. If the aim of WordPress is to democratise publishing then this has to be for users is the worst of browsing scenarios as well as those of us lucky enough to have fast machines, modern browsers, and fast and stable networks.

My belief is that the WordPress team know this, and that work is already under way inside Automattic to enable things like server-side rendering and handling of POST requests. And, in the mean time, the classic admin interface is still available.

What this means for the huge plugin ecosystem will be very interesting to find out. That’s a topic for another post!

Crash Test Dummies

Posted November 15, 2015 by chris & filed under Web development.

No, this isn’t a post about the band. It’s about real crash testing, also known as progressive enhancement testing.

Of course, this had to be Another Progressive Enhancement Post, didn’t it!

Ever thought about why car manufacturers test their cars under crash conditions? Is it because people deliberately drive their cars into walls or ditches? No; not usually, anyway. They test the safety of their cars because we live in an unpredictable world where things go wrong, all the time. Exceptional circumstances surround us every single day. Often we experience near misses – sometimes we’re no so lucky.

In fact, things go wrong on the roads so often that we’ve created thousands laws and guidelines that try to minimise the possibility of these exceptional circumstances occurring. We have speed limits and training before anyone can get behind the wheel of a car. We have street lighting and pedestrian crossings, kerbstones and crash barriers.

Yet things still go wrong on our roads. Sometimes through carelessness and stupidity, sometimes though negligence. Sometimes the blame can’t really be applied to anyone in particular.

Car manufacturers invest in making their cars safe, so that when the unexpected happens – which, at some point, it will – the occupants and other road users are kept as safe as possible. We expect nothing less, and safety features are rightly promoted to help sell cars. That’s good; we should strive to create a safer world where possible.

Yet on the web it’s a different story. No-one believes that things never go wrong online. In fact in my experience there’s rarely a web browsing session where something didn’t break. Images fail to load, sites respond so slowly they appear to be down, JavaScript throws an error because two scripts from different 3rd parties can’t co-exist, web fonts don’t load and so text is invisible. The list of what could – and often does – go wrong when loading websites goes on, and on, and on.

What’s happening here? Do we as web developers, designers, business owners not realise the inherent unpredictability of the Internet? Do we not understand that the web was designed to be like this – to keep going even if all that is delivered to the browser is the HTML? No, many of us understand but sweep this reality under the carpet.

We are dummies.

We’re dummies because we chase after the latest JavaScript framework-du-jour without considering if it supports the core principles of the web. We overload our pages with unoptimised images and gargantuan CSS files generated by a pre-processor. We fail to deliver first and foremost what our users fundamentally require – the content.

We’re dummies because we leave the crash testing to our users – the very people we should be protecting from those exceptional circumstances! And then we have the gall to complain that they aren’t using the latest browser or operating system, or that their device is underpowered. Here’s the reality for you: even when browsing conditions are optimal, things still often go wrong.

So, in my opinion are JavaScript frameworks bad? Do I detest CSS pre-processors? Do I have an allergy to beautiful imagery online? No, of course not. It’s our use of these tools which I rail against. Enhance your pages as mush as you want, but start from the beginning. Semantic HTML content and forms.

Don’t be a dummy.

Sunday is Link Day!

Posted November 15, 2015 by chris & filed under Link Day.

Business / project management

“Case studies and experiments demonstrating the impact of performance optimization on user experience and business metrics.”: http://wpostats.com/

It’s always the right time to revisit the beans-up-noses article: https://medium.com/uie-brain-sparks/beans-and-noses-21c16ac5cade

Uncle Bob chimes in on Volkswagen: http://blog.8thlight.com/uncle-bob/2015/10/14/VW.html

“Welcome to Traction Stack, a curated directory of marketing resources from six years of research for Traction, the bestselling book that helps businesses and projects of all kinds get traction.”: http://tractionstack.com/

Prevent feature creep: http://www.productstrategymeanssayingno.com/

How to avoid personalisation project pitfalls: https://econsultancy.com/blog/66819-how-to-avoid-personalisation-project-pitfalls/

Mobile

Google tells business leaders not to concentrate on mobile apps: http://uk.businessinsider.com/google-exec-says-mobile-apps-confuse-consumers-2015-11

And the stats show that hoping your mobile app will become popular is like hoping you’ll win the lottery: https://medium.com/swlh/mobile-app-developers-are-suffering-a5636c57d576

Case study on having push notifications in a web app: https://developers.google.com/web/showcase/case-study/beyond-the-rack

A good overview of the different ways of implementing web apps for mobile: https://medium.com/@franciov/installable-pinned-or-progressive-apps-5b4997ecbf49

Wait, what? Mobile browser traffic is 2X bigger than app traffic, and growing faster: http://venturebeat.com/2015/09/25/wait-what-mobile-browser-traffic-is-2x-bigger-than-app-traffic-and-growing-faster/

A publishing company abandons native apps: https://atavistinsider.atavist.com/goodbye-native-mobile-apps/

Design

From pages to patterns – practical tips for moving to modular design: http://alistapart.com/article/from-pages-to-patterns-an-exercise-for-everyone

Lovely UI: a collection of mobile UI elements: http://www.lovelyui.com/

Loads of responsive navigation examples: http://navnav.co/

Not sure if I’ve linked to this Designing for Performance book; if not I apologise: http://designingforperformance.com/

Using web fonts the best way: https://helloanselm.com/2015/using-webfonts-in-2015/

gov.uk design principles: https://www.gov.uk/design-principles

Even the U.S. government has a style guide now: https://playbook.cio.gov/designstandards/

Design thinking comes of age: https://hbr.org/2015/09/design-thinking-comes-of-age

Web field manual – lots of good design resources: http://webfieldmanual.com/

Performance

Adding custom performance metrics: https://speedcurve.com/blog/user-timing-and-custom-metrics/

Transcript and slides for Scott Jehl’s talk “Delivering Responsibly”: https://www.filamentgroup.com/lab/delivering-responsibly.html

Fantastic idea – Facebook will slow down their network every Tuesday so employees can experience the web as most of the world does: http://uk.businessinsider.com/facebook-2g-tuesdays-to-slow-employee-internet-speeds-down-2015-10?op=1?r=US&IR=T

The ad industry is starting to realise they are a big part of the performance problem: http://www.iab.com/news/lean/

Consumers still value performance over content: http://www.marketingcharts.com/online/consumers-still-value-performance-over-content-in-the-website-experience-60553/attachment/limelight-consumer-website-experience-expectations-oct2015/

Zeldman, the godfather of the web, reflects on performance over the years: http://www.zeldman.com/2015/10/21/web-performance-today/

Great front-end performance primer for full-stack (i.e. back-end) devs: http://www.nateberkopec.com/2015/10/07/frontend-performance-chrome-timeline.html

Calculate a performance budget: http://www.performancebudget.io/

Web font anti-patterns: http://bramstein.com/writing/web-font-anti-patterns.html

Accessibility

Ever wondered what screen readers actually sound like? Here: http://thepaciellogroup.github.io/AT-browser-tests/

Accessibility wins – showcasing good accessibility: http://a11ywins.tumblr.com/

Using the tabindex attribute: https://www.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/

A11y Rocks! An album for accessibility: https://heydon.selz.com/item/560c04b8b798720c187917e6

Simple guide to web accessibility testing: http://www.softwaretestinghelp.com/what-is-web-accessibility-testing/

Super-quick accessibility testing – just add a CSS file: http://www.karlgroves.com/2013/09/07/diagnostic-css-super-quick-web-accessibility-testing/

Progressive enhancement

Jake Archibald on implementing modern progressive enhancement: https://vimeo.com/144768071

Flipkart changed from having a native app to a progressive website: http://tech-blog.flipkart.net/2015/11/progressive-web-app/

Building an offline page for the Guardian: https://www.theguardian.com/info/developer-blog/2015/nov/04/building-an-offline-page-for-theguardiancom

There are no “buts” in progressive enhancement (slides): http://www.slideshare.net/AaronGustafson/there-are-no-buts-in-progressive-enhancement-redev-2015

Jason Garber bangs on about it. You must be getting the message by now, yes? http://sixtwothree.org/posts/designing-experience-layers

Good collection of resources: http://dsgnwrks.pro/resources/why-you-we-should-care-about-disabled-javascript/

A big deal: Google advocates progressive enhancement to help with SEO: http://googlewebmastercentral.blogspot.co.uk/2015/10/deprecating-our-ajax-crawling-scheme.html

Resources, tools, libraries, all that good stuff

Bing have a mobile friendliness checker: https://blogs.bing.com/webmaster/2015/11/12/mobile-friendly-test

There’s a whole new post-CMS world out there: http://www.thenewdynamic.org/

“The one-stop place to find the information and tools you need to help you learn, build, and move the web forward.”: http://www.w3.org/developers/

Fantastic interactive site showcasing Firefox’s dev tools: http://devtoolschallenger.com/

See who’s tracking you online with this Firefox add-on: https://www.mozilla.org/en-US/lightbeam/

Firefox also have a really useful screenshot command: http://meyerweb.com/eric/thoughts/2015/10/22/firefoxs-screenshot-command/

The search engine for source code: http://nerdydata.com/ (limited results, but I quickly found a site using one of my Open Source libraries)

Load testing for websites and APIs: https://loadfocus.com

An image comparison tool, can be put into a build process to check for visual regression: http://yahoo.github.io/blink-diff/

Passwordless authentication: https://auth0.com/blog/2015/09/30/auth0-passwordless-email-authentication-and-sms-login-without-passwords/

Lots of documentation in one place: http://devdocs.io/

Geek life

What’s that? A browser API for taking payments? Yes please: https://github.com/WICG/web-payments-browser-api

New HTML elements proposed: <panel> and <panelset>: http://radar.oreilly.com/2015/11/panels-and-panel-sets.html

A think-piece on the changing form of the browser: http://rehabstudio.com/thinking/the-changing-form-of-the-web-browser/

Technical debt: more than just code: https://the-pastry-box-project.net/kate-daly/2015-October-11

FLIF – free lossless image format: http://flif.info/

HTTP is obsolete. It’s time for the distributed, permanent web: https://blog.neocities.org/its-time-for-the-permanent-web.html

Google is 2 billion lines of code, in one repository: http://www.wired.com/2015/09/google-2-billion-lines-codeand-one-place/

Designing for accountability, designing for broken-ness: http://russelldavies.typepad.com/planning/2015/09/designing-for-accountability-designing-for-broken-ness.html

Development

Guidelines on implementing REST, from the NSA (TL;DNR: put a back-door in it for us … not really :0): http://jaco.by/2015/11/06/the-nsas-guidelines-for-implementation-of-rest/

The Terence McGhee Software Ninja Class Hierarchy: http://terencemcghee.com/FileStore/Tech/1D0C454A70AC3AEF01BB1BAAD94C8753.html

Uncle Bob on making things future proof: http://blog.8thlight.com/uncle-bob/2015/10/30/futureproof.html

Is programming poetry? https://medium.com/unpublishable-elsewhere/is-programming-poetry-aa137a2ac3ca#.gb2egezd1

Who Dictates Software Quality: Client or Coder?: http://www.bitnative.com/2014/01/28/who-chooses-quality-client-or-coder/

Front-end developer handbook: http://www.frontendhandbook.com/

The configuration complexity clock: http://mikehadlow.blogspot.dk/2012/05/configuration-complexity-clock.html

Programming sucks: http://www.stilldrinking.org/programming-sucks

CSS

Experiments from Jen Simmons: http://labs.thewebahead.net/

Create and maintain style guides using CSS comments: https://github.com/jonathantneal/mdcss

Nice example of a generic CSS system: http://corpuscss.com/

Making the cascade your friend: http://simurai.com/blog/2015/09/09/back-to-the-roots/

Free e-book – transforms in CSS by Eric Meyer: http://www.oreilly.com/free/transforms-in-css.csp

Flexbox cheatsheet: http://jonibologna.com/flexbox-cheatsheet/

JavaScript

Some useful JavaScript utilities, including a C#-like stringFormat: https://github.com/michd/js-util

Making a site work offline with Service Worker: https://css-tricks.com/serviceworker-for-offline/

Using the oninput event handler with onkeyup/onkeydown as its fallback: https://mathiasbynens.be/notes/oninput (note to self: do this)

Stats on the performance of different JavaScript frameworks on mobile devices: https://joreteg.com/blog/viability-of-js-frameworks-on-mobile (I don’t hide the fact I’m unconvinced by the current obsession with frameworks)

Content aware image cropping: https://github.com/jwagner/smartcrop.js

The definitive source of the best JavaScript libraries, frameworks, and plugins.: https://www.javascripting.com/

Copy text to the users clipboard: http://zenorocha.github.io/clipboard.js/

12 rules for professional JavaScript: https://medium.com/@housecor/12-rules-for-professional-javascript-in-2015-f158e7d3f0fc

The looping evolution: http://developer.telerik.com/featured/the-javascript-looping-evolution/

Write a flowchart in text, see it instantly updated: http://adrai.github.io/flowchart.js/

And finally…

Convert images to LEGO: https://github.com/Wildhoney/Legofy

The wah wah machine. If this doesn’t make you smile you have no soul: http://www.wahwahmachine.com/

Like maps? Go down a mappy rabbit hole: https://mapzen.com/blog/escape-from-mercator

Magic playlist – song suggestions based on what you like: http://magicplaylist.co/

Visualise events in history (powered by Wikipedia): http://histography.io/

A new way to choose what to read next: http://www.openingthebook.com/whichbook/

Wednesday is Link Day!

Posted September 15, 2015 by chris & filed under Link Day.

Business / Working Life

Data is not an asset, it’s a liability: https://www.richie.fi/blog/data-is-a-liability.html

Strategic procrastination: https://the-pastry-box-project.net/erin-mckean/2015-September-11

Putting on the shipping goggles: https://signalvnoise.com/posts/3931-putting-on-the-shipping-goggles (if you’re not a regular reader of Signal vs Noise then you should be)

Reduce the distance between the people who make decisions about the product and the people who build the product: http://alistapart.com/column/the-distance-to-here

Everything is broken: https://medium.com/message/everything-is-broken-81e5f33a24e1

Fluid coupling: When exactly did enterprises become late adopters of technology? http://www.asymco.com/2015/08/31/fluid-coupling/

Preparing organisations to become design-infused: https://medium.com/uie-brain-sparks/preparing-organizations-to-become-design-infused-8a0d93b50d36

New, responsive design reduces bounce rate at asda.com by 37%: http://www.retailtimes.co.uk/new-responsive-design-reduces-bounce-rate-at-asda-com-by-37/

Design

Little Big Details: taking inspiration from the little details that make designs great: http://littlebigdetails.com/

Predictive personas: http://blog.invisionapp.com/predictive-personas/ quote: ‘…the question they should be asking themselves isn’t, “If I interviewed a user, would this describe her?” The question should be, “If I found a person like this, would she become a user?”’

Forget about the mobile Internet: http://ben-evans.com/benedictevans/2015/9/1/forget-about-mobile-internet

The gov.uk style guide: http://govuk-elements.herokuapp.com/ (other examples available on http://styleguides.io/)

Style guide from Salesforce: https://www.lightningdesignsystem.com/

Improving the checkout experience with animations: https://medium.com/bridge-collection/improve-the-payment-experience-with-animations-3d1b0a9b810e (but read the article below…)

Design safer animation for motion sensitivity: http://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity

Design patterns: http://ui-patterns.com/patterns

Front-end principles for designers: http://jonyablonski.com/2015/front-end-principles-for-designers/

The language of modular design: http://alistapart.com/article/language-of-modular-design

How modern web design works: http://thetomorrowlab.com/2014/04/modern-web-design-works/

Progressive enhancement / Performance

Bruce Lawson’s talk “Ensuring a performant web for the next billion people”: https://dev.opera.com/articles/making-sites-work-opera-mini/ (Opera Mini is a popular browser for those with low-powered and low-bandwidth devices)

Aaron Gustafson with a timely reminder that we don’t really control our web pages: https://www.aaron-gustafson.com/notebook/more-proof-we-dont-control-our-web-pages/

Jeremy Keith’s presentation on progressive enhancement from May: https://adactio.com/articles/9465 (video and full transcript)

Preloading, prefetching, prebrowsing: https://css-tricks.com/prefetching-preloading-prebrowsing/

Embracing the network: modern techniques for building resilient front ends: https://speakerdeck.com/patrickhamann/embracing-the-network-coldfront-september-2015(slide deck, no video published yet)

A beginners guide to website speed optimisation: https://kinsta.com/learn/page-speed/

User experience / Usability / Accessibility

The psychological speed of mobile interfaces: https://medium.com/ui-collection/the-psychological-speed-of-mobile-interfaces-df25276295dd (this is much the same as “perceived performance” which I bang on about)

The device context continuum – where does the common device context continuum start and end? http://blog.cloudfour.com/on-the-device-context-continuum/ (hint: it doesn’t)

Hello, my name is <Error>: http://alistapart.com/article/hello-my-name-is-error

Living with bull: http://tinyurl.com/bullshoot

How to write an error message: https://medium.com/@thomasfuchs/how-to-write-an-error-message-883718173322

Visual ARIA bookmarklet: http://whatsock.com/training/matrices/visual-aria.htm