generate-react-cli 8.2.0 → 8.3.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "generate-react-cli",
-  "version": "8.2.0",
+  "version": "8.3.0-alpha.1",
   "description": "A simple React CLI to generate components instantly and more.",
   "repository": "https://github.com/arminbro/generate-react-cli",
   "bugs": "https://github.com/arminbro/generate-react-cli/issues",

package/readme.md

@@ -478,6 +478,49 @@ GlobalNav.defaultProps = {};
 export default GlobalNav;
 ```
 
+If you have unit testing enabled in your project and have the `withTest` flag enabled, it will generate the unit test file and initialize with some test cases for the generated component right out of the box!
+
+Here are the unit tests it generated for the GlobalNav component using the default testing library template (`@testing-library/react`) that comes with GRC.
+
+```tsx
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import GlobalNav from './GlobalNav';
+
+describe('<GlobalNav />', () => {
+  test('it should mount', () => {
+    render(<GlobalNav />);
+
+    const globalNav = screen.getByTestId('GlobalNav');
+
+    expect(globalNav).toBeInTheDocument();
+  });
+
+  test('it should display the logo "GRC"', () => {
+    render(<GlobalNav />);
+
+    const logo = screen.getByText('GRC');
+
+    expect(logo).toBeInTheDocument();
+  });
+
+  test('it should display three links: Home, About and Contact', () => {
+    render(<GlobalNav />);
+
+    const homeLink = screen.getByText('Home');
+    const aboutLink = screen.getByText('About');
+    const contactLink = screen.getByText('Contact');
+
+    expect(homeLink).toBeInTheDocument();
+    expect(aboutLink).toBeInTheDocument();
+    expect(contactLink).toBeInTheDocument();
+  });
+});
+```
+
+Please note, If you're using a different testing library, you need to provide it as a [custom testing component template](#custom-component-templates), and GRC will instruct openAi to use that to write your unit tests.
+
 That's a wrap. I hope this integration will allow us to generate React components more efficiently, and we can still go in and make the necessary adjustments.
 
 Again, please provide any feedback if you have any, and I would love to see some of the components that you generate with GRC+OpenAI.

package/src/services/openAiService.js

@@ -16,3 +16,20 @@ export async function aiComponentGenerator(componentTemplate, prompt) {
 
   return generatedComponent.data.choices[0].text;
 }
+
+export async function aiComponentTestGenerator(componentTemplate, prompt) {
+  const configuration = new Configuration({ apiKey: process.env.OPENAI_API_KEY });
+  const openAiApi = new OpenAIApi(configuration);
+
+  const generatedComponent = await openAiApi.createCompletion({
+    model: 'text-davinci-003',
+    prompt: `Create a React component unit tests using this template "${componentTemplate}", but make the adjustments needed with these instructions as follows "${prompt}"`,
+    temperature: 0.7,
+    max_tokens: 2000,
+    top_p: 1.0,
+    frequency_penalty: 0.0,
+    presence_penalty: 1,
+  });
+
+  return generatedComponent.data.choices[0].text;
+}

package/src/utils/generateComponentUtils.js

@@ -7,7 +7,7 @@ import snakeCase from 'lodash/snakeCase.js';
 import startCase from 'lodash/startCase.js';
 import fsExtra from 'fs-extra';
 
-import { aiComponentGenerator } from '../services/openAiService.js';
+import { aiComponentGenerator, aiComponentTestGenerator } from '../services/openAiService.js';
 import componentJsTemplate from '../templates/component/componentJsTemplate.js';
 import componentTsTemplate from '../templates/component/componentTsTemplate.js';
 import componentCssTemplate from '../templates/component/componentCssTemplate.js';
@@ -438,6 +438,30 @@ export function generateComponent(componentName, cmd, cliConfigFile) {
             return;
           }
 
+          // Generate component test with openAi, if component description is provided
+
+          if (cmd.describe && componentFileType === buildInComponentFileTypes.TEST) {
+            aiComponentTestGenerator(template, cmd.describe)
+              .then((aiGeneratedComponentTest) => {
+                outputFileSync(componentPath, aiGeneratedComponentTest.trim());
+                console.log(
+                  chalk.green(
+                    `OpenAI Successfully created the ${filename} component test with the provided description.`
+                  )
+                );
+              })
+              .catch((error) =>
+                console.log(
+                  chalk.red(
+                    `OpenAI failed to create the ${filename} component test with the provided description.`,
+                    error
+                  )
+                )
+              );
+
+            return;
+          }
+
           console.log(chalk.green(`${filename} was successfully created at ${componentPath}`));
         } catch (error) {
           console.error(chalk.red(`${filename} failed and was not created.`));