test: add tests for usage component

Author: batchu5

packages/components/src/components/readme/Usage.js

@@ -31,7 +31,18 @@ main();
 };
 
 export function Usage({ clientName, clientFileName, language }) {
+  if (!language || typeof language !== 'string') {
+    throw new Error(`Invalid "language" parameter: must be a non-empty string, received ${language}`);
+  }
+
   const snippetFn = usageConfig[language];
+
+  if (!snippetFn) {
+    throw new Error(
+      `Invalid "language" parameter: unsupported value "${language}"`
+    );
+  }
+
   const snippet = snippetFn(clientName, clientFileName);
 
   return (

packages/components/test/components/Usage.test.js

@@ -0,0 +1,85 @@
+import { render } from '@asyncapi/generator-react-sdk';
+import { Usage } from '../../src/components/readme/Usage';
+
+describe('Testing of Usage component', () => {
+  const supportedCases = [
+    {
+      language: 'python',
+      clientFileName: 'my_client.py',
+    },
+    {
+      language: 'javascript',
+      clientFileName: 'myClient.js',
+    },
+  ];
+
+  test.each(supportedCases)(
+    'renders usage snippet for %s',
+    ({ language, clientFileName }) => {
+      const result = render(
+        <Usage
+          clientName="MyClient"
+          clientFileName={clientFileName}
+          language={language}
+        />
+      );
+
+      expect(result.trim()).toMatchSnapshot();
+    }
+  );
+
+  test('throws error for unsupported language', () => {
+    expect(() =>
+      render(
+        <Usage
+          clientName="MyClient"
+          clientFileName="my_client.rb"
+          language="ruby"
+        />
+      )
+    ).toThrow(
+      'Invalid "language" parameter: unsupported value "ruby"'
+    );
+  });
+
+  test('throws error when language is empty', () => {
+    expect(() =>
+      render(
+        <Usage
+          clientName="MyClient"
+          clientFileName="my_client.py"
+          language=""
+        />
+      )
+    ).toThrow(
+      'Invalid "language" parameter: must be a non-empty string, received '
+    );
+  });
+
+  test('throws error for wrong casing in language', () => {
+    expect(() =>
+      render(
+        <Usage
+          clientName="MyClient"
+          clientFileName="my_client.py"
+          language="Python"
+        />
+      )
+    ).toThrow(
+      'Invalid "language" parameter: unsupported value "Python"'
+    );
+  });
+
+  test('throws error when language is undefined', () => {
+    expect(() =>
+      render(
+        <Usage
+          clientName="MyClient"
+          clientFileName="my_client.py"
+        />
+      )
+    ).toThrow(
+      'Invalid "language" parameter: must be a non-empty string, received undefined'
+    );
+  });
+});

packages/components/test/components/__snapshots__/Usage.test.js.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Testing of Usage component renders usage snippet for { language: 'javascript', clientFileName: 'myClient.js' } 1`] = `
+"## Usage
+
+\`\`\`javascript
+const MyClient = require('./myClient');
+const wsClient = new MyClient();
+
+async function main() {
+  try {
+    await wsClient.connect();
+    // use wsClient to send/receive messages
+    await wsClient.close();
+  } catch (error) {
+    console.error('Failed to connect:', error);
+  }
+}
+
+main();
+\`\`\`"
+`;
+
+exports[`Testing of Usage component renders usage snippet for { language: 'python', clientFileName: 'my_client.py' } 1`] = `
+"## Usage
+
+\`\`\`python
+from my_client import MyClient
+
+ws_client = MyClient()
+
+async def main():
+    await ws_client.connect()
+    # use ws_client to send/receive messages
+    await ws_client.close()
+\`\`\`"
+`;