From 60a2cf85ee2c161742e68207e1be1545d20c88d7 Mon Sep 17 00:00:00 2001
From: Ajay Singh <ajay.singh@sentry.io>
Date: Fri, 20 Sep 2024 14:10:53 -0700
Subject: [PATCH] refactor components into separate sections, write a simple
 test for page

---
 .../FailedTestsPage/FailedTestsPage.spec.tsx  |  80 ++++++++++++
 .../FailedTestsPage/FailedTestsPage.tsx       | 122 +-----------------
 .../MetricsSection/MetricsSection.tsx         |  69 +++++++---
 .../BranchSelector/BranchSelector.spec.tsx    |   0
 .../BranchSelector/BranchSelector.tsx         |   0
 .../BranchSelector/index.ts                   |   0
 .../SelectorSection/SelectorSection.tsx       | 119 +++++++++++++++++
 7 files changed, 252 insertions(+), 138 deletions(-)
 create mode 100644 src/pages/RepoPage/FailedTestsTab/FailedTestsPage/FailedTestsPage.spec.tsx
 rename src/pages/RepoPage/FailedTestsTab/FailedTestsPage/{ => SelectorSection}/BranchSelector/BranchSelector.spec.tsx (100%)
 rename src/pages/RepoPage/FailedTestsTab/FailedTestsPage/{ => SelectorSection}/BranchSelector/BranchSelector.tsx (100%)
 rename src/pages/RepoPage/FailedTestsTab/FailedTestsPage/{ => SelectorSection}/BranchSelector/index.ts (100%)
 create mode 100644 src/pages/RepoPage/FailedTestsTab/FailedTestsPage/SelectorSection/SelectorSection.tsx

diff --git a/src/pages/RepoPage/FailedTestsTab/FailedTestsPage/FailedTestsPage.spec.tsx b/src/pages/RepoPage/FailedTestsTab/FailedTestsPage/FailedTestsPage.spec.tsx
new file mode 100644
index 0000000000..3833b292bd
--- /dev/null
+++ b/src/pages/RepoPage/FailedTestsTab/FailedTestsPage/FailedTestsPage.spec.tsx
@@ -0,0 +1,80 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { render, screen } from '@testing-library/react'
+import { graphql } from 'msw'
+import { setupServer } from 'msw/node'
+import { PropsWithChildren, Suspense } from 'react'
+import { MemoryRouter, Route } from 'react-router-dom'
+
+import FailedTestsPage from './FailedTestsPage'
+
+jest.mock('./SelectorSection/SelectorSection', () => () => 'Selector Section')
+jest.mock('./MetricsSection/MetricsSection', () => () => 'Metrics Section')
+jest.mock(
+  './FailedTestsTable/FailedTestsTable',
+  () => () => 'Failed Tests Table'
+)
+
+const server = setupServer()
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+      suspense: false,
+    },
+  },
+})
+
+const wrapper: (initialEntries?: string) => React.FC<PropsWithChildren> =
+  (initialEntries = '/gh/codecov/cool-repo/tests') =>
+  ({ children }) => (
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={[initialEntries]}>
+        <Route
+          path={[
+            '/:provider/:owner/:repo/tests',
+            '/:provider/:owner/:repo/tests/new',
+            '/:provider/:owner/:repo/tests/new/codecov-cli',
+            '/:provider/:owner/:repo/tests/:branch',
+          ]}
+          exact
+        >
+          <Suspense fallback={null}>{children}</Suspense>
+        </Route>
+      </MemoryRouter>
+    </QueryClientProvider>
+  )
+
+beforeAll(() => {
+  server.listen()
+})
+
+afterEach(() => {
+  queryClient.clear()
+  server.resetHandlers()
+})
+
+afterAll(() => {
+  server.close()
+})
+
+describe('FailedTestsPage', () => {
+  function setup() {
+    server.use(
+      graphql.query('GetRepoOverview', (req, res, ctx) => {
+        return res(ctx.status(200), ctx.data({}))
+      })
+    )
+  }
+
+  it('renders sub-components', () => {
+    setup()
+    render(<FailedTestsPage />, { wrapper: wrapper() })
+
+    const selectorSection = screen.getByText(/Selector Section/)
+    const metricSection = screen.getByText(/Metrics Section/)
+    const table = screen.getByText(/Failed Tests Table/)
+    expect(selectorSection).toBeInTheDocument()
+    expect(metricSection).toBeInTheDocument()
+    expect(table).toBeInTheDocument()
+  })
+})
diff --git a/src/pages/RepoPage/FailedTestsTab/FailedTestsPage/FailedTestsPage.tsx b/src/pages/RepoPage/FailedTestsTab/FailedTestsPage/FailedTestsPage.tsx
index c83b3f1b2e..b9e140b3c3 100644
--- a/src/pages/RepoPage/FailedTestsTab/FailedTestsPage/FailedTestsPage.tsx
+++ b/src/pages/RepoPage/FailedTestsTab/FailedTestsPage/FailedTestsPage.tsx
@@ -1,128 +1,12 @@
-import { useParams } from 'react-router-dom'
-
-import {
-  TIME_OPTION_VALUES,
-  TimeOption,
-  TimeOptions,
-} from 'pages/RepoPage/shared/constants'
-import { useLocationParams } from 'services/navigation'
-import { useRepoOverview } from 'services/repo'
-import A from 'ui/A'
-import MultiSelect from 'ui/MultiSelect'
-import Select from 'ui/Select'
-
-import BranchSelector from './BranchSelector'
 import FailedTestsTable from './FailedTestsTable'
 import { MetricsSection } from './MetricsSection'
