feat: New flake aggregates hook

src/pages/RepoPage/FailedTestsTab/FailedTestsPage/MetricsSection/MetricsSection.test.tsx

@@ -43,6 +43,22 @@ const mockAggResponse = {
   },
 }
 
+const mockFlakeAggResponse = {
+  owner: {
+    repository: {
+      __typename: 'Repository',
+      testAnalytics: {
+        flakeAggregates: {
+          flakeCount: 88,
+          flakeCountPercentChange: 10.0,
+          flakeRate: 8,
+          flakeRatePercentChange: 5.0,
+        },
+      },
+    },
+  },
+}
+
 const server = setupServer()
 const queryClient = new QueryClient({
   defaultOptions: { queries: { suspense: true, retry: false } },
@@ -87,6 +103,9 @@ describe('MetricsSection', () => {
       }),
       graphql.query('GetTestResultsAggregates', (info) => {
         return HttpResponse.json({ data: mockAggResponse })
+      }),
+      graphql.query('GetFlakeAggregates', (info) => {
+        return HttpResponse.json({ data: mockFlakeAggResponse })
       })
     )
   }

src/pages/RepoPage/FailedTestsTab/FailedTestsPage/MetricsSection/MetricsSection.tsx

@@ -6,6 +6,7 @@ import Icon from 'ui/Icon'
 import { MetricCard } from 'ui/MetricCard'
 import { Tooltip } from 'ui/Tooltip'
 
