Merge pull request #87 from DingoEatingFuzz/master

Allow environment overrides specifically for Storybook
storybookjs · Jul 3, 2022 · 44fe13f · 44fe13f
2 parents d26b7ec + 57d94f5
commit 44fe13f
Show file tree

Hide file tree

Showing 5 changed files with 178 additions and 11 deletions.
diff --git a/index.js b/index.js
@@ -5,7 +5,7 @@ const path = require('path');
 const YUIDocsGenerator = require('ember-cli-addon-docs-yuidoc/lib/broccoli/generator');
 const Funnel = require('broccoli-funnel');
 const mergeTrees = require('broccoli-merge-trees');
-const { parse, generatePreviewHead } = require('./lib/util');
+const { parse, generatePreviewHead, overrideEnvironment, findEnvironment } = require('./lib/util');
 
 module.exports = {
   name: require('./package').name,
@@ -75,6 +75,7 @@ module.exports = {
     const previewHeadFilePath = path.resolve(process.cwd(), '.storybook/preview-head.html');
     const previewHeadDirectory = path.dirname(previewHeadFilePath);
     const envFilePath = path.resolve(process.cwd(), '.env');
+    const environmentOverridePath = path.resolve(process.cwd(), '.storybook/environment.js');
 
     let fileContents = '';
 
@@ -94,6 +95,20 @@ module.exports = {
 
     this.ui.writeDebugLine('Generating preview-head.html');
 
+    const environment = findEnvironment(parsedConfig);
+
+    if (environment) {
+      // When rootURL is anything other than "/" routing can't be started without erroring, so
+      // this is a sensible default.
+      const defaultOverride = { rootURL: '/' };
+
+      // Allow arbitrary overriding in the storybook environment
+      const environmentOverride = fs.existsSync(environmentOverridePath) && require(environmentOverridePath)(process.env);
+
+      // Apply overrides to the environment meta node
+      environment.content = overrideEnvironment(environment, defaultOverride, environmentOverride);
+    }
+
     if(config) {
       this.ui.writeDebugLine('Setting up overrides.');
 

diff --git a/lib/util.js b/lib/util.js
@@ -1,4 +1,5 @@
 const cheerio = require('cheerio');
+const merge = require('lodash.merge');
 
 const lookupTable = {
   meta: [{
@@ -156,9 +157,28 @@ function generatePreviewHead(parsedConfig) {
   return doc.join('\n')
 }
 
+function extendEnvironment(env, ...extensions) {
+  return merge(env, ...extensions);
+}
+
+// Given a parsed config, returns the `config/environment` meta node
+function findEnvironment(parsedConfig) {
+  return parsedConfig.meta.find(meta => meta.name.endsWith('config/environment'));
+}
+
+// In-place mutation of the env meta node to include encoded extensions
+function overrideEnvironment(env, ...extensions) {
+  // From the Ember App's environment.js file
+  const original = JSON.parse(decodeURIComponent(env.content));
+  return encodeURIComponent(JSON.stringify(extendEnvironment(original, ...extensions)));
+}
+
 module.exports = {
   getDocumentValues,
   parse,
   objectToHTMLAttributes,
   generatePreviewHead,
+  findEnvironment,
+  extendEnvironment,
+  overrideEnvironment,
 };
diff --git a/node-tests/fixtures/no-env.html b/node-tests/fixtures/no-env.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>StorybookEmber31 Tests</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- no environment meta element here -->
+    <script src="/ember-cli-live-reload.js" type="text/javascript"></script>
+    <link rel="stylesheet" href="/assets/vendor.css">
+    <link rel="stylesheet" href="/assets/storybook-ember-3-1.css">
+    <link rel="stylesheet" href="/assets/test-support.css">
+
+
+
+  </head>
+  <body>
+
+    <div id="qunit"></div>
+<div id="qunit-fixture"></div>
+
+<div id="ember-testing-container">
+  <div id="ember-testing"></div>
+</div>
+
+    <script src="/testem.js" integrity=""></script>
+    <script src="/assets/vendor.js"></script>
+    <script src="/assets/test-support.js"></script>
+    <script src="/assets/storybook-ember-3-1.js"></script>
+    <script src="/assets/tests.js"></script>
+
+    <script type="module" src="/assets/component.js"></script>
+
+
+    <script>Ember.assert('The tests file was not loaded. Make sure your tests index.html includes "assets/tests.js".', EmberENV.TESTS_FILE_LOADED);</script>
+  </body>
+</html>
diff --git a/node-tests/util.test.js b/node-tests/util.test.js
@@ -3,6 +3,9 @@ const path = require('path');
 const {
   generatePreviewHead,
   objectToHTMLAttributes,
+  findEnvironment,
+  overrideEnvironment,
+  extendEnvironment,
   parse
 } = require('../lib/util');
 
@@ -163,33 +166,123 @@ Object {
 }
 `);
     });
-  
+
     it('should be able to parse metas from a built html file from an app that uses engines', () => {
       expect.assertions(1);
-  
+
       const fileContent = fs.readFileSync(path.resolve(__dirname, 'fixtures', 'engines.html'), 'utf8');
       const metas = parse(fileContent, true).meta;
-  
+
       expect(metas).toMatchSnapshot();
     });
   });
-  
+
   describe('@generatePreviewHead', () => {
     it('should work with file created with `ember build`', () => {
       expect.assertions(1);
-  
+
       const fileContent = fs.readFileSync(path.resolve(__dirname, 'fixtures', 'build.html'), 'utf8');
-  
+
       expect(generatePreviewHead(parse(fileContent))).toMatchSnapshot()
     })
-  
+
     it('should work with file created with `ember serve` (should append livereload pointing at serve instance)', () => {
       expect.assertions(1);
-  
+
       const fileContent = fs.readFileSync(path.resolve(__dirname, 'fixtures', 'serve.html'), 'utf8');
-  
+
       expect(generatePreviewHead(parse(fileContent))).toMatchSnapshot();
     });
   });
+
+  describe('@findEnvironment', () => {
+    it('should return the meta node with name config/environment (which has the app env encoded as its content)', () => {
+      expect.assertions(1);
+
+      const fileContent = fs.readFileSync(path.resolve(__dirname, 'fixtures', 'serve.html'), 'utf8');
+      const config = parse(fileContent, true);
+      const env = findEnvironment(config);
+
+      expect(env.name).toBe('storybook-ember-3-1/config/environment');
+    });
+
+    it('should be robust against a file with no environment node', () => {
+      expect.assertions(1);
+
+      const fileContent = fs.readFileSync(path.resolve(__dirname, 'fixtures', 'no-env.html'), 'utf8');
+      const config = parse(fileContent, true);
+      const env = findEnvironment(config);
+
+      expect(env).toBeUndefined();
+    });
+  });
+
+  describe('@extendEnvironment', () => {
+    it('deeply merges the original env object with override objects', () => {
+      const env = {
+        one: 'fish',
+        two: {
+          fishes: [ 'red', 'blue' ]
+        }
+      };
+
+      expect(
+        extendEnvironment(
+          env,
+          { two: { fishes: [ 'yellow', 'purple' ], updated: true } },
+          { hello: 'world' }
+        )
+      ).toEqual({
+        one: 'fish',
+        two: {
+          fishes: [ 'yellow', 'purple' ],
+          updated: true,
+        },
+        hello: 'world',
+      });
+    });
+
+    it('should be robust against undefined input', () => {
+      const env = {
+        one: 'fish',
+        two: {
+          fishes: [ 'red', 'blue' ]
+        }
+      };
+
+      expect(extendEnvironment(env, undefined, undefined)).toEqual({
+        one: 'fish',
+        two: {
+          fishes: [ 'red', 'blue' ]
+        }
+      });
+    });
+  });
+
+  describe('@overrideEnvironment', () => {
+    // Take a parsed fixture, get env node, override, assert strings as well as intermediates
+    // Assert works fine with undefined argument
+    it('returns a properly encoded meta value for an environment with overrides', () => {
+      expect.assertions(1);
+
+      const fileContent = fs.readFileSync(path.resolve(__dirname, 'fixtures', 'serve.html'), 'utf8');
+      const config = parse(fileContent, true);
+      const env = findEnvironment(config);
+      const overridden = overrideEnvironment(env, {
+        rootURL: '/foobar/',
+        meta: 'data',
+        APP: {
+          name: 'new-name-from-test',
+        },
+      });
+
+      const envObject = JSON.parse(decodeURIComponent(env.content));
+      envObject.rootURL = '/foobar/';
+      envObject.meta = 'data';
+      envObject.APP.name = 'new-name-from-test';
+
+      expect(overridden).toBe(encodeURIComponent(JSON.stringify(envObject)));
+    });
+  });
 });
 
diff --git a/package.json b/package.json
@@ -78,7 +78,8 @@
     "cheerio": "^1.0.0-rc.10",
     "ember-cli-addon-docs-yuidoc": "^1.0.0",
     "ember-cli-babel": "^7.26.11",
-    "ember-cli-htmlbars": "^6.0.1"
+    "ember-cli-htmlbars": "^6.0.1",
+    "lodash.merge": "^4.6.2"
   },
   "publishConfig": {
     "access": "public"