Merge pull request #35 from storybookjs/feat/CH-1358-support-auto-title

Support auto title stories

Author: yannbf

.storybook/main.js

@@ -1,6 +1,10 @@
 const { STRESS_TEST, STORY_STORE_V7, WITHOUT_DOCS } = process.env;
 
-const stories = ['../stories/basic/*.stories.mdx', '../stories/basic/*.stories.@(js|jsx|ts|tsx)'];
+const stories = [
+  {
+    directory: '../stories',
+  },
+];
 
 if (STRESS_TEST) {
   stories.push('../stories/stress-test/*.stories.@(js|jsx|ts|tsx)');

playwright/transform.js

@@ -3,7 +3,7 @@ const { transformPlaywright } = require('../dist/cjs/playwright/transformPlaywri
 
 module.exports = {
   process(src, filename, config) {
-    const csfTest = transformPlaywright(src);
+    const csfTest = transformPlaywright(src, filename);
 
     const result = babelTransform(csfTest, {
       filename,

src/csf/transformCsf.ts

@@ -16,13 +16,13 @@ export interface TestContext {
 }
 type FilePrefixer = () => t.Statement[];
 type TestPrefixer = (context: TestContext) => t.Statement[];
-const JEST_GLOBAL_REGEX = /(before|after)(All|Each)$/;
 
 interface TransformOptions {
   clearBody?: boolean;
   filePrefixer?: FilePrefixer;
   testPrefixer?: TestPrefixer;
   insertTestIfEmpty?: boolean;
+  defaultTitle?: string;
 }
 
 const prefixFunction = (
@@ -73,9 +73,15 @@ const makeDescribe = (key: string, tests: t.Statement[]): t.Statement | null =>
 
 export const transformCsf = (
   code: string,
-  { filePrefixer, clearBody = false, testPrefixer, insertTestIfEmpty }: TransformOptions = {}
+  {
+    filePrefixer,
+    clearBody = false,
+    testPrefixer,
+    insertTestIfEmpty,
+    defaultTitle,
+  }: TransformOptions = {}
 ) => {
-  const csf = loadCsf(code, { defaultTitle: 'FIXME' });
+  const csf = loadCsf(code, { defaultTitle });
   csf.parse();
 
   const storyExports = Object.keys(csf._stories);

src/playwright/index.ts

@@ -2,7 +2,7 @@ import { transform as babelTransform } from '@babel/core';
 import { transformPlaywright } from './transformPlaywright';
 
 export const process = (src: string, filename: string, config: any) => {
-  const csfTest = transformPlaywright(src);
+  const csfTest = transformPlaywright(src, filename);
 
   const result = babelTransform(csfTest, {
     filename,

src/playwright/transformPlaywright.test.ts

@@ -1,19 +1,50 @@
 import dedent from 'ts-dedent';
+import path from 'path';
+import * as coreCommon from '@storybook/core-common';
+
 import { transformPlaywright } from './transformPlaywright';
 
+jest.mock('@storybook/core-common');
+
 expect.addSnapshotSerializer({
   print: (val: any) => val.trim(),
   test: (val: any) => true,
 });
 
 describe('Playwright', () => {
+  beforeEach(() => {
+    const relativeSpy = jest.spyOn(path, 'relative');
+    relativeSpy.mockReturnValueOnce('stories/basic/Header.stories.js');
+    jest.spyOn(coreCommon, 'serverRequire').mockImplementation(() => ({
+      stories: [
+        {
+          directory: '../stories/basic',
+          titlePrefix: 'Example',
+        },
+      ],
+    }));
+    jest.spyOn(coreCommon, 'normalizeStories').mockImplementation(() => [
+      {
+        titlePrefix: 'Example',
+        files: '**/*.stories.@(mdx|tsx|ts|jsx|js)',
+        directory: './stories/basic',
+        importPathMatcher:
+          /^\.[\\/](?:stories\/basic(?:\/(?!\.)(?:(?:(?!(?:^|\/)\.).)*?)\/|\/|$)(?!\.)(?=.)[^/]*?\.stories\.(mdx|tsx|ts|jsx|js))$/,
+      },
+    ]);
+  });
+
+  const filename = './stories/basic/Header.stories.js';
   it('should generate a play test when the story has a play function', () => {
     expect(
-      transformPlaywright(dedent`
-        export default { title: 'foo/bar' };
+      transformPlaywright(
+        dedent`
+        export default { title: 'foo/bar', component: Button };
         export const A = () => {};
         A.play = () => {};
-      `)
+      `,
+        filename
+      )
     ).toMatchInlineSnapshot(`
       if (!require.main) {
         describe("foo/bar", () => {
@@ -43,10 +74,13 @@ describe('Playwright', () => {
   });
   it('should generate a smoke test when story does not have a play function', () => {
     expect(
-      transformPlaywright(dedent`
+      transformPlaywright(
+        dedent`
         export default { title: 'foo/bar' };
         export const A = () => {};
-      `)
+      `,
+        filename
+      )
     ).toMatchInlineSnapshot(`
       if (!require.main) {
         describe("foo/bar", () => {
@@ -74,4 +108,41 @@ describe('Playwright', () => {
       }
     `);
   });
+
+  it('should generate a smoke test with auto title', () => {
+    expect(
+      transformPlaywright(
+        dedent`
+        export default { component: Button };
+        export const A = () => {};
+      `,
+        filename
+      )
+    ).toMatchInlineSnapshot(`
+      if (!require.main) {
+        describe("Example/Header", () => {
+        describe("A", () => {
+          it("smoke-test", async () => {
+            page.on('pageerror', err => {
+              page.evaluate(({
+                id,
+                err
+              }) => __throwError(id, err), {
+                id: "example-header--a",
+                err: err.message
+              });
+            });
+            return page.evaluate(({
+              id,
+              hasPlayFn
+            }) => __test(id, hasPlayFn), {
+              id: "example-header--a",
+              hasPlayFn: false
+            });
+          });
+        });
+      });
+      }
+    `);
+  });
 });

src/playwright/transformPlaywright.ts

@@ -1,4 +1,8 @@
+import { resolve, join, relative } from 'path';
 import template from '@babel/template';
+import { serverRequire, normalizeStories } from '@storybook/core-common';
+import { autoTitle } from '@storybook/store';
+
 import { transformCsf } from '../csf/transformCsf';
 
 export const testPrefixer = template(
@@ -19,12 +23,40 @@ export const testPrefixer = template(
     plugins: ['jsx'],
   }
 );
-export const transformPlaywright = (src: string) => {
+
+const getDefaultTitle = (filename: string) => {
+  // we'll need to figure this out for different cases
+  // e.g. --config-dir
+  const configDir = resolve('.storybook');
+  const workingDir = resolve();
+
+  const main = serverRequire(join(configDir, 'main'));
+
+  if (!main) {
+    throw new Error(`Could not load main.js in ${configDir}`);
+  }
+
+  const normalizedStoriesEntries = normalizeStories(main.stories, {
+    configDir,
+    workingDir,
+  }).map((specifier) => ({
+    ...specifier,
+    importPathMatcher: new RegExp(specifier.importPathMatcher),
+  }));
+
+  const filePath = './' + relative(workingDir, filename);
+
+  return autoTitle(filePath, normalizedStoriesEntries);
+};
+
+export const transformPlaywright = (src: string, filename: string) => {
+  const defaultTitle = getDefaultTitle(filename);
   const result = transformCsf(src, {
     // @ts-ignore
     testPrefixer,
     insertTestIfEmpty: true,
     clearBody: true,
+    defaultTitle,
   });
   return result;
 };

stories/basic/Button.stories.js

@@ -10,7 +10,6 @@ import {
 import { Button } from './Button';
 
 export default {
-  title: 'Example/Button',
   component: Button,
   argTypes: {
     onSubmit: { action: true },