Merge pull request #1383 from interactivellama/storyshots-tests

Improve Storyshots tests experience

Author: interactivellama

app.js

@@ -3,8 +3,12 @@
 /* eslint-disable import/no-extraneous-dependencies */
 const compression = require('compression');
 const express = require('express');
+const minimist = require('minimist');
 
 const port = process.env.PORT || 9001;
+const argv = minimist(process.argv.slice(2));
+const buildFolder = argv.folder || 'storybook';
+// Setting buildFolder to 'storybook-based-tests' will allow interactive viewing of the Storyshots (story based tests).
 
 // Create server
 const app = express();
@@ -19,10 +23,7 @@ app.use(
 		`${__dirname}/node_modules/@salesforce-ux/design-system/assets/`
 	)
 );
-app.use(express.static(`${__dirname}/storybook`));
-
-// Use the following line to test Storyshots instead
-// app.use(express.static(`${__dirname}/storybook-based-tests`));
+app.use(express.static(`${__dirname}/${buildFolder}`));
 
 // Listen
 const server = app.listen(port, () => {

package.json

@@ -10,8 +10,6 @@
 	"scripts": {
 		"build-docs": "npx babel-node ./scripts/build-docs.js",
 		"build-and-test-docs": "npm run build-docs && npx babel-node ./tests/component-docs-test.js",
-		"build-storybook": "NODE_ENV=development npx build-storybook -o ./storybook",
-		"build-storybook-for-tests": "NODE_ENV=development npx build-storybook -o ./storybook-based-tests -c ./.storybook-based-tests",
 		"dist": "scripts/dist.sh",
 		"heroku-prebuild": "./scripts/heroku-prebuild.sh",
 		"heroku-postbuild": "./scripts/heroku-postbuild.sh",
@@ -27,10 +25,12 @@
 		"publish:upstream": "npx babel-node scripts/publish-to-git.js --remote=upstream",
 		"release:patch": "npx babel-node scripts/release.js --release=patch",
 		"release:minor": "npx babel-node scripts/release.js --release=minor",
-		"snapshot-test": "npx jest",
+		"snapshot-test": "npm run storyshots:build && npx jest",
 		"start": "npx start-storybook -p 9001 -s ./node_modules & node tests/browser-tests-app",
-		"start:static": "node app",
-		"storybook": "start-storybook -p 9001 -s ./node_modules",
+		"static:start": "node app",
+		"static:build": "NODE_ENV=development npx build-storybook -o ./storybook",
+		"storyshots:build": "NODE_ENV=development npx build-storybook -o ./storybook-based-tests -c ./.storybook-based-tests",
+		"storyshots:start": "node app --folder=storybook-based-tests",
 		"test": "scripts/local-qa.sh --no-fix",
 		"test:fix": "scripts/local-qa.sh",
 		"travis-ci": "scripts/travis-ci.sh",

scripts/heroku-postbuild.sh

@@ -5,4 +5,4 @@
 
 echo "# Building for Heroku"
 
-npm run build-storybook
+npm run static:build

tests/story-based-tests.snapshot-test.js

@@ -12,7 +12,7 @@ import express from 'express';
 import initStoryshots, { imageSnapshot } from '@storybook/addon-storyshots';
 import path from 'path';
 
-// Express server setup. `npm run build-storybook-image-test` must
+// Express server setup. `npm run storyshots:build` must
 // be run first.
 const rootPath = path.resolve(__dirname, '../');
 const app = express();