Skip to content

Commit

Permalink
fix: add test to useDropdownOptions hook
Browse files Browse the repository at this point in the history
  • Loading branch information
marlenetienne committed Jan 22, 2025
1 parent 4a6e860 commit c4a8446
Show file tree
Hide file tree
Showing 2 changed files with 141 additions and 30 deletions.
111 changes: 108 additions & 3 deletions src/hooks/test/useDropdownOptions.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
});
60 changes: 33 additions & 27 deletions src/hooks/useDropdownOptions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,48 +7,54 @@
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';

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],
);

Expand Down

0 comments on commit c4a8446

Please sign in to comment.