configure webpack/jest transform for .graphql files in storybook, glo…

…bal decorator patch for storyshots, better mocks

.storybook/config.js

@@ -1,20 +1,24 @@
-import { configure, addDecorator } from '@kadira/storybook';
-import React from 'react';
-import { ApolloProvider } from 'react-apollo';
-
-import Theme from '../imports/components/Theme';
-import client from './mocks/client';
+import { configure /*, addDecorator*/ } from '@kadira/storybook';
+// import React from 'react';
+// import { ApolloProvider } from 'react-apollo';
+// import client from './mocks/client';
+// import Theme from '../imports/components/Theme';
 
 const req = require.context('../imports/components', true, /.stories.js$/);
 
 function loadStories() {
  req.keys().forEach(filename => req(filename));
 }
 
-addDecorator(story => (
- <ApolloProvider client={client}>
- <Theme>{story()}</Theme>
- </ApolloProvider>
-));
+// failing addDecorator in storyshots
+// see:
+// - https://github.com/storybooks/storyshots/issues/59
+// - https://github.com/storybooks/storyshots/issues/68
+
+// addDecorator(story => (
+// <ApolloProvider client={client}>
+// <Theme>{story()}</Theme>
+// </ApolloProvider>
+// ));
 
 configure(loadStories, module);

.storybook/globalDecoratorPatch.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ApolloProvider } from 'react-apollo';
+import client from './mocks/client';
+import Theme from '../imports/components/Theme';
+
+const globalDecoratorPatch = story => (
+ <ApolloProvider client={client}>
+ <Theme>{story()}</Theme>
+ </ApolloProvider>
+);
+
+export default globalDecoratorPatch;

.storybook/jestGraphql.js

@@ -0,0 +1,39 @@
+// note:
+// `jest-transform-graphql` is obsolete at the moment
+// once we figure out how to use graphql-tag/loader correctly with jest
+// we'll open a PR on the transform package :)
+
+const gql = require('graphql-tag');
+
+// eslint-disable-next-line
+function expandImports(source, doc) {
+ const lines = source.split('\n');
+ let outputCode = '';
+
+ lines.some(line => {
+ if (line[0] === '#' && line.slice(1).split(' ')[0] === 'import') {
+ const importFile = line.slice(1).split(' ')[1];
+ const parseDocument = `require(${importFile})`;
+ const appendDef = `doc.definitions = doc.definitions.concat(${parseDocument}.definitions);`;
+ outputCode += appendDef + '\n';
+ }
+ return line.length !== 0 && line[0] !== '#';
+ });
+
+ return outputCode;
+}
+
+module.exports = {
+ process(source) {
+ // line removed here: cacheable from webpack
+ // https://webpack.github.io/docs/loaders.html#cacheable
+ const doc = gql`${source}`;
+ const outputCode = `var doc = ${JSON.stringify(doc)};`;
+ const importOutputCode = expandImports(source, doc);
+
+ // uncomment for debug
+ // console.log(outputCode + '\n' + importOutputCode + '\n' + `module.exports = doc;`);
+
+ return outputCode + '\n' + importOutputCode + '\n' + `module.exports = doc;`;
+ },
+};

.storybook/mocks/client.js

@@ -2,10 +2,10 @@ import ApolloClient from 'apollo-client';
 import { makeExecutableSchema, addMockFunctionsToSchema } from 'graphql-tools';
 import { mockNetworkInterfaceWithSchema } from 'apollo-test-utils';
 import typeDefs from '../../imports/server/schema';
-import mockedData from './mockedData';
+import mocks from './mocks';
 
 const schema = makeExecutableSchema({ typeDefs });
-addMockFunctionsToSchema({ schema, mockedData });
+addMockFunctionsToSchema({ schema, mocks });
 
 const mockNetworkInterface = mockNetworkInterfaceWithSchema({ schema });