Merge pull request #16788 from storybookjs/16767-sort-stories-index

Core: Sort the results of `globby` when constructing Story Index
storybookjs · Nov 26, 2021 · 0a03181 · 0a03181
2 parents 8b4b8fc + 044f731
commit 0a03181
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 22 deletions.
diff --git a/lib/core-server/src/utils/StoryIndexGenerator.test.ts b/lib/core-server/src/utils/StoryIndexGenerator.test.ts
@@ -68,11 +68,11 @@ describe('StoryIndexGenerator', () => {
                 "name": "Story One",
                 "title": "Nested/Button",
               },
-              "second-nested-f--story-one": Object {
-                "id": "second-nested-f--story-one",
-                "importPath": "./src/second-nested/F.stories.ts",
+              "second-nested-g--story-one": Object {
+                "id": "second-nested-g--story-one",
+                "importPath": "./src/second-nested/G.stories.ts",
                 "name": "Story One",
-                "title": "Second Nested/F",
+                "title": "Second Nested/G",
               },
             },
             "v": 3,
@@ -112,17 +112,23 @@ describe('StoryIndexGenerator', () => {
                 "name": "Story One",
                 "title": "D",
               },
+              "first-nested-deeply-f--story-one": Object {
+                "id": "first-nested-deeply-f--story-one",
+                "importPath": "./src/first-nested/deeply/F.stories.js",
+                "name": "Story One",
+                "title": "First Nested/Deeply/F",
+              },
               "nested-button--story-one": Object {
                 "id": "nested-button--story-one",
                 "importPath": "./src/nested/Button.stories.ts",
                 "name": "Story One",
                 "title": "Nested/Button",
               },
-              "second-nested-f--story-one": Object {
-                "id": "second-nested-f--story-one",
-                "importPath": "./src/second-nested/F.stories.ts",
+              "second-nested-g--story-one": Object {
+                "id": "second-nested-g--story-one",
+                "importPath": "./src/second-nested/G.stories.ts",
                 "name": "Story One",
-                "title": "Second Nested/F",
+                "title": "Second Nested/G",
               },
             },
             "v": 3,
@@ -143,15 +149,16 @@ describe('StoryIndexGenerator', () => {
       await generator.initialize();
 
       (getStorySortParameter as jest.Mock).mockReturnValueOnce({
-        order: ['D', 'B', 'Nested', 'A', 'Second Nested'],
+        order: ['D', 'B', 'Nested', 'A', 'Second Nested', 'First Nested/Deeply'],
       });
 
       expect(Object.keys((await generator.getIndex()).stories)).toEqual([
         'd--story-one',
         'b--story-one',
         'nested-button--story-one',
         'a--story-one',
-        'second-nested-f--story-one',
+        'second-nested-g--story-one',
+        'first-nested-deeply-f--story-one',
       ]);
     });
   });
