fix: HTML Validation issues with GitHub Rate Limit Banner (#3538)

Author: nsdeschenes

src/shared/GlobalBanners/GitHubRateLimitExceeded/GitHubRateLimitExceededBanner.test.tsx

@@ -0,0 +1,45 @@
+import { render, screen } from '@testing-library/react'
+import { MemoryRouter, Route } from 'react-router'
+
+import GitHubRateLimitExceededBanner from './GitHubRateLimitExceededBanner'
+
+const wrapper =
+  (initialEntry = '/gh'): React.FC<React.PropsWithChildren> =>
+  ({ children }) => (
+    <MemoryRouter initialEntries={[initialEntry]}>
+      <Route path="/:provider">{children}</Route>
+    </MemoryRouter>
+  )
+
+describe('GitHubRateLimitExceededBanner', () => {
+  describe('provider is GH', () => {
+    it('renders the banner', () => {
+      render(<GitHubRateLimitExceededBanner />, {
+        wrapper: wrapper('/gh'),
+      })
+
+      const title = screen.getByText('Rate limit exceeded')
+      expect(title).toBeInTheDocument()
+
+      const description = screen.getByText(/Unable to calculate/)
+      expect(description).toBeInTheDocument()
+
+      const link = screen.getByRole('link', { name: 'Github documentation.' })
+      expect(link).toBeInTheDocument()
+      expect(link).toHaveAttribute(
+        'href',
+        'https://docs.github.com/en/rest/using-the-rest-api/rate-limits-for-the-rest-api'
+      )
+    })
+  })
+
+  describe('provider is not GH', () => {
+    it('does not render', () => {
+      const { container } = render(<GitHubRateLimitExceededBanner />, {
+        wrapper: wrapper('/bb'),
+      })
+
+      expect(container).toBeEmptyDOMElement()
+    })
+  })
+})

src/shared/GlobalBanners/GitHubRateLimitExceeded/GitHubRateLimitExceededBanner.tsx

@@ -5,31 +5,31 @@ import { providerToName } from 'shared/utils/provider'
 import A from 'ui/A'
 import { Alert } from 'ui/Alert'
 
+interface URLParams {
+  provider: Provider
+}
+
 const GitHubRateLimitExceededBanner = () => {
-  const { provider } = useParams<{ provider: Provider }>()
+  const { provider } = useParams<URLParams>()
   const isGh = providerToName(provider) === 'Github'
 
   if (!isGh) return null
 
   return (
     <div className="mb-2">
       <Alert variant="warning">
-        <Alert.Title>
-          <h2 className="flex gap-2 font-semibold">Rate limit exceeded</h2>
-        </Alert.Title>
+        <Alert.Title>Rate limit exceeded</Alert.Title>
         <Alert.Description>
-          <p className="flex items-center gap-2">
-            Unable to calculate coverage due to GitHub rate limit exceeded.
-            Please retry later. More info on rate limits:
-            <A
-              data-testid="codecovGithubApp-link"
-              to={{ pageName: 'githubRateLimitExceeded' }}
-              hook={undefined}
-              isExternal={true}
-            >
-              Github documentation.
-            </A>
-          </p>
+          Unable to calculate coverage due to GitHub rate limit exceeded. Please
+          retry later. More info on rate limits:{' '}
+          <A
+            data-testid="codecovGithubApp-link"
+            to={{ pageName: 'githubRateLimitExceeded' }}
+            hook={undefined}
+            isExternal={true}
+          >
+            Github documentation.
+          </A>
         </Alert.Description>
       </Alert>
     </div>