Merge pull request #278 from utkarsha-deriv/utkarsha/API-call-schema-header-fix

Author: utkarsha-deriv

src/features/Apiexplorer/Schema/RecursiveContent/RecursiveProperties/__tests__/RecursiveProperties.test.tsx

@@ -20,6 +20,36 @@ const fakeItem = {
       description: 'This is recursive item 2',
       oneOf: 'This is oneOf key for recursive_item_2',
     },
+    recursive_item_3: {
+      description: 'This is recursive item 3',
+      oneOf: [
+        {
+          description: 'This is object 1',
+          type: 'string',
+        },
+        {
+          description: 'This is object 2',
+          type: 'object',
+          properties: {
+            property_1: {
+              description: 'item 1',
+              type: 'string',
+              enum: ['deposit', 'withdraw'],
+            },
+            property_2: {
+              description: 'item 2',
+              type: 'object',
+              properties: {
+                property_2_1: {
+                  description: 'item 3',
+                  type: 'string',
+                },
+              },
+            },
+          },
+        },
+      ],
+    },
   },
   definitions: {
     stream_types: {
@@ -59,16 +89,19 @@ describe('RecursiveProperties', () => {
     expect(recursion_1_description).toBeVisible();
 
     const recursion_2_name = await screen.findByText(/recursive_item_1/i);
-    expect(recursion_2_name).toBeVisible();
-
     const recursion_2_description = await screen.findByText(/This is a recursive item/i);
+    expect(recursion_2_name).toBeVisible();
     expect(recursion_2_description).toBeVisible();
 
     const recursion_3_name = await screen.findByText(/recursive_item_2/i);
-    expect(recursion_3_name).toBeVisible();
-
     const recursion_3_description = await screen.findByText(/This is recursive item 2/i);
+    expect(recursion_3_name).toBeVisible();
     expect(recursion_3_description).toBeVisible();
+
+    const recursion_4_name = await screen.findByText(/recursive_item_3/i);
+    const recursion_4_description = await screen.findByText(/This is recursive item 3/i);
+    expect(recursion_4_name).toBeVisible();
+    expect(recursion_4_description).toBeVisible();
   });
 
   it('renders only the description (last item) if there are no nested items anymore', async () => {
@@ -79,7 +112,7 @@ describe('RecursiveProperties', () => {
     expect(item).toBeVisible();
   });
 
-  it('renders StreamTypesObject if value contains oneOf meaning its forgetAll api call', async () => {
+  it('renders StreamTypesObject for forgetAll api call', async () => {
     render(
       <RecursiveProperties
         is_open
@@ -91,4 +124,19 @@ describe('RecursiveProperties', () => {
     const streamTypesObject = await screen.getByTestId('dt_stream_types_object');
     expect(streamTypesObject).toBeVisible();
   });
+
+  it('renders SchemaOneOfObjectContent if the value of key inside property schema contains oneOf', async () => {
+    render(
+      <RecursiveProperties
+        is_open
+        properties={fakeItem.properties}
+        value={fakeItem.properties}
+        jsonSchema={fakeItem}
+      />,
+    );
+    const schemaOneOfObjectContent = await screen.getAllByTestId(
+      'dt_schema_oneof_object_content',
+    )[0];
+    expect(schemaOneOfObjectContent).toBeVisible();
+  });
 });

src/features/Apiexplorer/Schema/RecursiveContent/RecursiveProperties/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import SchemaDescription from '../SchemaDescription';
 import SchemaObjectContent from '../SchemaObjectContent';
 import StreamTypesObject from '../StreamTypesObject';
+import SchemaOneOfObjectContent from '../SchemaOneOfObjectContent';
 
 type TRecursiveProperties = {
   is_open: boolean;
@@ -38,14 +39,20 @@ const RecursiveProperties = ({ is_open, properties, value, jsonSchema }: TRecurs
             {index === 0 && value?.items?.description && (
               <SchemaDescription description={value.items.description} />
             )}
-            {key === 'forget_all' && 'oneOf' in value[key] ? (
+            {key === 'forget_all' && 'oneOf' in properties[key] ? (
               <SchemaObjectContent
                 key={key}
                 key_value={key}
                 properties={properties}
                 jsonSchema={jsonSchema}
                 is_stream_types
               />
+            ) : typeof properties[key] === 'object' && 'oneOf' in properties[key] ? (
+              <SchemaOneOfObjectContent
+                property={properties[key]}
+                key_title={key}
+                jsonSchema={jsonSchema}
+              />
             ) : (
               <SchemaObjectContent key={key} key_value={key} properties={properties} />
             )}

src/features/Apiexplorer/Schema/RecursiveContent/SchemaBodyHeader/__tests__/SchemaBodyHeader.test.tsx

@@ -178,4 +178,24 @@ describe('SchemaBodyHeader', () => {
     expect(stream_types).toBeVisible();
     expect(array_type).toBeVisible();
   });
+
+  it('should render the SchemaBodyHeader for array with items type', async () => {
+    render(
+      <SchemaBodyHeader
+        key_value='test_key_value'
+        type='array'
+        defaultValue='default_test'
+        pattern='some_test_pattern'
+        examples={['example1', 'example2']}
+        enum={['test1', 'test2']}
+        title={undefined}
+        is_open_object
+        setIsOpenObject={() => jest.fn()}
+        is_stream_types={false}
+        items_type='string'
+      />,
+    );
+    const type = await screen.findByText(/string/i);
+    expect(type).toBeVisible();
+  });
 });

src/features/Apiexplorer/Schema/RecursiveContent/SchemaBodyHeader/index.tsx

@@ -13,6 +13,7 @@ type TSchemaBodyHeader = {
   examples: string[];
   enum;
   is_stream_types: boolean;
+  items_type?: string;
 };
 
 const SchemaBodyHeader = ({
@@ -26,6 +27,7 @@ const SchemaBodyHeader = ({
   is_open_object,
   setIsOpenObject,
   is_stream_types,
+  items_type,
 }: TSchemaBodyHeader) => {
   let typeClassName;
   switch (type) {
@@ -110,7 +112,7 @@ const SchemaBodyHeader = ({
                 <div className={styles.schemaObjectContent}>
                   <div>
                     <button onClick={() => setIsOpenObject(!is_open_object)}>
-                      {title ? key_value : 'object'}
+                      {title ? key_value : items_type ?? 'object'}
                     </button>
                   </div>
                 </div>

src/features/Apiexplorer/Schema/RecursiveContent/SchemaObjectContent/index.tsx

@@ -30,6 +30,7 @@ export default function SchemaObjectContent({
     examples,
     enum: _enum,
     title,
+    items,
   } = properties[key_value];
   const value = properties[key_value];
   let data;
@@ -60,6 +61,7 @@ export default function SchemaObjectContent({
           is_open_object={is_open_object}
           setIsOpenObject={setIsOpenObject}
           is_stream_types={is_stream_types}
+          items_type={items?.type}
         />
         {/* Description */}
         <SchemaDescription description={description} />
@@ -74,7 +76,7 @@ export default function SchemaObjectContent({
         {!is_code_open && (
           <RecursiveProperties
             is_open={is_open_object}
-            properties={value.properties || value?.items?.properties}
+            properties={value.properties || value?.items?.properties || value?.patternProperties}
             value={value}
             jsonSchema={jsonSchema}
           />

src/features/Apiexplorer/Schema/RecursiveContent/SchemaOneOfBodyHeader/__tests__/SchemaOneOfBodyHeader.test.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import SchemaOneOfBodyHeader from '..';
+import { screen, render } from '@testing-library/react';
+
+describe('SchemaOneOfBodyHeader', () => {
+  it('should render SchemaOneOfBodyHeader with button having object type as display name', () => {
+    render(
+      <SchemaOneOfBodyHeader
+        key_title='cashier'
+        oneOf={[
+          {
+            description: 'description 1',
+            type: 'string',
+          },
+          {
+            description: 'description 1',
+            type: 'number',
+          },
+          {
+            description: 'description 2',
+            type: 'object',
+          },
+        ]}
+        updateIndexArray={() => jest.fn()}
+      />,
+    );
+    const one_of = screen.getByText(/one of/i);
+    const button_1 = screen.getByRole('button', {
+      name: /string/i,
+    });
+    const button_2 = screen.getByRole('button', {
+      name: /object/i,
+    });
+    const button_3 = screen.getByRole('button', {
+      name: /number/i,
+    });
+    expect(one_of).toBeInTheDocument();
+    expect(button_1).toBeInTheDocument();
+    expect(button_2).toBeInTheDocument();
+    expect(button_3).toBeInTheDocument();
+  });
+
+  it('should render SchemaOneOfBodyHeader with button having object type as display name', () => {
+    render(
+      <SchemaOneOfBodyHeader
+        key_title='cashier'
+        oneOf={[
+          {
+            description: 'description 1',
+            type: 'string',
+            title: 'some title',
+          },
+          {
+            description: 'description 2',
+            type: 'null',
+          },
+        ]}
+        updateIndexArray={() => jest.fn()}
+      />,
+    );
+    const one_of = screen.getByText(/one of/i);
+    const button_1 = screen.getByRole('button', {
+      name: /some title/i,
+    });
+    const button_2 = screen.getByRole('button', {
+      name: /null/i,
+    });
+    expect(one_of).toBeInTheDocument();
+    expect(button_1).toBeInTheDocument();
+    expect(button_2).toBeInTheDocument();
+  });
+
+  it('should render SchemaOneOfBodyHeader with pattern', () => {
+    render(
+      <SchemaOneOfBodyHeader
+        key_title='cashier'
+        oneOf={[
+          {
+            type: 'integer',
+            pattern: 'some regex pattern',
+          },
+          {
+            type: 'array',
+            items: {
+              type: 'string',
+              pattern: 'some regex pattern',
+            },
+          },
+        ]}
+        updateIndexArray={() => jest.fn()}
+      />,
+    );
+    const one_of = screen.getByText(/one of/i);
+    const type_1 = screen.getByText(/integer/i);
+    const pattern = screen.getByText(/some regex pattern/i);
+    const type_2 = screen.getByText(/array/i);
+
+    expect(one_of).toBeInTheDocument();
+    expect(type_1).toBeInTheDocument();
+    expect(pattern).toBeInTheDocument();
+    expect(type_2).toBeInTheDocument();
+  });
+});

src/features/Apiexplorer/Schema/RecursiveContent/SchemaOneOfBodyHeader/index.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import styles from '../../Schema.module.scss';
+
+type TSchemaOneOfBodyHeader = {
+  key_title: string;
+  oneOf: Record<string, any>[];
+  updateIndexArray: (index: number) => void;
+};
+
+const SchemaOneOfBodyHeader = ({ key_title, oneOf, updateIndexArray }: TSchemaOneOfBodyHeader) => {
+  const generateClassName = (type) => {
+    let typeClass;
+    switch (type) {
+      case 'number':
+        typeClass = styles.number;
+        break;
+      case 'array':
+        typeClass = styles.array;
+        break;
+      case 'integer':
+        typeClass = styles.integer;
+        break;
+      case 'null':
+        typeClass = styles.null;
+        break;
+      default:
+        typeClass = styles.string;
+        break;
+    }
+    return typeClass;
+  };
+  return (
+    <div className={styles.schemaBodyHeader}>
+      <div className={styles.schemaBodyType}>
+        <div className={styles.enumFlex}>
+          <p style={{ fontSize: '2.6rem' }}>
+            <strong>{key_title}</strong>
+          </p>
+          <div className={styles.enumContainer}>
+            <span className={styles.enumLabel}>one of</span>
+            {oneOf &&
+              Array.isArray(oneOf) &&
+              oneOf.map((object, index) => {
+                const show_btn = object?.description || object?.properties;
+                const typeClassName = generateClassName(object?.type);
+
+                return (
+                  <React.Fragment key={index}>
+                    <div className={styles.schemaObjectContent}>
+                      {show_btn ? (
+                        <button
+                          onClick={() => {
+                            updateIndexArray(index);
+                          }}
+                        >
+                          {object.title ? object.title : object.type}
+                        </button>
+                      ) : (
+                        <span className={`${styles.enumType} ${typeClassName}`}>{object.type}</span>
+                      )}
+                      {'pattern' in object && (
+                        <div className={styles.schemaRegexContainer}>
+                          <span className={styles.schemaBodyPattern}>{object.pattern}</span>
+                        </div>
+                      )}
+                    </div>
+                  </React.Fragment>
+                );
+              })}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SchemaOneOfBodyHeader;