From a4ac1994ec5d1342660c7b5d88b05d01be0e2a2f Mon Sep 17 00:00:00 2001 From: "jonas-lt@live.dk" Date: Tue, 12 Sep 2023 12:37:51 +0200 Subject: [PATCH 1/3] fix sidebar and add test --- library/src/__tests__/index.test.tsx | 59 +++++++++++++++++ library/src/containers/Sidebar/Sidebar.tsx | 76 +++++++++------------- 2 files changed, 90 insertions(+), 45 deletions(-) diff --git a/library/src/__tests__/index.test.tsx b/library/src/__tests__/index.test.tsx index 05912ca2d..9961aee6e 100644 --- a/library/src/__tests__/index.test.tsx +++ b/library/src/__tests__/index.test.tsx @@ -155,4 +155,63 @@ describe('AsyncAPI component', () => { expect(result.container.querySelector('#introduction')).toBeDefined(), ); }); + + test('should work all options', async () => { + const schema = { + asyncapi: '2.0.0', + info: { + title: 'Example AsyncAPI', + version: '0.1.0', + }, + servers: { + 'example-server': { + url: 'test.example.org', + protocol: 'mqtt', + }, + }, + channels: { + 'example-channel': { + subscribe: { + message: { + payload: { + type: 'object', + properties: { + exampleField: { + type: 'string', + }, + exampleNumber: { + type: 'number', + }, + exampleDate: { + type: 'string', + format: 'date-time', + }, + }, + }, + }, + }, + }, + }, + }; + const result = render( + , + ); + + await waitFor(() => + expect(result.container.querySelector('#introduction')).toBeDefined(), + ); + }); }); diff --git a/library/src/containers/Sidebar/Sidebar.tsx b/library/src/containers/Sidebar/Sidebar.tsx index f8c42503d..aa3b0534b 100644 --- a/library/src/containers/Sidebar/Sidebar.tsx +++ b/library/src/containers/Sidebar/Sidebar.tsx @@ -23,15 +23,11 @@ export const Sidebar: React.FunctionComponent = () => { .get('x-logo') ?.value(); const components = asyncapi.components(); - const messages = components && components.messages(); - const schemas = components && components.schemas(); - const hasOperations = - asyncapi.channels().length > 0 && - Object.values(asyncapi.channels()).some( - channel => channel.operations().length > 0, - ); + const messages = components && components.messages().all(); + const schemas = components && components.schemas().all(); + const hasOperations = asyncapi.operations().length > 0; - const messagesList = messages && Object.keys(messages).length > 0 && ( + const messagesList = messages && messages.length > 0 && (
  • { Messages
      - {Object.entries(messages).map(([messageName, message]) => ( -
    • + {messages.map(message => ( +
    • setShowSidebar(false)} >
      {message.id()}
      @@ -56,7 +52,7 @@ export const Sidebar: React.FunctionComponent = () => {
      • ); - const schemasList = schemas && Object.keys(schemas).length > 0 && ( + const schemasList = schemas && schemas.length > 0 && (
    • { Schemas
        - {Object.keys(schemas).map(schemaName => ( -
      • + {schemas.map(schema => ( +
      • setShowSidebar(false)} > -
        {schemaName}
        +
        {schema.id()}
        • ))} @@ -216,14 +212,14 @@ function filterObjectsByTags( const ServersList: React.FunctionComponent = () => { const sidebarConfig = useConfig().sidebar; const asyncapi = useSpec(); - const servers = asyncapi.servers(); + const servers = asyncapi.servers().all(); const showServers = sidebarConfig?.showServers || 'byDefault'; if (showServers === 'byDefault') { return (
          - {Object.keys(servers).map(serverName => ( - + {servers.map(server => ( + ))}
        ); @@ -234,22 +230,17 @@ const ServersList: React.FunctionComponent = () => { specTagNames = (asyncapi.info().tags() || []).map(tag => tag.name()); } else { const serverTagNamesSet = new Set(); - Object.values(servers).forEach(server => { - if (typeof server.tags !== 'function') { - return; - } + servers.forEach(server => { server.tags().forEach(t => serverTagNamesSet.add(t.name())); }); specTagNames = Array.from(serverTagNamesSet); } - const serializedServers: TagObject[] = Object.entries(servers).map( - ([serverName, server]) => ({ - name: serverName, - object: server, - data: {}, - }), - ); + const serializedServers: TagObject[] = servers.map(server => ({ + name: server.id(), + object: server, + data: {}, + })); const { tagged, untagged } = filterObjectsByTags( specTagNames, serializedServers, @@ -281,7 +272,7 @@ const ServersList: React.FunctionComponent = () => { const OperationsList: React.FunctionComponent = () => { const sidebarConfig = useConfig().sidebar; const asyncapi = useSpec(); - const operations = asyncapi.operations(); + const operations = asyncapi.operations().all(); const showOperations = sidebarConfig?.showOperations || 'byDefault'; const processedOperations: Array { summary: string; kind: 'publish' | 'subscribe'; }>> = []; - Object.entries(operations).forEach(([operationId, operation]) => { + operations.forEach(operation => { + const operationChannel = operation.channels(); + const operationChannels = operationChannel.all(); + const channelAddress = operationChannels[0]?.address(); if (operation.isSend()) { processedOperations.push({ - name: `publish-${operationId}`, + name: `publish-${operation.id()}`, object: operation, data: { - channelName: - operation - .channels() - .all()[0] - .address() || '', + channelName: channelAddress || '', kind: 'publish', summary: operation.summary() || '', }, @@ -307,14 +297,10 @@ const OperationsList: React.FunctionComponent = () => { } if (operation.isReceive()) { processedOperations.push({ - name: `subscribe-${operationId}`, + name: `subscribe-${operation.id()}`, object: operation, data: { - channelName: - operation - .channels() - .all()[0] - .address() || '', + channelName: channelAddress || '', kind: 'subscribe', summary: operation.summary() || '', }, @@ -337,7 +323,7 @@ const OperationsList: React.FunctionComponent = () => { operationTagNames = (asyncapi.info().tags() || []).map(tag => tag.name()); } else { const operationTagNamesSet = new Set(); - Object.values(operations).forEach(operation => { + operations.forEach(operation => { operation.tags().forEach(t => operationTagNamesSet.add(t.name())); }); operationTagNames = Array.from(operationTagNamesSet); From a7e62427d8e2f7346578ce66188a9491a6e12d4d Mon Sep 17 00:00:00 2001 From: "jonas-lt@live.dk" Date: Tue, 12 Sep 2023 12:40:10 +0200 Subject: [PATCH 2/3] rename test --- library/src/__tests__/index.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/library/src/__tests__/index.test.tsx b/library/src/__tests__/index.test.tsx index 9961aee6e..70a8c0951 100644 --- a/library/src/__tests__/index.test.tsx +++ b/library/src/__tests__/index.test.tsx @@ -156,7 +156,7 @@ describe('AsyncAPI component', () => { ); }); - test('should work all options', async () => { + test('should work with all options', async () => { const schema = { asyncapi: '2.0.0', info: { From e127a1393ab47af5bd6b124c0c1dd1ac462184ca Mon Sep 17 00:00:00 2001 From: "jonas-lt@live.dk" Date: Tue, 12 Sep 2023 12:44:09 +0200 Subject: [PATCH 3/3] fix codesmells --- library/src/containers/Sidebar/Sidebar.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/library/src/containers/Sidebar/Sidebar.tsx b/library/src/containers/Sidebar/Sidebar.tsx index aa3b0534b..92b3d2df8 100644 --- a/library/src/containers/Sidebar/Sidebar.tsx +++ b/library/src/containers/Sidebar/Sidebar.tsx @@ -23,11 +23,11 @@ export const Sidebar: React.FunctionComponent = () => { .get('x-logo') ?.value(); const components = asyncapi.components(); - const messages = components && components.messages().all(); - const schemas = components && components.schemas().all(); + const messages = components?.messages().all(); + const schemas = components?.schemas().all(); const hasOperations = asyncapi.operations().length > 0; - const messagesList = messages && messages.length > 0 && ( + const messagesList = messages?.length > 0 && (
      • {
        • ); - const schemasList = schemas && schemas.length > 0 && ( + const schemasList = schemas?.length > 0 && (