Switch to using Storybook's new story parameters (Storybook v5)

integration-tests/storybook-for-angular/package.json

@@ -35,7 +35,7 @@
  "@angular/compiler-cli": "^5.1.0",
  "@angular/language-service": "^5.1.0",
  "@percy-io/percy-storybook": "^2.1.0",
- "@storybook/angular": "4.1.11",
+ "@storybook/angular": "5.0.0",
  "@types/jasmine": "~2.8.3",
  "@types/jasminewd2": "~2.0.2",
  "@types/node": "~10.0.4",

integration-tests/storybook-for-angular/storybook/config.js

@@ -1,13 +1,7 @@
-import { configure, getStorybook, setAddon } from '@storybook/angular';
+import { configure } from '@storybook/angular';
 
 function loadStories() {
  require('../src/stories/index.ts');
 }
 
-import createPercyAddon from '@percy-io/percy-storybook';
-const { percyAddon, serializeStories } = createPercyAddon();
-setAddon(percyAddon);
-
 configure(loadStories, module);
-
-serializeStories(getStorybook);

integration-tests/storybook-for-ember/.storybook/config.js

@@ -1,24 +1,9 @@
-import { configure, addDecorator, getStorybook, setAddon } from '@storybook/ember';
-import { withOptions } from '@storybook/addon-options';
-
-addDecorator(
- withOptions({
- hierarchySeparator: /\/|\./,
- hierarchyRootSeparator: /\|/,
- }),
-);
+import { configure } from '@storybook/ember';
 
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/);
 function loadStories() {
- require('../stories/index.stories');
-
- const req = require.context('../stories', true, /\.stories\.js$/);
  req.keys().forEach(filename => req(filename));
 }
 
-import createPercyAddon from '@percy-io/percy-storybook';
-const { percyAddon, serializeStories } = createPercyAddon();
-setAddon(percyAddon);
-
 configure(loadStories, module);
-
-serializeStories(getStorybook);

integration-tests/storybook-for-ember/package.json

