generate-react-cli - npm Package Compare versions

Comparing version 8.2.0 to 8.3.0-alpha.1

package.json

 {
   "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.",
@@ -5,0 +5,0 @@ "repository": "https://github.com/arminbro/generate-react-cli",

readme.md

@@ -481,2 +481,45 @@ # Generate React CLI
 
+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.
@@ -483,0 +526,0 @@

src/services/openAiService.js

@@ -19,1 +19,18 @@ import { Configuration, OpenAIApi } from 'openai';
 }
+
+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;
+}

src/utils/generateComponentUtils.js

@@ -10,3 +10,3 @@ import chalk from 'chalk';
 
-import { aiComponentGenerator } from '../services/openAiService.js';
+import { aiComponentGenerator, aiComponentTestGenerator } from '../services/openAiService.js';
 import componentJsTemplate from '../templates/component/componentJsTemplate.js';
@@ -442,2 +442,26 @@ import componentTsTemplate from '../templates/component/componentTsTemplate.js';
 
+          // 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}`));
@@ -444,0 +468,0 @@ } catch (error) {

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

63424

5.18%

Lines of code

761

4.82%

Number of lines in readme file

533

8.78%

Worsened metrics

Number of low quality alerts

2

100%

Number of low supply chain risk alerts

8

14.29%

No dependency changes