Last active
July 3, 2018 17:51
-
-
Save mik01aj/5b0be7da5453b84a8a2a51b57611c2c7 to your computer and use it in GitHub Desktop.
Running integration test for react-styleguidist styleguide
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| ... | |
| "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", | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| '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')), | |
| }), | |
| ], | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment