Merge pull request #42 from slackhq/sg-extend-prompt

fixed tests for gen prompt

README.md

@@ -44,9 +44,9 @@ const astConverted = await converWithAST(filePath);
 ```ts
 const reactCompDom = await getReactComponentDOM(filePath);
 ```
-6. `generatePrompt` - generate prompt with all the necessary info
+6. `generatePrompt` - generate prompt with all the necessary info. Extend it with extendPrompt: string[] that would enumerate each array item and add to the main prompt
 ```ts
-const prompt = await generatePrompt(filePath, 'data-qa', astConverted, reactCompDom);
+const prompt = await generatePrompt(filePath, 'data-qa', astConverted, reactCompDom, extendPrompt?);
 ```
 7. `extractCodeContent` - extract code from the LLM response
 ```ts
@@ -108,6 +108,16 @@ async function convertTestFile(filePath: string) {
 	const reactCompDom = await getReactComponentDOM(filePath);
 
 	// Generate the prompt
+	const extendPrompt = [
+		`Wrap component rendering into <Provider store={createTestStore()}><Component></Provider>. 
+		In order to do that you need to do two things
+		First, import these: 
+		import { Provider } from '.../provider'; 
+		import createTestStore from '.../test-store'; 
+		Second, wrap component rendering in <Provider>, if it was not done before. 
+		Example: <Provider store={createTestStore()}> <Component {...props} /> </Provider>`,
+		"dataTest('selector') should be converted to screen.getByTestId('selector')"
+		]
 	const prompt = await generatePrompt(filePath, 'data-qa', astConverted, reactCompDom);
 
 	/**

src/support/prompt-generation/generate-prompt.jest.ts

@@ -83,10 +83,32 @@ describe('genPrompt', () => {
 
         // Assert that the result is as expected
         expect(result).toBe(0);
+    });
 
-        // Restore the original implementation after the test
-        readFileSyncMock.mockRestore();
+    it('should generate prompt with additions and enumerate them', () => {
+        const extendPrompt = [
+            `Wrap component rendering into <Provider store={createTestStore()}><Component></Provider>. 
+        In order to do that you need to do two things
+        First, import these: 
+        import { Provider } from '.../provider'; 
+        import createTestStore from '.../test-store'; 
+        Second, wrap component rendering in <Provider>, if it was not done before. 
+        Example: <Provider store={createTestStore()}> <Component {...props} /> </Provider>`,
+            "dataTest('selector') should be converted to screen.getByTestId('selector')",
+        ];
+        const result = genPrompt(
+            enzymeFilePath,
+            mockGetByTestIdAttribute,
+            mockAstCodemodOutput,
+            mockRenderedCompCode,
+            extendPrompt,
+        );
 
-        expect(result).toBe(0);
+        expect(result).toContain(
+            '1. Wrap component rendering into <Provider store={createTestStore()}><Component></Provider>.',
+        );
+        expect(result).toContain(
+            "2. dataTest('selector') should be converted to screen.getByTestId('selector')",
+        );
     });
 });

src/support/prompt-generation/generate-prompt.ts

@@ -4,23 +4,21 @@ import { countTestCases } from './utils/utils';
 
 export const promptLogger = createCustomLogger('Prompt');
 
-/**
- * TODO:
- * 1. Figure out if Provider with test store needs to be passed in and how to do it
- */
 /**
  * Generate prompt for LLM
  * @param filePath
  * @param getByTestIdAttribute
  * @param astCodemodOutput
  * @param renderedCompCode
+ * @param extendPrompt
  * @returns
  */
 export const genPrompt = (
     filePath: string,
     getByTestIdAttribute: string,
     astCodemodOutput: string,
     renderedCompCode: string,
+    extendPrompt?: string[],
 ): string => {
     promptLogger.info('Start: generating prompt');
 
@@ -59,6 +57,16 @@ export const genPrompt = (
 	5. Ensure all text/strings are converted to lowercase regex expression. Example: screen.getByText(/your text here/i), screen.getByRole('button', {name: /your text here/i}).
 	6. When asserting that a DOM renders nothing, replace isEmptyRender()).toBe(true) with toBeEmptyDOMElement() by wrapping the component into a container. Example: expect(container).toBeEmptyDOMElement();.`;
 
+    // User additions to the prompt:
+    const extendedPromptSection =
+        extendPrompt && extendPrompt.length > 0
+            ? '\nAdditional user instructions:\n' +
+              extendPrompt
+                  .filter((item) => item.trim() !== '')
+                  .map((item, index) => `${index + 1}. ${item}`)
+                  .join('\n')
+            : '';
+
     const conlusion = `\nNow, please evaluate your output and make sure your converted code is between <rtl_test_code></rtl_test_code> tags.
 	If there are any deviations from the specified conditions, list them explicitly.
 	If the output adheres to all conditions and uses instructions section, you can simply state "The output meets all specified conditions.`;
@@ -77,6 +85,7 @@ export const genPrompt = (
         contextSetting +
         mainRequest +
         additionalRequest +
+        extendedPromptSection +
         conlusion +
         testCaseCodePrompt +
         convertedCodemodPrompt +