kolodny

Visual Regression Testing with Jest

This is a walkthrough of how to set up Visual Regression Testing with Jest for an application created with create-react-app.

The following walkthrough uses React as an example, but the approach should work for any modern frontend library! I assume it can be used with Angular, Vue, Cycle.js and more.

This gist walks you through a create-react-app application as an example of how to set up Visual Regression Testing in Jest using libraries I wrote recently which enable this: jsdom-screenshot, jest-transform-css and jest-transform-file.

kolodny

In this tutorial we're going to build a set of parser combinators.

What is a parser combinator?

We'll answer the above question in 2 steps

1. what is a parser?
2. and.. what is a parser combinator?

So first question: What is parser?

kolodny

let cache = new Map();
let pending = new Map();

function fetchTextSync(url) {
  if (cache.has(url)) {
    return cache.get(url);
  }
  if (pending.has(url)) {
    throw pending.get(url);
  }

kolodny

'use strict'

// see: https://github.com/nodejs/node/pull/6157

var startTime  = process.hrtime()
var startUsage = process.cpuUsage()

// spin the CPU for 500 milliseconds
var now = Date.now()
while (Date.now() - now < 500)

kolodny

// https://github.com/kolodny/immutability-helper

/** Declaration extension point */
declare namespace ImmutabilityHelper {
    interface CustomOperators<T> {
        /* $someShit?: T */
        /* $moreShit?: T */
    }
}

kolodny

import {renderToStaticMarkup} from 'react-dom/server';
import {html as beautifyHTML} from 'js-beautify';
import {diffWords} from 'diff';
import chalk from 'chalk';
import {fail} from 'assert';

const colors = new chalk.constructor({
  enabled: !!global.top.karma
});

kolodny

// Simple proxy/forwarding server for when you don't want to have to add CORS during development.

// Usage: node proxy.js
//    Open browser and navigate to http://localhost:9100/[url]
//      Example: http://localhost:9100/http://www.google.com

// This is *NOT* for anything outside local development. It has zero error handling among other glaring problems.

// This started as code I grabbed from this SO question: http://stackoverflow.com/a/13472952/670023

kolodny

#!/bin/bash

# --------------------------------
# Totally Simple Web Server (TSWS)
# --------------------------------
#
#  (c) 2015 Dave Fletcher
#  All Rights Reserved
#
#  This is free and unencumbered software released into the public domain.

kolodny

// give it a name so it reuses the same window
var win = window.open(null, "redux-devtools", "menubar=no,location=no,resizable=yes,scrollbars=no,status=no");

// reload in case it's reusing the same window with the old content
win.location.reload();

// wait a little bit for it to reload, then render
setTimeout(function() {
    React.render(
        <DebugPanel top right bottom left >

kolodny

Copied from http://code.lancepollard.com/complete-list-of-html-meta-tags/

Basic HTML Meta Tags

<meta charset='UTF-8'>
<meta name='keywords' content='your, tags'>
<meta name='description' content='150 words'>
<meta name='subject' content='your website's subject'>
<meta name='copyright' content='company name'>