Make storybook test more robust (#2822)

* Update storybook tests

Co-authored-by: Katie Langerman <[email protected]>

* Update tests

* Update stories

Co-authored-by: Katie Langerman <[email protected]>

Author: colebemis

src/Button/Button.features.stories.tsx

@@ -6,8 +6,6 @@ export default {
   title: 'Components/Button/Features',
 }
 
-export const Default = () => <Button>Default</Button>
-
 export const Primary = () => <Button variant="primary">Primary</Button>
 
 export const Danger = () => <Button variant="danger">Danger</Button>

src/Button/Button.stories.tsx

@@ -37,3 +37,5 @@ export default {
 } as Meta<typeof Button>
 
 export const Playground: Story<typeof Button> = args => <Button {...args}>Default</Button>
+
+export const Default = () => <Button>Default</Button>

src/Button/IconButton.features.stories.tsx

@@ -6,8 +6,6 @@ export default {
   title: 'Components/IconButton/Features',
 }
 
-export const Default = () => <IconButton icon={HeartIcon} aria-label="Default" />
-
 export const Primary = () => <IconButton icon={HeartIcon} variant="primary" aria-label="Primary" />
 
 export const Danger = () => <IconButton icon={HeartIcon} variant="danger" aria-label="Danger" />

src/Button/IconButton.stories.tsx

@@ -38,3 +38,5 @@ const meta: Meta<ComponentProps<typeof IconButton>> = {
 export default meta
 
 export const Playground: Story<ComponentProps<typeof IconButton>> = args => <IconButton {...args} />
+
+export const Default = () => <IconButton icon={HeartIcon} aria-label="Default" />

src/Button/LinkButton.features.stories.tsx

@@ -6,12 +6,6 @@ export default {
   title: 'Components/LinkButton/Features',
 }
 
-export const Default = () => (
-  <Button as="a" href="/">
-    Default
-  </Button>
-)
-
 export const Primary = () => (
   <Button as="a" href="/" variant="primary">
     Primary

src/Button/LinkButton.stories.tsx

@@ -37,3 +37,9 @@ export const Playground: Story<typeof Button> = args => (
     Default
   </Button>
 )
+
+export const Default = () => (
+  <Button as="a" href="/">
+    Default
+  </Button>
+)

src/__tests__/storybook.test.tsx

@@ -4,29 +4,35 @@ import groupBy from 'lodash.groupby'
 
 const ROOT_DIRECTORY = path.resolve(__dirname, '..', '..')
 // Components opted into the new story format
-const allowlist = ['TreeView']
+const allowlist = ['ActionList', 'Button', 'IconButton', 'FilteredActionList', 'TreeView']
 const stories = glob
   .sync('src/**/*.stories.tsx', {
     cwd: ROOT_DIRECTORY,
   })
-  .filter(file => allowlist.some(component => file.includes(component)))
+  // Filter out deprecated stories
+  .filter(file => !file.includes('deprecated'))
+  .filter(file =>
+    allowlist.some(
+      component => file.includes(`/${component}.stories.tsx`) || file.includes(`/${component}.features.stories.tsx`),
+    ),
+  )
   .map(file => {
     const filepath = path.join(ROOT_DIRECTORY, file)
     const type = path.basename(filepath, '.stories.tsx').endsWith('features') ? 'feature' : 'default'
     const name = type === 'feature' ? path.basename(file, '.features.stories.tsx') : path.basename(file, '.stories.tsx')
 
-    return [name, require(filepath), type]
+    return {name, story: require(filepath), type, relativeFilepath: path.relative(ROOT_DIRECTORY, filepath)}
   })
 
 const components = Object.entries(
-  groupBy(stories, ([name]) => {
+  groupBy(stories, ({name}) => {
     return name
   }),
 )
 
 describe.each(components)('%s', (_component, stories) => {
-  for (const [, story, type] of stories) {
-    describe(`${story.default.title}`, () => {
+  for (const {story, type, relativeFilepath} of stories) {
+    describe(`${story.default.title} (${relativeFilepath})`, () => {
       test('title follows naming convention', () => {
         // Matches:
         // - title: 'Components/TreeView'
@@ -46,17 +52,23 @@ describe.each(components)('%s', (_component, stories) => {
       })
 
       if (type === 'default') {
-        test('exports a "Default" story', () => {
+        test('exports a Default story', () => {
           expect(story.Default).toBeDefined()
         })
 
-        test('"Default" story does not use args', () => {
+        test('Default story does not have `args`', () => {
           expect(story.Default.args).not.toBeDefined()
         })
 
-        test('"Default" story does not set `argTypes` on the `Default` story', () => {
+        test('Default story does not have `argTypes`', () => {
           expect(story.Default.argTypes).not.toBeDefined()
         })
+
+        test('only exports Default and Playground stories', () => {
+          for (const storyName of Object.keys(story)) {
+            expect(/^Default$|^(.*)Playground$|^default$/.test(storyName)).toBe(true)
+          }
+        })
       }
     })
   }