[ft] Re-Add test gen copy (#3834)

Author: rohitvinnakota-codecov

src/assets/codecovAI/test-gen-example-dark-mode.png

@@ -1,5 +1,7 @@
 import darkModeImage from 'assets/codecovAI/pr-review-example-dark-mode.png'
 import lightModeImage from 'assets/codecovAI/pr-review-example-light-mode.png'
+import darkModeImageTests from 'assets/codecovAI/test-gen-example-dark-mode.png'
+import lightModeImageTests from 'assets/codecovAI/test-gen-example-light-mode.png'
 import { Card } from 'ui/Card'
 import { ExpandableSection } from 'ui/ExpandableSection'
 import LightDarkImg from 'ui/LightDarkImg'
@@ -12,8 +14,14 @@ const CodecovAICommands: React.FC = () => {
           <Card.Title size="base">Codecov AI Commands</Card.Title>
         </Card.Header>
         <Card.Content>
-          After installing the app, use this command in your PR comments:
+          After installing the app, use these commands in your PR comments:
           <ul className="mt-2 list-inside list-disc space-y-1">
+            <li>
+              <span className="rounded border border-gray-200 bg-gray-100 px-1 font-semibold">
+                @codecov-ai-reviewer test
+              </span>
+              -- the assistant will generate tests for the PR.
+            </li>
             <li>
               <span className="rounded border border-gray-200 bg-gray-100 px-1 font-semibold">
                 @codecov-ai-reviewer review
@@ -31,12 +39,32 @@ const CodecovAICommands: React.FC = () => {
           </p>
         </ExpandableSection.Trigger>
         <ExpandableSection.Content className="m-0 p-0">
-          <LightDarkImg
-            className="size-full object-cover"
-            src={lightModeImage}
-            darkSrc={darkModeImage}
-            alt="codecov pr review example"
-          />
+          <div className="h-[300px] w-full">
+            <LightDarkImg
+              className="size-full object-cover"
+              src={lightModeImage}
+              darkSrc={darkModeImage}
+              alt="codecov pr review example"
+            />
+          </div>
+        </ExpandableSection.Content>
+      </ExpandableSection>
+      <ExpandableSection className="-mt-2 border-t-0">
+        <ExpandableSection.Trigger>
+          <p>
+            Here is an example of Codecov AI Test Generation. Test generation
+            may take time.
+          </p>
+        </ExpandableSection.Trigger>
+        <ExpandableSection.Content className="m-0 p-0">
+          <div className={`h-[300px] w-full`}>
+            <LightDarkImg
+              className="size-full object-cover"
+              src={lightModeImageTests}
+              darkSrc={darkModeImageTests}
+              alt="codecov test generation example"
+            />
+          </div>
         </ExpandableSection.Content>
       </ExpandableSection>
     </div>

src/assets/codecovAI/test-gen-example-light-mode.png

@@ -143,6 +143,11 @@ describe('CodecovAIPage', () => {
       / the assistant will review the PR/
     )
     expect(commandOneText).toBeInTheDocument()
+
+    const commandTwoText = await screen.findByText(
+      / the assistant will generate tests/
+    )
+    expect(commandTwoText).toBeInTheDocument()
   })
 
   it('renders examples', async () => {
@@ -154,20 +159,27 @@ describe('CodecovAIPage', () => {
     expect(reviewExample).toBeInTheDocument()
   })
 
-  it('renders screenshot', async () => {
+  it('renders screenshots', async () => {
     render(<CodecovAIPage />, { wrapper })
     const user = userEvent.setup()
-    const trigger = await screen.findByText((content) =>
+    const trigger = await screen.findAllByText((content) =>
       content.startsWith('Here is an example')
     )
-    expect(trigger).toBeInTheDocument()
+    expect(trigger).toHaveLength(2)
 
-    await user.click(trigger)
+    await user.click(trigger[0]!)
 
-    const screenshot = await screen.findByRole('img', {
+    const screenshotReview = await screen.findByRole('img', {
       name: /codecov pr review example/,
     })
-    expect(screenshot).toBeInTheDocument()
+    expect(screenshotReview).toBeInTheDocument()
+
+    await user.click(trigger[1]!)
+
+    const screenshotTestGen = await screen.findByRole('img', {
+      name: /codecov test generation example/,
+    })
+    expect(screenshotTestGen).toBeInTheDocument()
   })
 
   it('renders a link to the docs', async () => {