Convert NewRepoTax to tsx

src/pages/RepoPage/CoverageOnboarding/NewRepoTab.spec.jsx → src/pages/RepoPage/CoverageOnboarding/NewRepoTab.spec.tsx

@@ -3,14 +3,15 @@ import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { graphql } from 'msw'
 import { setupServer } from 'msw/node'
-import { Suspense } from 'react'
+import { PropsWithChildren, Suspense } from 'react'
 import { MemoryRouter, Route } from 'react-router-dom'
 
 import { useRedirect } from 'shared/useRedirect'
 
 import NewRepoTab from './NewRepoTab'
 
 jest.mock('shared/useRedirect')
+const mockedUseRedirect = useRedirect as jest.Mock
 jest.mock('./GitHubActions', () => () => 'GitHubActions')
 jest.mock('./OtherCI', () => () => 'OtherCI')
 
@@ -51,9 +52,9 @@ const queryClient = new QueryClient({
   },
 })
 const server = setupServer()
-let testLocation
+let testLocation: any
 
-const wrapper =
+const wrapper: (initialEntries?: string) => React.FC<PropsWithChildren> =
   (initialEntries = '/gh/codecov/cool-repo/new') =>
   ({ children }) =>
     (
@@ -89,13 +90,16 @@ afterEach(() => {
 })
 afterAll(() => server.close())
 
+interface SetupArgs {
+  hasCommits?: boolean
+  noUploadToken?: boolean
+}
+
 describe('NewRepoTab', () => {
-  function setup(
-    { hasCommits, noUploadToken } = { hasCommits: false, noUploadToken: false }
-  ) {
+  function setup({ hasCommits = false, noUploadToken = false }: SetupArgs) {
     const user = userEvent.setup()
     const hardRedirect = jest.fn()
-    useRedirect.mockImplementation((data) => ({
+    mockedUseRedirect.mockImplementation((data) => ({
       hardRedirect: () => hardRedirect(data),
     }))
 
@@ -113,7 +117,7 @@ describe('NewRepoTab', () => {
 
   describe('intro blurb', () => {
     it('renders', async () => {
-      setup()
+      setup({})
       render(<NewRepoTab />, { wrapper: wrapper() })
 
       const intro = await screen.findByTestId('intro-blurb')
@@ -122,7 +126,7 @@ describe('NewRepoTab', () => {
   })
 
   describe('rendering component', () => {
-    beforeEach(() => setup())
+    beforeEach(() => setup({}))
 
     it('renders header', async () => {
       render(<NewRepoTab />, { wrapper: wrapper() })
@@ -210,7 +214,7 @@ describe('NewRepoTab', () => {
     describe('testing tab navigation', () => {
       describe('clicking on other ci', () => {
         it('navigates to /other-ci', async () => {
-          const { user } = setup()
+          const { user } = setup({})
           render(<NewRepoTab />, { wrapper: wrapper() })
 
           const tab = await screen.findByRole('link', { name: 'Other CI' })
@@ -233,7 +237,7 @@ describe('NewRepoTab', () => {
 
       describe('clicking on github actions', () => {
         it('navigates to /new', async () => {
-          const { user } = setup()
+          const { user } = setup({})
           render(<NewRepoTab />, {
             wrapper: wrapper('/gh/codecov/cool-repo/new/other-ci'),
           })

src/pages/RepoPage/CoverageOnboarding/NewRepoTab.jsx → src/pages/RepoPage/CoverageOnboarding/NewRepoTab.tsx

@@ -23,7 +23,7 @@ const Loader = () => (
   </div>
 )
 
-function Content({ provider }) {
+function Content({ provider }: { provider: string }) {
   if (providerToName(provider) !== 'Github') {
     return (
       <div className="mt-6">
@@ -66,8 +66,14 @@ Content.propTypes = {
   provider: PropTypes.string,
 }
 
+interface URLParams {
+  provider: string
+  owner: string
+  repo: string
+}
+
 function NewRepoTab() {
-  const { provider, owner, repo } = useParams()
+  const { provider, owner, repo } = useParams<URLParams>()
   const { data } = useRepo({ provider, owner, repo })
   const { hardRedirect } = useRedirect({ href: `/${provider}` })