Merge pull request #27358 from storybookjs/shilman/27352-fix-tags-com…

…position

Tags: Fix composition with older storybooks
(cherry picked from commit fc915d6)

code/e2e-tests/composition.spec.ts

@@ -0,0 +1,43 @@
+import { test, expect } from '@playwright/test';
+import { SbPage } from './util';
+
+const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:6006';
+
+// This is a slow test, and (presumably) framework independent, so only run it on one sandbox
+const skipTest = process.env.STORYBOOK_TEMPLATE_NAME !== 'react-vite/default-ts';
+
+test.describe('composition', () => {
+  test.beforeEach(async ({ page }) => {
+    if (skipTest) return;
+    await page.goto(storybookUrl);
+    await new SbPage(page).waitUntilLoaded();
+  });
+
+  test('should correctly filter composed stories', async ({ page }) => {
+    if (skipTest) return;
+
+    // Expect that composed Storybooks are visible
+    await expect(await page.getByTitle('Storybook 8.0.0')).toBeVisible();
+    await expect(await page.getByTitle('Storybook 7.6.18')).toBeVisible();
+
+    // Expect composed stories to be available in the sidebar
+    await page.locator('[id="storybook\\@8\\.0\\.0_components-badge"]').click();
+    await expect(
+      await page.locator('[id="storybook\\@8\\.0\\.0_components-badge--default"]')
+    ).toBeVisible();
+
+    await page.locator('[id="storybook\\@7\\.6\\.18_components-badge"]').click();
+    await expect(
+      await page.locator('[id="storybook\\@7\\.6\\.18_components-badge--default"]')
+    ).toBeVisible();
+
+    // Expect composed stories `to be available in the search
+    await page.getByPlaceholder('Find components').fill('Button');
+    await expect(
+      await page.getByRole('option', { name: 'Button Storybook 8.0.0 / @blocks / examples' })
+    ).toBeVisible();
+    await expect(
+      await page.getByRole('option', { name: 'Button Storybook 7.6.18 / @blocks / examples' })
+    ).toBeVisible();
+  });
+});

code/lib/core-server/src/utils/StoryIndexGenerator.test.ts

@@ -88,7 +88,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -119,7 +119,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -150,7 +150,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -192,7 +192,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -294,7 +294,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -440,7 +440,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -593,7 +593,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -656,7 +656,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -714,7 +714,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -771,7 +771,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -789,7 +789,7 @@ describe('StoryIndexGenerator', () => {
         expect(await generator.getIndex()).toMatchInlineSnapshot(`
           {
             "entries": {},
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -832,7 +832,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -933,7 +933,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "docs",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -1066,7 +1066,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "docs",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -1127,7 +1127,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "docs",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -1176,7 +1176,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });

code/lib/core-server/src/utils/StoryIndexGenerator.ts

@@ -592,7 +592,7 @@ export class StoryIndexGenerator {
       );
 
       this.lastIndex = {
-        v: 4,
+        v: 5,
         entries: sorted,
       };
 

code/lib/core-server/src/utils/stories-json.test.ts

@@ -263,7 +263,7 @@ describe('useStoriesJson', () => {
               "type": "story",
             },
           },
-          "v": 4,
+          "v": 5,
         }
       `);
     }, 20_000);

code/lib/core-server/src/utils/summarizeIndex.test.ts

@@ -38,7 +38,7 @@ describe('summarizeIndex', () => {
   it('example stories', () => {
     expect(
       summarizeIndex({
-        v: 4,
+        v: 5,
         entries: {
           'example-introduction--docs': {
             id: 'example-introduction--docs',
@@ -146,14 +146,14 @@ describe('summarizeIndex', () => {
         "playStoryCount": 0,
         "storiesMdxCount": 0,
         "storyCount": 0,
-        "version": 4,
+        "version": 5,
       }
     `);
   });
   it('onboarding stories', () => {
     expect(
       summarizeIndex({
-        v: 4,
+        v: 5,
         entries: {
           'example-introduction--docs': {
             id: 'example-introduction--docs',
@@ -204,14 +204,14 @@ describe('summarizeIndex', () => {
         "playStoryCount": 0,
         "storiesMdxCount": 0,
         "storyCount": 0,
-        "version": 4,
+        "version": 5,
       }
     `);
   });
   it('user stories', () => {
     expect(
       summarizeIndex({
-        v: 4,
+        v: 5,
         entries: {
           'stories-renderers-react-errors--story-contains-unrenderable': {
             id: 'stories-renderers-react-errors--story-contains-unrenderable',
@@ -260,14 +260,14 @@ describe('summarizeIndex', () => {
         "playStoryCount": 0,
         "storiesMdxCount": 0,
         "storyCount": 4,
-        "version": 4,
+        "version": 5,
       }
     `);
   });
   it('pages', () => {
     expect(
       summarizeIndex({
-        v: 4,
+        v: 5,
         entries: {
           'example-page--logged-out': {
             id: 'example-page--logged-out',
@@ -317,14 +317,14 @@ describe('summarizeIndex', () => {
         "playStoryCount": 1,
         "storiesMdxCount": 0,
         "storyCount": 1,
-        "version": 4,
+        "version": 5,
       }
     `);
   });
   it('storiesMdx', () => {
     expect(
       summarizeIndex({
-        v: 4,
+        v: 5,
         entries: {
           'stories-renderers-react-react-mdx--docs': {
             id: 'stories-renderers-react-react-mdx--docs',
@@ -374,14 +374,14 @@ describe('summarizeIndex', () => {
         "playStoryCount": 0,
         "storiesMdxCount": 1,
         "storyCount": 3,
-        "version": 4,
+        "version": 5,
       }
     `);
   });
   it('autodocs', () => {
     expect(
       summarizeIndex({
-        v: 4,
+        v: 5,
         entries: {
           'example-button--docs': {
             id: 'example-button--docs',
@@ -432,14 +432,14 @@ describe('summarizeIndex', () => {
         "playStoryCount": 0,
         "storiesMdxCount": 0,
         "storyCount": 0,
-        "version": 4,
+        "version": 5,
       }
     `);
   });
   it('mdx', () => {
     expect(
       summarizeIndex({
-        v: 4,
+        v: 5,
         entries: {
           'example-introduction--docs': {
             id: 'example-introduction--docs',
@@ -483,7 +483,7 @@ describe('summarizeIndex', () => {
         "playStoryCount": 0,
         "storiesMdxCount": 0,
         "storyCount": 0,
-        "version": 4,
+        "version": 5,
       }
     `);
   });