t Adds tests to indicate the problem with methods

issue storybookjs#17147
quatico-solutions · Oct 25, 2022 · 2bf1332 · 2bf1332
1 parent 7bcf944
commit 2bf1332
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 1 deletion.
diff --git a/code/renderers/web-components/src/docs/__testfixtures__/custom-elements.json b/code/renderers/web-components/src/docs/__testfixtures__/custom-elements.json
@@ -443,6 +443,66 @@
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "./src/components/sb-dialog-working.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Custom element with distinct member / event names",
+          "name": "SbDialogWorking",
+          "tagName": "sb-dialog-working",
+          "customElement": true,
+          "members": [
+            {
+              "kind": "method",
+              "name": "doClose",
+              "description": "Close the dialog",
+              "signature": "doClose() => Promise<void>"
+            }
+          ],
+          "events": [
+            {
+              "name": "close",
+              "type": {
+                "text": "void"
+              },
+              "description": "Indicate when closing the dialog"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "./src/components/sb-dialog-broken.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Custom element with clashing member / event names",
+          "name": "SbDialogBroken",
+          "tagName": "sb-dialog-broken",
+          "customElement": true,
+          "members": [
+            {
+              "kind": "method",
+              "name": "close",
+              "description": "Close the dialog",
+              "signature": "close() => Promise<void>"
+            }
+          ],
+          "events": [
+            {
+              "name": "close",
+              "type": {
+                "text": "void"
+              },
+              "description": "Indicate when closing the dialog"
+            }
+          ]
+        }
+      ]
     }
   ]
 }
diff --git a/code/renderers/web-components/src/docs/custom-elements.test.ts b/code/renderers/web-components/src/docs/custom-elements.test.ts
@@ -2,7 +2,7 @@
 // @ts-expect-error (Converted from ts-ignore)
 import global from 'global';
 
-import { extractArgTypes } from './custom-elements';
+import { extractArgTypes, extractComponentDescription } from './custom-elements';
 import customElementsManifest from './__testfixtures__/custom-elements.json';
 
 declare global {
@@ -49,4 +49,39 @@ describe('extractArgTypes', () => {
       });
     });
   });
+
+  describe('members', () => {
+    it('should map to a method item with distinct name', () => {
+      const { doClose: item } = extractArgTypes('sb-dialog-working');
+
+      expect(item).toEqual({
+        description: 'Close the dialog',
+        name: 'doClose',
+        required: false,
+        table: {
+          category: 'properties',
+          defaultValue: { summary: undefined },
+          type: { summary: undefined },
+        },
+        type: { name: undefined },
+      });
+    });
+
+    // FIXME: The current implementation of mapData cannot deal clashing names, e.g., member vs. event
+    it.skip('should map to a method item with clashing event name', () => {
+      const { 'event#close': item } = extractArgTypes('sb-dialog-broken');
+
+      expect(item).toEqual({
+        description: 'Close the dialog',
+        name: 'close',
+        required: false,
+        table: {
+          category: 'properties',
+          defaultValue: { summary: undefined },
+          type: { summary: undefined },
+        },
+        type: { name: undefined },
+      });
+    });
+  });
 });