[typescript-vue-apollo] Add Subscription Doc (dotansimha#4406)

Author: liaoliaojun

dev-test/githunt/types.vueApollo.ts

@@ -340,7 +340,7 @@ export const OnCommentAddedDocument = gql`
  * When your component renders, `useOnCommentAddedSubscription` returns an object from Apollo Client that contains result, loading and error properties
  * you can use to render your UI.
  *
- * @param options that will be passed into the subscription, supported options are listed on: https://v4.apollo.vuejs.org/guide-composable/query.html#options;
+ * @param options that will be passed into the subscription, supported options are listed on: https://v4.apollo.vuejs.org/guide-composable/subscription.html#options;
  *
  * @example
  * const { result, loading, error } = useOnCommentAddedSubscription(

packages/plugins/typescript/vue-apollo/src/visitor.ts

@@ -119,7 +119,7 @@ export class VueApolloVisitor extends ClientSideBaseVisitor<VueApolloRawPluginCo
  *${operationType === 'Mutation' ? mutationDescription : queryDescription}
  *
  * @param options that will be passed into the ${operationType.toLowerCase()}, supported options are listed on: https://v4.apollo.vuejs.org/guide-composable/${
-      operationType === 'Mutation' ? 'mutation' : 'query'
+      operationType === 'Mutation' ? 'mutation' : operationType === 'Subscription' ? 'subscription' : 'query'
     }.html#options;
  *
  * @example${operationType === 'Mutation' ? mutationExample : queryExample}

packages/plugins/typescript/vue-apollo/tests/vue-apollo.spec.ts

@@ -715,6 +715,23 @@ query MyFeed {
  *      id: // value for 'id'
  *   }
  * );
+ */`;
+
+    const subscriptionDocBlockSnapshot = `/**
+ * __useCommentAddedSubscription__
+ *
+ * To run a query within a Vue component, call \`useCommentAddedSubscription\` and pass it any options that fit your needs.
+ * When your component renders, \`useCommentAddedSubscription\` returns an object from Apollo Client that contains result, loading and error properties
+ * you can use to render your UI.
+ *
+ * @param options that will be passed into the subscription, supported options are listed on: https://v4.apollo.vuejs.org/guide-composable/subscription.html#options;
+ *
+ * @example
+ * const { result, loading, error } = useCommentAddedSubscription(
+ *   {
+ *      name: // value for 'name'
+ *   }
+ * );
  */`;
 
     const mutationDocBlockSnapshot = `/**
@@ -747,6 +764,11 @@ query MyFeed {
             id
           }
         }
+        subscription commentAdded($name: String) {
+          commentAdded(repoFullName: $name) {
+            id
+          }
+        }
       `);
 
       const docs = [{ location: '', document: documents }];
@@ -761,12 +783,15 @@ query MyFeed {
       )) as Types.ComplexPluginOutput;
 
       const queryDocBlock = extract(content.content.substr(content.content.indexOf('/**')));
-
       expect(queryDocBlock).toEqual(queryDocBlockSnapshot);
 
-      const mutationDocBlock = extract(content.content.substr(content.content.lastIndexOf('/**')));
-
+      const mutationDocBlock = extract(
+        content.content.substr(content.content.indexOf('/**', content.content.indexOf('/**') + 1))
+      );
       expect(mutationDocBlock).toEqual(mutationDocBlockSnapshot);
+
+      const subscriptionDocBlock = extract(content.content.substr(content.content.lastIndexOf('/**')));
+      expect(subscriptionDocBlock).toEqual(subscriptionDocBlockSnapshot);
     });
 
     it('Should NOT generate JSDoc docblocks for composition functions if addDocBlocks is false', async () => {