Andris Sīlis andris-silis

Idiomatic React Testing Patterns

Testing React components seems simple at first. Then you need to test something that isn't a pure interaction and things seem to break down. These 4 patterns should help you write readable, flexible tests for the type of component you are testing.

Setup

I recommend doing all setup in the most functional way possible. If you can avoid it, don't set variables in a beforeEach. This will help ensure tests are isolated and make things a bit easier to reason about. I use a pattern that gives great defaults for each test example but allows every example to override props when needed:

Redux Chaos Monkey

This is a proof of concept which allows you to replay system events in a random order each time to make sure your UI can tolerate variable states.

I'm not sure if this is worthy of its on open source project with additional features like changing play back time, whitelisting/blacklisting actions etc but figured I'd put this out there to see if it piques anyones interest.

See a video of this in action here: [https://www.youtube.com/watch?v=wkoukONfwmA](Video on YouTube).

Note: This is a submission for a Reactive2015 lightning talk. If you'd like to see a lightning talk about this (or read a detailed blog post if you are not going for the conference), vote for it by starring this gist! Thanks a lot!

Advanced React.js Performance

Performance is one of the reasons why React.js is so popular for building complex, highly interactive web applications. It became the go-to library for developers who don’t like to make compromises for technical reasons when building awesome user experiences. However even with React.js it still can be easy to hit it’s performance limits.

In this lightning talk Daniel will go beyond the basics of shouldComponentUpdate and immutable data structures and will discuss how to correctly instrument, measure and optimize performance in complex React apps. He will help you understand the overhead of different parts of the React component lifecycle, how some of it’

In my proposed lightning talk for the Reactive Conference, I'll create Conway's Game of Life in ClojureScript, and I'll do it in five minutes. I'll use an interactive programming workflow enabled by Figwheel. Each piece will be added into the running application without reloading the page.

If you want to see a little cellular lifeform spawn out of nothing into an running web browser window, I'd appreciate it if you starred this Gist!

Cheers,

(@teropa)

Make bower and npm package install easy

This repo has some handy handy hooks to run bower update or npm install whenever you:

git checkout a new branch with a different package.json or bower.json
git pull a change to package.json or bower.json

	const immutableJSFormatter = {
	header(x) {
	if (x && x.toJS) return ['span', {}, x.toString()];
	return null;
	},
	hasBody(x) {
	return x && x.toJS;
	},
	body(x) {
	return ['span', {}, JSON.stringify(x.toJS(), null, 2)];

	// ------------
	// counterStore.js
	// ------------

	import {
	INCREMENT_COUNTER,
	DECREMENT_COUNTER
	} from '../constants/ActionTypes';

	const initialState = { counter: 0 };

	The MIT License (MIT)

	Copyright (c) 2014 Tomas Kafka

	Permission is hereby granted, free of charge, to any person obtaining a copy
	of this software and associated documentation files (the "Software"), to deal
	in the Software without restriction, including without limitation the rights
	to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
	copies of the Software, and to permit persons to whom the Software is
	furnished to do so, subject to the following conditions:

	var EventEmitter = require('events').EventEmitter,
	_ = require('lodash');

	/**
	* Creates an action functor object
	*/
	exports.createAction = function() {

	var action = new EventEmitter(),
	eventLabel = "action",

	window.console.clog = function(log){
	var message = typeof log === 'object' ? '%cLooks like you\'re trying to log an ' : '%cLooks like you\'re trying to log a ',
	style = 'background:url(http://i.imgur.com/SErVs5H.png);padding:5px 15px 142px 19px;line-height:280px;';
	console.log.call(console, message + typeof log + '.', style);
	};