Merge pull request #9291 from storybookjs/stpryshots-puppeteer-id

Storyshots Puppeteer: don't infer story ID from its name

addons/storyshots/storyshots-puppeteer/package.json

@@ -38,6 +38,7 @@
     "regenerator-runtime": "^0.13.3"
   },
   "devDependencies": {
+    "@storybook/csf": "0.0.1",
     "@types/puppeteer": "^2.0.0"
   },
   "peerDependencies": {

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

@@ -1,46 +1,50 @@
+import { toId } from '@storybook/csf';
+
 import { constructUrl } from '../url';
 
 jest.mock('@storybook/node-logger');
 
+const id = toId('someKind', 'someStory');
+
 describe('Construct URL for Storyshots', () => {
   it('can use a url without path and without query params', () => {
-    expect(constructUrl('http://localhost:9001', 'someKind', 'someStory')).toEqual(
+    expect(constructUrl('http://localhost:9001', id)).toEqual(
       'http://localhost:9001/iframe.html?id=somekind--somestory'
     );
   });
 
   it('can use a url without path (but slash) and without query params', () => {
-    expect(constructUrl('http://localhost:9001/', 'someKind', 'someStory')).toEqual(
+    expect(constructUrl('http://localhost:9001/', id)).toEqual(
       'http://localhost:9001/iframe.html?id=somekind--somestory'
     );
   });
 
   it('can use a url without path and with query params', () => {
-    expect(constructUrl('http://localhost:9001?hello=world', 'someKind', 'someStory')).toEqual(
+    expect(constructUrl('http://localhost:9001?hello=world', id)).toEqual(
       'http://localhost:9001/iframe.html?id=somekind--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(
+    expect(constructUrl('http://localhost:9001/?hello=world', id)).toEqual(
       'http://localhost:9001/iframe.html?id=somekind--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?id=somekind--somestory&hello=world');
+    expect(constructUrl('http://localhost:9001/nice-path?hello=world', id)).toEqual(
+      'http://localhost:9001/nice-path/iframe.html?id=somekind--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?id=somekind--somestory&hello=world');
+    expect(constructUrl('http://localhost:9001/nice-path/?hello=world', id)).toEqual(
+      'http://localhost:9001/nice-path/iframe.html?id=somekind--somestory&hello=world'
+    );
   });
 
   it('can use a url with file protocol', () => {
-    expect(constructUrl('file://users/storybook', 'someKind', 'someStory')).toEqual(
+    expect(constructUrl('file://users/storybook', id)).toEqual(
       'file://users/storybook/iframe.html?id=somekind--somestory'
     );
   });

addons/storyshots/storyshots-puppeteer/src/puppeteerTest.ts

@@ -19,7 +19,7 @@ export const puppeteerTest = (customConfig: Partial<PuppeteerTestConfig> = {}) =
   let page: Page; // Hold ref to the page to screenshot.
 
   const testFn = async ({ context }: any) => {
-    const { kind, framework, name } = context;
+    const { kind, framework, name, id } = context;
     if (framework === 'react-native') {
       // Skip tests since RN is not a browser environment.
       logger.error(
@@ -29,7 +29,7 @@ export const puppeteerTest = (customConfig: Partial<PuppeteerTestConfig> = {}) =
       return;
     }
 
-    const url = constructUrl(storybookUrl, kind, name);
+    const url = constructUrl(storybookUrl, id);
     const options = { context, url };
     if (testBody.filter != null && !testBody.filter(options)) {
       return;

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

@@ -1,10 +1,6 @@
-import { toId } from '@storybook/csf';
-
 import { URL } from 'url';
 
-export const constructUrl = (storybookUrl: string, kind: string, story: string) => {
-  const id = toId(kind, story);
-
+export const constructUrl = (storybookUrl: string, id: string) => {
   const storyUrl = `/iframe.html?id=${id}`;
   const { protocol, host, pathname, search } = new URL(storybookUrl);
   const pname = pathname.replace(/\/$/, ''); // removes trailing /

examples/official-storybook/stories/addon-storyshots.stories.js

@@ -22,6 +22,7 @@ export const block = () => {
   );
 };
 block.story = {
+  name: 'Block story',
   parameters: {
     async puppeteerTest(page) {
       const element = await page.$('[data-test-block]');