@@ -1,6 +1,6 @@
 {
  "name": "ember-example",
- "version": "4.1.11",
+ "version": "5.0.0",
  "private": true,
  "scripts": {
  "build": "ember build",
@@ -15,18 +15,18 @@
  "devDependencies": {
  "@babel/core": "^7.1.2",
  "@percy-io/percy-storybook": "^2.1.0",
- "@storybook/addon-a11y": "4.1.11",
- "@storybook/addon-actions": "4.1.11",
- "@storybook/addon-backgrounds": "4.1.11",
- "@storybook/addon-centered": "4.1.11",
- "@storybook/addon-knobs": "4.1.11",
- "@storybook/addon-links": "4.1.11",
- "@storybook/addon-notes": "4.1.11",
- "@storybook/addon-options": "4.1.11",
- "@storybook/addon-storysource": "4.1.11",
- "@storybook/addon-viewport": "4.1.11",
- "@storybook/addons": "4.1.11",
- "@storybook/ember": "4.1.11",
+ "@storybook/addon-a11y": "5.0.0",
+ "@storybook/addon-actions": "5.0.0",
+ "@storybook/addon-backgrounds": "5.0.0",
+ "@storybook/addon-centered": "5.0.0",
+ "@storybook/addon-knobs": "5.0.0",
+ "@storybook/addon-links": "5.0.0",
+ "@storybook/addon-notes": "5.0.0",
+ "@storybook/addon-options": "5.0.0",
+ "@storybook/addon-storysource": "5.0.0",
+ "@storybook/addon-viewport": "5.0.0",
+ "@storybook/addons": "5.0.0",
+ "@storybook/ember": "5.0.0",
  "babel-loader": "^8",
  "broccoli-asset-rev": "^3.0.0",
  "cross-env": "^5.2.0",

integration-tests/storybook-for-react/package.json

@@ -6,8 +6,8 @@
  "storybook": "start-storybook -p 9001 -c storybook -s ./storybook/public",
  "storybook:build": "build-storybook -c storybook -s ./storybook/public",
  "storybook:percy-debug": "percy-storybook --debug",
- "storybook:percy": "build-storybook -c storybook -s ./storybook/public && percy-storybook --widths=320,1280 --rtl_regex=Direction",
- "storybook:percy-no-build": "percy-storybook --widths=320,1280 --rtl_regex=Direction"
+ "storybook:percy": "build-storybook -c storybook -s ./storybook/public && percy-storybook --rtl_regex=Direction",
+ "storybook:percy-no-build": "percy-storybook --rtl_regex=Direction"
  },
  "dependencies": {
  "faker": "^4.1.0",
@@ -20,12 +20,12 @@
  "devDependencies": {
  "@percy-io/in-percy": "^0.1.11",
  "@percy-io/percy-storybook": "^2.1.0",
- "@storybook/addons": "4.1.11",
- "@storybook/addon-actions": "4.1.11",
- "@storybook/addon-info": "4.1.11",
- "@storybook/addon-knobs": "4.1.11",
- "@storybook/addon-links": "4.1.11",
- "@storybook/addon-options": "4.1.11",
- "@storybook/react": "4.1.11"
+ "@storybook/addons": "5.0.0",
+ "@storybook/addon-actions": "5.0.0",
+ "@storybook/addon-info": "5.0.0",
+ "@storybook/addon-knobs": "5.0.0",
+ "@storybook/addon-links": "5.0.0",
+ "@storybook/addon-options": "5.0.0",
+ "@storybook/react": "5.0.0"
  }
 }

integration-tests/storybook-for-react/stories/index.js

@@ -100,34 +100,42 @@ storiesOf('Hierarchy.separator.is.supported', module).add('story', () => (
 ));
 
 storiesOf('addWithPercyOptions', module)
- .addWithPercyOptions('multiple widths', { widths: [222, 333] }, () => (
- <span>Renders in multiple widths</span>
- ))
- .addWithPercyOptions('single width', { widths: [444] }, () => <span>Renders in one width</span>)
- .addWithPercyOptions('without options', () => <span>Renders with the fallback width(s)</span>)
- .addWithPercyOptions('with skip option', { skip: true }, () => <span>Will not Render</span>)
- .addWithPercyOptions('with RTL of true for a single story', { rtl: true }, () => (
- <div className={direction}>
- <span>The direction is {direction}.</span>
- </div>
- ))
- .addWithPercyOptions(
+ .add('multiple widths', () => <span>Renders in multiple widths</span>, {
+ percy: { widths: [222, 333] },
+ })
+ .add('single width', () => <span>Renders in one width</span>, {
+ percy: { widths: [444] },
+ })
+ .add('without options', () => <span>Renders with the fallback width(s)</span>)
+ .add('with skip option', () => <span>Will not Render</span>, {
+ percy: { skip: true },
+ })
+ .add(
+ 'with RTL of true for a single story',
+ () => (
+ <div className={direction}>
+ <span>The direction is {direction}.</span>
+ </div>
+ ),
+ { percy: { rtl: true } },
+ )
+ .add(
  `${rtlRegex}: with RTL override of false even though the RTL regex matches`,
  // rtl: false trumps a positive rtl_regex match
- { rtl: false },
  () => (
  <span>
  This story will only render in one direction. The direction is {direction} == ltr.
  </span>
  ),
+ { percy: { rtl: false } },
  );
 
 storiesOf('With info addon', module)
  .add('some story', withInfo('doc string about my component')(() => <span>info story</span>))
- .addWithPercyOptions(
+ .add(
  'with withInfo instead of addWithInfo',
- { widths: [555] },
  withInfo('doc string about my component')(() => <span>info 555px width</span>),
+ { percy: { widths: [555] } },
  );
 
 storiesOf('@names that need sanitizing', module)

integration-tests/storybook-for-react/storybook/config.js

@@ -1,7 +1,6 @@
-import { configure, getStorybook, setAddon } from '@storybook/react';
+import { configure, setAddon, addParameters } from '@storybook/react';
 import { setOptions } from '@storybook/addon-options';
 import infoAddon, { setDefaults } from '@storybook/addon-info';
-import createPercyAddon from '@percy-io/percy-storybook';
 
 import inPercy from '@percy-io/in-percy';
 import faker from 'faker';
@@ -20,23 +19,17 @@ function loadStories() {
  // You can require as many stories as you need.
 }
 
+// Global Percy parameters applied to all stories
+addParameters({ percy: { widths: [320, 800] } });
+
 setDefaults({
  inline: true,
  source: false,
 });
 setAddon(infoAddon);
 
-const { percyAddon, serializeStories } = createPercyAddon();
-
-// You will only need this if you plan on using addWithPercyOptions
-// addWithPercyOptions can be used to set options for individual stories (i.e. custom widths or RTL settings)
-setAddon(percyAddon);
-
 configure(loadStories, module);
 
-// NOTE: Place this *BEFORE* any setOptions call
-serializeStories(getStorybook);
-
 // NOTE: This call has to come *AFTER* exposing the stories on the window object.
 setOptions({
  name: 'Shared Components',

integration-tests/storybook-for-vue/package.json

@@ -19,13 +19,13 @@
  "devDependencies": {
  "@babel/core": "^7.2.2",
  "@percy-io/percy-storybook": "^2.1.0",
- "@storybook/addons": "4.1.11",
- "@storybook/addon-actions": "4.1.11",
- "@storybook/addon-info": "4.1.11",
- "@storybook/addon-knobs": "4.1.11",
- "@storybook/addon-links": "4.1.11",
- "@storybook/addon-options": "4.1.11",
- "@storybook/vue": "4.1.11",
+ "@storybook/addons": "5.0.0",
+ "@storybook/addon-actions": "5.0.0",
+ "@storybook/addon-info": "5.0.0",
+ "@storybook/addon-knobs": "5.0.0",
+ "@storybook/addon-links": "5.0.0",
+ "@storybook/addon-options": "5.0.0",
+ "@storybook/vue": "5.0.0",
  "babel-loader": "^8.0.5",
  "babel-preset-vue": "^2.0.2",
  "vue-loader": "^15.5.1",

integration-tests/storybook-for-vue/stories/index.js

@@ -24,18 +24,30 @@ storiesOf('Button', module)
  }));
 
 storiesOf('addWithPercyOptions', module)
- .addWithPercyOptions('multiple widths', { widths: [222, 333] }, () => ({
- components: { MyButton },
- template: '<my-button @click="action">I have snapshots in multiple widths</my-button>',
- methods: { action: action('clicked') },
- }))
- .addWithPercyOptions('single width', { widths: [444] }, () => ({
- components: { MyButton },
- template: '<my-button @click="action">I have snapshots in a single width</my-button>',
- methods: { action: action('clicked') },
- }))
- .addWithPercyOptions('skipped', { skip: true }, () => ({
- components: { MyButton },
- template: '<my-button @click="action">I will not render</my-button>',
- methods: { action: action('clicked') },
- }));
+ .add(
+ 'multiple widths',
+ () => ({
+ components: { MyButton },
+ template: '<my-button @click="action">I have snapshots in multiple widths</my-button>',
+ methods: { action: action('clicked') },
+ }),
+ { percy: { widths: [222, 333] } },
+ )
+ .add(
+ 'single width',
+ () => ({
+ components: { MyButton },
+ template: '<my-button @click="action">I have snapshots in a single width</my-button>',
+ methods: { action: action('clicked') },
+ }),
+ { percy: { widths: [444] } },
+ )
+ .add(
+ 'skipped',
+ () => ({
+ components: { MyButton },
+ template: '<my-button @click="action">I will not render</my-button>',
+ methods: { action: action('clicked') },
+ }),
+ { percy: { skip: true } },
+ );

integration-tests/storybook-for-vue/storybook/config.js

@@ -1,5 +1,4 @@
-import { configure, getStorybook, setAddon } from '@storybook/vue';
-import createPercyAddon from '@percy-io/percy-storybook';
+import { configure } from '@storybook/vue';
 
 import Vue from 'vue';
 import Vuex from 'vuex';
@@ -11,12 +10,4 @@ function loadStories() {
  require('../stories');
 }
 
-const { percyAddon, serializeStories } = createPercyAddon();
-
-// You will only need this if you plan on using addWithPercyOptions
-// addWithPercyOptions can be used to set options for individual stories (i.e. custom widths or RTL settings)
-setAddon(percyAddon);
-
 configure(loadStories, module);
-
-serializeStories(getStorybook);

packages/percy-storybook/src/__tests__/getStories-tests.js

@@ -16,15 +16,14 @@ it('raises an error when no stories loaded', async () => {
  await getStories({ iframePath: __dirname + '/iframe-without-stories.html' });
  } catch (e) {
  const message =
- 'Evaluation failed: Error: Stories not found on window within 10 seconds. ' +
- "Check your call to serializeStories in your Storybook's config.js.";
+ 'Evaluation failed: Error: Storybook object not found on window. Open your storybook and check the console for errors.';
  expect(e.message.startsWith(message)).toEqual(true);
  }
 
  expect.assertions(1);
 });
 
-it('returns the value window[storiesKey] is set to', async () => {
+it('returns the stories from the window', async () => {
  const stories = await getStories({ iframePath: __dirname + '/iframe.html' });
- expect(stories).toEqual('mock window __storybook_stories__ value');
+ expect(stories).toEqual('mock window stories value');
 });

packages/percy-storybook/src/__tests__/iframe.html

@@ -1,6 +1,8 @@
 <html>
  <head>
- <script>window['__storybook_stories__'] = 'mock window __storybook_stories__ value';</script>
+ <script>
+ window['__STORYBOOK_CLIENT_API__'] = { raw: function() { return 'mock window stories value'}};
+ </script>
  </head>
  <body>
  <p>This simple file is used by the getStories tests to fake a storybook's iframe.html</p>