diff --git a/.travis.yml b/.travis.yml index 7a854e756764..c8449163230f 100644 --- a/.travis.yml +++ b/.travis.yml @@ -11,6 +11,7 @@ before_install: ./scripts/travis/before_install.sh after_success: ./scripts/travis/after_success.sh script: - npm run bootstrap + - (cd examples/test-cra && npm install) - npm run lint - npm run test -- --coverage - npm run coverage diff --git a/addons/storyshots/README.md b/addons/storyshots/README.md index 3e52e92c21de..9dda5de4cb09 100644 --- a/addons/storyshots/README.md +++ b/addons/storyshots/README.md @@ -96,3 +96,7 @@ initStoryshots({ storyNameRegex: /buttons/ }); ``` + +### `framework` + +If you are running tests from outside of your app's directory, storyshot's detection of which framework you are using may fail. Pass `"react"` or `"react-native"` to short-circuit this. diff --git a/addons/storyshots/package.json b/addons/storyshots/package.json index 23fb4c0b3435..e32de8ec6aa5 100644 --- a/addons/storyshots/package.json +++ b/addons/storyshots/package.json @@ -22,11 +22,6 @@ "react-dom": "^15.5.4" }, "dependencies": { - "@storybook/addon-actions": "^3.0.0-alpha.1", - "@storybook/addon-links": "^3.0.0-alpha.1", - "@storybook/addons": "^3.0.0-alpha.0", - "@storybook/channels": "^3.0.0-alpha.0", - "@storybook/react": "^3.0.0-alpha.1", "babel-runtime": "^6.23.0", "prop-types": "^15.5.8", "read-pkg-up": "^2.0.0" diff --git a/addons/storyshots/src/index.js b/addons/storyshots/src/index.js index ae7ab2f10511..cf61cb08927c 100644 --- a/addons/storyshots/src/index.js +++ b/addons/storyshots/src/index.js @@ -12,16 +12,21 @@ let configPath; const babel = require('babel-core'); const pkg = readPkgUp.sync().pkg; -const isStorybook = - (pkg.devDependencies && pkg.devDependencies['@storybook/react']) || - (pkg.dependencies && pkg.dependencies['@storybook/react']); -const isRNStorybook = - (pkg.devDependencies && pkg.devDependencies['@storybook/react-native']) || - (pkg.dependencies && pkg.dependencies['@storybook/react-native']); + +const hasDependency = function(name) { + return ( + (pkg.devDependencies && pkg.devDependencies[name]) || + (pkg.dependencies && pkg.dependencies[name]) + ); +}; export default function testStorySnapshots(options = {}) { addons.setChannel(createChannel()); + const isStorybook = options.framework === 'react' || hasDependency('@storybook/react'); + const isRNStorybook = + options.framework === 'react-native' || hasDependency('@storybook/react-native'); + if (isStorybook) { storybook = require.requireActual('@storybook/react'); const loadBabelConfig = require('@storybook/react/dist/server/babel_config').default; diff --git a/examples/test-cra/package.json b/examples/test-cra/package.json index 48132c3e74aa..a98969041784 100644 --- a/examples/test-cra/package.json +++ b/examples/test-cra/package.json @@ -22,7 +22,9 @@ "@storybook/channels": "file:../../lib/channels", "@storybook/channel-postmessage": "file:../../lib/channel-postmessage", "@storybook/ui": "file:../../lib/ui", - "react-scripts": "0.9.5" + "@storybook/addon-storyshots": "file:../../addons/storyshots", + "react-scripts": "1.0.2", + "react-test-renderer": "^15.4.2" }, "private": true } diff --git a/examples/test-cra/src/__snapshots__/storyshots.test.js.snap b/examples/test-cra/src/__snapshots__/storyshots.test.js.snap new file mode 100644 index 000000000000..175d0e1be3a0 --- /dev/null +++ b/examples/test-cra/src/__snapshots__/storyshots.test.js.snap @@ -0,0 +1,188 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Button with some emoji 1`] = ` + +`; + +exports[`Storyshots Button with text 1`] = ` + +`; + +exports[`Storyshots Welcome to Storybook 1`] = ` +
+

+ Welcome to STORYBOOK +

+

+ This is a UI component dev environment for your app. +

+

+ We've added some basic stories inside the + + + src/stories + + + directory. +
+ A story is a single state of one or more UI components. You can have as many stories as you want. +
+ (Basically a story is like a visual test case.) +

+

+ See these sample + + + stories + + + for a component called + + + Button + + . +

+

+ Just like that, you can add your own components as stories. +
+ Here's how to add your + + App + + component as a story. +

+ // Add this code to \\"src/stories/index.js\\" + + import '../index.css'; + import App from '../App'; + + storiesOf('App', module) + .add('default view', () => ( + <App /> + )) + ", + } + } + style={ + Object { + "backgroundColor": "#f3f2f2", + "margin": "10px 0", + "padding": "1px 10px", + } + } + /> +

+

+ Usually we create stories with smaller UI components in the app. +
+ Have a look at the + + + Writing Stories + + + section in our documentation. +

+
+`; diff --git a/examples/test-cra/src/storyshots.test.js b/examples/test-cra/src/storyshots.test.js new file mode 100644 index 000000000000..d0d7df609c9d --- /dev/null +++ b/examples/test-cra/src/storyshots.test.js @@ -0,0 +1,7 @@ +import initStoryshots from '@storybook/addon-storyshots'; +import path from 'path'; + +initStoryshots({ + framework: 'react', + configPath: path.join(__dirname, '..', '.storybook'), +});