Add support for Storybook 5 in init command (#225)

.travis.yml

@@ -12,6 +12,12 @@ jobs:
     - stage: test
       name: 'Unit tests'
       script: yarn test
+    - stage: test
+      name: 'Integration tests: CLI'
+      services:
+        - docker
+      before_script: cd test/cli
+      script: yarn test
     - stage: test
       name: 'Visual tests: React DOM'
       services:

docs/getting-started.md

@@ -21,6 +21,22 @@ yarn add loki --dev
 yarn loki init
 ```
 
+### Manually
+
+Optionally add [loki configuration](/configuration.html) and integrate as follows:
+
+#### React
+
+Add `import 'loki/configure-react'` to `.storybook/preview.js`, create it if it doesn't exist already.
+
+#### Vue
+
+Add `import 'loki/configure-vue'` to `.storybook/preview.js`, create it if it doesn't exist already.
+
+#### React native
+
+Add `import 'loki/configure-react-native'` to `storybook/storybook.js`.
+
 ## Running your first tests
 
 ### 1. Review configuration

package.json

@@ -8,7 +8,7 @@
     "loki": "bin/loki"
   },
   "scripts": {
-    "format": "prettier '{,packages/**/,examples/**/,website/**/,docs/**/}*.{md,js,json}' --write",
+    "format": "prettier '{,packages/**/,examples/**/,website/**/,docs/**/,test/**/}*.{md,js,json}' --write",
     "lint": "eslint packages/*/src",
     "test": "jest"
   },
@@ -31,6 +31,7 @@
   "workspaces": {
     "packages": [
       "packages/*",
+      "test/*",
       "website",
       "examples/react",
       "examples/renderer-aws-lambda"

packages/browser/src/get-stories.js

@@ -2,7 +2,7 @@ const getStories = window => {
   const getStorybook = window.loki && window.loki.getStorybook;
   if (!getStorybook) {
     throw new Error(
-      "Loki addon not registered. Add `import 'loki/configure-react'` to your config.js file."
+      "Loki addon not registered. Add `import 'loki/configure-react'` to your .storybook/preview.js file."
     );
   }
   return getStorybook().map(component => ({

packages/renderer-aws-lambda/src/create-aws-lambda-renderer.spec.js

@@ -80,7 +80,7 @@ describe('createChromeAWSLambdaRenderer', () => {
       'throws if not configured',
       async () => {
         await expect(fetchStorybookFixture('unconfigured')).rejects.toThrow(
-          "Loki addon not registered. Add `import 'loki/configure-react'` to your config.js file."
+          "Loki addon not registered. Add `import 'loki/configure-react'` to your .storybook/preview.js file."
         );
       },
       DOCKER_TEST_TIMEOUT

packages/runner/src/commands/init/index.js

@@ -25,7 +25,7 @@ const insertAfter = (
     )}\n${stringToInsert}${content.substr(insertionIndex)}`;
   }
   if (fallback === 'append') {
-    return `${content}\n${stringToInsert}\n`;
+    return `${content ? `${content}\n` : ''}${stringToInsert}\n`;
   }
   return `${stringToInsert}\n${content}`;
 };
@@ -88,24 +88,35 @@ function init(args) {
       fs.outputFileSync(storybookjsPath, modifiedStorybookjs);
     }
   } else {
-    const configjsPath = `${storybookPath}/config.js`;
-    const configjs = fs.readFileSync(configjsPath, 'utf8');
     const projectType = isVueProject ? 'vue' : 'react';
     const configPackage = `loki/configure-${projectType}`;
     const storybookPackage = `@storybook/${projectType}`;
-    if (configjs.indexOf(configPackage) !== -1) {
+
+    const configjsPath = `${storybookPath}/config.js`;
+    const previewjsPath = `${storybookPath}/preview.js`;
+    const destinationPath = fs.existsSync(configjsPath)
+      ? configjsPath
+      : previewjsPath;
+
+    const configContent = fs.existsSync(destinationPath)
+      ? fs.readFileSync(destinationPath, 'utf8')
+      : '';
+
+    if (configContent.indexOf(configPackage) !== -1) {
       warn(
-        `${relative(configjsPath)} already has loki configuration, skipping...`
+        `${relative(
+          destinationPath
+        )} already has loki configuration, skipping...`
       );
     } else {
-      info(`Adding loki configuration to ${relative(configjsPath)}`);
-      const modifiedConfigjs = insertAfter(
-        configjs,
+      info(`Adding loki configuration to ${relative(destinationPath)}`);
+      const modifiedConfigContent = insertAfter(
+        configContent,
         new RegExp(`(require\\(|from )['"]${storybookPackage}['"]\\)?;?[ \t]*`),
         `import '${configPackage}';`,
         'append'
       );
-      fs.outputFileSync(configjsPath, modifiedConfigjs);
+      fs.outputFileSync(destinationPath, modifiedConfigContent);
     }
   }
 }

packages/target-chrome-docker/src/create-chrome-docker-target.spec.js

@@ -55,7 +55,7 @@ describe('createChromeTarget', () => {
       'throws if not configured',
       async () => {
         await expect(fetchStorybookFixture('unconfigured')).rejects.toThrow(
-          "Loki addon not registered. Add `import 'loki/configure-react'` to your config.js file."
+          "Loki addon not registered. Add `import 'loki/configure-react'` to your .storybook/preview.js file."
         );
       },
       DOCKER_TEST_TIMEOUT

test/cli/.gitignore

@@ -0,0 +1 @@
+generated

test/cli/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@loki/test-cli",
+  "version": "0.20.1",
+  "private": true,
+  "scripts": {
+    "test": "bash ./test-cra-init.sh"
+  },
+  "devDependencies": {
+    "execa": "^1.0.0",
+    "loki": "^0.20.1"
+  }
+}

test/cli/test-cra-init.sh

@@ -0,0 +1,58 @@
+#!/bin/bash
+
+set -Eeuo pipefail
+
+assert_contains() {
+  FILENAME=$1
+  EXPECTED_CONTENT=$2
+
+  if [[ "$(cat $FILENAME)" == *"${EXPECTED_CONTENT}"* ]]; then
+    return 0
+  else
+    echo "Unable to find $EXPECTED_CONTENT in $FILENAME"
+    return 1
+  fi
+}
+
+# Ensure we're in the correct folder
+pushd "$( dirname "${BASH_SOURCE[0]}" )" > /dev/null
+
+# Scaffold a new CRA project with storybook and loki
+mkdir -p generated
+cd generated
+rm -rf create-react-app || true
+yarn create react-app create-react-app
+cd create-react-app
+npx -p @storybook/cli sb init
+yarn add loki
+../../../../node_modules/.bin/loki init
+
+# Ensure modifications has been made
+assert_contains "package.json" "$(cat <<-END
+  "loki": {
+    "configurations": {
+      "chrome.laptop": {
+        "target": "chrome.docker",
+        "width": 1366,
+        "height": 768,
+        "deviceScaleFactor": 1,
+        "mobile": false
+      },
+      "chrome.iphone7": {
+        "target": "chrome.docker",
+        "preset": "iPhone 7"
+      }
+    }
+  }
+END
+)"
+assert_contains ".storybook/preview.js" "import 'loki/configure-react'"
+
+# Ensure we can snap stories
+yarn build-storybook
+mkdir -p .loki/reference
+cp ../../fixtures/chrome_laptop_Welcome_to_Storybook.png ./.loki/reference
+../../../../node_modules/.bin/loki test laptop --requireReference --storiesFilter Welcome --reactUri file:./storybook-static
+
+# Peace out
+popd > /dev/null