Add tests for CLI

.circleci/config.yml

@@ -159,6 +159,54 @@ jobs:
           command: |
             yarn test -- --all --coverage --runInBand
             yarn coverage
+  cli-node-8:
+    working_directory: /tmp/storybook
+    docker:
+      - image: andthensome/docker-node-rsync
+    steps:
+      - checkout
+      - restore_cache:
+          keys:
+            - root-dependencies-{{ checksum "package.json" }}
+            - root-dependencies-
+      - run:
+          name: "Install root dependencies"
+          command: |
+            yarn install
+      - run:
+          name: "Bootstrapping"
+          command: |
+            yarn bootstrap -- --core
+      - run:
+          name: "Testing CLI"
+          command: |
+            yarn test -- --cli
+  cli-latest-cra:
+    working_directory: /tmp/storybook
+    docker:
+      - image: andthensome/docker-node-rsync
+    steps:
+      - checkout
+      - restore_cache:
+          keys:
+            - root-dependencies-{{ checksum "package.json" }}
+            - root-dependencies-
+      - run:
+          name: "Install root dependencies"
+          command: |
+            yarn install
+      - run:
+          name: "Bootstrapping"
+          command: |
+            yarn bootstrap -- --core
+      - run:
+          name: "Updating fixtures"
+          command: |
+            yarn update-cli-fixtures
+      - run:
+          name: "Testing CLI"
+          command: |
+            yarn test -- --cli
   deploy:
     <<: *defaults
     steps:
@@ -177,6 +225,8 @@ workflows:
       - docs
       - lint
       - unit-test
+      - cli-node-8
+      - cli-latest-cra
       # - deploy:
       #     type: approval
       #     requires:

.eslintignore

@@ -5,7 +5,7 @@ node_modules
 addons/**/example/**
 app/**/demo/**
 docs/public
-
+lib/cli/test
 *.bundle.js
 *.js.map
 

CONTRIBUTING.md

@@ -57,7 +57,21 @@ yarn test -- --core
 
 In order to run ALL unit tests, you must have bootstrapped the react-native
 
-#### 2b. Link `storybook` and any other required dependencies:
+#### 2b. Run e2e tests for CLI
+
+If you made any changes to `lib/cli` package, the easiest way to verify that it doesn't break anything is to run e2e tests:
+
+    yarn test -- --cli
+
+This will run a bash script located at `lib/cli/test/run_tests.sh`. It will copy the contents of `fixtures` into a temporary `run` directory, run `getstorybook` in each of the subdirectories, and check that storybook starts successfully using `yarn storybook -- --smoke-test`.
+
+After that, the `run` directory content will be compared with `snapshots`. You can update the snapshots by passing an `--update` flag:
+
+    yarn test -- --cli --update
+
+In that case, please check the git diff before commiting to make sure it only contains the intended changes.
+
+#### 2c. Link `storybook` and any other required dependencies:
 
 If you want to test your own existing project using the github version of storybook, you need to `link` the packages you use in your project.
 

docs/pages/addons/addon-gallery/index.md

@@ -1,7 +1,8 @@
----
+* * *
+
 id: 'addon-gallery'
-title: 'Addon Gallery'
----
+
+## title: 'Addon Gallery'
 
 This is a list of available addons for Storybook.
 

jest.config.js

@@ -12,7 +12,7 @@ module.exports = {
     '<rootDir>/lib',
     '<rootDir>/examples/cra-kitchen-sink',
   ],
-  testPathIgnorePatterns: ['/node_modules/'],
+  testPathIgnorePatterns: ['/node_modules/', '/cli/test/'],
   collectCoverage: false,
   collectCoverageFrom: [
     'app/**/*.{js,jsx}',

lib/cli/.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": [
+    ["env", {
+      "targets": {
+        "node": 4
+      }
+    }]
+  ]
+}

lib/cli/bin/generate.js

@@ -1,20 +1,14 @@
-#!/usr/bin/env node
-
-const updateNotifier = require('update-notifier');
-const program = require('commander');
-const chalk = require('chalk');
-const detect = require('../lib/detect');
-const hasYarn = require('../lib/has_yarn');
-const types = require('../lib/project_types');
-const commandLog = require('../lib/helpers').commandLog;
-const codeLog = require('../lib/helpers').codeLog;
-const paddedLog = require('../lib/helpers').paddedLog;
-const installDeps = require('../lib/helpers').installDeps;
+import updateNotifier from 'update-notifier';
+import program from 'commander';
+import chalk from 'chalk';
+import detect from '../lib/detect';
+import hasYarn from '../lib/has_yarn';
+import types from '../lib/project_types';
+import { commandLog, codeLog, paddedLog, installDeps } from '../lib/helpers';
+import pkg from '../package.json';
 
 const logger = console;
 
