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.

src/pages/RepoPage/FailedTestsTab/CodecovCLI/CodecovCLI.spec.tsx

@@ -15,54 +15,45 @@ const wrapper: (initialEntries?: string) => React.FC<PropsWithChildren> =
  </MemoryRouter>
  )
 
+jest.mock('../FrameworkTabsCard', () => ({
+ __esModule: true,
+ FrameworkTabsCard: () => 'FrameworkTabsCard',
+}))
+
 describe('CodecovCLI', () => {
  function setup() {
  const user = userEvent.setup()
  return { user }
  }
 
  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()
  })
  })
 
  describe('Step two', () => {
  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()
  })
  })

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() {

src/pages/RepoPage/FailedTestsTab/GitHubActions/FrameworkTabs/FrameworkTabs.spec.tsx → 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()
  })
 

src/pages/RepoPage/FailedTestsTab/GitHubActions/FrameworkTabs/FrameworkTabs.tsx → 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',

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()
+ })
+})

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>
+ )
+}

src/pages/RepoPage/FailedTestsTab/FrameworkTabsCard/index.ts

@@ -0,0 +1 @@
+export { FrameworkTabsCard } from './FrameworkTabsCard'

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()
  })
  })

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() }}