Merge pull request #4176 from donaldpipowitch/allow-setting-params-to…

…-storyshot

allow setting params to storyshot

addons/storyshots/storyshots-puppeteer/README.md

@@ -34,7 +34,7 @@ import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
 
 initStoryshots({suite: 'Image storyshots', test: imageSnapshot({storybookUrl: 'http://my-specific-domain.com:9010'})});
 ```
-The above config will use _<https://my-specific-domain.com:9010>_ for screenshots.
+The above config will use _<https://my-specific-domain.com:9010>_ for screenshots. You can also use query parameters in your URL (e.g. for setting a different background for your storyshots, if you use `@storybook/addon-backgrounds`).
 
 
 You may also use a local static build of storybook if you do not want to run the webpack dev-server:

addons/storyshots/storyshots-puppeteer/src/__tests__/url.test.js

@@ -0,0 +1,49 @@
+import { constructUrl } from '../url';
+
+describe('Construct URL for Storyshots', () => {
+  it('can use a url without path and without query params', () => {
+    expect(constructUrl('http://localhost:9001', 'someKind', 'someStory')).toEqual(
+      'http://localhost:9001/iframe.html?selectedKind=someKind&selectedStory=someStory'
+    );
+  });
+
+  it('can use a url without path (but slash) and without query params', () => {
+    expect(constructUrl('http://localhost:9001/', 'someKind', 'someStory')).toEqual(
+      'http://localhost:9001/iframe.html?selectedKind=someKind&selectedStory=someStory'
+    );
+  });
+
+  it('can use a url without path and with query params', () => {
+    expect(constructUrl('http://localhost:9001?hello=world', 'someKind', 'someStory')).toEqual(
+      'http://localhost:9001/iframe.html?selectedKind=someKind&selectedStory=someStory&hello=world'
+    );
+  });
+
+  it('can use a url without path (buth slash) and with query params', () => {
+    expect(constructUrl('http://localhost:9001/?hello=world', 'someKind', 'someStory')).toEqual(
+      'http://localhost:9001/iframe.html?selectedKind=someKind&selectedStory=someStory&hello=world'
+    );
+  });
+
+  it('can use a url with some path and query params', () => {
+    expect(
+      constructUrl('http://localhost:9001/nice-path?hello=world', 'someKind', 'someStory')
+    ).toEqual(
+      'http://localhost:9001/nice-path/iframe.html?selectedKind=someKind&selectedStory=someStory&hello=world'
+    );
+  });
+
+  it('can use a url with some path (slash) and query params', () => {
+    expect(
+      constructUrl('http://localhost:9001/nice-path/?hello=world', 'someKind', 'someStory')
+    ).toEqual(
+      'http://localhost:9001/nice-path/iframe.html?selectedKind=someKind&selectedStory=someStory&hello=world'
+    );
+  });
+
+  it('can use a url with file protocol', () => {
+    expect(constructUrl('file://users/storybook', 'someKind', 'someStory')).toEqual(
+      'file://users/storybook/iframe.html?selectedKind=someKind&selectedStory=someStory'
+    );
+  });
+});

addons/storyshots/storyshots-puppeteer/src/index.js

@@ -1,6 +1,7 @@
 import puppeteer from 'puppeteer';
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
 import { logger } from '@storybook/node-logger';
+import { constructUrl } from './url';
 
 expect.extend({ toMatchImageSnapshot });
 
@@ -43,11 +44,7 @@ export const imageSnapshot = (customConfig = {}) => {
 
       return;
     }
-
-    const encodedKind = encodeURIComponent(kind);
-    const encodedStoryName = encodeURIComponent(story);
-    const storyUrl = `/iframe.html?selectedKind=${encodedKind}&selectedStory=${encodedStoryName}`;
-    const url = storybookUrl + storyUrl;
+    const url = constructUrl(storybookUrl, kind, story);
 
     if (!browser || !page) {
       logger.error(

addons/storyshots/storyshots-puppeteer/src/url.js

@@ -0,0 +1,11 @@
+import { URL } from 'url';
+
+export const constructUrl = (storybookUrl, kind, story) => {
+  const encodedKind = encodeURIComponent(kind);
+  const encodedStoryName = encodeURIComponent(story);
+  const storyUrl = `/iframe.html?selectedKind=${encodedKind}&selectedStory=${encodedStoryName}`;
+  const { protocol, host, pathname, search } = new URL(storybookUrl);
+  const pname = pathname.replace(/\/$/, ''); // removes trailing /
+  const query = search.replace('?', '&'); // convert leading $ to &
+  return `${protocol}//${host}${pname}${storyUrl}${query}`;
+};