fix: Test results not rendering on first pull branches with test data (#3710)

Author: nsdeschenes

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

@@ -177,7 +177,7 @@ describe('FailedTestsTable', () => {
                         hasNextPage: false,
                         endCursor: null,
                       },
-                      totalCount: 1234,
+                      totalCount: 0,
                     },
                   },
                 },
@@ -361,19 +361,51 @@ describe('FailedTestsTable', () => {
   })
 
   describe('when first pull request', () => {
-    it('renders no data message', async () => {
-      const { queryClient } = setup({ isFirstPullRequest: true })
-      render(<FailedTestsTable />, {
-        wrapper: wrapper(queryClient),
+    describe('when there are no test results', () => {
+      it('renders no data message', async () => {
+        const { queryClient } = setup({
+          isFirstPullRequest: true,
+          noEntries: true,
+        })
+        render(<FailedTestsTable />, {
+          wrapper: wrapper(queryClient),
+        })
+
+        const noDataMessage = await screen.findByText('No data yet')
+        expect(noDataMessage).toBeInTheDocument()
+
+        const mergeIntoMainMessage = await screen.findByText(
+          'To see data for the main branch, merge your PR into the main branch.'
+        )
+        expect(mergeIntoMainMessage).toBeInTheDocument()
       })
+    })
 
-      const noDataMessage = await screen.findByText('No data yet')
-      expect(noDataMessage).toBeInTheDocument()
+    describe('there are test results', () => {
+      it('renders data in the table', async () => {
+        const { queryClient } = setup({ isFirstPullRequest: true })
+        render(<FailedTestsTable />, {
+          wrapper: wrapper(queryClient),
+        })
+
+        const nameColumn = await screen.findByText('test-1')
+        expect(nameColumn).toBeInTheDocument()
+
+        const durationColumn = await screen.findByText('10.000s')
+        expect(durationColumn).toBeInTheDocument()
+
+        const failureRateColumn = await screen.findByText('10.00%')
+        expect(failureRateColumn).toBeInTheDocument()
 
-      const mergeIntoMainMessage = await screen.findByText(
-        'To see data for the main branch, merge your PR into the main branch.'
-      )
-      expect(mergeIntoMainMessage).toBeInTheDocument()
+        const flakeRateColumn = await screen.findByText('0%')
+        expect(flakeRateColumn).toBeInTheDocument()
+
+        const commitFailedColumn = await screen.findByText('1')
+        expect(commitFailedColumn).toBeInTheDocument()
+
+        const lastRunColumn = await screen.findAllByText('over 1 year ago')
+        expect(lastRunColumn.length).toBeGreaterThan(0)
+      })
     })
   })
 

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

@@ -8,7 +8,6 @@ import {
   useReactTable,
 } from '@tanstack/react-table'
 import cs from 'classnames'
-import isEmpty from 'lodash/isEmpty'
 import qs from 'qs'
 import { useEffect, useMemo, useState } from 'react'
 import { useInView } from 'react-intersection-observer'
@@ -298,7 +297,7 @@ const FailedTestsTable = () => {
     }
   }, [fetchNextPage, inView, hasNextPage])
 
-  if (testData?.isFirstPullRequest) {
+  if (testData?.isFirstPullRequest && testData.totalCount === 0) {
     return (
       <div className="flex flex-col gap-2">
         <TableHeader
@@ -316,7 +315,7 @@ const FailedTestsTable = () => {
     )
   }
 
-  if (isEmpty(testData?.testResults) && !isLoading && !!branch) {
+  if (testData.totalCount === 0 && !isLoading && !!branch) {
     return (
       <div className="flex flex-col gap-2">
         <TableHeader