feat: Surface latest upload error for latest commit in a branch for tests tab

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

@@ -0,0 +1,203 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { render, screen, waitFor } 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 { ErrorCodeEnum } from 'shared/utils/commit'
+
+import FailedTestsErrorBanner from '../FailedTestsErrorBanner'
+
+const server = setupServer()
+
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { retry: false } },
+})
+
+beforeAll(() => {
+  server.listen()
+})
+
+afterEach(() => {
+  vi.clearAllMocks()
+  queryClient.clear()
+  server.resetHandlers()
+})
+
+afterAll(() => {
+  server.close()
+})
+
+const mockRepoOverview = {
+  owner: {
+    isCurrentUserActivated: true,
+    repository: {
+      __typename: 'Repository',
+      private: false,
+      defaultBranch: 'main',
+      oldestCommitAt: '2022-10-10T11:59:59',
+      coverageEnabled: true,
+      bundleAnalysisEnabled: true,
+      testAnalyticsEnabled: false,
+      languages: ['javascript'],
+    },
+  },
+}
+
+const mockTestResultsTestSuites = ({
+  errorCode,
+  errorMessage,
+}: {
+  errorCode: string
+  errorMessage: string
+}) => ({
+  owner: {
+    repository: {
+      __typename: 'Repository',
+      testAnalytics: {
+        testSuites: ['java', 'script'],
+      },
+      branch: {
+        head: {
+          latestUploadError: { errorCode, errorMessage },
+        },
+      },
+    },
+  },
+})
+
+const wrapper =
+  (
+    initialEntries = ['/repo/codecov/gazebo/branch/test']
+  ): React.FC<React.PropsWithChildren> =>
+  ({ children }) => (
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={initialEntries}>
+        <Route path="/repo/:owner/:repo/branch/:branch">
+          <Suspense fallback={<div>Loading...</div>}>{children}</Suspense>
+        </Route>
+      </MemoryRouter>
+    </QueryClientProvider>
+  )
+
+describe('FailedTestsErrorBanner', () => {
+  function setup({
+    errorCode,
+    errorMessage = 'File not found',
+  }: {
+    errorCode: string
+    errorMessage?: string
+  }) {
+    server.use(
+      graphql.query('GetRepoOverview', () => {
+        return HttpResponse.json({
+          data: mockRepoOverview,
+        })
+      }),
+      graphql.query('GetTestResultsTestSuites', () => {
+        return HttpResponse.json({
+          data: mockTestResultsTestSuites({ errorCode, errorMessage }),
+        })
+      })
+    )
+  }
+
+  it('renders nothing when unexpected error is provided', async () => {
+    setup({ errorCode: ErrorCodeEnum.unknownProcessing })
+    const { container } = render(<FailedTestsErrorBanner />, {
+      wrapper: wrapper(),
+    })
+
+    await waitFor(() => queryClient.isFetching)
+    await waitFor(() => !queryClient.isFetching)
+
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('renders file not found in storage error', async () => {
+    setup({ errorCode: ErrorCodeEnum.fileNotFoundInStorage })
+    render(<FailedTestsErrorBanner />, { wrapper: wrapper() })
+    const banner = await screen.findByRole('heading', {
+      name: 'JUnit XML file not found',
+    })
+    expect(banner).toBeInTheDocument()
+  })
+
+  it('renders processing timeout error', async () => {
+    setup({ errorCode: ErrorCodeEnum.processingTimeout })
+    render(<FailedTestsErrorBanner />, { wrapper: wrapper() })
+    const banner = await screen.findByRole('heading', {
+      name: 'Upload timeout',
+    })
+    expect(banner).toBeInTheDocument()
+  })
+
+  it('renders unsupported file format error', async () => {
+    setup({ errorCode: ErrorCodeEnum.unsupportedFileFormat })
+    render(<FailedTestsErrorBanner />, { wrapper: wrapper() })
+    const banner = await screen.findByRole('heading', {
+      name: 'Unsupported file format',
+    })
+    const content = await screen.findByText(
+      /Please review the parser error message:/
+    )
+    const troubleshootingLink = await screen.findByRole('link', {
+      name: 'troubleshooting guide',
+    })
+
+    expect(banner).toBeInTheDocument()
+    expect(content).toBeInTheDocument()
+    expect(troubleshootingLink).toBeInTheDocument()
+    expect(troubleshootingLink).toHaveAttribute(
+      'href',
+      'https://docs.codecov.com/docs/test-analytics-beta#troubleshooting'
+    )
+  })
+
+  describe('when error message is not provided for unsupported file format', () => {
+    it('hides the review parser error message', async () => {
+      setup({
+        errorCode: ErrorCodeEnum.unsupportedFileFormat,
+        errorMessage: '',
+      })
+      render(<FailedTestsErrorBanner />, { wrapper: wrapper() })
+
+      await waitFor(() => queryClient.isFetching)
+      await waitFor(() => !queryClient.isFetching)
+
+      const banner = screen.queryByText(
+        'Please review the parser error message:'
+      )
+      expect(banner).not.toBeInTheDocument()
+    })
+  })
+
+  describe('when no branch is provided', () => {
+    it('renders nothing', async () => {
+      setup({ errorCode: ErrorCodeEnum.fileNotFoundInStorage })
+
+      await waitFor(() => queryClient.isFetching)
+      await waitFor(() => !queryClient.isFetching)
+
+      const { container } = render(<FailedTestsErrorBanner />, {
+        wrapper: wrapper(['/repo/owner/repo/']),
+      })
+      expect(container).toBeEmptyDOMElement()
+    })
+  })
+
+  describe('when branch is the default branch', () => {
+    it('renders nothing', async () => {
+      setup({ errorCode: ErrorCodeEnum.fileNotFoundInStorage })
+
+      await waitFor(() => queryClient.isFetching)
+      await waitFor(() => !queryClient.isFetching)
+
+      const { container } = render(<FailedTestsErrorBanner />, {
+        wrapper: wrapper(['/repo/owner/repo/main']),
+      })
+      expect(container).toBeEmptyDOMElement()
+    })
+  })
+})

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

@@ -0,0 +1,133 @@
+import { useParams } from 'react-router-dom'
+
+import { useRepoOverview } from 'services/repo'
+import { ErrorCodeEnum } from 'shared/utils/commit'
+import A from 'ui/A'
+import Banner from 'ui/Banner'
+import BannerContent from 'ui/Banner/BannerContent'
+import BannerHeading from 'ui/Banner/BannerHeading'
+import Icon from 'ui/Icon'
+
+import { useTestResultsTestSuites } from '../hooks/useTestResultsTestSuites/useTestResultsTestSuites'
+
+const CodeSnippet: React.FC<React.PropsWithChildren> = ({ children }) => (
+  <code className="rounded-md border border-ds-gray-secondary bg-ds-gray-primary p-1 text-xs text-ds-primary-red">
+    {children}
+  </code>
+)
+
+const FileNotFoundBanner = () => (
+  <Banner variant="warning">
+    <BannerHeading>
+      <div className="flex items-center gap-2">
+        <Icon name="exclamation" className="text-orange-500" />
+        <h3 className="font-semibold">JUnit XML file not found</h3>
+      </div>
+    </BannerHeading>
+    <BannerContent>
+      <p>
+        No result to display due to Test Analytics couldn&apos;t locate a JUnit
+        XML file. Please rename the file to include{' '}
+        <CodeSnippet>junit</CodeSnippet>, ensure CLI file search is enabled, or
+        use the <CodeSnippet>file</CodeSnippet> or{' '}
+        <CodeSnippet>search_dir</CodeSnippet> arguments to specify the file(s)
+        for upload.
+      </p>
+    </BannerContent>
+  </Banner>
+)
+
+const ProcessingTimeoutBanner = () => (
+  <Banner variant="warning">
+    <BannerHeading>
+      <div className="flex items-center gap-2">
+        <Icon name="exclamation" className="text-orange-500" />
+        <h3 className="font-semibold">Upload timeout</h3>
+      </div>
+    </BannerHeading>
+    <BannerContent>
+      Your upload failed due to timeout. Please try it again.
+    </BannerContent>
+  </Banner>
+)
+
+const UnsupportedFormatBanner = ({
+  errorMessage,
+}: {
+  errorMessage: string
+}) => (
+  <Banner variant="warning">
+    <BannerHeading>
+      <div className="flex items-center gap-2">
+        <Icon name="exclamation" className="text-orange-500" />
+        <h3 className="font-semibold">Unsupported file format</h3>
+      </div>
+    </BannerHeading>
+    <BannerContent>
+      Upload processing failed due to unusable file format.
+      {errorMessage ? (
+        <>
+          {' '}
+          Please review the parser error message:{' '}
+          <CodeSnippet>{errorMessage}</CodeSnippet> <br />{' '}
+        </>
+      ) : (
+        ' '
+      )}
+      For more help, visit our{' '}
+      <A
+        to={{
+          pageName: 'testAnalyticsTroubleshooting',
+        }}
+        hook="trouble shooting guide"
+        isExternal={true}
+      >
+        troubleshooting guide
+      </A>
+      .
+    </BannerContent>
+  </Banner>
+)
+
+interface URLParams {
+  provider: string
+  owner: string
+  repo: string
+  branch?: string
+}
+
+function FailedTestsErrorBanner() {
+  const { provider, owner, repo, branch } = useParams<URLParams>()
+  const { data: overview } = useRepoOverview({
+    provider,
+    owner,
+    repo,
+  })
+
+  const { data } = useTestResultsTestSuites({ branch })
+  const latestUploadError = data?.latestUploadError
+
+  if (!latestUploadError || branch === overview?.defaultBranch) {
+    return null
+  }
+
+  const errorCode = latestUploadError.errorCode
+
+  if (errorCode === ErrorCodeEnum.fileNotFoundInStorage) {
+    return <FileNotFoundBanner />
+  }
+
+  if (errorCode === ErrorCodeEnum.processingTimeout) {
+    return <ProcessingTimeoutBanner />
+  }
+
+  if (errorCode === ErrorCodeEnum.unsupportedFileFormat) {
+    return (
+      <UnsupportedFormatBanner errorMessage={latestUploadError.errorMessage} />
+    )
+  }
+
+  return null
+}
+
+export default FailedTestsErrorBanner

src/pages/RepoPage/FailedTestsTab/FailedTestsPage/FailedTestsErrorBanner/index.ts

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

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

@@ -16,6 +16,9 @@ vi.mock('./MetricsSection/MetricsSection', () => ({
 vi.mock('./FailedTestsTable/FailedTestsTable', () => ({
   default: () => 'Failed Tests Table',
 }))
+vi.mock('./FailedTestsErrorBanner', () => ({
+  default: () => 'Failed Tests Error Banner',
+}))
 
 const server = setupServer()
 const queryClient = new QueryClient({
@@ -69,16 +72,18 @@ describe('FailedTestsPage', () => {
     )
   }
 
-  it('renders sub-components', () => {
+  it('renders sub-components', async () => {
     setup()
     render(<FailedTestsPage />, { wrapper: wrapper() })
 
-    const selectorSection = screen.getByText(/Selector Section/)
-    const metricSection = screen.getByText(/Metrics Section/)
-    const table = screen.getByText(/Failed Tests Table/)
+    const selectorSection = await screen.findByText(/Selector Section/)
+    const metricSection = await screen.findByText(/Metrics Section/)
+    const table = await screen.findByText(/Failed Tests Table/)
+    const errorBanner = await screen.findByText(/Failed Tests Error Banner/)
 
     expect(selectorSection).toBeInTheDocument()
     expect(metricSection).toBeInTheDocument()
     expect(table).toBeInTheDocument()
+    expect(errorBanner).toBeInTheDocument()
   })
 })

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

@@ -1,10 +1,15 @@
+import { lazy } from 'react'
+
 import FailedTestsTable from './FailedTestsTable'
 import { MetricsSection } from './MetricsSection'
 import { SelectorSection } from './SelectorSection'
 
+const FailedTestsErrorBanner = lazy(() => import('./FailedTestsErrorBanner'))
+
 function FailedTestsPage() {
   return (
     <div className="flex flex-1 flex-col gap-2">
+      <FailedTestsErrorBanner />
       <SelectorSection />
       <MetricsSection />
       <FailedTestsTable />