Merge 44df1e7 into b46045a

src/components/WorldListPage_WorldsForEnsOwnersFeature/NameTabs/NameTabs.spec.tsx

@@ -1,60 +1,54 @@
 import { ReactNode } from 'react'
-import { useLocation } from 'react-router'
 import { render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import { Mobile, NotMobile } from 'decentraland-ui/dist/components/Media/Media'
-import NameTabs, { TAB_QUERY_PARAM_KEY } from './NameTabs'
-import { TabType } from './NameTabs.types'
+import NameTabs from './NameTabs'
+import { TAB_QUERY_PARAM_KEY, TabType, UseCurrentlySelectedTabResult, useCurrentlySelectedTab } from '../hooks'
 
-jest.mock('react-router')
 jest.mock('decentraland-ui/dist/components/Media/Media')
+jest.mock('../hooks')
 
-const mockUseLocation = useLocation as jest.Mock
+const mockUseCurrentlySelectedTab = useCurrentlySelectedTab as jest.Mock
 const mockMobile = Mobile as jest.Mock
 const mockNotMobile = NotMobile as jest.Mock
 
 describe('when rendering the name tabs component', () => {
-  let location: Location
+  let useCurrentlySelectedTabResult: UseCurrentlySelectedTabResult
   let onNavigate: jest.Mock
 
   beforeEach(() => {
-    location = {
-      pathname: '/pathname'
-    } as Location
+    useCurrentlySelectedTabResult = {
+      tab: TabType.DCL,
+      pathname: '/pathname',
+      urlSearchParams: new URLSearchParams('?foo=bar')
+    } as UseCurrentlySelectedTabResult
 
-    mockUseLocation.mockReturnValueOnce(location)
+    mockUseCurrentlySelectedTab.mockReturnValueOnce(useCurrentlySelectedTabResult)
 
     onNavigate = jest.fn()
   })
 
-  describe('when the tab param is not found in the location.search property', () => {
+  describe('when the tab param is returned as undefined by the currently selected tab hook', () => {
     beforeEach(() => {
-      location.search = '?foo=bar'
+      useCurrentlySelectedTabResult.tab = undefined
     })
 
-    it('should call the on navigate prop with the current pathname + current query params + the tab query param with dcl as value', () => {
+    it('should call the on navigate prop with the pathname, url search params and an added tab query param with dcl as value', () => {
       render(<NameTabs onNavigate={onNavigate} />)
-      expect(onNavigate).toHaveBeenCalledWith(`${location.pathname}${location.search}&${TAB_QUERY_PARAM_KEY}=${TabType.DCL}`)
+      expect(onNavigate).toHaveBeenCalledWith(
+        `${useCurrentlySelectedTabResult.pathname}?${useCurrentlySelectedTabResult.urlSearchParams.toString()}&${TAB_QUERY_PARAM_KEY}=${
+          TabType.DCL
+        }`
+      )
     })
   })
 
-  describe('when the tab param is found in the location.search property but is not ens or dcl', () => {
-    beforeEach(() => {
-      location.search = `?foo=bar&${TAB_QUERY_PARAM_KEY}=invalid-tab`
-    })
-
-    it('should call the on navigate prop with the current pathname + current query params + the tab query param with dcl as value instead of the invalid value', () => {
-      render(<NameTabs onNavigate={onNavigate} />)
-      expect(onNavigate).toHaveBeenCalledWith(`${location.pathname}?foo=bar&${TAB_QUERY_PARAM_KEY}=${TabType.DCL}`)
-    })
-  })
-
-  describe('when the tab param is found in location.search and is ens or dcl', () => {
+  describe('when the tab param is returned as dcl or ens bu the currently selected tab hook', () => {
     let dclTabText: string
     let ensTabText: string
 
     beforeEach(() => {
-      location.search = `?${TAB_QUERY_PARAM_KEY}=${TabType.ENS}`
+      useCurrentlySelectedTabResult.tab = TabType.DCL
       dclTabText = 'Decentraland names'
       ensTabText = 'ENS names'
 
@@ -70,6 +64,10 @@ describe('when rendering the name tabs component', () => {
     })
 
     describe('when the tab param is ens', () => {
+      beforeEach(() => {
+        useCurrentlySelectedTabResult.tab = TabType.ENS
+      })
+
       it('should add the active css class to the ens tab', () => {
         render(<NameTabs onNavigate={onNavigate} />)
 
@@ -80,7 +78,7 @@ describe('when rendering the name tabs component', () => {
 
     describe('when the tab param is dcl', () => {
       beforeEach(() => {
-        location.search = `?${TAB_QUERY_PARAM_KEY}=${TabType.DCL}`
+        useCurrentlySelectedTabResult.tab = TabType.DCL
       })
 
       it('should add the active css class to the dcl tab', () => {
@@ -97,7 +95,11 @@ describe('when rendering the name tabs component', () => {
 
         screen.getByText(dclTabText).click()
 
-        expect(onNavigate).toHaveBeenCalledWith(`${location.pathname}?${TAB_QUERY_PARAM_KEY}=${TabType.DCL}`)
+        expect(onNavigate).toHaveBeenCalledWith(
+          `${useCurrentlySelectedTabResult.pathname}?${useCurrentlySelectedTabResult.urlSearchParams.toString()}&${TAB_QUERY_PARAM_KEY}=${
+            TabType.DCL
+          }`
+        )
       })
     })
 
@@ -107,7 +109,11 @@ describe('when rendering the name tabs component', () => {
 
         screen.getByText(ensTabText).click()
 
-        expect(onNavigate).toHaveBeenCalledWith(`${location.pathname}?${TAB_QUERY_PARAM_KEY}=${TabType.ENS}`)
+        expect(onNavigate).toHaveBeenCalledWith(
+          `${useCurrentlySelectedTabResult.pathname}?${useCurrentlySelectedTabResult.urlSearchParams.toString()}&${TAB_QUERY_PARAM_KEY}=${
+            TabType.ENS
+          }`
+        )
       })
     })
   })

src/components/WorldListPage_WorldsForEnsOwnersFeature/NameTabs/NameTabs.tsx

@@ -1,23 +1,19 @@
 import React from 'react'
-import { useLocation } from 'react-router'
 import { Tabs } from 'decentraland-ui/dist/components/Tabs/Tabs'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
-import { Props, TabType } from './NameTabs.types'
-
-export const TAB_QUERY_PARAM_KEY = 'tab'
+import { Props } from './NameTabs.types'
+import { TAB_QUERY_PARAM_KEY, TabType, useCurrentlySelectedTab } from '../hooks'
 
 const NameTabs = ({ onNavigate }: Props) => {
-  const location = useLocation()
-
-  const urlSearchParams = new URLSearchParams(location.search)
-  const tab = urlSearchParams.get(TAB_QUERY_PARAM_KEY)
+  const { tab, pathname, urlSearchParams } = useCurrentlySelectedTab()
 
   const navigateToTab = (tab: TabType) => {
-    urlSearchParams.set(TAB_QUERY_PARAM_KEY, tab)
-    onNavigate(`${location.pathname}?${urlSearchParams.toString()}`)
+    const urlSearchParamsCopy = new URLSearchParams(urlSearchParams)
+    urlSearchParamsCopy.set(TAB_QUERY_PARAM_KEY, tab)
+    onNavigate(`${pathname}?${urlSearchParamsCopy.toString()}`)
   }
 
-  if (tab !== TabType.DCL && tab !== TabType.ENS) {
+  if (!tab) {
     navigateToTab(TabType.DCL)
     return null
   }

src/components/WorldListPage_WorldsForEnsOwnersFeature/NameTabs/NameTabs.types.ts

@@ -1,11 +1,6 @@
 import { CallHistoryMethodAction } from 'connected-react-router'
 import { Dispatch } from 'react'
 
-export enum TabType {
-  DCL = 'dcl',
-  ENS = 'ens'
-}
-
 export type Props = {
   onNavigate: (to: string) => void
 }

src/components/WorldListPage_WorldsForEnsOwnersFeature/hooks.spec.ts

@@ -0,0 +1,59 @@
+import { useLocation } from 'react-router'
+import { TAB_QUERY_PARAM_KEY, TabType, useCurrentlySelectedTab } from './hooks'
+
+jest.mock('react-router')
+
+const mockUseLocation = useLocation as jest.Mock
+
+describe('when calling the use currently selected tab hook', () => {
+  let location: Location
+
+  beforeEach(() => {
+    location = {
+      pathname: '',
+      search: ''
+    } as Location
+
+    mockUseLocation.mockReturnValue(location)
+  })
+
+  describe('when the tab query param is not set', () => {
+    beforeEach(() => {
+      location.search = ''
+    })
+
+    it('should return tab as undefined', () => {
+      expect(useCurrentlySelectedTab().tab).toBeUndefined()
+    })
+  })
+
+  describe('when the tab query param is an invalid value', () => {
+    beforeEach(() => {
+      location.search = `?${TAB_QUERY_PARAM_KEY}=invalid`
+    })
+
+    it('should return tab as undefined', () => {
+      expect(useCurrentlySelectedTab().tab).toBeUndefined()
+    })
+  })
+
+  describe('when the tab query param is dcl', () => {
+    beforeEach(() => {
+      location.search = `?${TAB_QUERY_PARAM_KEY}=dcl`
+    })
+
+    it('should return tab as DCL', () => {
+      expect(useCurrentlySelectedTab().tab).toBe(TabType.DCL)
+    })
+  })
+
+  describe('when the tab query param is ens', () => {
+    beforeEach(() => {
+      location.search = `?${TAB_QUERY_PARAM_KEY}=ens`
+    })
+
+    it('should return tab as ENS', () => {
+      expect(useCurrentlySelectedTab().tab).toBe(TabType.ENS)
+    })
+  })
+})

src/components/WorldListPage_WorldsForEnsOwnersFeature/hooks.ts

@@ -0,0 +1,36 @@
+import { useLocation } from 'react-router'
+
+export const TAB_QUERY_PARAM_KEY = 'tab'
+
+export enum TabType {
+  DCL = 'dcl',
+  ENS = 'ens'
+}
+
+export type UseCurrentlySelectedTabResult = {
+  tab?: TabType
+  pathname: string
+  urlSearchParams: URLSearchParams
+}
+
+export const useCurrentlySelectedTab = (): UseCurrentlySelectedTabResult => {
+  const location = useLocation()
+  const urlSearchParams = new URLSearchParams(location.search)
+  const tab = urlSearchParams.get(TAB_QUERY_PARAM_KEY)
+
+  const result: UseCurrentlySelectedTabResult = {
+    urlSearchParams,
+    pathname: location.pathname
+  }
+
+  switch (tab) {
+    case 'dcl':
+      result.tab = TabType.DCL
+      break
+    case 'ens':
+      result.tab = TabType.ENS
+      break
+  }
+
+  return result
+}