diff --git a/src/components/HendelseTypeFilter.tsx b/src/components/HendelseTypeFilter.tsx index 30a3ff72..c467b372 100644 --- a/src/components/HendelseTypeFilter.tsx +++ b/src/components/HendelseTypeFilter.tsx @@ -11,6 +11,7 @@ import { HendelseTypeFilters } from '@/context/filters/filterContextState'; import { useTabType } from '@/context/tab/TabTypeContext'; import { trackOnClick } from '@/amplitude/amplitude'; import { useFeatureToggles } from '@/data/unleash/unleashQueryHooks'; +import { Toggles } from '@/data/unleash/types/unleash_types'; const texts = { trackingLabel: 'HendelseFilter', @@ -25,14 +26,17 @@ export const HendelseTekster = { AKTIVITETSKRAV: 'Aktivitetskrav', BEHANDLERDIALOG: 'Dialog med behandler', AKTIVITETSKRAV_VURDER_STANS: 'Vurder stans', -}; +} as const; + +type HendelseTeksterKeys = keyof typeof HendelseTekster; +type HendelseTeksterValues = typeof HendelseTekster[HendelseTeksterKeys]; interface Props { personRegister?: PersonregisterState; } const enkeltFilterFraTekst = ( - tekst: string, + tekst: HendelseTeksterValues, checked: boolean ): HendelseTypeFilters => { const filter: HendelseTypeFilters = { @@ -50,70 +54,117 @@ const enkeltFilterFraTekst = ( const lagNyttFilter = ( forrigeFilter: HendelseTypeFilters, - tekst: string, + tekst: HendelseTeksterValues, checked: boolean ): HendelseTypeFilters => { const filter = { ...forrigeFilter }; - if (tekst === HendelseTekster.ARBEIDSGIVER_BISTAND) - filter.arbeidsgiverOnskerMote = checked; - if (tekst === HendelseTekster.MOTEBEHOV) filter.onskerMote = checked; - if (tekst === HendelseTekster.UFORDELTE_BRUKERE) - filter.ufordeltBruker = checked; - if (tekst === HendelseTekster.DIALOGMOTEKANDIDAT) - filter.dialogmotekandidat = checked; - if (tekst === HendelseTekster.DIALOGMOTESVAR) filter.dialogmotesvar = checked; - if (tekst === HendelseTekster.AKTIVITETSKRAV) filter.aktivitetskrav = checked; - if (tekst === HendelseTekster.BEHANDLERDIALOG) - filter.behandlerdialog = checked; - if (tekst === HendelseTekster.AKTIVITETSKRAV_VURDER_STANS) - filter.aktivitetskravVurderStans = checked; - return filter; + + switch (tekst) { + case HendelseTekster.ARBEIDSGIVER_BISTAND: { + filter.arbeidsgiverOnskerMote = checked; + return filter; + } + case HendelseTekster.MOTEBEHOV: { + filter.onskerMote = checked; + return filter; + } + case HendelseTekster.UFORDELTE_BRUKERE: { + filter.ufordeltBruker = checked; + return filter; + } + case HendelseTekster.DIALOGMOTEKANDIDAT: { + filter.dialogmotekandidat = checked; + return filter; + } + case HendelseTekster.DIALOGMOTESVAR: { + filter.dialogmotesvar = checked; + return filter; + } + case HendelseTekster.AKTIVITETSKRAV: { + filter.aktivitetskrav = checked; + return filter; + } + case HendelseTekster.BEHANDLERDIALOG: { + filter.behandlerdialog = checked; + return filter; + } + case HendelseTekster.AKTIVITETSKRAV_VURDER_STANS: { + filter.aktivitetskravVurderStans = checked; + return filter; + } + } }; const isCheckedInState = ( state: HendelseTypeFilters, - tekst: string + tekst: HendelseTeksterValues ): boolean => { - if (tekst === HendelseTekster.ARBEIDSGIVER_BISTAND) - return state.arbeidsgiverOnskerMote; - if (tekst === HendelseTekster.MOTEBEHOV) return state.onskerMote; - if (tekst === HendelseTekster.UFORDELTE_BRUKERE) return state.ufordeltBruker; - if (tekst === HendelseTekster.DIALOGMOTEKANDIDAT) - return state.dialogmotekandidat; - if (tekst === HendelseTekster.DIALOGMOTESVAR) return state.dialogmotesvar; - if (tekst === HendelseTekster.AKTIVITETSKRAV) return state.aktivitetskrav; - if (tekst === HendelseTekster.BEHANDLERDIALOG) return state.behandlerdialog; - if (tekst === HendelseTekster.AKTIVITETSKRAV_VURDER_STANS) - return state.aktivitetskravVurderStans; - return false; + switch (tekst) { + case HendelseTekster.ARBEIDSGIVER_BISTAND: + return state.arbeidsgiverOnskerMote; + case HendelseTekster.MOTEBEHOV: + return state.onskerMote; + case HendelseTekster.UFORDELTE_BRUKERE: + return state.ufordeltBruker; + case HendelseTekster.DIALOGMOTEKANDIDAT: + return state.dialogmotekandidat; + case HendelseTekster.DIALOGMOTESVAR: + return state.dialogmotesvar; + case HendelseTekster.AKTIVITETSKRAV: + return state.aktivitetskrav; + case HendelseTekster.BEHANDLERDIALOG: + return state.behandlerdialog; + case HendelseTekster.AKTIVITETSKRAV_VURDER_STANS: + return state.aktivitetskravVurderStans; + } +}; + +const showCheckbox = ( + key: HendelseTeksterKeys, + toggles: Toggles, + tabType: OverviewTabType +): boolean => { + switch (key) { + case 'AKTIVITETSKRAV': + case 'BEHANDLERDIALOG': + case 'DIALOGMOTEKANDIDAT': + case 'DIALOGMOTESVAR': + case 'MOTEBEHOV': + case 'ARBEIDSGIVER_BISTAND': + return true; + case 'UFORDELTE_BRUKERE': + return tabType === OverviewTabType.ENHET_OVERVIEW; + case 'AKTIVITETSKRAV_VURDER_STANS': + return toggles.isSendingAvForhandsvarselEnabled; + } }; interface CheckboksElement { - tekst: string; + tekst: HendelseTeksterValues; checked: boolean; - key: string; - tabType: OverviewTabType; + key: HendelseTeksterKeys; + show: boolean; } const Container = styled.div` margin-bottom: 1rem; `; + export const HendelseTypeFilter = ({ personRegister }: Props): ReactElement => { const { toggles } = useFeatureToggles(); const { filterState, dispatch: dispatchFilterAction } = useFilters(); const { tabType } = useTabType(); - const elementer = Object.entries(HendelseTekster) - .filter(([, tekst]) => { - return !( - tekst === HendelseTekster.UFORDELTE_BRUKERE && - tabType === OverviewTabType.MY_OVERVIEW - ); - }) - .map(([key, tekst]) => { - const checked = isCheckedInState(filterState.selectedHendelseType, tekst); - return { key, tekst, checked } as CheckboksElement; - }); + const elementer = Object.entries(HendelseTekster).map(([key, tekst]) => { + const checked = isCheckedInState(filterState.selectedHendelseType, tekst); + const show = showCheckbox(key as HendelseTeksterKeys, toggles, tabType); + return { + key, + tekst, + checked, + show, + } as CheckboksElement; + }); const onCheckedChange = (element: CheckboksElement, checked: boolean) => { const nyttFilter = lagNyttFilter( @@ -135,7 +186,6 @@ export const HendelseTypeFilter = ({ personRegister }: Props): ReactElement => { {genererHendelseCheckbokser( elementer, onCheckedChange, - toggles.isSendingAvForhandsvarselEnabled, personRegister )} @@ -147,15 +197,10 @@ export const HendelseTypeFilter = ({ personRegister }: Props): ReactElement => { const genererHendelseCheckbokser = ( elementer: CheckboksElement[], onCheckedChange: (klikketElement: CheckboksElement, checked: boolean) => void, - isSendingAvForhandsvarselEnabled: boolean, personRegister?: PersonregisterState ) => { return elementer - .filter( - (checkboksElement) => - isSendingAvForhandsvarselEnabled || - checkboksElement.tekst !== HendelseTekster.AKTIVITETSKRAV_VURDER_STANS - ) + .filter((checkboksElement) => checkboksElement.show) .map((checkboksElement) => { const filter = enkeltFilterFraTekst(checkboksElement.tekst, true); const antall = Object.keys( diff --git a/src/context/tab/TabTypeContext.tsx b/src/context/tab/TabTypeContext.tsx index e008c627..8e663e82 100644 --- a/src/context/tab/TabTypeContext.tsx +++ b/src/context/tab/TabTypeContext.tsx @@ -4,7 +4,7 @@ import { OverviewTabType } from '@/konstanter'; type TabTypeProviderProps = { children: React.ReactNode }; -const TabTypeContext = React.createContext<{ +export const TabTypeContext = React.createContext<{ tabType: OverviewTabType; setTabType: (tabType: OverviewTabType) => void; }>({ diff --git a/test/components/HendelseTypeFilter.test.tsx b/test/components/HendelseTypeFilter.test.tsx index 58dfe802..4f1383c7 100644 --- a/test/components/HendelseTypeFilter.test.tsx +++ b/test/components/HendelseTypeFilter.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { HendelseTypeFilter } from '@/components/HendelseTypeFilter'; -import { QueryClientProvider } from '@tanstack/react-query'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { render, screen } from '@testing-library/react'; import { expect } from 'chai'; import { NotificationProvider } from '@/context/notification/NotificationContext'; @@ -11,15 +11,20 @@ import { veilederMock } from '../../mock/syfoveileder/veilederMock'; import { testQueryClient } from '../testQueryClient'; import { aktivEnhetMock } from '../../mock/data/aktivEnhetMock'; import { unleashMock } from '../../mock/mockUnleash'; +import { TabTypeContext } from '@/context/tab/TabTypeContext'; +import { OverviewTabType } from '@/konstanter'; -const queryClient = testQueryClient(); +let queryClient: QueryClient; describe('HendelseTypeFilter', () => { - it('Skal inneholde checkbokser med riktige labels', () => { + beforeEach(() => { + queryClient = testQueryClient(); queryClient.setQueryData( veiledereQueryKeys.veiledereInfo, () => veilederMock ); + }); + it('Skal inneholde checkbokser med riktige labels', () => { queryClient.setQueryData( unleashQueryKeys.toggles(aktivEnhetMock.aktivEnhet, 'Z101010'), () => unleashMock @@ -81,5 +86,67 @@ describe('HendelseTypeFilter', () => { checked: false, }); expect(behandlerdialogCheckbox).to.exist; + + const vurderStansCheckbox = screen.getByRole('checkbox', { + name: /Vurder stans/, + checked: false, + }); + expect(vurderStansCheckbox).to.exist; + }); + it('Skal ikke inneholde checkbokser bak toggle når toggles disabled', () => { + queryClient.setQueryData( + veiledereQueryKeys.veiledereInfo, + () => veilederMock + ); + + render( + + void 0, + }} + > + + + + + + ); + + expect( + screen.queryByRole('checkbox', { + name: /Vurder stans/, + }) + ).to.not.exist; + }); + it('Viser ikke ufordelte brukere-checkboks i min oversikt', () => { + render( + + void 0, + }} + > + void 0, + }} + > + + + + + + + ); + + expect( + screen.queryByRole('checkbox', { + name: /Ufordelte brukere/, + }) + ).to.not.exist; }); });