From 674db3dc3b62c45c9167c8a020a095102b55bc06 Mon Sep 17 00:00:00 2001
From: joseph-sentry <joseph.sawaya@sentry.io>
Date: Wed, 28 Aug 2024 15:39:37 -0400
Subject: [PATCH] fix: update FailedTestsTab

This updates the CodecovCLI page in the FailedTestsTab to use the
FrameworkTabsCard. This also reorders the steps on the CodecovCLI page
such that the JUnit XML generation step comes first for consistency
with the other page.
---
 .../CodecovCLI/CodecovCLI.spec.tsx            | 31 +++++---------
 .../FailedTestsTab/CodecovCLI/CodecovCLI.tsx  | 41 +++---------------
 .../FrameworkTabs/FrameworkTabs.spec.tsx      |  4 +-
 .../FrameworkTabs/FrameworkTabs.tsx           |  3 +-
 .../FrameworkTabs/index.ts                    |  0
 .../FrameworkTabsCard.spec.tsx                | 42 +++++++++++++++++++
 .../FrameworkTabsCard/FrameworkTabsCard.tsx   | 22 ++++++++++
 .../FailedTestsTab/FrameworkTabsCard/index.ts |  1 +
 .../GitHubActions/GitHubActions.spec.tsx      | 26 ++----------
 .../GitHubActions/GitHubActions.tsx           | 21 +---------
 10 files changed, 93 insertions(+), 98 deletions(-)
 rename src/pages/RepoPage/FailedTestsTab/{GitHubActions => FrameworkTabsCard}/FrameworkTabs/FrameworkTabs.spec.tsx (93%)
 rename src/pages/RepoPage/FailedTestsTab/{GitHubActions => FrameworkTabsCard}/FrameworkTabs/FrameworkTabs.tsx (93%)
 rename src/pages/RepoPage/FailedTestsTab/{GitHubActions => FrameworkTabsCard}/FrameworkTabs/index.ts (100%)
 create mode 100644 src/pages/RepoPage/FailedTestsTab/FrameworkTabsCard/FrameworkTabsCard.spec.tsx
 create mode 100644 src/pages/RepoPage/FailedTestsTab/FrameworkTabsCard/FrameworkTabsCard.tsx
 create mode 100644 src/pages/RepoPage/FailedTestsTab/FrameworkTabsCard/index.ts

diff --git a/src/pages/RepoPage/FailedTestsTab/CodecovCLI/CodecovCLI.spec.tsx b/src/pages/RepoPage/FailedTestsTab/CodecovCLI/CodecovCLI.spec.tsx
index 7608d9440f..76ccfc5a3b 100644
--- a/src/pages/RepoPage/FailedTestsTab/CodecovCLI/CodecovCLI.spec.tsx
+++ b/src/pages/RepoPage/FailedTestsTab/CodecovCLI/CodecovCLI.spec.tsx
@@ -15,6 +15,11 @@ const wrapper: (initialEntries?: string) => React.FC<PropsWithChildren> =
     </MemoryRouter>
   )
 