-
-interface URLParams {
-  provider: string
-  owner: string
-  repo: string
-  branch?: string
-}
-
-const getDecodedBranch = (branch?: string) =>
-  !!branch ? decodeURIComponent(branch) : undefined
+import SelectorSection from './SelectorSection/SelectorSection'
 
 function FailedTestsPage() {
-  const { params, updateParams } = useLocationParams({
-    search: '',
-    historicalTrend: '',
-  })
-  const { provider, owner, repo, branch } = useParams<URLParams>()
-
-  const { data: overview } = useRepoOverview({
-    provider,
-    owner,
-    repo,
-  })
-
-  const decodedBranch = getDecodedBranch(branch)
-  const selectedBranch = decodedBranch ?? overview?.defaultBranch ?? ''
-
-  const value = TimeOptions.find(
-    // @ts-expect-error need to type out useLocationParams
-    (item) => item.value === params.historicalTrend
-  )
-
-  const defaultValue = TimeOptions.find(
-    (option) => option.value === TIME_OPTION_VALUES.LAST_3_MONTHS
-  )
-
   return (
     <div className="flex flex-1 flex-col gap-2">
-      <div className="flex flex-1 flex-row justify-between">
-        <BranchSelector />
-        {selectedBranch === overview?.defaultBranch ? (
-          <>
-            <div className="flex flex-col gap-1 px-4">
-              <h3 className="text-sm font-semibold text-ds-gray-octonary">
-                Historical trend
-              </h3>
-              <div className="sm:w-52 lg:w-80">
-                <Select
-                  // @ts-expect-error Select is not typed
-                  dataMarketing="select-historical-trend"
-                  disabled={false}
-                  ariaName="Select historical trend"
-                  items={TimeOptions}
-                  value={value ?? defaultValue}
-                  onChange={(historicalTrend: TimeOption) =>
-                    updateParams({ historicalTrend: historicalTrend.value })
-                  }
-                  renderItem={({ label }: { label: string }) => label}
-                  renderSelected={({ label }: { label: string }) => label}
-                />
-              </div>
-              <A to={''} isExternal hook={'30-day-retention'}>
-                30 day retention
-              </A>
-            </div>
-            <div className="flex flex-col gap-1 px-4">
-              <h3 className="text-sm font-semibold text-ds-gray-octonary">
-                Test suites
-              </h3>
-              <div className="sm:w-52 lg:w-80">
-                <MultiSelect
-                  // @ts-expect-error MultiSelect is not typed
-                  dataMarketing="select-test-suites"
-                  ariaName="Select Test Suites"
-                  value={undefined}
-                  items={[1, 2, 3, 4]}
-                  renderItem={(item: any) => item}
-                  resourceName="Test Suites"
-                  onChange={() => {}}
-                />
-              </div>
-            </div>
-            <div className="flex flex-col gap-1 pl-4">
-              <h3 className="text-sm font-semibold text-ds-gray-octonary">
-                Flags
-              </h3>
-              <div className="sm:w-52 lg:w-80">
-                <MultiSelect
-                  // @ts-expect-error MultiSelect is not typed
-                  dataMarketing="select-flags"
-                  ariaName="Select Flags"
-                  value={undefined}
-                  items={[1, 2, 3, 4]}
-                  renderItem={(item: any) => item}
-                  resourceName="Flags"
-                  onChange={() => {}}
-                />
-              </div>
-            </div>
-          </>
-        ) : null}
-      </div>
-
-      {selectedBranch === overview?.defaultBranch ? (
-        <>
-          <hr />
-          <MetricsSection />
-        </>
-      ) : null}
+      <SelectorSection />
+      <MetricsSection />
       <FailedTestsTable />
     </div>
   )
diff --git a/src/pages/RepoPage/FailedTestsTab/FailedTestsPage/MetricsSection/MetricsSection.tsx b/src/pages/RepoPage/FailedTestsTab/FailedTestsPage/MetricsSection/MetricsSection.tsx
index dcd298ebdd..7278fa6f44 100644
--- a/src/pages/RepoPage/FailedTestsTab/FailedTestsPage/MetricsSection/MetricsSection.tsx
+++ b/src/pages/RepoPage/FailedTestsTab/FailedTestsPage/MetricsSection/MetricsSection.tsx
@@ -1,3 +1,6 @@
+import { useParams } from 'react-router-dom'
+
+import { useRepoOverview } from 'services/repo'
 import Badge from 'ui/Badge'
 import Icon from 'ui/Icon'
 import { MetricCard } from 'ui/MetricCard'
@@ -160,30 +163,58 @@ const TotalSkippedTestsCard = () => {
   )
 }
 
