From c4a84463eb16fe60fab213f61dd7d1cc788b3880 Mon Sep 17 00:00:00 2001 From: marlenetienne Date: Wed, 22 Jan 2025 15:28:52 +0100 Subject: [PATCH] fix: add test to useDropdownOptions hook --- src/hooks/test/useDropdownOptions.test.ts | 111 +++++++++++++++++++++- src/hooks/useDropdownOptions.ts | 60 ++++++------ 2 files changed, 141 insertions(+), 30 deletions(-) diff --git a/src/hooks/test/useDropdownOptions.test.ts b/src/hooks/test/useDropdownOptions.test.ts index 5a69c12..b8f5cb7 100644 --- a/src/hooks/test/useDropdownOptions.test.ts +++ b/src/hooks/test/useDropdownOptions.test.ts @@ -5,15 +5,120 @@ */ import { renderHook } from '@testing-library/react'; -import { useDropdownOptions } from '@/hooks/useDropdownOptions'; -import { describe, it, expectTypeOf } from 'vitest'; +import { NO_WRAP_CLASS, useDropdownOptions } from '@/hooks/useDropdownOptions'; +import { describe, expectTypeOf, it } from 'vitest'; +import { RdsDropdownOption, RdsIconId } from 'rte-design-system-react'; describe('useDropdownOptions', () => { - it('should return settingOption', () => { + const mockOnClick = vi.fn(); + + it('should return settingOption, deleteOption and pinOption functions', () => { const { result } = renderHook(() => useDropdownOptions()); expectTypeOf(result.current.settingOption).toBeFunction(); + expectTypeOf(result.current.settingOption).returns.toEqualTypeOf(RdsDropdownOption); expectTypeOf(result.current.deleteOption).toBeFunction(); + expectTypeOf(result.current.deleteOption).returns.toEqualTypeOf(RdsDropdownOption); expectTypeOf(result.current.pinOption).toBeFunction(); + expectTypeOf(result.current.pinOption).returns.toEqualTypeOf(RdsDropdownOption); + }); + + it('should call settingOption and return the right set of options', () => { + const { result } = renderHook(() => useDropdownOptions()); + const settingOptions = { + key: 'setting', + label: 'Setting', + value: 'setting', + onItemClick: mockOnClick, + disabled: undefined, + icon: RdsIconId.Settings, + extraClasses: NO_WRAP_CLASS, + } as RdsDropdownOption; + + expect(result.current.settingOption(mockOnClick)).toEqual(settingOptions); + expect(result.current.settingOption(mockOnClick, 'noSettings')).toEqual({ + key: 'setting', + label: 'noSettings', + value: 'setting', + onItemClick: mockOnClick, + disabled: undefined, + icon: RdsIconId.Settings, + extraClasses: NO_WRAP_CLASS, + }); + expect(result.current.settingOption(mockOnClick, undefined, undefined)).toEqual({ + key: 'setting', + label: 'Setting', + value: 'setting', + onItemClick: mockOnClick, + disabled: undefined, + icon: RdsIconId.Settings, + extraClasses: NO_WRAP_CLASS, + }); + expect(result.current.settingOption(mockOnClick, 'settings', true)).toEqual({ + key: 'setting', + label: 'settings', + value: 'setting', + onItemClick: mockOnClick, + disabled: true, + icon: RdsIconId.Settings, + extraClasses: NO_WRAP_CLASS, + }); + }); + + it('should call deleteOption and return the right set of options', () => { + const { result } = renderHook(() => useDropdownOptions()); + const classes = 'whitespace-nowrap [&]:text-error-600 [&]:hover:text-error-600'; + + const deleteOptions = { + key: 'delete', + label: 'Delete', + value: 'delete', + onItemClick: mockOnClick, + disabled: undefined, + icon: RdsIconId.Delete, + extraClasses: classes, + } as RdsDropdownOption; + + expect(result.current.deleteOption(mockOnClick)).toEqual(deleteOptions); + expect(result.current.deleteOption(mockOnClick, 'deleteLabel')).toEqual({ + key: 'delete', + label: 'deleteLabel', + value: 'delete', + onItemClick: mockOnClick, + disabled: undefined, + icon: RdsIconId.Delete, + extraClasses: classes, + } as RdsDropdownOption); + expect(result.current.deleteOption(mockOnClick, undefined, false)).toEqual({ + key: 'delete', + label: 'Delete', + value: 'delete', + onItemClick: mockOnClick, + disabled: false, + icon: RdsIconId.Delete, + extraClasses: classes, + } as RdsDropdownOption); + }); + + it('should call pinOption and return the right set of options', () => { + const { result } = renderHook(() => useDropdownOptions()); + const pinOptions = { + key: 'pin', + label: 'Unpin', + value: 'pin', + onItemClick: mockOnClick, + icon: RdsIconId.KeepOff, + extraClasses: NO_WRAP_CLASS, + } as RdsDropdownOption; + + expect(result.current.pinOption(true, mockOnClick)).toEqual(pinOptions); + expect(result.current.pinOption(false, mockOnClick)).toEqual({ + key: 'pin', + label: 'Pin', + value: 'pin', + onItemClick: mockOnClick, + icon: RdsIconId.PushPin, + extraClasses: NO_WRAP_CLASS, + } as RdsDropdownOption); }); }); diff --git a/src/hooks/useDropdownOptions.ts b/src/hooks/useDropdownOptions.ts index 8709da2..cbbabeb 100644 --- a/src/hooks/useDropdownOptions.ts +++ b/src/hooks/useDropdownOptions.ts @@ -7,7 +7,7 @@ import { clsx } from 'clsx'; import { useCallback } from 'react'; import { useTranslation } from 'react-i18next'; -import { RdsDropdownOption, RdsIconId, RdsIconProps } from 'rte-design-system-react'; +import { RdsDropdownOption, RdsIconId } from 'rte-design-system-react'; export const NO_WRAP_CLASS = 'whitespace-nowrap'; @@ -15,40 +15,46 @@ export const useDropdownOptions = () => { const { t } = useTranslation(); const settingOption = useCallback( - (onClick: () => void, label?: string, disabled?: boolean): RdsDropdownOption => ({ - key: 'setting', - label: label || t('project.@setting'), - value: 'setting', - onItemClick: onClick, - disabled: disabled, - icon: RdsIconId.Settings, - extraClasses: NO_WRAP_CLASS, - }), + (onClick: () => void, label?: string, disabled?: boolean): RdsDropdownOption => { + return { + key: 'setting', + label: label || t('project.@setting'), + value: 'setting', + onItemClick: onClick, + disabled: disabled, + icon: RdsIconId.Settings, + extraClasses: NO_WRAP_CLASS, + } as RdsDropdownOption; + }, [t], ); const deleteOption = useCallback( - (onClick: () => void, label?: string, disabled?: boolean): RdsDropdownOption => ({ - key: 'delete', - label: label ?? t('project.@delete'), - value: 'delete', - icon: RdsIconId.Delete, - onItemClick: onClick, - extraClasses: clsx(NO_WRAP_CLASS, '[&]:text-error-600 [&]:hover:text-error-600'), - disabled: disabled, - }), + (onClick: () => void, label?: string, disabled?: boolean): RdsDropdownOption => { + return { + key: 'delete', + label: label ?? t('project.@delete'), + value: 'delete', + icon: RdsIconId.Delete, + onItemClick: onClick, + extraClasses: clsx(NO_WRAP_CLASS, '[&]:text-error-600 [&]:hover:text-error-600'), + disabled: disabled, + } as RdsDropdownOption; + }, [t], ); const pinOption = useCallback( - (pinned: boolean, onClick: () => void): RdsDropdownOption => ({ - key: 'pin', - label: pinned ? t('project.@unpin') : t('project.@pin'), - value: 'pin', - icon: pinned ? RdsIconId.KeepOff : RdsIconId.PushPin, - onItemClick: onClick, - extraClasses: NO_WRAP_CLASS, - }), + (pinned: boolean, onClick: () => void): RdsDropdownOption => { + return { + key: 'pin', + label: pinned ? t('project.@unpin') : t('project.@pin'), + value: 'pin', + icon: pinned ? RdsIconId.KeepOff : RdsIconId.PushPin, + onItemClick: onClick, + extraClasses: NO_WRAP_CLASS, + } as RdsDropdownOption; + }, [t], );