From b56734e944e66f98bfb71cfdde47bb4342fef5d4 Mon Sep 17 00:00:00 2001
From: Jamie Wong <jamie.lf.wong@gmail.com>
Date: Thu, 16 Jun 2016 13:33:28 -0400
Subject: [PATCH] Introduce StyleSheetTestUtils to make writing tests for
 Aphrodite easier

Imagine you're trying to introduce Aphrodite gradually into an existing codebase
that already has extensive test coverage for rendering components.

If those tests are run in node without any fake DOM being constructed, your
previously working tests will now fail with the following error:

     Error: Cannot automatically buffer without a document

The introduction of StyleSheetTestUtils makes it easy to suppress such problems
by preventing Aphrodite from trying to interact with the DOM at all.

The new API would be usable in your tests like so (using Mocha syntax for
demonstration purposes):

    import { StyleSheetTestUtils } from 'aphrodite';

    beforeEach(() => {
        StyleSheetTestUtils.suppressStyleInjection();
    });

    afterEach(() => {
        StyleSheetTestUtils.clearBufferAndResumeStyleInjection();
    });

Meant to solve the problem presented in #41
---
 src/index.js        | 34 ++++++++++++++++++++++++++++++++++
 tests/index_test.js | 28 +++++++++++++++++++++++++++-
 2 files changed, 61 insertions(+), 1 deletion(-)

diff --git a/src/index.js b/src/index.js
index 21b8573..8a84cb7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -22,6 +22,9 @@ const StyleSheet = {
     },
 };
 
+/**
+ * Utilities for using Aphrodite server-side.
+ */
 const StyleSheetServer = {
     renderStatic(renderFunc) {
         reset();
@@ -39,6 +42,36 @@ const StyleSheetServer = {
     },
 };
 
+/**
+ * Utilities for using Aphrodite in tests.
+ *
+ * Not meant to be used in production.
+ */
+const StyleSheetTestUtils = {
+    /**
+     * Prevent styles from being injected into the DOM.
+     *
+     * This is useful in situations where you'd like to test rendering UI
+     * components which use Aphrodite without any of the side-effects of
+     * Aphrodite happening. Particularly useful for testing the output of
+     * components when you have no DOM, e.g. testing in Node without a fake DOM.
+     *
+     * Should be paired with a subsequent call to
+     * clearBufferAndResumeStyleInjection.
+     */
+    suppressStyleInjection() {
+        reset();
+        startBuffering();
+    },
+
+    /**
+     * Opposite method of preventStyleInject.
+     */
+    clearBufferAndResumeStyleInjection() {
+        reset();
+    },
+};
+
 const css = (...styleDefinitions) => {
     // Filter out falsy values from the input, to allow for
     // `css(a, test && c)`
@@ -59,5 +92,6 @@ const css = (...styleDefinitions) => {
 export default {
     StyleSheet,
     StyleSheetServer,
+    StyleSheetTestUtils,
     css,
 };
diff --git a/tests/index_test.js b/tests/index_test.js
index 4566599..e46c681 100644
--- a/tests/index_test.js
+++ b/tests/index_test.js
@@ -2,7 +2,12 @@ import asap from 'asap';
 import {assert} from 'chai';
 import jsdom from 'jsdom';
 
-import { StyleSheet, StyleSheetServer, css } from '../src/index.js';
+import {
+  StyleSheet,
+  StyleSheetServer,
+  StyleSheetTestUtils,
+  css
+} from '../src/index.js';
 import { reset } from '../src/inject.js';
 
 describe('css', () => {
@@ -344,3 +349,24 @@ describe('StyleSheetServer.renderStatic', () => {
         assert.equal(newRet.css.content, "");
     });
 });
+
+describe('StyleSheetTestUtils.suppressStyleInjection', () => {
+    beforeEach(() => {
+        StyleSheetTestUtils.suppressStyleInjection();
+    });
+
+    afterEach(() => {
+        StyleSheetTestUtils.clearBufferAndResumeStyleInjection();
+    });
+
+    it('allows css to be called without requiring a DOM', (done) => {
+        const sheet = StyleSheet.create({
+            red: {
+                color: 'red',
+            },
+        });
+
+        css(sheet.red);
+        asap(done);
+    });
+});