From 2c22db7393ef191bb9c26d4448e9a25421fe44a6 Mon Sep 17 00:00:00 2001
From: Anders Rognstad <anders.rognstad@nav.no>
Date: Thu, 28 Nov 2024 15:30:52 +0100
Subject: [PATCH] Refactor tab type

---
 src/components/Filter/HendelseFilter.tsx      |  9 ++-
 src/components/FristDataCell.tsx              |  9 ++-
 src/components/NavigationBar.tsx              | 12 ++--
 src/components/NewOversiktTable.tsx           |  7 +--
 src/components/Sokeresultat.tsx               |  5 +-
 .../toolbar/AssignVeileder/TildelVeileder.tsx |  2 +-
 src/components/toolbar/Toolbar.tsx            |  5 +-
 src/containers/Oversikt.tsx                   |  5 +-
 src/containers/OversiktContainer.tsx          | 28 ++++-----
 src/context/tab/TabTypeContext.tsx            | 33 ----------
 src/hooks/useTabType.ts                       | 21 +++++++
 src/index.tsx                                 | 19 +++---
 src/konstanter.ts                             |  4 --
 src/routers/AppRouter.tsx                     | 22 +++----
 src/routers/routes.ts                         |  7 +++
 test/components/FristColumnTest.tsx           | 33 ++++++----
 test/components/HendelseTypeFilter.test.tsx   | 61 +++++++------------
 test/components/NewOversiktTableTest.tsx      |  9 ++-
 test/components/Sokeresultat.test.tsx         | 14 +++--
 test/containers/OversiktContainer.test.tsx    | 55 +++++++----------
 test/testRenderUtils.tsx                      | 13 ++++
 21 files changed, 171 insertions(+), 202 deletions(-)
 delete mode 100644 src/context/tab/TabTypeContext.tsx
 create mode 100644 src/hooks/useTabType.ts
 delete mode 100644 src/konstanter.ts
 create mode 100644 src/routers/routes.ts
 create mode 100644 test/testRenderUtils.tsx

diff --git a/src/components/Filter/HendelseFilter.tsx b/src/components/Filter/HendelseFilter.tsx
index e8145748..13c7137c 100644
--- a/src/components/Filter/HendelseFilter.tsx
+++ b/src/components/Filter/HendelseFilter.tsx
@@ -1,10 +1,8 @@
 import React from 'react';
 import { PersonregisterState } from '@/api/types/personregisterTypes';
 import { filterOnPersonregister } from '@/utils/hendelseFilteringUtils';
-import { OverviewTabType } from '@/konstanter';
 import { useFilters } from '@/context/filters/FilterContext';
 import { ActionType } from '@/context/filters/filterContextActions';
-import { useTabType } from '@/context/tab/TabTypeContext';
 import {
   FilterState,
   HendelseTypeFilter,
@@ -12,6 +10,7 @@ import {
 import { Checkbox, CheckboxGroup } from '@navikt/ds-react';
 import * as Amplitude from '@/utils/amplitude';
 import { EventType } from '@/utils/amplitude';
+import { TabType, useTabType } from '@/hooks/useTabType';
 
 export const HendelseTekster = {
   UFORDELTE_BRUKERE: 'Ufordelte brukere', // Ikke tildelt veileder
@@ -154,7 +153,7 @@ function isChecked(state: HendelseTypeFilter, hendelse: Hendelse): boolean {
   }
 }
 
-function showCheckbox(hendelse: Hendelse, tabType: OverviewTabType): boolean {
+function showCheckbox(hendelse: Hendelse, tabType: TabType): boolean {
   switch (hendelse) {
     case 'AKTIVITETSKRAV':
     case 'AKTIVITETSKRAV_VURDER_STANS':
@@ -171,7 +170,7 @@ function showCheckbox(hendelse: Hendelse, tabType: OverviewTabType): boolean {
     case 'SNART_SLUTT_PA_SYKEPENGENE':
       return true;
     case 'UFORDELTE_BRUKERE':
-      return tabType === OverviewTabType.ENHET_OVERVIEW;
+      return tabType === TabType.ENHETENS_OVERSIKT;
   }
 }
 
@@ -186,7 +185,7 @@ interface CheckboxElement {
 function hendelseCheckboxes(
   personRegister: PersonregisterState | undefined,
   filterState: FilterState,
-  tabType: OverviewTabType
+  tabType: TabType
 ): CheckboxElement[] {
   return Object.entries(HendelseTekster).map(([hendelse, tekst]) => {
     const filter = initFilter(hendelse as Hendelse);
diff --git a/src/components/FristDataCell.tsx b/src/components/FristDataCell.tsx
index 1fef4477..d18caecd 100644
--- a/src/components/FristDataCell.tsx
+++ b/src/components/FristDataCell.tsx
@@ -10,8 +10,7 @@ import { AktivitetskravStatus } from '@/api/types/personoversiktTypes';
 import { Button, Table, Tooltip } from '@navikt/ds-react';
 import OppfolgingsoppgaveModal from '@/components/OppfolgingsoppgaveModal';
 import * as Amplitude from '@/utils/amplitude';
-import { useTabType } from '@/context/tab/TabTypeContext';
-import { OverviewTabType } from '@/konstanter';
+import { TabType, useTabType } from '@/hooks/useTabType';
 
 const texts = {
   tooltipAvventer: 'Avventer til',
@@ -51,7 +50,7 @@ function fristerInfo(
     manglendeMedvirkning,
   }: PersonData,
   setIsModalOpen: (open: boolean) => void,
-  selectedTab: OverviewTabType
+  selectedTab: TabType
 ): Frist[] {
   const frister: Frist[] = [];
   const aktivitetskravStatus = aktivitetskravvurdering?.status;
@@ -88,7 +87,7 @@ function fristerInfo(
   if (oppfolgingsoppgave?.frist) {
     frister.push({
       icon: () =>
-        selectedTab === OverviewTabType.MY_OVERVIEW ? (
+        selectedTab === TabType.MIN_OVERSIKT ? (
           <Button
             size="xsmall"
             icon={<FileTextIcon aria-hidden fontSize="1.5rem" />}
@@ -103,7 +102,7 @@ function fristerInfo(
         ),
       date: oppfolgingsoppgave.frist,
       tooltip: `${
-        selectedTab === OverviewTabType.MY_OVERVIEW
+        selectedTab === TabType.MIN_OVERSIKT
           ? 'Åpne oppfølgingsoppgave'
           : 'Oppfølgingsoppgave frist'
       }`,
diff --git a/src/components/NavigationBar.tsx b/src/components/NavigationBar.tsx
index ff77508f..aadfa0c5 100644
--- a/src/components/NavigationBar.tsx
+++ b/src/components/NavigationBar.tsx
@@ -1,14 +1,10 @@
 import React, { ReactElement } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { MoteoversiktLink } from '@/components/MoteoversiktLink';
-import {
-  enhetOversiktRoutePath,
-  minOversiktRoutePath,
-  sokSykmeldtRoutePath,
-} from '@/routers/AppRouter';
 import { Box, Heading, HStack, Tabs } from '@navikt/ds-react';
 import { useFeatureToggles } from '@/data/unleash/unleashQueryHooks';
 import { MagnifyingGlassIcon } from '@navikt/aksel-icons';
+import { routes } from '@/routers/routes';
 
 const texts = {
   enhetensOversikt: 'Enhetens oversikt',
@@ -27,16 +23,16 @@ export const NavigationBar = (): ReactElement => {
         <Tabs value={pathname} onChange={(value) => navigate(value)}>
           <Tabs.List>
             <Tabs.Tab
-              value={minOversiktRoutePath}
+              value={routes.MIN_OVERSIKT}
               label={<Heading size="small">{texts.minOversikt}</Heading>}
             />
             <Tabs.Tab
-              value={enhetOversiktRoutePath}
+              value={routes.ENHET_OVERSIKT}
               label={<Heading size="small">{texts.enhetensOversikt}</Heading>}
             />
             {toggles.isSokEnabled && (
               <Tabs.Tab
-                value={sokSykmeldtRoutePath}
+                value={routes.SOK_SYKMELDT}
                 icon={<MagnifyingGlassIcon />}
                 label={<Heading size="small">{texts.sokSykmeldt}</Heading>}
               />
diff --git a/src/components/NewOversiktTable.tsx b/src/components/NewOversiktTable.tsx
index 21d06923..aae2d09e 100644
--- a/src/components/NewOversiktTable.tsx
+++ b/src/components/NewOversiktTable.tsx
@@ -8,11 +8,10 @@ import { Sorting, SortingKey, useSorting } from '@/hooks/useSorting';
 import { LinkSyfomodiaperson } from '@/components/LinkSyfomodiaperson';
 import { toLastnameFirstnameFormat } from '@/utils/stringUtil';
 import { getHendelser } from '@/utils/hendelseColumnUtils';
-import { useTabType } from '@/context/tab/TabTypeContext';
-import { OverviewTabType } from '@/konstanter';
 import * as Amplitude from '@/utils/amplitude';
 import { EventType } from '@/utils/amplitude';
 import { OppfolgingstilfelleDTO } from '@/api/types/personoversiktTypes';
+import { TabType, useTabType } from '@/hooks/useTabType';
 
 function getVarighetOppfolgingstilfelle(
   oppfolgingstilfelle: OppfolgingstilfelleDTO | undefined
@@ -109,7 +108,7 @@ export function NewOversiktTable({
           {columns
             .filter(
               (column) =>
-                selectedTab === OverviewTabType.ENHET_OVERVIEW ||
+                selectedTab === TabType.ENHETENS_OVERSIKT ||
                 column.sortKey !== 'VEILEDER'
             )
             .map((col, index) => (
@@ -155,7 +154,7 @@ export function NewOversiktTable({
             <Table.DataCell textSize="small">
               <PersonRadVirksomhetColumn personData={persondata} />
             </Table.DataCell>
-            {selectedTab === OverviewTabType.ENHET_OVERVIEW && (
+            {selectedTab === TabType.ENHETENS_OVERSIKT && (
               <Table.DataCell textSize="small">
                 <VeilederColumn personData={persondata} />
               </Table.DataCell>
diff --git a/src/components/Sokeresultat.tsx b/src/components/Sokeresultat.tsx
index 8cb5fc9a..7ae6680f 100644
--- a/src/components/Sokeresultat.tsx
+++ b/src/components/Sokeresultat.tsx
@@ -13,9 +13,8 @@ import {
   filterOnPersonregister,
 } from '@/utils/hendelseFilteringUtils';
 import { useFilters } from '@/context/filters/FilterContext';
-import { useTabType } from '@/context/tab/TabTypeContext';
-import { OverviewTabType } from '@/konstanter';
 import { NewOversikt } from '@/components/NewOversikt';
+import { TabType, useTabType } from '@/hooks/useTabType';
 
 interface SokeresultatProps {
   allEvents: Filterable<PersonregisterState>;
@@ -45,7 +44,7 @@ const Sokeresultat = ({ allEvents }: SokeresultatProps) => {
   }, [selectedTab]);
 
   const selectedHendelsetypeFilter =
-    selectedTab === OverviewTabType.MY_OVERVIEW
+    selectedTab === TabType.MIN_OVERSIKT
       ? {
           ...filterState.selectedHendelseType,
           ufordeltBruker: false,
diff --git a/src/components/toolbar/AssignVeileder/TildelVeileder.tsx b/src/components/toolbar/AssignVeileder/TildelVeileder.tsx
index 853732a0..1c7e9ec3 100644
--- a/src/components/toolbar/AssignVeileder/TildelVeileder.tsx
+++ b/src/components/toolbar/AssignVeileder/TildelVeileder.tsx
@@ -9,7 +9,7 @@ import {
   useAktivVeilederQuery,
   useVeiledereQuery,
 } from '@/data/veiledereQueryHooks';
-import { useTabType } from '@/context/tab/TabTypeContext';
+import { useTabType } from '@/hooks/useTabType';
 
 const dropdownButtonTexts: DropdownButtonTexts = {
   assign: 'Tildel veileder',
diff --git a/src/components/toolbar/Toolbar.tsx b/src/components/toolbar/Toolbar.tsx
index 6ab299e7..f50f7601 100644
--- a/src/components/toolbar/Toolbar.tsx
+++ b/src/components/toolbar/Toolbar.tsx
@@ -1,12 +1,11 @@
 import TildelVeileder from './AssignVeileder/TildelVeileder';
-import { OverviewTabType } from '@/konstanter';
 import SearchVeileder from './SearchVeileder/SearchVeileder';
 import React from 'react';
 import styled from 'styled-components';
 import themes from '../../styles/themes';
 import { ToolbarWrapperProps } from './ToolbarWrapper';
-import { useTabType } from '@/context/tab/TabTypeContext';
 import PaginationContainer from '@/components/toolbar/PaginationContainer';
+import { TabType, useTabType } from '@/hooks/useTabType';
 
 const Innhold = styled.section`
   display: flex;
@@ -56,7 +55,7 @@ const Toolbar = (props: ToolbarProps) => {
             handleTildelVeileder={props.buttonHandler}
             handleSelectAll={props.checkAllHandler}
           />
-          {selectedTab === OverviewTabType.ENHET_OVERVIEW && <SearchVeileder />}
+          {selectedTab === TabType.ENHETENS_OVERSIKT && <SearchVeileder />}
         </Element>
         <PaginationContainer
           numberOfItemsTotal={props.numberOfItemsTotal}
diff --git a/src/containers/Oversikt.tsx b/src/containers/Oversikt.tsx
index 83778b3a..89e6707c 100644
--- a/src/containers/Oversikt.tsx
+++ b/src/containers/Oversikt.tsx
@@ -13,13 +13,12 @@ import {
   Filterable,
   filterEventsOnVeileder,
 } from '@/utils/hendelseFilteringUtils';
-import { OverviewTabType } from '@/konstanter';
 import { PersonOversiktStatusDTO } from '@/api/types/personoversiktTypes';
 import { useFilters } from '@/context/filters/FilterContext';
-import { useTabType } from '@/context/tab/TabTypeContext';
 import { useAktivVeilederQuery } from '@/data/veiledereQueryHooks';
 import { HendelseFilter } from '@/components/Filter/HendelseFilter';
 import { Box } from '@navikt/ds-react';
+import { TabType, useTabType } from '@/hooks/useTabType';
 
 const SokeresultatFiltre = styled.div`
   margin-right: 1rem;
@@ -59,7 +58,7 @@ export const Oversikt = ({
   );
 
   const eventFilterValue =
-    selectedTab === OverviewTabType.MY_OVERVIEW
+    selectedTab === TabType.MIN_OVERSIKT
       ? [aktivVeilederQuery.data?.ident || '']
       : filterState.selectedVeilederIdents;
 
diff --git a/src/containers/OversiktContainer.tsx b/src/containers/OversiktContainer.tsx
index 5d8748a2..1450cbf3 100644
--- a/src/containers/OversiktContainer.tsx
+++ b/src/containers/OversiktContainer.tsx
@@ -3,9 +3,7 @@ import { usePersonregisterQuery } from '@/data/personregisterHooks';
 import { usePersonoversiktQuery } from '@/data/personoversiktHooks';
 import AppSpinner from '@/components/AppSpinner';
 import { Oversikt } from '@/containers/Oversikt';
-import { OverviewTabType } from '@/konstanter';
 import { NavigationBar } from '@/components/NavigationBar';
-import { useTabType } from '@/context/tab/TabTypeContext';
 import { NotificationBar } from '@/components/error/NotificationBar';
 import ErrorBoundary from '@/components/error/ErrorBoundary';
 import * as Amplitude from '@/utils/amplitude';
@@ -14,31 +12,31 @@ import { Flexjar } from '@/components/flexjar/Flexjar';
 import { StoreKey, useLocalStorageState } from '@/hooks/useLocalStorageState';
 import { getWeeksBetween } from '@/utils/dateUtils';
 import { useFeatureToggles } from '@/data/unleash/unleashQueryHooks';
+import { TabType, useTabType } from '@/hooks/useTabType';
 
-interface Props {
-  tabType: OverviewTabType;
-}
-
-function logPageView(tab: OverviewTabType) {
+function logPageView(tab: TabType) {
   Amplitude.logEvent({
     type: EventType.PageView,
     data: { url: window.location.href, sidetittel: toReadableString(tab) },
   });
 }
 
-function toReadableString(overviewTabType: OverviewTabType): string {
+function toReadableString(overviewTabType: TabType): string {
   switch (overviewTabType) {
-    case OverviewTabType.ENHET_OVERVIEW:
+    case TabType.ENHETENS_OVERSIKT:
       return 'Enhetens oversikt';
-    case OverviewTabType.MY_OVERVIEW:
+    case TabType.MIN_OVERSIKT:
       return 'Min oversikt';
+    case TabType.SOK_SYKMELDT:
+      return 'Søk sykmeldt';
   }
 }
 
-const OversiktContainer = ({ tabType }: Props): ReactElement => {
+const OversiktContainer = (): ReactElement => {
   const personregisterQuery = usePersonregisterQuery();
   const personoversiktQuery = usePersonoversiktQuery();
   const { toggles } = useFeatureToggles();
+  const { selectedTab } = useTabType();
   const [feedbackDate] = useLocalStorageState<Date | null>(
     StoreKey.FLEXJAR_ARENABRUK_FEEDBACK_DATE,
     null
@@ -47,11 +45,9 @@ const OversiktContainer = ({ tabType }: Props): ReactElement => {
     toggles.isFlexjarArenaEnabled &&
     (feedbackDate === null || getWeeksBetween(new Date(), feedbackDate) >= 8);
 
-  const { setTabType } = useTabType();
   useEffect(() => {
-    setTabType(tabType);
-    logPageView(tabType);
-  }, [setTabType, tabType]);
+    logPageView(selectedTab);
+  }, [selectedTab]);
 
   const ContainerContent = (): ReactElement => {
     if (personoversiktQuery.isInitialLoading) {
@@ -73,7 +69,7 @@ const OversiktContainer = ({ tabType }: Props): ReactElement => {
         <NavigationBar />
         <ContainerContent />
         {showFlexjar && personoversiktQuery.isSuccess && (
-          <Flexjar side={toReadableString(tabType)} />
+          <Flexjar side={toReadableString(selectedTab)} />
         )}
       </div>
     </ErrorBoundary>
diff --git a/src/context/tab/TabTypeContext.tsx b/src/context/tab/TabTypeContext.tsx
deleted file mode 100644
index 60575216..00000000
--- a/src/context/tab/TabTypeContext.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as React from 'react';
-import { useState } from 'react';
-import { OverviewTabType } from '@/konstanter';
-
-type TabTypeProviderProps = { children: React.ReactNode };
-
-export const TabTypeContext = React.createContext<{
-  selectedTab: OverviewTabType;
-  setTabType: (tabType: OverviewTabType) => void;
-}>({
-  selectedTab: OverviewTabType.ENHET_OVERVIEW,
-  setTabType: () => undefined,
-});
-
-const TabTypeProvider = ({ children }: TabTypeProviderProps) => {
-  const [tabType, setTabType] = useState(OverviewTabType.ENHET_OVERVIEW);
-
-  return (
-    <TabTypeContext.Provider value={{ selectedTab: tabType, setTabType }}>
-      {children}
-    </TabTypeContext.Provider>
-  );
-};
-
-const useTabType = () => {
-  const context = React.useContext(TabTypeContext);
-  if (context === undefined) {
-    throw new Error('useTabType must be used within a TabTypeProvider');
-  }
-  return context;
-};
-
-export { TabTypeProvider, useTabType };
diff --git a/src/hooks/useTabType.ts b/src/hooks/useTabType.ts
new file mode 100644
index 00000000..53671979
--- /dev/null
+++ b/src/hooks/useTabType.ts
@@ -0,0 +1,21 @@
+import { useLocation } from 'react-router-dom';
+import { Routes } from '@/routers/routes';
+
+export enum TabType {
+  ENHETENS_OVERSIKT = 'ENHETENS_OVERSIKT',
+  MIN_OVERSIKT = 'MIN_OVERSIKT',
+  SOK_SYKMELDT = 'SOK_SYKMELDT',
+}
+
+const routeTabs: Record<Routes, TabType> = {
+  '/enhet': TabType.ENHETENS_OVERSIKT,
+  '/minoversikt': TabType.MIN_OVERSIKT,
+  '/sok': TabType.SOK_SYKMELDT,
+};
+
+export const useTabType = () => {
+  const { pathname } = useLocation();
+  const selectedTab = routeTabs[pathname as Routes];
+
+  return { selectedTab };
+};
diff --git a/src/index.tsx b/src/index.tsx
index 681c9252..8765945f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -9,7 +9,6 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { FilterProvider } from '@/context/filters/FilterContext';
 import { AktivEnhetProvider } from '@/context/aktivEnhet/AktivEnhetContext';
-import { TabTypeProvider } from '@/context/tab/TabTypeContext';
 import { NotificationProvider } from '@/context/notification/NotificationContext';
 import { minutesToMillis } from '@/utils/timeUtils';
 import { isClientError } from '@/api/errors';
@@ -44,16 +43,14 @@ const App = () => {
   return (
     <ErrorBoundary>
       <NotificationProvider>
-        <TabTypeProvider>
-          <AktivEnhetProvider>
-            <FilterProvider>
-              <QueryClientProvider client={queryClient}>
-                <AppRouter />
-                <ReactQueryDevtools initialIsOpen={false} />
-              </QueryClientProvider>
-            </FilterProvider>
-          </AktivEnhetProvider>
-        </TabTypeProvider>
+        <AktivEnhetProvider>
+          <FilterProvider>
+            <QueryClientProvider client={queryClient}>
+              <AppRouter />
+              <ReactQueryDevtools initialIsOpen={false} />
+            </QueryClientProvider>
+          </FilterProvider>
+        </AktivEnhetProvider>
       </NotificationProvider>
     </ErrorBoundary>
   );
diff --git a/src/konstanter.ts b/src/konstanter.ts
deleted file mode 100644
index 7f7707e0..00000000
--- a/src/konstanter.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export enum OverviewTabType {
-  ENHET_OVERVIEW = 'ENHET_OVERVIEW',
-  MY_OVERVIEW = 'MY_OVERVIEW',
-}
diff --git a/src/routers/AppRouter.tsx b/src/routers/AppRouter.tsx
index 46831aeb..2a821acf 100644
--- a/src/routers/AppRouter.tsx
+++ b/src/routers/AppRouter.tsx
@@ -3,13 +3,9 @@ import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 import Side from '../sider/Side';
 import Decorator from '../decorator/Decorator';
 import OversiktContainer from '@/containers/OversiktContainer';
-import { OverviewTabType } from '@/konstanter';
 import ErrorBoundary from '@/components/error/ErrorBoundary';
 import SokContainer from '@/components/sokperson/SokContainer';
-
-export const minOversiktRoutePath = '/minoversikt';
-export const enhetOversiktRoutePath = '/enhet';
-export const sokSykmeldtRoutePath = '/sok';
+import { routes } from '@/routers/routes';
 
 const AppRouter = (): ReactElement => {
   return (
@@ -20,21 +16,17 @@ const AppRouter = (): ReactElement => {
           <ErrorBoundary>
             <Routes>
               <Route
-                path={enhetOversiktRoutePath}
-                element={
-                  <OversiktContainer tabType={OverviewTabType.ENHET_OVERVIEW} />
-                }
+                path={routes.ENHET_OVERSIKT}
+                element={<OversiktContainer />}
               />
               <Route
-                path={minOversiktRoutePath}
-                element={
-                  <OversiktContainer tabType={OverviewTabType.MY_OVERVIEW} />
-                }
+                path={routes.MIN_OVERSIKT}
+                element={<OversiktContainer />}
               />
-              <Route path={sokSykmeldtRoutePath} element={<SokContainer />} />
+              <Route path={routes.SOK_SYKMELDT} element={<SokContainer />} />
               <Route
                 path="*"
-                element={<Navigate to={enhetOversiktRoutePath} />}
+                element={<Navigate to={routes.ENHET_OVERSIKT} />}
               />
             </Routes>
           </ErrorBoundary>
diff --git a/src/routers/routes.ts b/src/routers/routes.ts
new file mode 100644
index 00000000..143b160b
--- /dev/null
+++ b/src/routers/routes.ts
@@ -0,0 +1,7 @@
+export const routes = {
+  ENHET_OVERSIKT: '/enhet',
+  MIN_OVERSIKT: '/minoversikt',
+  SOK_SYKMELDT: '/sok',
+} as const;
+
+export type Routes = typeof routes[keyof typeof routes];
diff --git a/test/components/FristColumnTest.tsx b/test/components/FristColumnTest.tsx
index 865cc13f..1fd96842 100644
--- a/test/components/FristColumnTest.tsx
+++ b/test/components/FristColumnTest.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { FristDataCell } from '@/components/FristDataCell';
 import React from 'react';
 import { PersonData, Skjermingskode } from '@/api/types/personregisterTypes';
@@ -8,6 +8,8 @@ import { AktivitetskravStatus } from '@/api/types/personoversiktTypes';
 import { toReadableDate } from '@/utils/dateUtils';
 import { addWeeks } from 'date-fns';
 import { getOppfolgingsoppgave } from '@/mocks/data/personoversiktEnhetMock';
+import { renderWithRouter } from '../testRenderUtils';
+import { routes } from '@/routers/routes';
 
 const defaultPersonData: PersonData = {
   navn: testdata.navn1,
@@ -30,10 +32,17 @@ const defaultPersonData: PersonData = {
 
 const fristFormatRegex = /\b\d{2}\.\d{2}\.\d{4}\b/;
 
+const renderFristColumn = (personData: PersonData) => {
+  renderWithRouter(
+    <FristDataCell personData={personData} />,
+    routes.ENHET_OVERSIKT
+  );
+};
+
 describe('FristColumn', () => {
   it('viser ingen frister når person har hverken aktivitetskrav AVVENT med frist eller oppfolgingsoppgave med frist', () => {
     const personUtenFrister: PersonData = { ...defaultPersonData };
-    render(<FristDataCell personData={personUtenFrister} />);
+    renderFristColumn(personUtenFrister);
 
     expect(screen.queryAllByText(fristFormatRegex)).to.be.empty;
   });
@@ -52,7 +61,7 @@ describe('FristColumn', () => {
         ],
       },
     };
-    render(<FristDataCell personData={personAvventerMedFrist} />);
+    renderFristColumn(personAvventerMedFrist);
 
     expect(screen.getByText(toReadableDate(aktivitetskravVurderingFrist))).to
       .exist;
@@ -64,7 +73,7 @@ describe('FristColumn', () => {
       ...defaultPersonData,
       oppfolgingsoppgave,
     };
-    render(<FristDataCell personData={personOppfolgingsoppgaveMedFrist} />);
+    renderFristColumn(personOppfolgingsoppgaveMedFrist);
 
     expect(screen.getAllByText(toReadableDate(oppfolgingsoppgave.frist))).to
       .exist;
@@ -76,9 +85,7 @@ describe('FristColumn', () => {
       ...defaultPersonData,
       friskmeldingTilArbeidsformidlingFom,
     };
-    render(
-      <FristDataCell personData={personFriskmeldingTilArbeidsformidling} />
-    );
+    renderFristColumn(personFriskmeldingTilArbeidsformidling);
 
     expect(
       screen.getByText(toReadableDate(friskmeldingTilArbeidsformidlingFom))
@@ -95,7 +102,7 @@ describe('FristColumn', () => {
         },
       },
     };
-    render(<FristDataCell personData={personManglendeMedvirkning} />);
+    renderFristColumn(personManglendeMedvirkning);
 
     expect(screen.getByText(toReadableDate(svarfrist))).to.exist;
   });
@@ -119,7 +126,7 @@ describe('FristColumn', () => {
       friskmeldingTilArbeidsformidlingFom,
     };
 
-    render(<FristDataCell personData={personMedFlereFrister} />);
+    renderFristColumn(personMedFlereFrister);
 
     const allFrister = screen.getAllByText(fristFormatRegex);
     expect(allFrister).to.have.length(4); // 3 frister i oversikten + 1 i modal for oppfølgingsoppgave som finnes i DOM
@@ -149,7 +156,7 @@ describe('FristColumn', () => {
           ],
         },
       };
-      render(<FristDataCell personData={personMedAvventerFrist} />);
+      renderFristColumn(personMedAvventerFrist);
 
       expect(screen.getByText(toReadableDate(aktivitetskravVurderingFrist))).to
         .exist;
@@ -171,7 +178,7 @@ describe('FristColumn', () => {
           ],
         },
       };
-      render(<FristDataCell personData={personMedForhandsvarsel} />);
+      renderFristColumn(personMedForhandsvarsel);
 
       expect(
         screen.getByText(toReadableDate(aktivitetskravSvarfristForhandsvarsel))
@@ -195,7 +202,7 @@ describe('FristColumn', () => {
           ],
         },
       };
-      render(<FristDataCell personData={personMedForhandsvarsel} />);
+      renderFristColumn(personMedForhandsvarsel);
 
       expect(screen.getByText(toReadableDate(svarfristForhandsvarselVis))).to
         .exist;
@@ -220,7 +227,7 @@ describe('FristColumn', () => {
           ],
         },
       };
-      render(<FristDataCell personData={personMedForhandsvarsel} />);
+      renderFristColumn(personMedForhandsvarsel);
 
       expect(screen.getByText(toReadableDate(aktivitetskravAvventFristVis))).to
         .exist;
diff --git a/test/components/HendelseTypeFilter.test.tsx b/test/components/HendelseTypeFilter.test.tsx
index 3a5608b7..370014bd 100644
--- a/test/components/HendelseTypeFilter.test.tsx
+++ b/test/components/HendelseTypeFilter.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { HendelseFilter } from '@/components/Filter/HendelseFilter';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { beforeEach, describe, expect, it } from 'vitest';
 import { NotificationProvider } from '@/context/notification/NotificationContext';
 import { AktivEnhetContext } from '@/context/aktivEnhet/AktivEnhetContext';
@@ -11,11 +11,29 @@ import { veilederMock } from '@/mocks/syfoveileder/veilederMock';
 import { testQueryClient } from '../testQueryClient';
 import { aktivEnhetMock } from '@/mocks/data/aktivEnhetMock';
 import { unleashMock } from '@/mocks/mockUnleash';
-import { TabTypeContext } from '@/context/tab/TabTypeContext';
-import { OverviewTabType } from '@/konstanter';
+import { renderWithRouter } from '../testRenderUtils';
+import { routes } from '@/routers/routes';
 
 let queryClient: QueryClient;
 
+const renderHendelseFilter = (path: string) => {
+  renderWithRouter(
+    <NotificationProvider>
+      <AktivEnhetContext.Provider
+        value={{
+          aktivEnhet: aktivEnhetMock.aktivEnhet,
+          handleAktivEnhetChanged: () => void 0,
+        }}
+      >
+        <QueryClientProvider client={queryClient}>
+          <HendelseFilter />
+        </QueryClientProvider>
+      </AktivEnhetContext.Provider>
+    </NotificationProvider>,
+    path
+  );
+};
+
 describe('HendelseTypeFilter', () => {
   beforeEach(() => {
     queryClient = testQueryClient();
@@ -30,20 +48,7 @@ describe('HendelseTypeFilter', () => {
       () => unleashMock
     );
 
-    render(
-      <NotificationProvider>
-        <AktivEnhetContext.Provider
-          value={{
-            aktivEnhet: aktivEnhetMock.aktivEnhet,
-            handleAktivEnhetChanged: () => void 0,
-          }}
-        >
-          <QueryClientProvider client={queryClient}>
-            <HendelseFilter />
-          </QueryClientProvider>
-        </AktivEnhetContext.Provider>
-      </NotificationProvider>
-    );
+    renderHendelseFilter(routes.ENHET_OVERSIKT);
 
     const onskerMoteCheckbox = screen.getByRole('checkbox', {
       name: /Ber om dialogmøte/,
@@ -124,27 +129,7 @@ describe('HendelseTypeFilter', () => {
     expect(manglendeMedvirkningCheckbox).to.exist;
   });
   it('Viser ikke ufordelte brukere-checkboks i min oversikt', () => {
-    render(
-      <NotificationProvider>
-        <TabTypeContext.Provider
-          value={{
-            selectedTab: OverviewTabType.MY_OVERVIEW,
-            setTabType: () => void 0,
-          }}
-        >
-          <AktivEnhetContext.Provider
-            value={{
-              aktivEnhet: aktivEnhetMock.aktivEnhet,
-              handleAktivEnhetChanged: () => void 0,
-            }}
-          >
-            <QueryClientProvider client={queryClient}>
-              <HendelseFilter />
-            </QueryClientProvider>
-          </AktivEnhetContext.Provider>
-        </TabTypeContext.Provider>
-      </NotificationProvider>
-    );
+    renderHendelseFilter(routes.MIN_OVERSIKT);
 
     expect(
       screen.queryByRole('checkbox', {
diff --git a/test/components/NewOversiktTableTest.tsx b/test/components/NewOversiktTableTest.tsx
index 60cc8e05..324fb035 100644
--- a/test/components/NewOversiktTableTest.tsx
+++ b/test/components/NewOversiktTableTest.tsx
@@ -1,5 +1,5 @@
 import { beforeEach, describe, expect, it } from 'vitest';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { NotificationProvider } from '@/context/notification/NotificationContext';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { AktivEnhetContext } from '@/context/aktivEnhet/AktivEnhetContext';
@@ -23,6 +23,8 @@ import {
 import { toLastnameFirstnameFormat } from '@/utils/stringUtil';
 import { aktivEnhetMock } from '@/mocks/data/aktivEnhetMock';
 import dayjs from 'dayjs';
+import { renderWithRouter } from '../testRenderUtils';
+import { routes } from '@/routers/routes';
 
 let queryClient = testQueryClient();
 
@@ -78,7 +80,7 @@ const personWithOppfolgingstilfelle: PersonData = {
 };
 
 const renderOversikt = (personer: PersonregisterState) =>
-  render(
+  renderWithRouter(
     <NotificationProvider>
       <QueryClientProvider client={queryClient}>
         <AktivEnhetContext.Provider
@@ -96,7 +98,8 @@ const renderOversikt = (personer: PersonregisterState) =>
           />
         </AktivEnhetContext.Provider>
       </QueryClientProvider>
-    </NotificationProvider>
+    </NotificationProvider>,
+    routes.ENHET_OVERSIKT
   );
 
 describe('NewOversiktTable', () => {
diff --git a/test/components/Sokeresultat.test.tsx b/test/components/Sokeresultat.test.tsx
index 01c63d45..528725ed 100644
--- a/test/components/Sokeresultat.test.tsx
+++ b/test/components/Sokeresultat.test.tsx
@@ -6,23 +6,26 @@ import { Filterable } from '@/utils/hendelseFilteringUtils';
 import { AktivEnhetProvider } from '@/context/aktivEnhet/AktivEnhetContext';
 import { NotificationProvider } from '@/context/notification/NotificationContext';
 import { stubAktivVeileder } from '../stubs/stubAktivVeileder';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { beforeEach, describe, expect, it } from 'vitest';
 import { FilterContext } from '@/context/filters/FilterContext';
 import { FilterState } from '@/context/filters/filterContextState';
 import { testQueryClient } from '../testQueryClient';
+import { renderWithRouter } from '../testRenderUtils';
+import { routes } from '@/routers/routes';
 
 let queryClient: QueryClient;
 
 const renderSokeresultat = () =>
-  render(
+  renderWithRouter(
     <NotificationProvider>
       <QueryClientProvider client={queryClient}>
         <AktivEnhetProvider>
           <Sokeresultat allEvents={new Filterable(personregister)} />
         </AktivEnhetProvider>
       </QueryClientProvider>
-    </NotificationProvider>
+    </NotificationProvider>,
+    routes.ENHET_OVERSIKT
   );
 
 describe('Sokeresultat', () => {
@@ -75,7 +78,7 @@ describe('Sokeresultat', () => {
       },
     };
 
-    render(
+    renderWithRouter(
       <NotificationProvider>
         <QueryClientProvider client={queryClient}>
           <FilterContext.Provider
@@ -89,7 +92,8 @@ describe('Sokeresultat', () => {
             </AktivEnhetProvider>
           </FilterContext.Provider>
         </QueryClientProvider>
-      </NotificationProvider>
+      </NotificationProvider>,
+      routes.ENHET_OVERSIKT
     );
     expect(screen.getByRole('link', { name: 'Navn, Et' })).to.exist;
     expect(screen.queryByRole('link', { name: 'Navn, Et Annet' })).to.not.exist;
diff --git a/test/containers/OversiktContainer.test.tsx b/test/containers/OversiktContainer.test.tsx
index 05284c53..4bfb3d54 100644
--- a/test/containers/OversiktContainer.test.tsx
+++ b/test/containers/OversiktContainer.test.tsx
@@ -1,10 +1,8 @@
 import React from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { AktivEnhetContext } from '@/context/aktivEnhet/AktivEnhetContext';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { NotificationContext } from '@/context/notification/NotificationContext';
 import OversiktContainer from '@/containers/OversiktContainer';
-import { OverviewTabType } from '@/konstanter';
 import { stubPersonoversikt } from '../stubs/stubPersonoversikt';
 import { stubPersonregister } from '../stubs/stubPersonregister';
 import { stubAktivVeileder } from '../stubs/stubAktivVeileder';
@@ -15,46 +13,39 @@ import {
   FetchVeiledereFailed,
   Notification,
 } from '@/context/notification/Notifications';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
-import { enhetOversiktRoutePath } from '@/routers/AppRouter';
 import { getQueryClientWithMockdata } from '../testQueryClient';
 import { unleashQueryKeys } from '@/data/unleash/unleashQueryHooks';
 import { unleashMock } from '@/mocks/mockUnleash';
 import { StoreKey } from '@/hooks/useLocalStorageState';
 import { addWeeks } from '@/utils/dateUtils';
+import { renderWithRouter } from '../testRenderUtils';
+import { routes } from '@/routers/routes';
 
 let queryClient: QueryClient;
 
 function renderOversikten(notifications: Notification[] = []) {
-  return render(
-    <MemoryRouter initialEntries={[enhetOversiktRoutePath]}>
-      <QueryClientProvider client={queryClient}>
-        <Routes>
-          <Route
-            path={enhetOversiktRoutePath}
-            element={
-              <NotificationContext.Provider
-                value={{
-                  notifications: notifications,
-                  displayNotification: () => void 0,
-                  clearNotification: () => void 0,
-                }}
-              >
-                <AktivEnhetContext.Provider
-                  value={{
-                    aktivEnhet: aktivEnhetMock.aktivEnhet,
-                    handleAktivEnhetChanged: () => void 0,
-                  }}
-                >
-                  <OversiktContainer tabType={OverviewTabType.ENHET_OVERVIEW} />
-                </AktivEnhetContext.Provider>
-              </NotificationContext.Provider>
-            }
-          ></Route>
-        </Routes>
-      </QueryClientProvider>
-    </MemoryRouter>
+  return renderWithRouter(
+    <QueryClientProvider client={queryClient}>
+      <NotificationContext.Provider
+        value={{
+          notifications: notifications,
+          displayNotification: () => void 0,
+          clearNotification: () => void 0,
+        }}
+      >
+        <AktivEnhetContext.Provider
+          value={{
+            aktivEnhet: aktivEnhetMock.aktivEnhet,
+            handleAktivEnhetChanged: () => void 0,
+          }}
+        >
+          <OversiktContainer />
+        </AktivEnhetContext.Provider>
+      </NotificationContext.Provider>
+    </QueryClientProvider>,
+    routes.ENHET_OVERSIKT
   );
 }
 
diff --git a/test/testRenderUtils.tsx b/test/testRenderUtils.tsx
new file mode 100644
index 00000000..d9ed61e4
--- /dev/null
+++ b/test/testRenderUtils.tsx
@@ -0,0 +1,13 @@
+import { render } from '@testing-library/react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import React from 'react';
+
+export const renderWithRouter = (element: React.ReactNode, path: string) => {
+  render(
+    <MemoryRouter initialEntries={[path]}>
+      <Routes>
+        <Route path={path} element={element} />
+      </Routes>
+    </MemoryRouter>
+  );
+};