test: add test for AvailableOperations component (#1569)

Co-authored-by: KunalNasa <kunalnasa.dev@gmail.com>
Co-authored-by: Lukasz Gornicki <lpgornicki@gmail.com>

Author: KunalNasa

packages/templates/clients/websocket/javascript/components/AvailableOperations.js

@@ -3,6 +3,9 @@ import OperationHeader from './OperationHeader';
 import MessageExamples from './MessageExamples';
 
 export function AvailableOperations({ operations }) {
+  if (!operations || operations.length === 0) {
+    return null;
+  }
   return (
     <>
       <Text newLines={2}>### Available Operations</Text>

packages/templates/clients/websocket/javascript/template/README.md.js

@@ -46,7 +46,7 @@ Registers a callback to handle WebSocket errors.
 #### \`close()\`
 Closes the WebSocket connection.`}
       </Text>
-      {operations.length > 0 &&  <AvailableOperations operations={operations} />}
+      <AvailableOperations operations={operations} />
       <Text newLines={2}>
         {`## Testing the client
 

packages/templates/clients/websocket/javascript/test/components/AvailableOperations.test.js

@@ -0,0 +1,33 @@
+import path from 'path';
+import { render } from '@asyncapi/generator-react-sdk';
+import { Parser, fromFile } from '@asyncapi/parser';
+import { AvailableOperations } from '../../components/AvailableOperations';
+
+const parser = new Parser();
+const asyncapi_websocket_query = path.resolve(__dirname, '../../../../../../helpers/test/__fixtures__/asyncapi-websocket-query.yml');
+
+describe('Testing AvailableOperations component', () => {
+  let parsedAsyncAPIDocument;
+  beforeAll(async () => {
+    const parseResult = await fromFile(parser, asyncapi_websocket_query).parse();
+    parsedAsyncAPIDocument = parseResult.document;
+  });
+
+  test('Must render all available operations', () => {
+    const operations = parsedAsyncAPIDocument.operations().all();
+    const result = render(<AvailableOperations operations={operations} />);
+    const actual = result.trim();
+    expect(actual).toMatchSnapshot();
+  }); 
+
+  test('Must not render anything if operations are passed as empty array.', () => {
+    const result = render(<AvailableOperations operations={[]} />);
+    const actual = result.trim();
+    expect(actual).toBe('');
+  });
+  test('Must not render anything if operations are passed as null', () => {
+    const result = render(<AvailableOperations operations={null} />);
+    const actual = result.trim();
+    expect(actual).toBe('');
+  });
+});

packages/templates/clients/websocket/javascript/test/components/__snapshots__/AvailableOperations.test.js.snap

@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Testing AvailableOperations component Must render all available operations 1`] = `
+"### Available Operations
+
+#### \`noMessage(payload)\`
+Operation with no messages
+
+
+
+
+#### \`noMessageExamples(payload)\`
+Message without any examples
+
+
+
+
+#### \`oneMessageExample(payload)\`
+One message with one example
+
+
+
+**Example:**
+\`\`\`javascript
+client.oneMessageExample(\\"test\\");
+\`\`\`
+
+
+
+#### \`multipleExamples(payload)\`
+Multiple messages with examples
+
+
+
+**Example:**
+\`\`\`javascript
+client.multipleExamples(\\"test\\");
+\`\`\`
+
+
+**Example:**
+\`\`\`javascript
+client.multipleExamples(false);
+\`\`\`
+
+
+**Example:**
+\`\`\`javascript
+client.multipleExamples(123);
+\`\`\`
+
+
+
+#### \`mixedMessageExamples(payload)\`
+Mixed message example coverage
+
+
+
+**Example:**
+\`\`\`javascript
+client.mixedMessageExamples(\\"test\\");
+\`\`\`
+
+
+**Example:**
+\`\`\`javascript
+client.mixedMessageExamples(\\"test\\");
+\`\`\`
+
+
+**Example:**
+\`\`\`javascript
+client.mixedMessageExamples(false);
+\`\`\`
+
+
+**Example:**
+\`\`\`javascript
+client.mixedMessageExamples(123);
+\`\`\`"
+`;