Add unit tests for OpenApiModels component

GetStream · Dec 15, 2023 · 7799c67 · 7799c67
1 parent 9d6a551
commit 7799c67
Show file tree

Hide file tree

Showing 10 changed files with 737 additions and 27 deletions.
diff --git a/...urus/docs/api/_common_/EventApiModels.jsx → ...rus/docs/api/_common_/CallEventModels.jsx b/...urus/docs/api/_common_/EventApiModels.jsx → ...rus/docs/api/_common_/CallEventModels.jsx
@@ -17,7 +17,7 @@ const events = filter(apiJson).map(key => {
 
 events.sort((e1, e2) => e1.type < e2.type ? -1 : (e1.type > e2.type ? 1 : 0));
 
-const EventApiModels = () => {
+const CallEventModels = () => {
     return <React.Fragment>
         <table>
             <thead>
@@ -33,4 +33,4 @@ const EventApiModels = () => {
     </React.Fragment>
 }
 
-export default EventApiModels;
+export default CallEventModels;
diff --git a/docusaurus/video/docusaurus/docs/api/_common_/OpenApiModels.jsx b/docusaurus/video/docusaurus/docs/api/_common_/OpenApiModels.jsx
@@ -1,43 +1,45 @@
 import React from 'react';
 import { parseModel } from './open-api-model-parser';
 
-const OpenApiModels = ({ modelName, modelFilter, recursive = true }) => {
+const OpenApiModels = ({ modelName, modelFilter, recursive = true, apiJson }) => {
 
   const models = React.useMemo(() => {
     if (!modelName && !modelFilter) {
       return [];
     }
-    return parseModel({modelName, modelFilter, recursive});
+    return parseModel({modelName, modelFilter, recursive, apiJson});
   }, [modelName, modelFilter]);
 
   return (
     <div>
       {models.map((model) => (
-        <React.Fragment>
+        <React.Fragment key={model.name}>
           <h2 id={model.name}>{model.name}</h2>
-          <table>
+          <table data-testid={model.name + '-table'}>
             <thead>
-              <th>Name</th>
-              <th>Type</th>
-              <th>Description</th>
-              <th>Constraints</th>
+              <tr>
+                <th>Name</th>
+                <th>Type</th>
+                <th>Description</th>
+                <th>Constraints</th>
+              </tr>
             </thead>
-            {model.properties.map(p => {
-              return (
-                <React.Fragment>
-                  <tr>
-                    <td>
+            <tbody>
+              {model.properties.map(p => {
+                return (
+                  <tr key={model.name + p.name}>
+                    <td data-testid={model.name + '-' + p.name + '-name'}>
                       <code>{p.name}</code>
                     </td>
-                    <td>
-                      {p.type.definitionLink ? <a href={p.type.definitionLink}><code>{p.type.formattedName}</code></a> : <code>{p.type.formattedName}</code>}
+                    <td data-testid={model.name + '-' + p.name + '-type'}>
+                      {p.type.definitionLink ? <a data-testid={model.name + '-' + p.name + '-typelink'} href={p.type.definitionLink}><code>{p.type.formattedName}</code></a> : <code>{p.type.formattedName}</code>}
                     </td>
-                    <td>{p.description || '-'}</td>
-                    <td>{p.constraints.join(', ') || '-'}</td>
+                    <td data-testid={model.name + '-' + p.name + '-description'}>{p.description || '-'}</td>
+                    <td data-testid={model.name + '-' + p.name + '-constraints'}>{p.constraints.join(', ') || '-'}</td>
                   </tr>
-                </React.Fragment>
-              );
-            })}
+                );
+              })}
+            </tbody>
           </table>
         </React.Fragment>
       ))}

diff --git a/docusaurus/video/docusaurus/docs/api/webhooks/events.mdx b/docusaurus/video/docusaurus/docs/api/webhooks/events.mdx
@@ -5,8 +5,8 @@ slug: /streaming/events
 title: Events
 ---
 
-import EventApiModels from '../_common_/EventApiModels';
+import CallEventModels from '../_common_/CallEventModels';
 
 Here you can find the list of events are sent to Webhook and SQS.
 
-<EventApiModels />
+<CallEventModels />
diff --git a/docusaurus/video/openapi-to-docs/__tests__/OpenApiModels.test.jsx b/docusaurus/video/openapi-to-docs/__tests__/OpenApiModels.test.jsx
@@ -0,0 +1,57 @@
+import { render, screen } from './utils'
+import OpenApiModels from '../../docusaurus/docs/api/_common_/OpenApiModels'
+import mockApiJson from './mock-open-api.json';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+describe('OpenApiModels', async () => {
+  let container;
+
+  beforeEach(() => {
+    container = render(
+      <OpenApiModels modelName={'GetOrCreateCallRequest'} apiJson={mockApiJson}/>,
+    ).container;
+  });
+
+  it('should render each model in an HTML table', () => {
+    expect(screen.getByTestId('GetOrCreateCallRequest-table')).toBeInTheDocument();
+    expect(screen.getByTestId('CallRequest-table')).toBeInTheDocument();
+    expect(screen.getByTestId('MemberRequest-table')).toBeInTheDocument();
+
+    expect(container.querySelectorAll('table').length).toBe(3);
+  });
+
+  it('should render model name', () => {
+    expect(screen.getByText('GetOrCreateCallRequest')).toBeInTheDocument();
+  });
+
+  it('should render properties of model - name', () => {
+    expect(screen.getByTestId('GetOrCreateCallRequest-data-name').innerHTML).toContain('data');
+  });
+
+  it('should render properties of model - type and type definition links', () => {
+    // ref
+    expect(screen.getByTestId('GetOrCreateCallRequest-data-type').innerHTML).toContain('CallRequest');
+
+    expect(screen.getByTestId('GetOrCreateCallRequest-data-typelink').href).toContain('#CallRequest');
+
+    expect(container.querySelector('#CallRequest')).toBeInTheDocument();
+
+    // primitive
+    expect(screen.getByTestId('GetOrCreateCallRequest-ring-type').innerHTML).toContain('boolean');
+
+    expect(container.querySelector('[data-testid=GetOrCreateCallRequest-ring-typelink]')).toBe(null);
+
+    // formatted name
+    expect(screen.getByTestId('CallRequest-members-type').innerHTML).toContain('MemberRequest[]');
+  });
+
+  it('should render properties of model - description', () => {
+    expect(screen.getByTestId('GetOrCreateCallRequest-data-description').innerHTML).toContain('Configuration options for the call');
+  })
+
+  it('should render properties of model - constraints', () => {
+    expect(screen.getByTestId('GetOrCreateCallRequest-data-constraints').innerHTML).toContain('Required');
+    expect(screen.getByTestId('GetOrCreateCallRequest-notify-constraints').innerHTML).toContain('-');
+    expect(screen.getByTestId('CallRequest-members-constraints').innerHTML).toContain('Required, Maximum: 100');
+  });
+})
diff --git a/docusaurus/video/openapi-to-docs/__tests__/mock-open-api.json b/docusaurus/video/openapi-to-docs/__tests__/mock-open-api.json
@@ -73,7 +73,8 @@
               "x-stream-index": "007"
             }
           },
-          "type": "object"
+          "type": "object",
+          "required": ["members"]
         },
         "MemberRequest": {
           "properties": {

diff --git a/docusaurus/video/openapi-to-docs/__tests__/setup.js b/docusaurus/video/openapi-to-docs/__tests__/setup.js
@@ -0,0 +1 @@
+import '@testing-library/jest-dom';
diff --git a/docusaurus/video/openapi-to-docs/__tests__/utils.js b/docusaurus/video/openapi-to-docs/__tests__/utils.js
@@ -0,0 +1,18 @@
+import { cleanup, render } from '@testing-library/react'
+import { afterEach } from 'vitest'
+
+afterEach(() => {
+  cleanup()
+})
+
+function customRender(ui, options = {}) {
+  return render(ui, {
+    // wrap provider(s) here if needed
+    wrapper: ({ children }) => children,
+    ...options,
+  })
+}
+
+export * from '@testing-library/react'
+// override render export
+export { customRender as render }
diff --git a/docusaurus/video/openapi-to-docs/package.json b/docusaurus/video/openapi-to-docs/package.json
@@ -7,8 +7,12 @@
     "test:ui": "vitest --ui"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
     "@vitejs/plugin-react": "^4.2.1",
     "jsdom": "^23.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "vitest": "^1.0.4"
   }
 }
diff --git a/docusaurus/video/openapi-to-docs/vite.config.js b/docusaurus/video/openapi-to-docs/vite.config.js
@@ -6,6 +6,7 @@ export default defineConfig({
   test: {
     globals: true,
     environment: 'jsdom',
+    setupFiles: './__tests__/setup.js',
     css: false,
   },
 })