ref: refactor page components into separate sections

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

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

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