From a0f0d04eccff1d4d738094f6b90c8135f060069d Mon Sep 17 00:00:00 2001
From: Alvaro Pinot <apinot@noon.com>
Date: Tue, 30 May 2017 13:50:34 +0400
Subject: [PATCH 1/2] TEST babel_config plugins creation.

---
 app/react/src/server/babel_config.test.js | 90 +++++++++++++++++++++++
 1 file changed, 90 insertions(+)
 create mode 100644 app/react/src/server/babel_config.test.js

diff --git a/app/react/src/server/babel_config.test.js b/app/react/src/server/babel_config.test.js
new file mode 100644
index 000000000000..b993216203e5
--- /dev/null
+++ b/app/react/src/server/babel_config.test.js
@@ -0,0 +1,90 @@
+import mock from 'mock-fs';
+import loadBabelConfig from './babel_config';
+
+describe('babel_config', () => {
+  // As the 'fs' is going to be mocked, let's call require.resolve
+  // so the require.cache has the correct route to the file.
+  // In fact let's use it in the tests :)
+  const babelPluginReactDocgenPath = require.resolve('babel-plugin-react-docgen');
+
+  it('should return the config with the extra plugins when `plugins` is an array.', () => {
+    // Mock a simple `.babelrc` config file.
+    mock({
+      '.babelrc': `{
+        "presets": [
+          "es2015",
+          "foo-preset"
+        ],
+        "plugins": [
+          "foo-plugin"
+        ]
+      }`,
+    });
+
+    const config = loadBabelConfig('.foo');
+
+    expect(config.plugins).toEqual([
+      'foo-plugin',
+      [
+        babelPluginReactDocgenPath,
+        {
+          DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
+        },
+      ],
+    ]);
+
+    mock.restore();
+  });
+
+  it('should return the config with the extra plugins when `plugins` is not an array.', () => {
+    // Mock a `.babelrc` config file with plugins key not being an array.
+    mock({
+      '.babelrc': `{
+        "presets": [
+          "es2015",
+          "foo-preset"
+        ],
+        "plugins": "bar-plugin"
+      }`,
+    });
+
+    const config = loadBabelConfig('.bar');
+
+    expect(config.plugins).toEqual([
+      'bar-plugin',
+      [
+        babelPluginReactDocgenPath,
+        {
+          DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
+        },
+      ],
+    ]);
+
+    mock.restore();
+  });
+
+  it('should return the config only with the extra plugins when `plugins` is not present.', () => {
+    // Mock a `.babelrc` config file with no plugins key.
+    mock({
+      '.babelrc': `{
+        "presets": [
+          "es2015",
+          "foo-preset"
+        ]
+      }`,
+    });
+
+    const config = loadBabelConfig('.biz');
+
+    expect(config.plugins).toEqual([
+      [
+        babelPluginReactDocgenPath,
+        {
+          DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
+        },
+      ],
+    ]);
+
+    mock.restore();
+  });
+});

From e28bf2593b03ec085d726e0759f10c886761f345 Mon Sep 17 00:00:00 2001
From: Alvaro Pinot <apinot@noon.com>
Date: Tue, 30 May 2017 13:52:25 +0400
Subject: [PATCH 2/2] FIX babel_config plugin reading and creation.

---
 app/react/src/server/babel_config.js | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/app/react/src/server/babel_config.js b/app/react/src/server/babel_config.js
index 7ed0bc5ca030..8eab74ed4283 100644
--- a/app/react/src/server/babel_config.js
+++ b/app/react/src/server/babel_config.js
@@ -66,11 +66,19 @@ export default function(configDir) {
   }
 
   const finalConfig = babelConfig || defaultConfig;
-  finalConfig.plugins = finalConfig.plugins || [];
-  finalConfig.plugins.push([
-    require.resolve('babel-plugin-react-docgen'),
-    { DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES' },
-  ]);
+  // Ensure plugins are defined or fallback to an array to avoid empty values.
+  const babelConfigPlugins = finalConfig.plugins || [];
+  const extraPlugins = [
+    [
+      require.resolve('babel-plugin-react-docgen'),
+      {
+        DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
+      },
+    ],
+  ];
+  // If `babelConfigPlugins` is not an `Array`, calling `concat` will inject it
+  // as a single value, if it is an `Array` it will be spreaded.
+  finalConfig.plugins = [].concat(babelConfigPlugins, extraPlugins);
 
   return finalConfig;
 }