Merge pull request #391 from open-rpc/fix/fallback-to-schema-examples

BelfordZ · web-flow · commit f1dbd5a55af8 · 2020-11-03T15:52:50.000-08:00
fix: fallback example pairings to schema examples
diff --git a/src/ExamplePairing/ExamplePairing.test.tsx b/src/ExamplePairing/ExamplePairing.test.tsx
@@ -3,42 +3,39 @@ import ReactDOM from "react-dom";
 import ExamplePairing from "./ExamplePairing";
 import examples from "@open-rpc/examples";
 import refParser from "json-schema-ref-parser";
-import { OpenrpcDocument } from "@open-rpc/meta-schema";
+import { MethodObject, OpenrpcDocument, ExamplePairingObject } from "@open-rpc/meta-schema";
 
 it("renders handles no method", async () => {
   const div = document.createElement("div");
-  ReactDOM.render(<ExamplePairing method={undefined} examplePosition={0}/>, div);
+  ReactDOM.render(<ExamplePairing methodName={undefined} examplePairing={{} as any} />, div);
   expect(div.innerHTML).toBe("");
   ReactDOM.unmountComponentAtNode(div);
 });
 
 it("renders handles no method examples", async () => {
   const div = document.createElement("div");
-  ReactDOM.render(<ExamplePairing method={{} as any} examplePosition={0} />, div);
-  expect(div.innerHTML).toBe("");
-  ReactDOM.unmountComponentAtNode(div);
-});
-
-it("renders handles no examplePosition", async () => {
-  const div = document.createElement("div");
-  const simpleMath = await refParser.dereference(examples.simpleMath) as OpenrpcDocument;
-  ReactDOM.render(<ExamplePairing method={simpleMath.methods[0]} />, div);
+  ReactDOM.render(<ExamplePairing methodName={"foo"} />, div);
   expect(div.innerHTML).toBe("");
   ReactDOM.unmountComponentAtNode(div);
 });
 
 it("renders examples", async () => {
   const div = document.createElement("div");
   const simpleMath = await refParser.dereference(examples.simpleMath) as OpenrpcDocument;
-  ReactDOM.render(<ExamplePairing method={simpleMath.methods[0]} examplePosition={0} />, div);
+  ReactDOM.render(
+    <ExamplePairing
+      methodName={simpleMath.methods[0].name}
+      examplePairing={simpleMath.methods[0].examples && simpleMath.methods[0].examples[0] as any}
+    />
+    , div);
   expect(div.innerHTML.includes("2")).toBe(true);
   expect(div.innerHTML.includes("4")).toBe(true);
   ReactDOM.unmountComponentAtNode(div);
 });
 
 it("renders examples with params by-name", async () => {
   const div = document.createElement("div");
-  ReactDOM.render(<ExamplePairing method={{
+  const method: MethodObject = {
     examples: [
       {
         name: "fooExample",
@@ -68,7 +65,13 @@ it("renders examples with params by-name", async () => {
         type: "string",
       },
     },
-  }} examplePosition={0} />, div);
+  };
+  ReactDOM.render(
+    <ExamplePairing
+      methodName={method.name}
+      examplePairing={method.examples && method.examples[0] as ExamplePairingObject}
+      paramStructure={method.paramStructure || "by-position"} />
+    , div);
   expect(div.innerHTML.includes("foo")).toBe(true);
   expect(div.innerHTML.includes("bar")).toBe(true);
   ReactDOM.unmountComponentAtNode(div);
diff --git a/src/ExamplePairing/ExamplePairing.tsx b/src/ExamplePairing/ExamplePairing.tsx
@@ -3,14 +3,15 @@ import Grid from "@material-ui/core/Grid";
 import { Card, CardContent, Theme, withStyles, WithStyles } from "@material-ui/core";
 import ReactJson from "react-json-view";
 import ReactMarkdown from "react-markdown";
-import { MethodObject, ExampleObject, ExamplePairingObject } from "@open-rpc/meta-schema";
+import { ExampleObject, ExamplePairingObject } from "@open-rpc/meta-schema";
 import _ from "lodash";
 
 export type TParamStructure = "either" | "by-name" | "by-position";
 
 interface IProps extends WithStyles<typeof styles> {
-  examplePosition?: number;
-  method?: MethodObject;
+  examplePairing?: ExamplePairingObject;
+  paramStructure?: TParamStructure;
+  methodName?: string;
   reactJsonOptions?: any;
 }
 
@@ -22,37 +23,32 @@ const styles = (theme: Theme) => ({
 
 class ExamplePairing extends Component<IProps, {}> {
   public render() {
-    const { examplePosition, method, classes } = this.props;
-    if (_.isUndefined(examplePosition)) {
+    const { examplePairing, paramStructure, classes, methodName } = this.props;
+    if (_.isUndefined(examplePairing)) {
       return null;
     }
-    let example;
-    if (method && method.examples && method.examples[examplePosition]) {
-      example = method.examples[examplePosition] as ExamplePairingObject;
-    }
-    if (!example || _.isEmpty(example)) {
+    if (_.isUndefined(methodName)) {
       return null;
     }
-    const paramStructure: TParamStructure = method?.paramStructure || "either";
     const params = paramStructure === "by-name"
-      ? (example.params as ExampleObject[]).reduce(((memo, p) => {
+      ? (examplePairing.params as ExampleObject[]).reduce(((memo, p) => {
         memo[p.name] = p.value;
         return memo;
       }), {} as any)
-      : (example.params as ExampleObject[]).map(((p) => p.value));
+      : (examplePairing.params as ExampleObject[]).map(((p) => p.value));
 
     return (
       <Grid container spacing={10}>
         <Grid item xs={12}>
-          <ReactMarkdown source={example.description} className={classes.description} />
+          <ReactMarkdown source={examplePairing.description} className={classes.description} />
         </Grid>
         <Grid item xs={6}>
           <Card>
             <CardContent>
-              {example.params && <ReactJson src={{
+              {examplePairing.params && <ReactJson src={{
                 id: 1,
                 jsonrpc: "2.0",
-                method: method && method.name,
+                method: methodName,
                 params,
               }} {...this.props.reactJsonOptions} />}
             </CardContent>
@@ -61,10 +57,10 @@ class ExamplePairing extends Component<IProps, {}> {
         <Grid item xs={6}>
           <Card>
             <CardContent>
-              {example.result && <ReactJson src={{
+              {examplePairing.result && <ReactJson src={{
                 id: 1,
                 jsonrpc: "2.0",
-                result: (example.result as ExampleObject).value,
+                result: (examplePairing.result as ExampleObject).value,
               }} {...this.props.reactJsonOptions} />}
             </CardContent>
           </Card>
diff --git a/src/ExamplePairings/ExamplePairings.test.tsx b/src/ExamplePairings/ExamplePairings.test.tsx
@@ -32,10 +32,118 @@ it("renders examples", async () => {
     <ExamplePairings
       method={simpleMath.methods[0]}
       examples={simpleMath.methods[0].examples as ExamplePairingObject[]
-    } />
-  , div);
+      } />
+    , div);
   expect(div.innerHTML.includes("simpleMathAdditionTwo")).toBe(true);
   expect(div.innerHTML.includes("2")).toBe(true);
   expect(div.innerHTML.includes("4")).toBe(true);
   ReactDOM.unmountComponentAtNode(div);
 });
+
+it("renders examples with only schema examples", async () => {
+  const div = document.createElement("div");
+  const testDoc: OpenrpcDocument = {
+    info: {
+      title: "test",
+      version: "0.0.0",
+    },
+    methods: [
+      {
+        name: "test-method",
+        params: [{
+          name: "testparam1",
+          schema: {
+            examples: ["bob"],
+            type: "string",
+          },
+        }],
+        result: {
+          name: "test-method-result",
+          schema: {
+            examples: ["potato"],
+            type: "string",
+          },
+        },
+      },
+    ],
+    openrpc: "1.0.0",
+  };
+  ReactDOM.render(
+    <ExamplePairings
+      method={testDoc.methods[0]}
+      examples={testDoc.methods[0].examples as ExamplePairingObject[]
+      } />
+    , div);
+  expect(div.innerHTML.includes("potato")).toBe(true);
+  expect(div.innerHTML.includes("bob")).toBe(true);
+  ReactDOM.unmountComponentAtNode(div);
+});
+
+it("renders examples with only schema examples with no params", async () => {
+  const div = document.createElement("div");
+  const testDoc: OpenrpcDocument = {
+    info: {
+      title: "test",
+      version: "0.0.0",
+    },
+    methods: [
+      {
+        name: "test-method",
+        params: [],
+        result: {
+          name: "test-method-result",
+          schema: {
+            examples: ["potato"],
+            type: "string",
+          },
+        },
+      },
+    ],
+    openrpc: "1.0.0",
+  };
+  ReactDOM.render(
+    <ExamplePairings
+      method={testDoc.methods[0]}
+      examples={testDoc.methods[0].examples as ExamplePairingObject[]
+      } />
+    , div);
+  expect(div.innerHTML.includes("potato")).toBe(true);
+  expect(div.innerHTML.includes("bob")).toBe(true);
+  ReactDOM.unmountComponentAtNode(div);
+});
+
+it("renders examples with only schema examples and no method", async () => {
+  const div = document.createElement("div");
+  const testDoc: OpenrpcDocument = {
+    info: {
+      title: "test",
+      version: "0.0.0",
+    },
+    methods: [
+      {
+        name: "test-method",
+        params: [{
+          name: "testparam1",
+          schema: {
+            examples: ["bob"],
+            type: "string",
+          },
+        }],
+        result: {
+          name: "test-method-result",
+          schema: {
+            examples: ["potato"],
+            type: "string",
+          },
+        },
+      },
+    ],
+    openrpc: "1.0.0",
+  };
+  ReactDOM.render(
+    <ExamplePairings
+      examples={testDoc.methods[0].examples as ExamplePairingObject[]
+      } />
+    , div);
+  ReactDOM.unmountComponentAtNode(div);
+});
diff --git a/src/ExamplePairings/ExamplePairings.tsx b/src/ExamplePairings/ExamplePairings.tsx
@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import ExamplePairing from "../ExamplePairing/ExamplePairing";
 import { Typography, List, ListItem, ListItemText, Grid, MenuItem, Menu, withStyles } from "@material-ui/core";
-import { MethodObject, ExamplePairingObject } from "@open-rpc/meta-schema";
+import { MethodObject, ExamplePairingObject, ContentDescriptorObject, ReferenceObject } from "@open-rpc/meta-schema";
 
 interface IProps {
   method?: MethodObject;
@@ -15,6 +15,47 @@ interface IState {
   currentExample?: ExamplePairingObject;
 }
 
+const newExample: ExamplePairingObject = {
+  name: "generated-example",
+  params: [
+  ],
+  result: {
+    name: "example-result",
+    value: null,
+  },
+};
+const getExamplesFromMethod = (method?: MethodObject): ExamplePairingObject[] => {
+  if (!method) { return []; }
+  const examples: ExamplePairingObject[] = [];
+
+  (method.params as ContentDescriptorObject[]).forEach((param, index: number) => {
+    if (param.schema.examples && param.schema.examples.length > 0) {
+      param.schema.examples.forEach((ex: any, i: number) => {
+        if (!examples[i]) {
+          examples.push({ ...newExample });
+        }
+        examples[i].params.push({
+          name: param.name,
+          value: ex,
+        });
+      });
+    }
+  });
+  const methodResult = method.result as ContentDescriptorObject;
+  if (methodResult && methodResult.schema && methodResult.schema.examples && methodResult.schema.examples.length > 0) {
+    methodResult.schema.examples.forEach((ex: any, i: number) => {
+      if (!examples[i]) {
+        examples.push({ ...newExample });
+      }
+      examples[i].result = {
+        name: methodResult.name,
+        value: ex,
+      };
+    });
+  }
+  return examples;
+};
+
 class ExamplePairings extends Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
@@ -43,8 +84,10 @@ class ExamplePairings extends Component<IProps, IState> {
     this.setState({ anchorEl: null });
   }
   public render() {
-    const { examples, method } = this.props;
+    let { examples } = this.props;
+    const { method } = this.props;
     const { anchorEl } = this.state;
+    examples = examples || getExamplesFromMethod(method);
     if (!examples || examples.length === 0) {
       return null;
     }
@@ -84,10 +127,10 @@ class ExamplePairings extends Component<IProps, IState> {
           </List>
         </Grid>
         <Grid item xs={12}>
-          {this.props.examples &&
+          {examples &&
             <ExamplePairing
-              method={method}
-              examplePosition={this.state.selectedIndex}
+              examplePairing={examples[this.state.selectedIndex]}
+              methodName={this.props.method && this.props.method.name}
               reactJsonOptions={this.props.reactJsonOptions} />}
         </Grid>
       </Grid>
