diff --git a/apps/meteor/client/views/admin/ABAC/ABACSettingTab/SettingField.spec.tsx b/apps/meteor/client/views/admin/ABAC/ABACSettingTab/SettingField.spec.tsx new file mode 100644 index 0000000000000..77e52759a434b --- /dev/null +++ b/apps/meteor/client/views/admin/ABAC/ABACSettingTab/SettingField.spec.tsx @@ -0,0 +1,58 @@ +import type { ISetting } from '@rocket.chat/core-typings'; +import { mockAppRoot } from '@rocket.chat/mock-providers'; +import { render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; + +import SettingField from './SettingField'; +import EditableSettingsProvider from '../../settings/EditableSettingsProvider'; + +const settingStructure = { + packageValue: false, + blocked: false, + public: true, + type: 'boolean', + i18nLabel: 'Test_Setting', + i18nDescription: 'Test_Setting_Description', + enableQuery: undefined, + displayQuery: undefined, +} as Partial; + +const dispatchMock = jest.fn(); + +jest.mock('@rocket.chat/ui-contexts', () => ({ + ...jest.requireActual('@rocket.chat/ui-contexts'), + useSettingsDispatch: () => dispatchMock, +})); +jest.mock('@rocket.chat/core-typings', () => ({ + ...jest.requireActual('@rocket.chat/core-typings'), + isSetting: jest.fn().mockReturnValue(true), +})); + +describe('SettingField', () => { + beforeEach(() => { + jest.useFakeTimers(); + }); + + afterEach(() => { + jest.runOnlyPendingTimers(); + jest.useRealTimers(); + }); + + it('should call dispatch when setting value is changed', async () => { + const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime }); + + render(, { + wrapper: mockAppRoot() + .wrap((children) => {children}) + .withSetting('Test_Setting', false, settingStructure) + .build(), + }); + + const checkbox = screen.getByRole('checkbox'); + await user.click(checkbox); + + await waitFor(() => { + expect(dispatchMock).toHaveBeenCalled(); + }); + }); +}); diff --git a/apps/meteor/client/views/admin/ABAC/ABACSettingTab/SettingField.tsx b/apps/meteor/client/views/admin/ABAC/ABACSettingTab/SettingField.tsx index 8255b7c24445f..6d743296c7316 100644 --- a/apps/meteor/client/views/admin/ABAC/ABACSettingTab/SettingField.tsx +++ b/apps/meteor/client/views/admin/ABAC/ABACSettingTab/SettingField.tsx @@ -1,14 +1,14 @@ import type { ISettingColor, SettingEditor, SettingValue } from '@rocket.chat/core-typings'; import { isSettingColor, isSetting } from '@rocket.chat/core-typings'; import { useDebouncedCallback } from '@rocket.chat/fuselage-hooks'; -import { useSettingStructure } from '@rocket.chat/ui-contexts'; +import { useSettingsDispatch, useSettingStructure } from '@rocket.chat/ui-contexts'; import DOMPurify from 'dompurify'; import type { ReactElement } from 'react'; import { useEffect, useMemo, useState, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import MarkdownText from '../../../../components/MarkdownText'; -import { useEditableSetting, useEditableSettingsDispatch, useEditableSettingVisibilityQuery } from '../../EditableSettingsContext'; +import { useEditableSetting, useEditableSettingVisibilityQuery } from '../../EditableSettingsContext'; import MemoizedSetting from '../../settings/Setting/MemoizedSetting'; import { useHasSettingModule } from '../../settings/hooks/useHasSettingModule'; @@ -32,7 +32,7 @@ function SettingField({ className = undefined, settingId, sectionChanged }: Sett throw new Error(`Setting ${settingId} is not valid`); } - const dispatch = useEditableSettingsDispatch(); + const dispatch = useSettingsDispatch(); const update = useDebouncedCallback( ({ value, editor }: { value?: SettingValue; editor?: SettingEditor }) => { @@ -45,9 +45,6 @@ function SettingField({ className = undefined, settingId, sectionChanged }: Sett _id: persistedSetting._id, ...(value !== undefined && { value }), ...(editor !== undefined && { editor }), - changed: - JSON.stringify(persistedSetting.value) !== JSON.stringify(value) || - (isSettingColor(persistedSetting) && JSON.stringify(persistedSetting.editor) !== JSON.stringify(editor)), }, ]); },