+jest.mock('../FrameworkTabsCard', () => ({
+  __esModule: true,
+  FrameworkTabsCard: () => 'FrameworkTabsCard',
+}))
+
 describe('CodecovCLI', () => {
   function setup() {
     const user = userEvent.setup()
@@ -22,25 +27,11 @@ describe('CodecovCLI', () => {
   }
 
   describe('Step one', () => {
-    it('renders title of card', () => {
-      render(<CodecovCLI />, { wrapper: wrapper() })
-
-      const title = screen.getByText("Step 1: Install Codecov's CLI in your CI")
-      expect(title).toBeInTheDocument()
-    })
-
-    it('renders content of card', () => {
+    it('renders framework tabs card', () => {
       render(<CodecovCLI />, { wrapper: wrapper() })
 
-      const content = screen.getByText(/Here's an example using pip/)
-      expect(content).toBeInTheDocument()
-    })
-
-    it('renders script', () => {
-      render(<CodecovCLI />, { wrapper: wrapper() })
-
-      const script = screen.getByText(/pip install codecov-cli/)
-      expect(script).toBeInTheDocument()
+      const frameworkTabs = screen.getByText('FrameworkTabsCard')
+      expect(frameworkTabs).toBeInTheDocument()
     })
   })
 
@@ -48,21 +39,21 @@ describe('CodecovCLI', () => {
     it('renders title of card', () => {
       render(<CodecovCLI />, { wrapper: wrapper() })
 
-      const title = screen.getByText(/Step 2: Output a JUnit XML file/)
+      const title = screen.getByText("Step 2: Install Codecov's CLI in your CI")
       expect(title).toBeInTheDocument()
     })
 
     it('renders content of card', () => {
       render(<CodecovCLI />, { wrapper: wrapper() })
 
-      const content = screen.getByText(/If you're building on Python/)
+      const content = screen.getByText(/Here's an example using pip/)
       expect(content).toBeInTheDocument()
     })
 
     it('renders script', () => {
       render(<CodecovCLI />, { wrapper: wrapper() })
 
-      const script = screen.getByText(/pytest <other_args> --junitxml/)
+      const script = screen.getByText(/pip install codecov-cli/)
       expect(script).toBeInTheDocument()
     })
   })
diff --git a/src/pages/RepoPage/FailedTestsTab/CodecovCLI/CodecovCLI.tsx b/src/pages/RepoPage/FailedTestsTab/CodecovCLI/CodecovCLI.tsx
index 9f34404b05..af2bfd4a8d 100644
--- a/src/pages/RepoPage/FailedTestsTab/CodecovCLI/CodecovCLI.tsx
+++ b/src/pages/RepoPage/FailedTestsTab/CodecovCLI/CodecovCLI.tsx
@@ -5,6 +5,8 @@ import { Card } from 'ui/Card'
 import { CodeSnippet } from 'ui/CodeSnippet'
 import { ExpandableSection } from 'ui/ExpandableSection/ExpandableSection'
 
+import { FrameworkTabsCard } from '../FrameworkTabsCard'
+
 function CodecovCLI() {
   return (
     <div className="flex flex-col gap-6">
@@ -21,12 +23,14 @@ function CodecovCLI() {
 
 const Step1Script = 'pip install codecov-cli'
 
-function Step1() {
+const Step1 = FrameworkTabsCard
+
+function Step2() {
   return (
     <Card>
       <Card.Header>
         <Card.Title size="base">
-          Step 1: Install Codecov&apos;s CLI in your CI
+          Step 2: Install Codecov&apos;s CLI in your CI
         </Card.Title>
       </Card.Header>
       <Card.Content className="flex flex-col gap-4">
@@ -37,39 +41,6 @@ function Step1() {
   )
 }
 
-const Step2Script = `pytest  <other_args> --junitxml=<report_name>.junit.xml
-
-pytest  --cov --junitxml=<report_name>.junit.xml`
-
-function Step2() {
-  return (
-    <Card>
-      <Card.Header>
-        <Card.Title size="base">Step 2: Output a JUnit XML file</Card.Title>
-      </Card.Header>
-      <Card.Content className="flex flex-col gap-4">
-        <p>
-          Codecov will need the output of your test run. If you&apos;re building
-          on Python, simply do the following when you&apos;re calling pytest in
-          your CI.
-        </p>
-        <CodeSnippet clipboard={Step2Script}>{Step2Script}</CodeSnippet>
-        <p>
-          The above snippet instructs{' '}
-          <span className="text-codecov-code">pytest</span> to collect the
-          result of all tests that are executed in this run and store as{' '}
-          <span className="text-codecov-code">
-            &lt;report_name&gt;.junit.xml
-          </span>
-          . Be sure to replace{' '}
-          <span className="text-codecov-code">&lt;report_name&gt;</span> with
-          your own filename
-        </p>
-      </Card.Content>
-    </Card>
-  )
-}
-
 const Step3Script = `codecovcli do-upload --report-type test_results --file <report_name>.junit.xml`
 
 function Step3() {
diff --git a/src/pages/RepoPage/FailedTestsTab/GitHubActions/FrameworkTabs/FrameworkTabs.spec.tsx b/src/pages/RepoPage/FailedTestsTab/FrameworkTabsCard/FrameworkTabs/FrameworkTabs.spec.tsx
similarity index 93%
rename from src/pages/RepoPage/FailedTestsTab/GitHubActions/FrameworkTabs/FrameworkTabs.spec.tsx
rename to src/pages/RepoPage/FailedTestsTab/FrameworkTabsCard/FrameworkTabs/FrameworkTabs.spec.tsx
index ffcef0dd82..bf06341feb 100644
--- a/src/pages/RepoPage/FailedTestsTab/GitHubActions/FrameworkTabs/FrameworkTabs.spec.tsx
+++ b/src/pages/RepoPage/FailedTestsTab/FrameworkTabsCard/FrameworkTabs/FrameworkTabs.spec.tsx
@@ -16,7 +16,9 @@ describe('FrameworkTabs', () => {
     const pytestButton = screen.getByText('Pytest')
     expect(pytestButton).toBeInTheDocument()
 
-    const codeSnippet = screen.getByText('pytest --cov --junitxml=junit.xml')
+    const codeSnippet = screen.getByText(
+      'pytest --cov --junitxml=junit.xml -o junit_family=legacy'
+    )
     expect(codeSnippet).toBeInTheDocument()
   })
 
diff --git a/src/pages/RepoPage/FailedTestsTab/GitHubActions/FrameworkTabs/FrameworkTabs.tsx b/src/pages/RepoPage/FailedTestsTab/FrameworkTabsCard/FrameworkTabs/FrameworkTabs.tsx
similarity index 93%
rename from src/pages/RepoPage/FailedTestsTab/GitHubActions/FrameworkTabs/FrameworkTabs.tsx
rename to src/pages/RepoPage/FailedTestsTab/FrameworkTabsCard/FrameworkTabs/FrameworkTabs.tsx
index cb5f9fe2c0..a1f1533eae 100644
--- a/src/pages/RepoPage/FailedTestsTab/GitHubActions/FrameworkTabs/FrameworkTabs.tsx
+++ b/src/pages/RepoPage/FailedTestsTab/FrameworkTabsCard/FrameworkTabs/FrameworkTabs.tsx
@@ -13,7 +13,8 @@ const Frameworks = {
 type FrameworkType = (typeof Frameworks)[keyof typeof Frameworks]
 
 const FrameworkCopy = {
-  [Frameworks.PYTEST]: 'pytest --cov --junitxml=junit.xml',
+  [Frameworks.PYTEST]:
+    'pytest --cov --junitxml=junit.xml -o junit_family=legacy',
   [Frameworks.VITEST]: 'vitest --reporter=junit',
   [Frameworks.JEST]:
     'npm i --save-dev jest-junit \njest --reporters=jest-junit',
diff --git a/src/pages/RepoPage/FailedTestsTab/GitHubActions/FrameworkTabs/index.ts b/src/pages/RepoPage/FailedTestsTab/FrameworkTabsCard/FrameworkTabs/index.ts
similarity index 100%
rename from src/pages/RepoPage/FailedTestsTab/GitHubActions/FrameworkTabs/index.ts
rename to src/pages/RepoPage/FailedTestsTab/FrameworkTabsCard/FrameworkTabs/index.ts
diff --git a/src/pages/RepoPage/FailedTestsTab/FrameworkTabsCard/FrameworkTabsCard.spec.tsx b/src/pages/RepoPage/FailedTestsTab/FrameworkTabsCard/FrameworkTabsCard.spec.tsx
new file mode 100644
index 0000000000..37964db8fc
--- /dev/null
+++ b/src/pages/RepoPage/FailedTestsTab/FrameworkTabsCard/FrameworkTabsCard.spec.tsx
@@ -0,0 +1,42 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { FrameworkTabsCard } from './FrameworkTabsCard'
+
+jest.mock('./FrameworkTabs', () => ({
+  __esModule: true,
+  FrameworkTabs: () => 'FrameworkTabs',
+}))
+
+describe('FrameworkTabsCard', () => {
+  function setup() {
+    const user = userEvent.setup()
+    return { user }
+  }
+
+  it('renders title of card', () => {
+    setup()
+    render(<FrameworkTabsCard />)
+
+    const title = screen.getByText('Step 1: Output a JUnit XML file in your CI')
+    expect(title).toBeInTheDocument()
+  })
+
+  it('renders content of card', () => {
+    setup()
+    render(<FrameworkTabsCard />)
+
+    const content = screen.getByText(
+      /Select the framework below to generate a JUnit XM/
+    )
+    expect(content).toBeInTheDocument()
+  })
+
+  it('renders framework tabs', () => {
+    setup()
+    render(<FrameworkTabsCard />)
+
+    const frameworkTabs = screen.getByText('FrameworkTabs')
+    expect(frameworkTabs).toBeInTheDocument()
+  })
+})
diff --git a/src/pages/RepoPage/FailedTestsTab/FrameworkTabsCard/FrameworkTabsCard.tsx b/src/pages/RepoPage/FailedTestsTab/FrameworkTabsCard/FrameworkTabsCard.tsx
new file mode 100644
index 0000000000..86bfbd040a
--- /dev/null
+++ b/src/pages/RepoPage/FailedTestsTab/FrameworkTabsCard/FrameworkTabsCard.tsx
@@ -0,0 +1,22 @@
+import { Card } from 'ui/Card'
+
+import { FrameworkTabs } from './FrameworkTabs'
+
+export function FrameworkTabsCard() {
+  return (
+    <Card>
+      <Card.Header>
+        <Card.Title size="base">
+          Step 1: Output a JUnit XML file in your CI
+        </Card.Title>
+      </Card.Header>
+      <Card.Content className="flex flex-col gap-4">
+        <p>
+          Select the framework below to generate a JUnit XML file that contains
+          the results of your test run.
+        </p>
+        <FrameworkTabs />
+      </Card.Content>
+    </Card>
+  )
+}
diff --git a/src/pages/RepoPage/FailedTestsTab/FrameworkTabsCard/index.ts b/src/pages/RepoPage/FailedTestsTab/FrameworkTabsCard/index.ts
new file mode 100644
index 0000000000..e201419ffd
--- /dev/null
+++ b/src/pages/RepoPage/FailedTestsTab/FrameworkTabsCard/index.ts
@@ -0,0 +1 @@
+export { FrameworkTabsCard } from './FrameworkTabsCard'
diff --git a/src/pages/RepoPage/FailedTestsTab/GitHubActions/GitHubActions.spec.tsx b/src/pages/RepoPage/FailedTestsTab/GitHubActions/GitHubActions.spec.tsx
index dc4ebd263a..1198d0e688 100644
--- a/src/pages/RepoPage/FailedTestsTab/GitHubActions/GitHubActions.spec.tsx
+++ b/src/pages/RepoPage/FailedTestsTab/GitHubActions/GitHubActions.spec.tsx
@@ -5,9 +5,9 @@ import { MemoryRouter, Route } from 'react-router-dom'
 
 import GitHubActions from './GitHubActions'
 
-jest.mock('./FrameworkTabs', () => ({
+jest.mock('../FrameworkTabsCard', () => ({
   __esModule: true,
-  FrameworkTabs: () => 'FrameworkTabs',
+  FrameworkTabsCard: () => 'FrameworkTabsCard',
 }))
 
 const wrapper: (initialEntries?: string) => React.FC<PropsWithChildren> =
@@ -25,28 +25,10 @@ describe('GitHubActions', () => {
   }
 
   describe('Step one', () => {
-    it('renders title of card', () => {
-      render(<GitHubActions />, { wrapper: wrapper() })
-
-      const title = screen.getByText(
-        'Step 1: Output a JUnit XML file in your CI'
-      )
-      expect(title).toBeInTheDocument()
-    })
-
-    it('renders content of card', () => {
-      render(<GitHubActions />, { wrapper: wrapper() })
-
-      const content = screen.getByText(
-        /Select the framework below to generate a JUnit XM/
-      )
-      expect(content).toBeInTheDocument()
-    })
-
-    it('renders framework tabs', () => {
+    it('renders framework tabs card', () => {
       render(<GitHubActions />, { wrapper: wrapper() })
 
-      const frameworkTabs = screen.getByText('FrameworkTabs')
+      const frameworkTabs = screen.getByText('FrameworkTabsCard')
       expect(frameworkTabs).toBeInTheDocument()
     })
   })
diff --git a/src/pages/RepoPage/FailedTestsTab/GitHubActions/GitHubActions.tsx b/src/pages/RepoPage/FailedTestsTab/GitHubActions/GitHubActions.tsx
index d4b62f3357..745fa71b76 100644
--- a/src/pages/RepoPage/FailedTestsTab/GitHubActions/GitHubActions.tsx
+++ b/src/pages/RepoPage/FailedTestsTab/GitHubActions/GitHubActions.tsx
@@ -5,7 +5,7 @@ import { Card } from 'ui/Card'
 import { CodeSnippet } from 'ui/CodeSnippet'
 import { ExpandableSection } from 'ui/ExpandableSection/ExpandableSection'
 
-import { FrameworkTabs } from './FrameworkTabs'
+import { FrameworkTabsCard } from '../FrameworkTabsCard'
 
 function GitHubActions() {
   return (
@@ -19,24 +19,7 @@ function GitHubActions() {
   )
 }
 
-function Step1() {
-  return (
-    <Card>
-      <Card.Header>
-        <Card.Title size="base">
-          Step 1: Output a JUnit XML file in your CI
-        </Card.Title>
-      </Card.Header>
-      <Card.Content className="flex flex-col gap-4">
-        <p>
-          Select the framework below to generate a JUnit XML file that contains
-          the results of your test run.
-        </p>
-        <FrameworkTabs />
-      </Card.Content>
-    </Card>
-  )
-}
+const Step1 = FrameworkTabsCard
 
 const Step2Script = `- name: Upload test results to Codecov
   if: \${{ !cancelled() }}