António Lopes alopes

Make React PropType warnings throw errors with enzyme.js + sinon.js + mocha.js

A simple stateless functional component that we want to test that it renders without propType warnings.

import React, { PropTypes } from 'react'

let VersionListItem = function ({ active, version }) {
  return (

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

	import { decode } from "blurhash"

	export function blurHashToDataURL(hash: string \| undefined): string \| undefined {
	if (!hash) return undefined

	const pixels = decode(hash, 32, 32)
	const dataURL = parsePixels(pixels, 32, 32)
	return dataURL
	}

	import { ApolloServerBase, Config, gql } from 'apollo-server-core'

	export class ApolloServer extends ApolloServerBase {
	protected override serverlessFramework(): boolean {
	return true
	}

	public async createHandler() {
	await this.ensureStarted()
	return async (request: Request) => {

	import React, { PropTypes } from 'react';

	const SegmentedControl = ({ input, disabled, heading, required, className, items, name, meta: { touched, error } }) => (
	<fieldset className={`form__field ${className \|\| ''}`}>

	<legend className="form__label">
	{heading}{required ? (<span>*</span>) : null}
	{ (touched && error) ? (
	<span className="form__error"> {error}</span>
	) : null }

	import AsyncComponent from './path/to/component';
	import request from 'your-request-library';

	import React from 'react';
	import {shallow} from 'enzyme';

	import Chance from 'chance';
	import chai, {expect} from 'chai';
	import sinon from 'sinon';
	import sinonChai from 'sinon-chai';

	# input: fullchain.pem and privkey.pem as generated by the "letsencrypt-auto" script when run with
	# the "auth" aka "certonly" subcommand

	# convert certificate chain + private key to the PKCS#12 file format
	openssl pkcs12 -export -out keystore.pkcs12 -in fullchain.pem -inkey privkey.pem

	# convert PKCS#12 file into Java keystore format
	keytool -importkeystore -srckeystore keystore.pkcs12 -srcstoretype PKCS12 -destkeystore keystore.jks

	# don't need the PKCS#12 file anymore

	<br /><br />
	# React Native: Animated

	ReactEurope 2015, Paris - Spencer Ahrens - Facebook

	<br /><br />

	## Fluid Interactions

	- People expect smooth, delightful experiences

	/**
	* The examples provided by Facebook are for non-commercial testing and
	* evaluation purposes only.
	*
	* Facebook reserves all rights not expressly granted.
	*
	* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
	* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
	* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
	* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN

	/* bling.js */
	window.$ = document.querySelector.bind(document);
	window.$$ = document.querySelectorAll.bind(document);
	Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
	NodeList.prototype.__proto__ = Array.prototype;
	NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };