mik01aj/mochatest.js

## mochatest.js
/* eslint max-nested-callbacks: 0, no-console: 0 */
/* global STYLEGUIDE_LOADER_OPTIONS:false */

console.log('\n\n*** RUNNING TEST ***');

var _ = require('lodash');
var babel = require('babel-core');
var babelConfig = require('../package.json').babel;
var React = require('react');
var TestUtils = require('react-addons-test-utils');

// Installing testdom to mock Browser APIs.
// See also: http://www.asbjornenge.com/wwc/testing_react_components.html
require('testdom')('<html><body></body></html>');

// Some additional stubs, needed by our components
global.File = function FileStub() {};
global.FileReader = function FileReaderStub() {};
global.FileReader.prototype.readAsDataURL = function () {};

// Initializing Babel, otherwise first test would time out.
babel.transform('<div />', babelConfig);

let {sections} = require('!!styleguide?' + STYLEGUIDE_LOADER_OPTIONS + '!');

// Setting up globals for examples
global._ = _;
global.React = React;
_.forEach(sections, section => {
    _.forEach(section.components, component => {
        global[component.nameFallbak] = component.module;
    });
});

// Overriding console.error so that it will fail the test (useful for propTypes validation)
console.error = function(message) {
    throw new Error(message);
};

_.forEach(sections, section => {
    describe(section.name + ' section', function() {
        _.forEach(section.components, component => {
            describe(component.nameFallbak, function() {
                var codeChunks = _.filter(component.examples, {type: 'code'});
                _.forEach(codeChunks, (chunk, index) => {
                    it(`should work as in example ${index+1}`, () => {
                        runTestForSingleExample(chunk);
                    });
                });
            });
        });
    });
});


function runTestForSingleExample ({content, evalInContext}) {

    let compiledCode = babel.transform(content, babelConfig).code;

    // The code snippets are from react-styleguidist/src/rsg-components/Preview/Preview.js
    // The evalInContext API is: evalInContext(code)(state, setState, initialStateCallback)

    let initialState = {};
    evalInContext(`
        var React = {createElement: _.noop, createClass: _.noop}; // Workaround for https://github.com/sapegin/react-styleguidist/issues/155
        var initialState = {};
        ${compiledCode}
        __initialStateCB(initialState);
    `)(
        {}, // state
        () => { throw new Error('setState is not allowed in definition'); },
        x => { initialState = x; }
    );

    let vDom = evalInContext(`
        var initialState = {};
        return eval(${JSON.stringify(compiledCode)});
    `)(
        initialState, // state
        _.noop, // setState
        null // initialStateCallback
    );

    TestUtils.renderIntoDocument(vDom);
}

## package.json
{
  ...
  "scripts": {
    "styleguide-server": "styleguidist server --config styleguide/styleguide.config.js",
    "styleguide-build": "styleguidist build --config styleguide/styleguide.config.js",
    "styleguide-buildtest": "webpack --config webpack.test.config.js './mochatest.js'",
    "styleguide-runtest": "NODE_ENV=test mocha dist/tests.js",
    "styleguide-test": "npm -s run styleguide-buildtest && npm -s run styleguide-runtest",
  }
}

## webpack.test.config.js
'use strict';

var _ = require('lodash');
var path = require('path');
var webpack = require('webpack');
var packageJson = require('./package.json');

module.exports = {
    output: {
        libraryTarget: 'commonjs2',
        path: __dirname + '/dist',
        filename: 'tests.js',
        pathinfo: true,
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                loader: 'babel',
                exclude: path.resolve(__dirname, 'node_modules'),
            },
            {
                test: /\.json?$/,
                loader: 'json',
                exclude: path.resolve(__dirname, 'node_modules'),
            },

            {
                test: /\.scss$/,
                loader: 'style!css!postcss!resolve-url!sass',
            },

            // Images and other assets: inline base64 URLs for <=8k files, direct URLs for the rest
            {test: /\.(png|jpg|gif|eot|woff|woff2|ttf|svg)$/, loader: 'url?limit=8192'},
        ],
    },
    externals: _.flatten([
        // https://github.com/webpack/webpack/issues/839#issuecomment-76738356
        _.keys(packageJson.dependencies),
        _.keys(packageJson.devDependencies),
        [
            'path', 'fs', // Node core modules
            'tether-browserify/tether', // This is how we require it, we need to list it here too
        ],
    ]),
    resolve: {
        extensions: ['', '.js', '.jsx'],
    },
    resolveLoader: {
        modulesDirectories: [
            'node_modules/react-styleguidist/loaders',
            'node_modules',
        ],
    },
    plugins: [
        new webpack.DefinePlugin({
            'CONFIG_PATH': JSON.stringify(require.resolve('./styleguide/styleguide.config')),
        }),
    ],

};
	/* eslint max-nested-callbacks: 0, no-console: 0 */
	/* global STYLEGUIDE_LOADER_OPTIONS:false */

	console.log('\n\n* RUNNING TEST *');

	var _ = require('lodash');
	var babel = require('babel-core');
	var babelConfig = require('../package.json').babel;
	var React = require('react');
	var TestUtils = require('react-addons-test-utils');

	// Installing testdom to mock Browser APIs.
	// See also: http://www.asbjornenge.com/wwc/testing_react_components.html
	require('testdom')('<html><body></body></html>');

	// Some additional stubs, needed by our components
	global.File = function FileStub() {};
	global.FileReader = function FileReaderStub() {};
	global.FileReader.prototype.readAsDataURL = function () {};

	// Initializing Babel, otherwise first test would time out.
	babel.transform('<div />', babelConfig);

	let {sections} = require('!!styleguide?' + STYLEGUIDE_LOADER_OPTIONS + '!');

	// Setting up globals for examples
	global._ = _;
	global.React = React;
	_.forEach(sections, section => {
	_.forEach(section.components, component => {
	global[component.nameFallbak] = component.module;
	});
	});

	// Overriding console.error so that it will fail the test (useful for propTypes validation)
	console.error = function(message) {
	throw new Error(message);
	};

	_.forEach(sections, section => {
	describe(section.name + ' section', function() {
	_.forEach(section.components, component => {
	describe(component.nameFallbak, function() {
	var codeChunks = _.filter(component.examples, {type: 'code'});
	_.forEach(codeChunks, (chunk, index) => {
	it(`should work as in example ${index+1}`, () => {
	runTestForSingleExample(chunk);
	});
	});
	});
	});
	});
	});


	function runTestForSingleExample ({content, evalInContext}) {

	let compiledCode = babel.transform(content, babelConfig).code;

	// The code snippets are from react-styleguidist/src/rsg-components/Preview/Preview.js
	// The evalInContext API is: evalInContext(code)(state, setState, initialStateCallback)

	let initialState = {};
	evalInContext(`
	var React = {createElement: _.noop, createClass: _.noop}; // Workaround for https://github.com/sapegin/react-styleguidist/issues/155
	var initialState = {};
	${compiledCode}
	__initialStateCB(initialState);
	`)(
	{}, // state
	() => { throw new Error('setState is not allowed in definition'); },
	x => { initialState = x; }
	);

	let vDom = evalInContext(`
	var initialState = {};
	return eval(${JSON.stringify(compiledCode)});
	`)(
	initialState, // state
	_.noop, // setState
	null // initialStateCallback
	);

	TestUtils.renderIntoDocument(vDom);
	}
	{
	...
	"scripts": {
	"styleguide-server": "styleguidist server --config styleguide/styleguide.config.js",
	"styleguide-build": "styleguidist build --config styleguide/styleguide.config.js",
	"styleguide-buildtest": "webpack --config webpack.test.config.js './mochatest.js'",
	"styleguide-runtest": "NODE_ENV=test mocha dist/tests.js",
	"styleguide-test": "npm -s run styleguide-buildtest && npm -s run styleguide-runtest",
	}
	}
	'use strict';

	var _ = require('lodash');
	var path = require('path');
	var webpack = require('webpack');
	var packageJson = require('./package.json');

	module.exports = {
	output: {
	libraryTarget: 'commonjs2',
	path: __dirname + '/dist',
	filename: 'tests.js',
	pathinfo: true,
	},
	module: {
	loaders: [
	{
	test: /\.jsx?$/,
	loader: 'babel',
	exclude: path.resolve(__dirname, 'node_modules'),
	},
	{
	test: /\.json?$/,
	loader: 'json',
	exclude: path.resolve(__dirname, 'node_modules'),
	},

	{
	test: /\.scss$/,
	loader: 'style!css!postcss!resolve-url!sass',
	},

	// Images and other assets: inline base64 URLs for <=8k files, direct URLs for the rest
	{test: /\.(png\|jpg\|gif\|eot\|woff\|woff2\|ttf\|svg)$/, loader: 'url?limit=8192'},
	],
	},
	externals: _.flatten([
	// https://github.com/webpack/webpack/issues/839#issuecomment-76738356
	_.keys(packageJson.dependencies),
	_.keys(packageJson.devDependencies),
	[
	'path', 'fs', // Node core modules
	'tether-browserify/tether', // This is how we require it, we need to list it here too
	],
	]),
	resolve: {
	extensions: ['', '.js', '.jsx'],
	},
	resolveLoader: {
	modulesDirectories: [
	'node_modules/react-styleguidist/loaders',
	'node_modules',
	],
	},
	plugins: [
	new webpack.DefinePlugin({
	'CONFIG_PATH': JSON.stringify(require.resolve('./styleguide/styleguide.config')),
	}),
	],

	};