implement new design, move schema title to schemaBody component, add …

…tests

packages/api-explorer/__tests__/ResponseSchema.test.jsx

@@ -93,55 +93,10 @@ test('should not contain ResponseSchemaBody element if $ref not exist', () => {
     oas,
   };
   const responseSchema = shallow(<ResponseSchema {...testProps} />);
-  expect(responseSchema.find('table').length).toBe(0);
-});
-
-test('should show "string" response type', () => {
-  const testProps = {
-    operation: oas.operation('/user/login', 'get'),
-    oas,
-  };
-
-  const responseSchema = shallow(<ResponseSchema {...testProps} />);
-  expect(
-    responseSchema
-      .find('p span')
-      .last()
-      .text(),
-  ).toBe('string');
-});
-
-test('should show "object" response schema type', () => {
-  const testProps = {
-    operation: oas.operation('/store/inventory', 'get'),
-    oas,
-  };
-
-  const responseSchema = shallow(<ResponseSchema {...testProps} />);
-  expect(
-    responseSchema
-      .find('p span')
-      .last()
-      .text(),
-  ).toBe('object');
-});
-
-test('should show "array" response schema type', () => {
-  const testProps = {
-    operation: oas.operation('/pet/findByTags', 'get'),
-    oas,
-  };
-
-  const responseSchema = shallow(<ResponseSchema {...testProps} />);
-  expect(
-    responseSchema
-      .find('p span')
-      .last()
-      .text(),
-  ).toBe('array of objects');
+  expect(responseSchema.find('ResponseSchemaBody').length).toBe(0);
 });
 
