fix: extract prop type from decorator arguments as well (#81)

* fix: describe typo * feat: handle slots in render functions * fix: extract prop type from decorator arguments as well * add e2e tests to show it off * add description to show how to use it fixes #79
vue-styleguidist · Jan 22, 2019 · abdbcd1 · abdbcd1
1 parent 5afc17d
commit abdbcd1
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 8 deletions.
diff --git a/src/script-handlers/__tests__/classPropHandler.ts b/src/script-handlers/__tests__/classPropHandler.ts
@@ -100,5 +100,18 @@ describe('propHandler', () => {
       })
       expect(documentation.getPropDescriptor).toHaveBeenCalledWith('testDescribed')
     })
+
+    it('should extract type from decorator arguments', () => {
+      const src = `
+        @Component
+        export default class MyTest {
+          @Prop({type:String})
+          testTyped;
+        }`
+      tester(src, {
+        type: { name: 'string' },
+      })
+      expect(documentation.getPropDescriptor).toHaveBeenCalledWith('testTyped')
+    })
   })
 })
diff --git a/src/script-handlers/classPropHandler.ts b/src/script-handlers/classPropHandler.ts
@@ -5,7 +5,7 @@ import getDocblock from '../utils/getDocblock'
 import getDoclets from '../utils/getDoclets'
 import getTypeFromAnnotation from '../utils/getTypeFromAnnotation'
 import transformTagsIntoObject from '../utils/transformTagsIntoObject'
-import { describeDefault, describeRequired } from './propHandler'
+import { describeDefault, describeRequired, describeType } from './propHandler'
 
 export default function propHandler(
   documentation: Documentation,
@@ -60,6 +60,10 @@ export default function propHandler(
               .filter((p: NodePath) => bt.isObjectProperty(p.node)) as Array<
               NodePath<bt.ObjectProperty>
             >
+            // if there is no type annotation, get it from the decorators arguments
+            if (!propPath.node.typeAnnotation) {
+              describeType(propsPath, propDescriptor)
+            }
             describeDefault(propsPath, propDescriptor)
             describeRequired(propsPath, propDescriptor)
           }

diff --git a/src/script-handlers/propHandler.ts b/src/script-handlers/propHandler.ts
@@ -85,7 +85,7 @@ export default function propHandler(documentation: Documentation, path: NodePath
   }
 }
 
-function describeType(
+export function describeType(
   propPropertiesPath: Array<NodePath<bt.ObjectProperty>>,
   propDescriptor: PropDescriptor,
 ) {

diff --git a/tests/components/button-typescript/Button.vue b/tests/components/button-typescript/Button.vue
@@ -15,19 +15,40 @@ import { Component, Prop, Vue } from 'vue-property-decorator'
  */
 @Component
 export default class MyComponent extends Vue {
-  @Prop() propA: number
+  aHiddenData: string
 
+  /**
+   * An example of a property typed through the decorators arguments
+   */
+  @Prop({ type: String })
+  propNoType
+
+  /**
+   * An example of a property typed through the annotation
+   */
+  @Prop
+  propA: number
+
+  /**
+   * A prop with a default value
+   */
   @Prop({ default: 'default value' })
   propB: string
 
-  @Prop([String, Boolean])
+  /**
+   * A prop with a hybrid type
+   */
+  @Prop
   propC: string | boolean
 
   /**
    * method testing
    * @public
    */
   onClick(a: string) {
+    /**
+     * Success event when we click
+     */
     this.$emit('success', a)
   }
 }

diff --git a/tests/components/button-typescript/__snapshots__/button-ts.test.ts.snap b/tests/components/button-typescript/__snapshots__/button-ts.test.ts.snap
@@ -6,7 +6,7 @@ Object {
   "displayName": "MyComponent",
   "events": Object {
     "success": Object {
-      "description": "",
+      "description": "Success event when we click",
       "properties": Array [
         Object {
           "name": "<anonymous>",
@@ -45,7 +45,7 @@ Object {
   ],
   "props": Object {
     "propA": Object {
-      "description": "",
+      "description": "An example of a property typed through the annotation",
       "tags": Object {},
       "type": Object {
         "name": "number",
@@ -56,20 +56,28 @@ Object {
         "func": false,
         "value": "'default value'",
       },
-      "description": "",
+      "description": "A prop with a default value",
       "required": "",
       "tags": Object {},
       "type": Object {
         "name": "string",
       },
     },
     "propC": Object {
-      "description": "",
+      "description": "A prop with a hybrid type",
       "tags": Object {},
       "type": Object {
         "name": "TSUnionType",
       },
     },
+    "propNoType": Object {
+      "description": "An example of a property typed through the decorators arguments",
+      "required": "",
+      "tags": Object {},
+      "type": Object {
+        "name": "string",
+      },
+    },
   },
   "slots": Object {
     "default": Object {

diff --git a/tests/components/button-typescript/button-ts.test.ts b/tests/components/button-typescript/button-ts.test.ts
@@ -23,6 +23,10 @@ describe('tests button', () => {
     beforeEach(() => {
       props = docButton.props || {}
     })
+    it('should return propNoType type as string', () => {
+      expect(props.propNoType.type).toMatchObject({ name: 'string' })
+    })
+
     it('should return propA type as number', () => {
       expect(props.propA.type).toMatchObject({ name: 'number' })
     })