Merge pull request #10 from kadirahq/storybook-config

Storybook config

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@kadira/storybook-snapshot-test",
-  "version": "1.0.0",
+  "name": "@kadira/storyshots",
+  "version": "0.0.0",
   "description": "Compare stories to saved snapshots",
   "repository": {
     "type": "git",
@@ -11,20 +11,19 @@
     "mocha": "--require scripts/mocha_runner src/**/__tests__/**/*.js"
   },
   "bin": {
-    "testsnapshots": "./bin/testsnapshots.js"
+    "storyshots": "./bin/run_storyshots.js"
   },
   "scripts": {
     "prepublish": ". ./scripts/prepublish.sh",
     "lint": "eslint ./src",
     "lintfix": "eslint ./src --fix",
     "testonly": "mocha $npm_package_options_mocha",
     "test": "npm run lint && npm run testonly",
-    "test-watch": "npm run testonly -- --watch --watch-extensions js",
-    "testsnapshots": "jasmine"
+    "test-watch": "npm run testonly -- --watch --watch-extensions js"
   },
   "peerDependencies": {
-    "@kadira/storybook": "*",
-    "react": "*"
+    "@kadira/storybook": "^2.16.0",
+    "react": "^15.2.1"
   },
   "devDependencies": {
     "nodemon": "1.7.x",
@@ -47,6 +46,7 @@
     "chokidar": "^1.6.0",
     "jest-diff": "^15.1.0",
     "jest-snapshot": "^15.1.1",
+    "jsdom": "^9.5.0",
     "promptly": "^2.1.0",
     "react-test-renderer": "^15.3.1",
     "require-hijack": "^1.2.1"

src/cli.js

@@ -1,10 +1,11 @@
 import runTests from './test_runner';
-import loadConfig from './config';
 import { getStorybook } from '@kadira/storybook';
 import path from 'path';
+import fs from 'fs';
 import program from 'commander';
 import chokidar from 'chokidar';
 import EventEmitter from 'events';
+import loadBabelConfig from '@kadira/storybook/dist/server/babel_config';
 
 const { jasmine } = global;
 
@@ -16,32 +17,41 @@ program
           'Update saved story snapshots interactively')
   .option('-g, --grep [string]', 'only test stories matching regexp')
   .option('-w, --watch [boolean]', 'watch file changes and rerun tests')
+  .option('--polyfills [string]', 'add global polyfills')
+  .option('--loaders [string]', 'add loaders')
   .parse(process.argv);
 
-const configDir = program.configDir || './.storybook';
+const {
+  configDir='./.storybook',
+  polyfills: polyfillsPath,
+  loaders: loadersPath,
+} = program
 
 const configPath = path.resolve(`${configDir}`, 'config');
 
-const babelConfig = loadConfig(configDir);
-babelConfig.babelrc = false;
+const babelConfig = loadBabelConfig(configDir);
+
+// cacheDir is webpack babel loader specific. We don't run webpack.
+delete babelConfig.cacheDirectory;
 
 require('babel-register')(babelConfig);
 require('babel-polyfill');
 
-const fileExts = ['jpg', 'png', 'gif', 'eot', 'svg', 'ttf', 'woff', 'woff2']
-const moduleExts = ['css', 'scss', 'sass']
+const loaders = require('./loaders');
+if (loadersPath) {
+  const userLoaders = require(path.resolve(userLoadersPath));
+  Object.assign(loaders, userLoaders);
+}
 
-fileExts.forEach(ext => {
-  require.extensions[`.${ext}`] = function () {
-    return '';
-  };
+Object.keys(loaders).forEach(ext => {
+  const loader = loaders[ext];
+  require.extensions[`.${ext}`] = loader;
 })
 
-moduleExts.forEach(ext => {
-  require.extensions[`.${ext}`] = function () {
-    return {};
-  };
-})
+require('./polyfills');
+if (polyfillsPath) {
+  require(path.resolve(polyfillsPath));
+}
 
 async function main () {
   try {

src/loaders.js

@@ -0,0 +1,14 @@
+const fileExts = ['jpg', 'png', 'gif', 'eot', 'svg', 'ttf', 'woff', 'woff2']
+const moduleExts = ['css', 'scss', 'sass']
+
+const loaders = {}
+
+fileExts.forEach(ext => {
+  loaders[ext] = (module, filename) => filename;
+})
+
+moduleExts.forEach(ext => {
+  loaders[ext] = () => null
+})
+
+module.exports = loaders;

src/polyfills.js

@@ -0,0 +1,23 @@
+const jsdom = require('jsdom').jsdom;
+
+global.document = jsdom('');
+global.window = document.defaultView;
+Object.keys(document.defaultView).forEach((property) => {
+  if (typeof global[property] === 'undefined') {
+    global[property] = document.defaultView[property];
+  }
+});
+
+global.navigator = {
+  userAgent: 'node.js'
+};
+
+global.localStorage = global.window.localStorage = {
+  _data       : {},
+  setItem     : function(id, val) { return this._data[id] = String(val); },
+  getItem     : function(id) { return this._data.hasOwnProperty(id) ? this._data[id] : undefined; },
+  removeItem  : function(id) { return delete this._data[id]; },
+  clear       : function() { return this._data = {}; }
+};
+
+window.matchMedia = () => ({ matches: true });