-test('should render schema type from "application/json"', () => {
+test('should render schema from "application/json"', () => {
   const testProps = {
     operation: new Operation(
       {},
@@ -166,12 +121,7 @@ test('should render schema type from "application/json"', () => {
   };
 
   const responseSchema = shallow(<ResponseSchema {...testProps} />);
-  expect(
-    responseSchema
-      .find('p span')
-      .last()
-      .text(),
-  ).toBe('string');
+  expect(responseSchema.find('ResponseSchemaBody').length).toBe(1);
 });
 
 test('should contain ResponseSchemaBody element if $ref exist for "application/xml"', () => {
@@ -206,53 +156,13 @@ test('should change selectedStatus in component', () => {
   const responseSchema = shallow(<ResponseSchema {...props} />);
 
   const selectedStatus = responseSchema.state().selectedStatus;
-  // const selectedStatus = responseSchema.instance().selectedStatus
 
   responseSchema.instance().changeHandler({ target: { value: '404' } });
   const newSelectedStatus = responseSchema.state().selectedStatus;
   expect(selectedStatus).toEqual('200');
   expect(newSelectedStatus).toEqual('404');
 });
 
-test('should show "object" response schema type for "application/xml" content', () => {
-  const testProps = {
-    operation: new Operation(
-      {},
-      '/',
-      'get',
-      Object.assign({}, oas.operation('/pet/findByTags', 'get'), {
-        responses: {
-          '200': {
-            content: {
-              'application/xml': {
-                description: 'successful operation',
-                schema: {
-                  type: 'object',
-                  properties: {
-                    code: {
-                      type: 'integer',
-                      format: 'int32',
-                    },
-                  },
-                },
-              },
-            },
-          },
-        },
-      }),
-    ),
-    oas,
-  };
-
-  const responseSchema = shallow(<ResponseSchema {...testProps} />);
-  expect(
-    responseSchema
-      .find('p span')
-      .last()
-      .text(),
-  ).toBe('object');
-});
-
 test('should not break if schema property missing', () => {
   const testProps = {
     operation: new Operation(

packages/api-explorer/__tests__/ResponseSchemaBody.test.jsx

@@ -3,6 +3,7 @@ const { shallow, mount } = require('enzyme');
 
 const ResponseSchemaBody = require('../src/ResponseSchemaBody');
 const flattenResponseSchema = require('../src/ResponseSchemaBody').flattenResponseSchema;
+const flatten = require('../src/ResponseSchemaBody').flatten;
 const Oas = require('../src/lib/Oas');
 const petstore = require('./fixtures/petstore/oas.json');
 
@@ -19,8 +20,8 @@ test('display object properties in the table', () => {
   };
   const responseSchemaBody = shallow(<ResponseSchemaBody oas={oas} schema={schema} />);
 
-  expect(responseSchemaBody.find('th').text()).toContain('a');
-  expect(responseSchemaBody.find('td').text()).toEqual('string');
+  expect(responseSchemaBody.find('th').text()).toContain('String');
+  expect(responseSchemaBody.find('td').text()).toEqual('a');
 });
 
 test('display properties if object contains $ref type', () => {
@@ -41,29 +42,28 @@ test('display properties if object contains $ref type', () => {
   const responseSchemaBody = shallow(<ResponseSchemaBody oas={oas} schema={schema} />);
   expect(
     responseSchemaBody
-      .find('th')
+      .find('td')
       .map(a => a.text())
       .filter(a => a === 'category.name').length,
   ).toBe(1);
 });
 
-test('should flatten array ', () => {
+test('should flatten schema to an array', () => {
   const responseSchema = {
     type: 'object',
     properties: {
       category: {
         type: 'array',
         items: {
           type: 'string',
-          properties: null,
         },
       },
     },
   };
   expect(flattenResponseSchema(responseSchema)).toEqual([
     {
       name: 'category',
-      type: 'array of strings',
+      type: '[String]',
       description: undefined,
     },
   ]);
@@ -86,7 +86,7 @@ test('display object properties inside another object in the table', () => {
   const responseSchemaBody = shallow(<ResponseSchemaBody oas={oas} schema={schema} />);
   expect(
     responseSchemaBody
-      .find('th')
+      .find('td')
       .map(a => a.text())
       .filter(a => a === 'a.a').length,
   ).toBe(1);
@@ -126,15 +126,15 @@ test('display $ref items inside object', () => {
   const responseSchemaBody = shallow(<ResponseSchemaBody oas={testOas} schema={schema} />);
   expect(
     responseSchemaBody
-      .find('td')
+      .find('th')
       .map(a => a.text())
-      .filter(a => a === 'array of objects').length,
+      .filter(a => a === '[Object]').length,
   ).toBe(1);
   expect(
     responseSchemaBody
-      .find('th')
+      .find('td')
       .map(a => a.text())
-      .filter(a => a === '| | index').length,
+      .filter(a => a === 'a.pets[].index').length,
   ).toBe(1);
 });
 
@@ -177,15 +177,15 @@ test('render top level array of $ref', () => {
   const responseSchemaBody = shallow(<ResponseSchemaBody oas={testOas} schema={schema} />);
   expect(
     responseSchemaBody
-      .find('th')
+      .find('td')
       .map(a => a.text())
       .filter(a => a === 'name').length,
   ).toBe(1);
   expect(
     responseSchemaBody
-      .find('td')
+      .find('th')
       .map(a => a.text())
-      .filter(a => a === 'string').length,
+      .filter(a => a === 'String').length,
   ).toBe(1);
 });
 
@@ -217,13 +217,13 @@ test('not render more than 3 level deep object', () => {
   const responseSchemaBody = shallow(<ResponseSchemaBody oas={oas} schema={schema} />);
   expect(
     responseSchemaBody
-      .find('th')
+      .find('td')
       .map(a => a.text())
       .filter(a => a === 'a.a.a').length,
   ).toBe(1);
   expect(
     responseSchemaBody
-      .find('th')
+      .find('td')
       .map(a => a.text())
       .filter(a => a === 'a.a.a.a').length,
   ).toBe(0);
@@ -246,15 +246,15 @@ test('render top level array of objects', () => {
   const responseSchemaBody = shallow(<ResponseSchemaBody oas={oas} schema={schema} />);
   expect(
     responseSchemaBody
-      .find('th')
+      .find('td')
       .map(a => a.text())
       .filter(a => a === 'name').length,
   ).toBe(1);
   expect(
     responseSchemaBody
-      .find('td')
+      .find('th')
       .map(a => a.text())
-      .filter(a => a === 'string').length,
+      .filter(a => a === 'String').length,
   ).toBe(1);
 });
 
@@ -275,3 +275,67 @@ test('should render markdown in the description', () => {
     '<a href="https://example.com" target="_self">Description</a>',
   );
 });
+
+test('should show "string" response type', () => {
+  const schema = {
+    type: 'string',
+  };
+
+  const responseSchemaBody = mount(<ResponseSchemaBody oas={oas} schema={schema} />);
+
+  expect(
+    responseSchemaBody
+      .find('p span')
+      .last()
+      .text(),
+  ).toBe('string');
+});
+
+test('should show "string" response type', () => {
+  const schema = {
+    type: 'object',
+    properties: {
+      items: {
+        type: 'string',
+      },
+    },
+  };
+
+  const responseSchemaBody = mount(<ResponseSchemaBody oas={oas} schema={schema} />);
+
+  expect(
+    responseSchemaBody
+      .find('p span')
+      .last()
+      .text(),
+  ).toBe('object');
+});
+
+test('should show "array" response schema type', () => {
+  const schema = {
+    type: 'array',
+    items: {
+      type: 'object',
+      properties: {
+        name: {
+          type: 'string',
+          example: 'doggie',
+        },
+      },
+    },
+  };
+
+  const responseSchemaBody = mount(<ResponseSchemaBody oas={oas} schema={schema} />);
+
+  expect(
+    responseSchemaBody
+      .find('p span')
+      .last()
+      .text(),
+  ).toBe('array of objects');
+});
+
+test('should flatten array ', () => {
+  const array = [[1], [2, 3], [[4, 5]]];
+  expect(flatten(array)).toEqual([1, 2, 3, 4, 5]);
+});

packages/api-explorer/api-explorer.css

@@ -466,3 +466,8 @@ form.rjsf fieldset {
   float: right;
   margin-right: 3%;
 }*/
+
+.response-schema{
+  overflow-y: auto;
+  max-height: 600px;
+}