fix: CoverageTrend not displaying coverage percentage (#3530)

src/pages/RepoPage/CoverageTab/OverviewTab/Summary/CoverageTrend/CoverageTrend.test.tsx

@@ -0,0 +1,151 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { render, screen } from '@testing-library/react'
+import { graphql, HttpResponse } from 'msw'
+import { setupServer } from 'msw/node'
+import { Suspense } from 'react'
+import { MemoryRouter, Route } from 'react-router-dom'
+
+import CoverageTrend from './CoverageTrend'
+
+vi.mock('../TrendDropdown', () => ({ default: () => 'TrendDropdown' }))
+
+const mockOverview = {
+  owner: {
+    isCurrentUserActivated: true,
+    repository: {
+      __typename: 'Repository',
+      private: false,
+      defaultBranch: 'main',
+      oldestCommitAt: '2022-10-10T11:59:59',
+      coverageEnabled: true,
+      bundleAnalysisEnabled: true,
+      languages: ['javascript'],
+      testAnalyticsEnabled: true,
+    },
+  },
+}
+
+const mockBranch = {
+  owner: {
+    repository: {
+      __typename: 'Repository',
+      branch: { name: 'main', head: { commitid: 'commit-123' } },
+    },
+  },
+}
+
+const mockBranches = {
+  owner: {
+    repository: {
+      __typename: 'Repository',
+      branches: {
+        edges: [{ node: { name: 'main', head: { commitid: 'commit-123' } } }],
+        pageInfo: { hasNextPage: false, endCursor: null },
+      },
+    },
+  },
+}
+
+const mockBranchMeasurements = {
+  owner: {
+    repository: {
+      __typename: 'Repository',
+      coverageAnalytics: {
+        measurements: [
+          { timestamp: '2023-01-01T00:00:00+00:00', max: 40 },
+          { timestamp: '2023-01-02T00:00:00+00:00', max: 80 },
+          { timestamp: '2023-01-03T00:00:00+00:00', max: 90 },
+          { timestamp: '2023-01-04T00:00:00+00:00', max: 100 },
+        ],
+      },
+    },
+  },
+}
+
+const mockNoBranchMeasurements = {
+  owner: {
+    repository: {
+      __typename: 'Repository',
+      coverageAnalytics: {
+        measurements: [],
+      },
+    },
+  },
+}
+
+const server = setupServer()
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { retry: false, suspense: true } },
+})
+
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
+  <QueryClientProvider client={queryClient}>
+    <MemoryRouter initialEntries={['/gh/test-org/test-repo']}>
+      <Route path="/:provider/:owner/:repo">
+        <Suspense fallback={null}>{children}</Suspense>
+      </Route>
+    </MemoryRouter>
+  </QueryClientProvider>
+)
+
+beforeAll(() => {
+  server.listen()
+})
+
+afterEach(() => {
+  queryClient.clear()
+  server.resetHandlers()
+})
+
+afterAll(() => {
+  server.close()
+})
+
+interface SetupArgs {
+  hasBranchMeasurements?: boolean
+}
+
+describe('CoverageTrend', () => {
+  function setup({ hasBranchMeasurements = true }: SetupArgs) {
+    server.use(
+      graphql.query('GetRepoOverview', () => {
+        return HttpResponse.json({ data: mockOverview })
+      }),
+      graphql.query('GetBranches', () => {
+        return HttpResponse.json({ data: mockBranches })
+      }),
+      graphql.query('GetBranch', () => {
+        return HttpResponse.json({ data: mockBranch })
+      }),
+      graphql.query('GetBranchCoverageMeasurements', () => {
+        if (!hasBranchMeasurements) {
+          return HttpResponse.json({ data: mockNoBranchMeasurements })
+        }
+
+        return HttpResponse.json({ data: mockBranchMeasurements })
+      })
+    )
+  }
+
+  describe('coverage exists', () => {
+    it('rendered the change %', async () => {
+      setup({ hasBranchMeasurements: true })
+      render(<CoverageTrend />, { wrapper })
+
+      const change = await screen.findByText(/60.00%+/)
+      expect(change).toBeInTheDocument()
+    })
+  })
+
+  describe('coverage is empty', () => {
+    it('does messages if there is no reports', async () => {
+      setup({ hasBranchMeasurements: false })
+      render(<CoverageTrend />, { wrapper })
+
+      const message = await screen.findByText(
+        /No coverage reports found in this timespan./
+      )
+      expect(message).toBeInTheDocument()
+    })
+  })
+})

