fix: Guard when calling match() on undefined (#3207)

src/pages/DefaultOrgSelector/DefaultOrgSelector.jsx

@@ -47,7 +47,7 @@ const renderItem = ({ item }) => {
  if (item?.isProvider) {
  return (
  <div className="flex h-8 items-center gap-2">
- <A pathname={{ pageName: 'codecovAppInstallation' }}>
+ <A to={{ pageName: 'codecovAppInstallation' }}>
  <Icon name="plus-circle" />
  <span>Install Codecov GitHub app</span>
  </A>

src/pages/DefaultOrgSelector/DefaultOrgSelector.spec.jsx

@@ -330,8 +330,8 @@ describe('DefaultOrgSelector', () => {
  const selfOrg = screen.getByRole('option', { name: 'Rula' })
  expect(selfOrg).toBeInTheDocument()
 
- const addNewOrg = screen.getByRole('option', {
- name: 'plus-circle.svg Install Codecov GitHub app',
+ const addNewOrg = screen.getByRole('link', {
+ name: 'plus-circle.svg Install Codecov GitHub app external-link.svg',
  })
  expect(addNewOrg).toBeInTheDocument()
  })
@@ -378,8 +378,8 @@ describe('DefaultOrgSelector', () => {
  const selfOrg = screen.queryByRole('option', { name: 'janedoe' })
  expect(selfOrg).not.toBeInTheDocument()
 
- const addNewOrg = screen.getByRole('option', {
- name: 'plus-circle.svg Install Codecov GitHub app',
+ const addNewOrg = screen.getByRole('link', {
+ name: 'plus-circle.svg Install Codecov GitHub app external-link.svg',
  })
  expect(addNewOrg).toBeInTheDocument()
  })
@@ -417,8 +417,8 @@ describe('DefaultOrgSelector', () => {
  const noOrgsFound = screen.getByText(/No organizations found/)
  expect(noOrgsFound).toBeInTheDocument()
 
- const addNewOrg = screen.getByRole('option', {
- name: 'plus-circle.svg Install Codecov GitHub app',
+ const addNewOrg = screen.getByRole('link', {
+ name: 'plus-circle.svg Install Codecov GitHub app external-link.svg',
  })
  expect(addNewOrg).toBeInTheDocument()
  })
@@ -458,8 +458,8 @@ describe('DefaultOrgSelector', () => {
  const orgInList = screen.getByRole('option', { name: 'criticalRole' })
  expect(orgInList).toBeInTheDocument()
 
- const addNewOrg = screen.queryByRole('option', {
- name: 'plus-circle.svg Install Codecov GitHub app',
+ const addNewOrg = screen.queryByRole('link', {
+ name: 'plus-circle.svg Install Codecov GitHub app external-link.svg',
  })
  expect(addNewOrg).not.toBeInTheDocument()
  })
@@ -496,8 +496,8 @@ describe('DefaultOrgSelector', () => {
 
  await user.click(selectOrg)
 
- const addNewOrg = screen.getByRole('option', {
- name: 'plus-circle.svg Install Codecov GitHub app',
+ const addNewOrg = screen.getByRole('link', {
+ name: 'plus-circle.svg Install Codecov GitHub app external-link.svg',
  })
 
  await user.click(addNewOrg)

src/ui/A/A.jsx

@@ -30,7 +30,10 @@ const variantClasses = {
  configure: `rounded bg-ds-blue-default px-4 py-1 font-semibold text-ds-gray-primary dark:text-white dark:bg-ds-blue-nonary`,
 }
 
-const getHostnameFromRegex = (url) => {
+export const getHostnameFromRegex = (url) => {
+ if (!url) {
+ return 'app.codecov.io'
+ }
  // run against regex
  const matches = url.match(/^https?:\/\/([^/?#]+)(?:[/?#]|$)/i)
  // extract hostname (will be null if no match is found)

src/ui/A/A.spec.jsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react'
 import { MemoryRouter } from 'react-router-dom'
 
-import A from '.'
+import A, { getHostnameFromRegex } from './A'
 
 describe('A', () => {
  function setup(props = {}) {
@@ -10,6 +10,17 @@ describe('A', () => {
  })
  }
 
+ describe('hostnameWithoutRegex', () => {
+ it('returns to home if no url passed', () => {
+ expect(getHostnameFromRegex(undefined)).toBe('app.codecov.io')
+ })
+ it('scrubs URL if one exists', () => {
+ expect(getHostnameFromRegex('https://app.codecov.io')).toBe(
+ 'app.codecov.io'
+ )
+ })
+ })
+
  describe('when rendered with the prop `to`', () => {
  beforeEach(() => {
  setup({

src/ui/CodeRenderer/CodeRendererProgressHeader/CodeRendererProgressHeader.jsx

@@ -12,7 +12,7 @@ function CodeRendererProgressHeader({ path, fileCoverage, change }) {
  * Header component that shows progress bar for the Code Renderer component.
  * @param {[String]} treePaths path of file from root directory. Only used in standalone file viewer
  * @param {Float} fileCoverage total coverage of current file
- * @param {Float} change difference between head and base coverage. Only used in commmit based file viewer
+ * @param {Float} change difference between head and base coverage. Only used in commit based file viewer
  */
 
  const isUnsupportedFileType = unsupportedExtensionsMapper({ path })