-const pkg = require('../package.json');
-
 program
   .version(pkg.version)
   .option('-f --force', 'Forcely add storybook')
@@ -79,30 +73,30 @@ switch (projectType) {
 
   case types.UPDATE_PACKAGE_ORGANIZATIONS:
     // eslint-disable-next-line
-    require('../generators/UPDATE_PACKAGE_ORGANIZATIONS')(program.parser)
+    require('../generators/UPDATE_PACKAGE_ORGANIZATIONS').default(program.parser)
       .then(() => null) // commmandLog doesn't like to see output
       .then(commandLog('Upgrading your project to the new storybook packages.'))
       .then(end);
     break;
 
   case types.REACT_SCRIPTS:
     // eslint-disable-next-line
-    require('../generators/REACT_SCRIPTS')
+    require('../generators/REACT_SCRIPTS').default
       .then(commandLog('Adding storybook support to your "Create React App" based project'))
       .then(end);
     break;
 
   case types.REACT:
     // eslint-disable-next-line
-    require('../generators/REACT')
+    require('../generators/REACT').default
       .then(commandLog('Adding storybook support to your "React" app'))
       .then(end);
     break;
 
   case types.REACT_NATIVE_SCRIPTS: {
     const app = chalk.bold('"./App.js"');
     // eslint-disable-next-line
-    require('../generators/REACT_NATIVE_SCRIPTS')
+    require('../generators/REACT_NATIVE_SCRIPTS').default
       .then(commandLog('Adding storybook support to your "Create React Native App" app'))
       .then(end)
       .then(() => {
@@ -118,42 +112,42 @@ switch (projectType) {
 
   case types.REACT_NATIVE:
     // eslint-disable-next-line
-    require('../generators/REACT_NATIVE')
+    require('../generators/REACT_NATIVE').default
       .then(commandLog('Adding storybook support to your "React Native" app'))
       .then(end);
     break;
 
   case types.METEOR:
     // eslint-disable-next-line
-    require('../generators/METEOR')
+    require('../generators/METEOR').default
       .then(commandLog('Adding storybook support to your "Meteor" app'))
       .then(end);
     break;
 
   case types.WEBPACK_REACT:
     // eslint-disable-next-line
-    require('../generators/WEBPACK_REACT')
+    require('../generators/WEBPACK_REACT').default
       .then(commandLog('Adding storybook support to your "Webpack React" app'))
       .then(end);
     break;
 
   case types.REACT_PROJECT:
     // eslint-disable-next-line
-    require('../generators/REACT')
+    require('../generators/REACT').default
       .then(commandLog('Adding storybook support to your "React" library'))
       .then(end);
     break;
 
   case types.SFC_VUE:
     // eslint-disable-next-line
-    require('../generators/SFC_VUE')
+    require('../generators/SFC_VUE').default
       .then(commandLog('Adding storybook support to your "Single File Components Vue" app'))
       .then(end);
     break;
 
   case types.VUE:
     // eslint-disable-next-line
-    require('../generators/VUE')
+    require('../generators/VUE').default
       .then(commandLog('Adding storybook support to your "Vue" app'))
       .then(end);
     break;

lib/cli/bin/index.js

@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+
+require('babel-register');
+require('./generate');

lib/cli/generators/METEOR/index.js

@@ -1,11 +1,11 @@
-const mergeDirs = require('merge-dirs').default;
-const helpers = require('../../lib/helpers');
-const path = require('path');
-const fs = require('fs');
-const JSON5 = require('json5');
-const latestVersion = require('latest-version');
+import path from 'path';
+import fs from 'fs';
+import JSON5 from 'json5';
+import latestVersion from 'latest-version';
+import mergeDirs from 'merge-dirs';
+import { getPackageJson, writePackageJson } from '../../lib/helpers';
 
-module.exports = Promise.all([
+export default Promise.all([
   latestVersion('@storybook/react'),
   latestVersion('@storybook/addon-actions'),
   latestVersion('@storybook/addon-links'),
@@ -31,7 +31,7 @@ module.exports = Promise.all([
   ) => {
     mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
 
-    const packageJson = helpers.getPackageJson();
+    const packageJson = getPackageJson();
     packageJson.devDependencies = packageJson.devDependencies || {};
     packageJson.scripts = packageJson.scripts || {};
     packageJson.dependencies = packageJson.dependencies || {};
@@ -76,6 +76,6 @@ module.exports = Promise.all([
       packageJson.dependencies['react-dom'] = `^${reactDomVersion}`;
     }
 
-    helpers.writePackageJson(packageJson);
+    writePackageJson(packageJson);
   }
 );

lib/cli/generators/REACT/index.js

@@ -1,16 +1,16 @@
-const mergeDirs = require('merge-dirs').default;
-const helpers = require('../../lib/helpers');
-const path = require('path');
-const latestVersion = require('latest-version');
+import path from 'path';
+import latestVersion from 'latest-version';
+import mergeDirs from 'merge-dirs';
+import { getPackageJson, writePackageJson } from '../../lib/helpers';
 
-module.exports = Promise.all([
+export default Promise.all([
   latestVersion('@storybook/react'),
   latestVersion('@storybook/addon-actions'),
   latestVersion('@storybook/addon-links'),
 ]).then(([storybookVersion, actionsVersion, linksVersion]) => {
   mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
 
-  const packageJson = helpers.getPackageJson();
+  const packageJson = getPackageJson();
 
   packageJson.devDependencies = packageJson.devDependencies || {};
   packageJson.devDependencies['@storybook/react'] = `^${storybookVersion}`;
@@ -21,5 +21,5 @@ module.exports = Promise.all([
   packageJson.scripts.storybook = 'start-storybook -p 6006';
   packageJson.scripts['build-storybook'] = 'build-storybook';
 
-  helpers.writePackageJson(packageJson);
+  writePackageJson(packageJson);
 });

lib/cli/generators/REACT_NATIVE/index.js

@@ -1,11 +1,11 @@
-const mergeDirs = require('merge-dirs').default;
-const path = require('path');
-const shell = require('shelljs');
-const latestVersion = require('latest-version');
-const chalk = require('chalk');
-const helpers = require('../../lib/helpers');
-
-module.exports = Promise.all([
+import mergeDirs from 'merge-dirs';
+import path from 'path';
+import shell from 'shelljs';
+import latestVersion from 'latest-version';
+import chalk from 'chalk';
+import { getPackageJson, writePackageJson, paddedLog } from '../../lib/helpers';
+
+export default Promise.all([
   latestVersion('@storybook/react-native'),
   latestVersion('@storybook/addon-actions'),
   latestVersion('@storybook/addon-links'),
@@ -21,14 +21,14 @@ module.exports = Promise.all([
   if (projectName) {
     shell.sed('-i', '%APP_NAME%', projectName, 'storybook/storybook.js');
   } else {
-    helpers.paddedLog(
+    paddedLog(
       chalk.red(
         'ERR: Could not determine project name, to fix: https://github.com/storybooks/storybook/issues/1277'
       )
     );
   }
 
-  const packageJson = helpers.getPackageJson();
+  const packageJson = getPackageJson();
 
   packageJson.dependencies = packageJson.dependencies || {};
   packageJson.devDependencies = packageJson.devDependencies || {};
@@ -49,5 +49,5 @@ module.exports = Promise.all([
   packageJson.scripts = packageJson.scripts || {};
   packageJson.scripts.storybook = 'storybook start -p 7007';
 
-  helpers.writePackageJson(packageJson);
+  writePackageJson(packageJson);
 });

lib/cli/generators/REACT_NATIVE_SCRIPTS/index.js

@@ -1,9 +1,9 @@
-const mergeDirs = require('merge-dirs').default;
-const helpers = require('../../lib/helpers');
-const path = require('path');
-const latestVersion = require('latest-version');
+import mergeDirs from 'merge-dirs';
+import path from 'path';
+import latestVersion from 'latest-version';
+import { getPackageJson, writePackageJson } from '../../lib/helpers';
 
-module.exports = Promise.all([
+export default Promise.all([
   latestVersion('@storybook/react-native'),
   latestVersion('@storybook/addon-actions'),
   latestVersion('@storybook/addon-links'),
@@ -12,7 +12,7 @@ module.exports = Promise.all([
   // copy all files from the template directory to project directory
   mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
 
-  const packageJson = helpers.getPackageJson();
+  const packageJson = getPackageJson();
 
   packageJson.dependencies = packageJson.dependencies || {};
   packageJson.devDependencies = packageJson.devDependencies || {};
@@ -33,5 +33,5 @@ module.exports = Promise.all([
   packageJson.scripts = packageJson.scripts || {};
   packageJson.scripts.storybook = 'storybook start -p 7007';
 
-  helpers.writePackageJson(packageJson);
+  writePackageJson(packageJson);
 });