+interface URLParams {
+  provider: string
+  owner: string
+  repo: string
+  branch?: string
+}
+
+const getDecodedBranch = (branch?: string) =>
+  !!branch ? decodeURIComponent(branch) : undefined
+
 function MetricsSection() {
+  const { provider, owner, repo, branch } = useParams<URLParams>()
+
+  const { data: overview } = useRepoOverview({
+    provider,
+    owner,
+    repo,
+  })
+
+  const decodedBranch = getDecodedBranch(branch)
+  const selectedBranch = decodedBranch ?? overview?.defaultBranch ?? ''
+
+  if (selectedBranch !== overview?.defaultBranch) {
+    return null
+  }
+
   return (
-    <div className="overflow-x-auto overflow-y-hidden md:flex">
-      <div className="mb-6 flex flex-col gap-3 border-r-2 md:mb-0">
-        <p className="pl-4 text-xs font-semibold text-ds-gray-quaternary">
-          Improve CI Run Efficiency
-        </p>
-        <div className="flex">
-          <TotalTestsRunTimeCard />
-          <SlowestTestsCard />
+    <>
+      <hr />
+      <div className="overflow-x-auto overflow-y-hidden md:flex">
+        <div className="mb-6 flex flex-col gap-3 border-r-2 md:mb-0">
+          <p className="pl-4 text-xs font-semibold text-ds-gray-quaternary">
+            Improve CI Run Efficiency
+          </p>
+          <div className="flex">
+            <TotalTestsRunTimeCard />
+            <SlowestTestsCard />
+          </div>
         </div>
-      </div>
-      <div className="flex flex-col gap-3">
-        <p className="pl-4 text-xs font-semibold text-ds-gray-quaternary">
-          Improve Test Performance
-        </p>
-        <div className="flex">
-          <TotalFlakyTestsCard />
-          <AverageFlakeRateCard />
-          <TotalFailuresCard />
-          <TotalSkippedTestsCard />
+        <div className="flex flex-col gap-3">
+          <p className="pl-4 text-xs font-semibold text-ds-gray-quaternary">
+            Improve Test Performance
+          </p>
+          <div className="flex">
+            <TotalFlakyTestsCard />
+            <AverageFlakeRateCard />
+            <TotalFailuresCard />
+            <TotalSkippedTestsCard />
+          </div>
         </div>
       </div>
-    </div>
+    </>
   )
 }
 