src/pages/RepoPage/CoverageTab/OverviewTab/Summary/CoverageTrend/CoverageTrend.jsx → src/pages/RepoPage/CoverageTab/OverviewTab/Summary/CoverageTrend/CoverageTrend.tsx

@@ -9,41 +9,50 @@ import TotalsNumber from 'ui/TotalsNumber'
 import { useBranchSelector, useRepoCoverageTimeseries } from '../../hooks'
 import TrendDropdown from '../TrendDropdown'
 
+interface URLParams {
+  provider: string
+  owner: string
+  repo: string
+}
+
 function CoverageTrend() {
-  const { repo, owner, provider } = useParams()
+  const { repo, owner, provider } = useParams<URLParams>()
   const { data: overview } = useRepoOverview({
     provider,
     repo,
     owner,
   })
+
   const { data: branchesData } = useBranches({ provider, repo, owner })
+
   const { selection } = useBranchSelector({
-    branches: branchesData?.branches,
-    defaultBranch: overview?.defaultBranch,
+    branches: branchesData?.branches ?? [],
+    defaultBranch: overview?.defaultBranch ?? '',
   })
 
-  const { data, isFetching } = useRepoCoverageTimeseries(
-    {
-      branch: selection?.name,
+  const { data, isLoading } = useRepoCoverageTimeseries({
+    branch: selection?.name,
+    options: {
+      enabled: !!selection?.name,
+      suspense: false,
+      keepPreviousData: true,
     },
-    { enabled: !!selection?.name, suspense: false, keepPreviousData: true }
-  )
+  })
 
   return (
     <SummaryField>
       <TrendDropdown />
       <div className="flex items-center gap-2 pb-[1.3rem]">
         {/* ^ CSS doesn't want to render like the others without a p tag in the dom. */}
-        {data?.coverage?.length > 0 ? (
-          <>
-            <TotalsNumber value={data?.coverageChange} light showChange />
-          </>
+        {isLoading ? (
+          <Spinner />
+        ) : data?.measurements?.length > 0 ? (
+          <TotalsNumber value={data?.coverageChange ?? 0} light showChange />
         ) : (
           <p className="text-sm font-medium">
             No coverage reports found in this timespan.
           </p>
         )}
-        {isFetching && <Spinner />}
       </div>
     </SummaryField>
   )

src/pages/RepoPage/CoverageTab/OverviewTab/hooks/useRepoCoverageTimeseries.test.tsx

@@ -157,6 +157,18 @@ describe('useRepoCoverageTimeseries', () => {
 
       await waitFor(() => expect(result.current.data?.measurements).toEqual([]))
     })
+
+    it('returns 0 for coverage change', async () => {
+      setup({ noCoverageData: true })
+      const { result } = renderHook(
+        () => useRepoCoverageTimeseries({ branch: 'c3' }),
+        { wrapper: wrapper('') }
+      )
+
+      await waitFor(() =>
+        expect(result.current.data?.coverageChange).toEqual(0)
+      )
+    })
   })
 
   describe('there is coverage data', () => {
@@ -176,5 +188,17 @@ describe('useRepoCoverageTimeseries', () => {
         ])
       )
     })
+
+    it('returns the coverage change', async () => {
+      setup()
+      const { result } = renderHook(
+        () => useRepoCoverageTimeseries({ branch: 'c3' }),
+        { wrapper: wrapper('') }
+      )
+
+      await waitFor(() =>
+        expect(result.current.data?.coverageChange).toEqual(15)
+      )
+    })
   })
 })

src/pages/RepoPage/CoverageTab/OverviewTab/hooks/useRepoCoverageTimeseries.ts

@@ -96,9 +96,12 @@ export function useRepoCoverageTimeseries({
       }
     })
 
+    const coverageChange =
+      (coverage.at(-1)?.coverage ?? 0) - (coverage.at(0)?.coverage ?? 0)
+
     return {
       ...rest,
-      data: { measurements: coverage },
+      data: { measurements: coverage, coverageChange },
     }
   }, [data, rest])
 }