@@ -168,7 +175,7 @@ describe('StoryIndexGenerator', () => {
         const generator = new StoryIndexGenerator([specifier], options);
         await generator.initialize();
         await generator.getIndex();
-        expect(readCsfOrMdxMock).toHaveBeenCalledTimes(6);
+        expect(readCsfOrMdxMock).toHaveBeenCalledTimes(7);
 
         readCsfOrMdxMock.mockClear();
         await generator.getIndex();
@@ -205,7 +212,7 @@ describe('StoryIndexGenerator', () => {
         const generator = new StoryIndexGenerator([specifier], options);
         await generator.initialize();
         await generator.getIndex();
-        expect(readCsfOrMdxMock).toHaveBeenCalledTimes(6);
+        expect(readCsfOrMdxMock).toHaveBeenCalledTimes(7);
 
         generator.invalidate(specifier, './src/B.stories.ts', false);
 
@@ -245,7 +252,7 @@ describe('StoryIndexGenerator', () => {
           const generator = new StoryIndexGenerator([specifier], options);
           await generator.initialize();
           await generator.getIndex();
-          expect(readCsfOrMdxMock).toHaveBeenCalledTimes(6);
+          expect(readCsfOrMdxMock).toHaveBeenCalledTimes(7);
 
           generator.invalidate(specifier, './src/B.stories.ts', true);
 
@@ -284,7 +291,7 @@ describe('StoryIndexGenerator', () => {
           const generator = new StoryIndexGenerator([specifier], options);
           await generator.initialize();
           await generator.getIndex();
-          expect(readCsfOrMdxMock).toHaveBeenCalledTimes(6);
+          expect(readCsfOrMdxMock).toHaveBeenCalledTimes(7);
 
           generator.invalidate(specifier, './src/B.stories.ts', true);
 

diff --git a/lib/core-server/src/utils/StoryIndexGenerator.ts b/lib/core-server/src/utils/StoryIndexGenerator.ts
@@ -50,7 +50,7 @@ export class StoryIndexGenerator {
           path.join(this.options.workingDir, specifier.directory, specifier.files)
         );
         const files = await glob(fullGlob);
-        files.forEach((absolutePath: Path) => {
+        files.sort().forEach((absolutePath: Path) => {
           const ext = path.extname(absolutePath);
           const relativePath = path.relative(this.options.workingDir, absolutePath);
           if (!['.js', '.jsx', '.ts', '.tsx', '.mdx'].includes(ext)) {

diff --git a/...mockdata__/src/second-nested/F.stories.ts → ...ta__/src/first-nested/deeply/F.stories.js b/...mockdata__/src/second-nested/F.stories.ts → ...ta__/src/first-nested/deeply/F.stories.js
diff --git a/lib/core-server/src/utils/__mockdata__/src/second-nested/G.stories.ts b/lib/core-server/src/utils/__mockdata__/src/second-nested/G.stories.ts
@@ -0,0 +1,6 @@
+const component = {};
+export default {
+  component,
+};
+
+export const StoryOne = {};
diff --git a/lib/core-server/src/utils/stories-json.test.ts b/lib/core-server/src/utils/stories-json.test.ts
@@ -98,6 +98,19 @@ describe('useStoriesJson', () => {
               "story": "Story One",
               "title": "D",
             },
+            "first-nested-deeply-f--story-one": Object {
+              "id": "first-nested-deeply-f--story-one",
+              "importPath": "./src/first-nested/deeply/F.stories.js",
+              "kind": "First Nested/Deeply/F",
+              "name": "Story One",
+              "parameters": Object {
+                "__id": "first-nested-deeply-f--story-one",
+                "docsOnly": false,
+                "fileName": "./src/first-nested/deeply/F.stories.js",
+              },
+              "story": "Story One",
+              "title": "First Nested/Deeply/F",
+            },
             "nested-button--story-one": Object {
               "id": "nested-button--story-one",
               "importPath": "./src/nested/Button.stories.ts",
@@ -111,18 +124,18 @@ describe('useStoriesJson', () => {
               "story": "Story One",
               "title": "Nested/Button",
             },
-            "second-nested-f--story-one": Object {
-              "id": "second-nested-f--story-one",
-              "importPath": "./src/second-nested/F.stories.ts",
-              "kind": "Second Nested/F",
+            "second-nested-g--story-one": Object {
+              "id": "second-nested-g--story-one",
+              "importPath": "./src/second-nested/G.stories.ts",
+              "kind": "Second Nested/G",
               "name": "Story One",
               "parameters": Object {
-                "__id": "second-nested-f--story-one",
+                "__id": "second-nested-g--story-one",
                 "docsOnly": false,
-                "fileName": "./src/second-nested/F.stories.ts",
+                "fileName": "./src/second-nested/G.stories.ts",
               },
               "story": "Story One",
-              "title": "Second Nested/F",
+              "title": "Second Nested/G",
             },
           },
           "v": 3,