diff --git a/src/pages/RepoPage/FailedTestsTab/FailedTestsPage/BranchSelector/BranchSelector.spec.tsx b/src/pages/RepoPage/FailedTestsTab/FailedTestsPage/SelectorSection/BranchSelector/BranchSelector.spec.tsx
similarity index 100%
rename from src/pages/RepoPage/FailedTestsTab/FailedTestsPage/BranchSelector/BranchSelector.spec.tsx
rename to src/pages/RepoPage/FailedTestsTab/FailedTestsPage/SelectorSection/BranchSelector/BranchSelector.spec.tsx
diff --git a/src/pages/RepoPage/FailedTestsTab/FailedTestsPage/BranchSelector/BranchSelector.tsx b/src/pages/RepoPage/FailedTestsTab/FailedTestsPage/SelectorSection/BranchSelector/BranchSelector.tsx
similarity index 100%
rename from src/pages/RepoPage/FailedTestsTab/FailedTestsPage/BranchSelector/BranchSelector.tsx
rename to src/pages/RepoPage/FailedTestsTab/FailedTestsPage/SelectorSection/BranchSelector/BranchSelector.tsx
diff --git a/src/pages/RepoPage/FailedTestsTab/FailedTestsPage/BranchSelector/index.ts b/src/pages/RepoPage/FailedTestsTab/FailedTestsPage/SelectorSection/BranchSelector/index.ts
similarity index 100%
rename from src/pages/RepoPage/FailedTestsTab/FailedTestsPage/BranchSelector/index.ts
rename to src/pages/RepoPage/FailedTestsTab/FailedTestsPage/SelectorSection/BranchSelector/index.ts
diff --git a/src/pages/RepoPage/FailedTestsTab/FailedTestsPage/SelectorSection/SelectorSection.tsx b/src/pages/RepoPage/FailedTestsTab/FailedTestsPage/SelectorSection/SelectorSection.tsx
new file mode 100644
index 0000000000..315afc53fc
--- /dev/null
+++ b/src/pages/RepoPage/FailedTestsTab/FailedTestsPage/SelectorSection/SelectorSection.tsx
@@ -0,0 +1,119 @@
+import { useParams } from 'react-router-dom'
+
+import {
+  TIME_OPTION_VALUES,
+  TimeOption,
+  TimeOptions,
+} from 'pages/RepoPage/shared/constants'
+import { useLocationParams } from 'services/navigation'
+import { useRepoOverview } from 'services/repo'
+import A from 'ui/A'
+import MultiSelect from 'ui/MultiSelect'
+import Select from 'ui/Select'
+
+import BranchSelector from './BranchSelector'
+
+interface URLParams {
+  provider: string
+  owner: string
+  repo: string
+  branch?: string
+}
+
+const getDecodedBranch = (branch?: string) =>
+  !!branch ? decodeURIComponent(branch) : undefined
+
+function SelectorSection() {
+  const { params, updateParams } = useLocationParams({
+    search: '',
+    historicalTrend: '',
+  })
+
+  const { provider, owner, repo, branch } = useParams<URLParams>()
+
+  const { data: overview } = useRepoOverview({
+    provider,
+    owner,
+    repo,
+  })
+
+  const decodedBranch = getDecodedBranch(branch)
+  const selectedBranch = decodedBranch ?? overview?.defaultBranch ?? ''
+
+  const value = TimeOptions.find(
+    // @ts-expect-error need to type out useLocationParams
+    (item) => item.value === params.historicalTrend
+  )
+
+  const defaultValue = TimeOptions.find(
+    (option) => option.value === TIME_OPTION_VALUES.LAST_3_MONTHS
+  )
+  return (
+    <div className="flex flex-1 flex-row justify-between">
+      <BranchSelector />
+      {selectedBranch === overview?.defaultBranch ? (
+        <>
+          <div className="flex flex-col gap-1 px-4">
+            <h3 className="text-sm font-semibold text-ds-gray-octonary">
+              Historical trend
+            </h3>
+            <div className="sm:w-52 lg:w-80">
+              <Select
+                // @ts-expect-error Select is not typed
+                dataMarketing="select-historical-trend"
+                disabled={false}
+                ariaName="Select historical trend"
+                items={TimeOptions}
+                value={value ?? defaultValue}
+                onChange={(historicalTrend: TimeOption) =>
+                  updateParams({ historicalTrend: historicalTrend.value })
+                }
+                renderItem={({ label }: { label: string }) => label}
+                renderSelected={({ label }: { label: string }) => label}
+              />
+            </div>
+            <A to={''} isExternal hook={'30-day-retention'}>
+              30 day retention
+            </A>
+          </div>
+          <div className="flex flex-col gap-1 px-4">
+            <h3 className="text-sm font-semibold text-ds-gray-octonary">
+              Test suites
+            </h3>
+            <div className="sm:w-52 lg:w-80">
+              <MultiSelect
+                // @ts-expect-error MultiSelect is not typed
+                dataMarketing="select-test-suites"
+                ariaName="Select Test Suites"
+                value={undefined}
+                items={[1, 2, 3, 4]}
+                renderItem={(item: any) => item}
+                resourceName="Test Suites"
+                onChange={() => {}}
+              />
+            </div>
+          </div>
+          <div className="flex flex-col gap-1 pl-4">
+            <h3 className="text-sm font-semibold text-ds-gray-octonary">
+              Flags
+            </h3>
+            <div className="sm:w-52 lg:w-80">
+              <MultiSelect
+                // @ts-expect-error MultiSelect is not typed
+                dataMarketing="select-flags"
+                ariaName="Select Flags"
+                value={undefined}
+                items={[1, 2, 3, 4]}
+                renderItem={(item: any) => item}
+                resourceName="Flags"
+                onChange={() => {}}
+              />
+            </div>
+          </div>
+        </>
+      ) : null}
+    </div>
+  )
+}
+
+export default SelectorSection