+import { useFlakeAggregates } from '../hooks/useFlakeAggregates'
 import { useTestResultsAggregates } from '../hooks/useTestResultsAggregates'
 
 const PercentBadge = ({ value }: { value: number }) => {
@@ -109,7 +110,13 @@ const SlowestTestsCard = ({
   )
 }
 
-const TotalFlakyTestsCard = () => {
+const TotalFlakyTestsCard = ({
+  flakeCount,
+  flakeCountPercentChange,
+}: {
+  flakeCount?: number
+  flakeCountPercentChange?: number | null
+}) => {
   return (
     <MetricCard>
       <MetricCard.Header>
@@ -122,8 +129,10 @@ const TotalFlakyTestsCard = () => {
         </MetricCard.Title>
       </MetricCard.Header>
       <MetricCard.Content>
-        88
-        <Badge variant="success">-15%</Badge>
+        {flakeCount}
+        {flakeCountPercentChange ? (
+          <PercentBadge value={flakeCountPercentChange} />
+        ) : null}
       </MetricCard.Content>
       <MetricCard.Description>
         *The total rerun time for flaky tests is [50hr].
@@ -132,7 +141,13 @@ const TotalFlakyTestsCard = () => {
   )
 }
 
-const AverageFlakeRateCard = () => {
+const AverageFlakeRateCard = ({
+  flakeRate,
+  flakeRatePercentChange,
+}: {
+  flakeRate?: number
+  flakeRatePercentChange?: number | null
+}) => {
   return (
     <MetricCard>
       <MetricCard.Header>
@@ -146,8 +161,10 @@ const AverageFlakeRateCard = () => {
         </MetricCard.Title>
       </MetricCard.Header>
       <MetricCard.Content>
-        8%
-        <Badge variant="success">-35%</Badge>
+        {flakeRate}%
+        {flakeRatePercentChange ? (
+          <PercentBadge value={flakeRatePercentChange} />
+        ) : null}
       </MetricCard.Content>
       <MetricCard.Description>
         On average, a flaky test ran [20] times before it passed.
@@ -238,6 +255,7 @@ function MetricsSection() {
   })
 
   const { data: aggregates } = useTestResultsAggregates()
+  const { data: flakeAggregates } = useFlakeAggregates()
 
   const decodedBranch = getDecodedBranch(branch)
   const selectedBranch = decodedBranch ?? overview?.defaultBranch ?? ''
@@ -272,8 +290,14 @@ function MetricsSection() {
             Improve Test Performance
           </p>
           <div className="flex">
-            <TotalFlakyTestsCard />
-            <AverageFlakeRateCard />
+            <TotalFlakyTestsCard
+              flakeCount={flakeAggregates?.flakeCount}
+              flakeCountPercentChange={flakeAggregates?.flakeCountPercentChange}
+            />
+            <AverageFlakeRateCard
+              flakeRate={flakeAggregates?.flakeRate}
+              flakeRatePercentChange={flakeAggregates?.flakeRatePercentChange}
+            />
             <TotalFailuresCard
               totalFails={aggregates?.totalFails}
               totalFailsPercentChange={aggregates?.totalFailsPercentChange}

src/pages/RepoPage/FailedTestsTab/FailedTestsPage/hooks/useFlakeAggregates/index.ts

@@ -0,0 +1 @@
+export { useFlakeAggregates } from './useFlakeAggregates'

src/pages/RepoPage/FailedTestsTab/FailedTestsPage/hooks/useFlakeAggregates/useFlakeAggregates.test.tsx

@@ -0,0 +1,175 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { renderHook, waitFor } from '@testing-library/react'
+import { graphql, HttpResponse } from 'msw2'
+import { setupServer } from 'msw2/node'
+import { MemoryRouter, Route } from 'react-router-dom'
+import { MockInstance } from 'vitest'
+
+import { MeasurementInterval, useFlakeAggregates } from './useFlakeAggregates'
+
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { retry: false } },
+})
+
+const wrapper = ({ children }: { children: React.ReactNode }) => (
+  <MemoryRouter initialEntries={['/gh/codecov/gazebo']}>
+    <Route path="/:provider/:owner/:repo">
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </Route>
+  </MemoryRouter>
+)
+
+const server = setupServer()
+
+beforeAll(() => {
+  server.listen()
+})
+
+afterEach(() => {
+  queryClient.clear()
+  server.resetHandlers()
+})
+
+afterAll(() => {
+  server.close()
+})
+
+const mockNotFoundError = {
+  owner: {
+    repository: {
+      __typename: 'NotFoundError',
+      message: 'repo not found',
+    },
+  },
+}
+
+const mockIncorrectResponse = {
+  owner: {
+    repository: {
+      invalid: 'invalid',
+    },
+  },
+}
+
+const mockResponse = {
+  owner: {
+    repository: {
+      __typename: 'Repository',
+      testAnalytics: {
+        flakeAggregates: {
+          flakeCount: 10,
+          flakeCountPercentChange: 5.0,
+          flakeRate: 0.1,
+          flakeRatePercentChange: 2.0,
+        },
+      },
+    },
+  },
+}
+
+describe('useFlakeAggregates', () => {
+  function setup({
+    isNotFoundError = false,
+    isUnsuccessfulParseError = false,
+  }) {
+    server.use(
+      graphql.query('GetFlakeAggregates', (info) => {
+        if (isNotFoundError) {
+          return HttpResponse.json({ data: mockNotFoundError })
+        } else if (isUnsuccessfulParseError) {
+          return HttpResponse.json({ data: mockIncorrectResponse })
+        }
+        return HttpResponse.json({ data: mockResponse })
+      })
+    )
+  }
+
+  describe('when called with successful res', () => {
+    describe('when data is loaded', () => {
+      it('returns the data', async () => {
+        setup({})
+        const { result } = renderHook(
+          () =>
+            useFlakeAggregates({ history: MeasurementInterval.INTERVAL_1_DAY }),
+          {
+            wrapper,
+          }
+        )
+
+        await waitFor(() => result.current.isLoading)
+        await waitFor(() => !result.current.isLoading)
+
+        await waitFor(() =>
+          expect(result.current.data).toEqual({
+            flakeCount: 10,
+            flakeCountPercentChange: 5.0,
+            flakeRate: 0.1,
+            flakeRatePercentChange: 2.0,
+          })
+        )
+      })
+    })
+  })
+
+  describe('when failed to parse data', () => {
+    let consoleSpy: MockInstance
+    beforeAll(() => {
+      consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    })
+
+    afterAll(() => {
+      consoleSpy.mockRestore()
+    })
+
+    it('returns a failed to parse error', async () => {
+      setup({ isUnsuccessfulParseError: true })
+      const { result } = renderHook(
+        () =>
+          useFlakeAggregates({ history: MeasurementInterval.INTERVAL_1_DAY }),
+        {
+          wrapper,
+        }
+      )
+
+      await waitFor(() =>
+        expect(result.current.error).toEqual(
+          expect.objectContaining({
+            status: 404,
+            dev: 'useFlakeAggregates - 404 Failed to parse data',
+          })
+        )
+      )
+    })
+  })
+
+  describe('when data not found', () => {
+    let consoleSpy: MockInstance
+    beforeAll(() => {
+      consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    })
+
+    afterAll(() => {
+      consoleSpy.mockRestore()
+    })
+
+    it('returns a not found error', async () => {
+      setup({ isNotFoundError: true })
+      const { result } = renderHook(
+        () =>
+          useFlakeAggregates({ history: MeasurementInterval.INTERVAL_1_DAY }),
+        {
+          wrapper,
+        }
+      )
+
+      await waitFor(() =>
+        expect(result.current.error).toEqual(
+          expect.objectContaining({
+            status: 404,
+            data: {},
+          })
+        )
+      )
+    })
+  })
+})