Add OutputCoverageStep to OtherCI onboarding

src/pages/RepoPage/CoverageOnboarding/OtherCI/OtherCI.test.tsx

@@ -102,12 +102,37 @@ describe('OtherCI', () => {
     return { user }
   }
 
-  describe('step one', () => {
+  describe('output coverage step', () => {
     it('renders header', async () => {
       setup({})
       render(<OtherCI />, { wrapper })
 
-      const header = await screen.findByText(/Step 1/)
+      const header = await screen.findByText(
+        /Step \d: Output a Coverage report file in your CI/
+      )
+      expect(header).toBeInTheDocument()
+    })
+
+    it('renders body', async () => {
+      setup({})
+      render(<OtherCI />, { wrapper })
+
+      const body = await screen.findByText(/Select your language below/)
+      expect(body).toBeInTheDocument()
+
+      const jest = await screen.findByText(/Jest/)
+      expect(jest).toBeInTheDocument()
+    })
+  })
+
+  describe('token step', () => {
+    it('renders header', async () => {
+      setup({})
+      render(<OtherCI />, { wrapper })
+
+      const header = await screen.findByText(
+        /Step \d: add repository token as a secret to your CI Provider/
+      )
       expect(header).toBeInTheDocument()
     })
 
@@ -151,12 +176,12 @@ describe('OtherCI', () => {
     })
   })
 
-  describe('step two', () => {
+  describe('install step', () => {
     beforeEach(() => setup({}))
     it('renders header', async () => {
       render(<OtherCI />, { wrapper })
 
-      const header = await screen.findByText(/Step 2/)
+      const header = await screen.findByText(/Step \d: add the/)
       expect(header).toBeInTheDocument()
 
       const headerLink = await screen.findByRole('link', {
@@ -177,12 +202,14 @@ describe('OtherCI', () => {
     })
   })
 
-  describe('step three', () => {
+  describe('upload step', () => {
     it('renders header', async () => {
       setup({})
       render(<OtherCI />, { wrapper })
 
-      const header = await screen.findByText(/Step 3/)
+      const header = await screen.findByText(
+        /Step \d: upload coverage to Codecov via the CLI after your tests have run/
+      )
       expect(header).toBeInTheDocument()
     })
 
@@ -231,8 +258,17 @@ describe('OtherCI', () => {
     })
   })
 
-  describe('step four', () => {
+  describe('merge step', () => {
     beforeEach(() => setup({}))
+    it('renders header', async () => {
+      render(<OtherCI />, { wrapper })
+
+      const header = await screen.findByText(
+        /Step \d: merge to main or your preferred feature branch/
+      )
+      expect(header).toBeInTheDocument()
+    })
+
     it('renders body', async () => {
       render(<OtherCI />, { wrapper })
 

src/pages/RepoPage/CoverageOnboarding/OtherCI/OtherCI.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import { useParams } from 'react-router-dom'
 
 import config from 'config'
@@ -13,6 +14,11 @@ import { InstructionBox } from './TerminalInstructions'
 
 import ExampleBlurb from '../ExampleBlurb'
 import LearnMoreBlurb from '../LearnMoreBlurb'
+import OutputCoverageStep from '../OutputCoverageStep/OutputCoverageStep'
+import {
+  Framework,
+  UseFrameworkInstructions,
+} from '../UseFrameworkInstructions'
 
 interface URLParams {
   provider: string
@@ -40,12 +46,25 @@ function OtherCI() {
     orgUploadToken ? ` -r ${owner}/${repo}` : ''
   }`
 
+  const [framework, setFramework] = useState<Framework>('Jest')
+  const frameworkInstruction = UseFrameworkInstructions({
+    orgUploadToken,
+    owner,
+    repo,
+  })
+
   return (
     <div className="flex flex-col gap-5">
-      <Step1 tokenCopy={tokenCopy} uploadToken={uploadToken} />
-      <Step2 />
-      <Step3 uploadCommand={uploadCommand} />
-      <Step4 />
+      <OutputCoverageStep
+        framework={framework}
+        frameworkInstructions={frameworkInstruction}
+        owner={owner}
+        setFramework={setFramework}
+      />
+      <TokenStep tokenCopy={tokenCopy} uploadToken={uploadToken} />
+      <InstallStep />
+      <UploadStep uploadCommand={uploadCommand} />
+      <MergeStep />
       <FeedbackCTA />
       <LearnMoreBlurb />
     </div>
@@ -54,17 +73,17 @@ function OtherCI() {
 
 export default OtherCI
 
-interface Step1Props {
+interface TokenStepProps {
   tokenCopy: string
   uploadToken: string
 }
 
-function Step1({ tokenCopy, uploadToken }: Step1Props) {
+function TokenStep({ tokenCopy, uploadToken }: TokenStepProps) {
   return (
     <Card>
       <Card.Header>
         <Card.Title size="base">
-          Step 1: add {tokenCopy} token as a secret to your CI Provider
+          Step 2: add {tokenCopy} token as a secret to your CI Provider
         </Card.Title>
       </Card.Header>
       <Card.Content className="flex flex-col gap-4">
@@ -81,12 +100,12 @@ function Step1({ tokenCopy, uploadToken }: Step1Props) {
   )
 }
 
-function Step2() {
+function InstallStep() {
   return (
     <Card>
       <Card.Header>
         <Card.Title size="base">
-          Step 2: add the{' '}
+          Step 3: add the{' '}
           <A
             to={{ pageName: 'uploader' }}
             data-testid="uploader"
@@ -105,16 +124,16 @@ function Step2() {
   )
 }
 
-interface Step3Props {
+interface UploadStepProps {
   uploadCommand: string
 }
 
-function Step3({ uploadCommand }: Step3Props) {
+function UploadStep({ uploadCommand }: UploadStepProps) {
   return (
     <Card>
       <Card.Header>
         <Card.Title size="base">
-          Step 3: upload coverage to Codecov via the CLI after your tests have
+          Step 4: upload coverage to Codecov via the CLI after your tests have
           run
         </Card.Title>
       </Card.Header>
@@ -126,12 +145,12 @@ function Step3({ uploadCommand }: Step3Props) {
   )
 }
 
-function Step4() {
+function MergeStep() {
   return (
     <Card>
       <Card.Header>
         <Card.Title size="base">
-          Step 4: merge to main or your preferred feature branch
+          Step 5: merge to main or your preferred feature branch
         </Card.Title>
       </Card.Header>
       <Card.Content className="flex flex-col gap-4">

src/pages/RepoPage/CoverageOnboarding/UseFrameworkInstructions.tsx

@@ -94,7 +94,7 @@ slug: ${owner}/${repo}`
       },
       Pytest: {
         install: 'pip install pytest pytest-cov',
-        run: 'pytest --cov --cov-report=xml',
+        run: 'pytest --cov-branch --cov-report=xml',
         githubActionsWorkflow: `name: Run tests and upload coverage
 
 on: 
@@ -117,7 +117,7 @@ uses: actions/setup-python@v4
 run: pip install pytest pytest-cov
 
 - name: Run tests
-run: pytest --cov --cov-report=xml
+run: pytest --cov-branch --cov-report=xml
 
 - name: Upload results to Codecov
 uses: codecov/codecov-action@v5