({
- ...jest.requireActual('react-redux'),
- useSelector: jest.fn(() => mockUseSelectorReturnValue),
-}));
-
const mockStore = configureMockStore();
-const initialState = {
+const initialStore = () => ({
metamask: {
isSignedIn: false,
+ useExternalServices: true,
+ isProfileSyncingEnabled: true,
+ participateInMetaMetrics: false,
+ isProfileSyncingUpdateLoading: false,
},
-};
-const store = mockStore(initialState);
+});
describe('ProfileSyncToggle', () => {
- const enableProfileSyncingMock = jest.fn(() => Promise.resolve());
- const showModal = jest.fn();
-
- beforeEach(() => {
- jest.spyOn(ProfileSyncingHook, 'useEnableProfileSyncing').mockReturnValue({
- enableProfileSyncing: enableProfileSyncingMock,
- error: null,
- });
- jest.spyOn(store, 'dispatch').mockImplementation(showModal);
- });
-
- afterEach(() => {
- jest.clearAllMocks();
- });
-
it('renders correctly', () => {
- mockUseSelectorReturnValue = false;
const { getByTestId } = render(
-
+
- ,
+ ,
);
expect(getByTestId('profileSyncToggle')).toBeInTheDocument();
});
it('calls enableProfileSyncing when toggle is turned on', () => {
- mockUseSelectorReturnValue = false;
+ const store = initialStore();
+ store.metamask.isProfileSyncingEnabled = false; // We want to test enabling this toggle
+
+ const { enableProfileSyncingMock } = arrangeMocks();
+
const { getByTestId } = render(
-
+
- ,
+ ,
);
fireEvent.click(getByTestId('toggleButton'));
expect(enableProfileSyncingMock).toHaveBeenCalled();
});
+
+ function arrangeMocks() {
+ const enableProfileSyncingMock = jest.fn(() => Promise.resolve());
+ const disableProfileSyncingMock = jest.fn(() => Promise.resolve());
+
+ jest.spyOn(ProfileSyncingHook, 'useEnableProfileSyncing').mockReturnValue({
+ enableProfileSyncing: enableProfileSyncingMock,
+ error: null,
+ });
+
+ jest.spyOn(ProfileSyncingHook, 'useDisableProfileSyncing').mockReturnValue({
+ disableProfileSyncing: disableProfileSyncingMock,
+ error: null,
+ });
+
+ return {
+ enableProfileSyncingMock,
+ disableProfileSyncingMock,
+ };
+ }
});
diff --git a/ui/pages/settings/security-tab/profile-sync-toggle/profile-sync-toggle.tsx b/ui/pages/settings/security-tab/profile-sync-toggle/profile-sync-toggle.tsx
index c8f4759bd712..a0661635797d 100644
--- a/ui/pages/settings/security-tab/profile-sync-toggle/profile-sync-toggle.tsx
+++ b/ui/pages/settings/security-tab/profile-sync-toggle/profile-sync-toggle.tsx
@@ -1,10 +1,11 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useI18nContext } from '../../../../hooks/useI18nContext';
import { MetaMetricsContext } from '../../../../contexts/metametrics';
import {
useEnableProfileSyncing,
useDisableProfileSyncing,
+ useSetIsProfileSyncingEnabled,
} from '../../../../hooks/metamask-notifications/useProfileSyncing';
import {
selectIsProfileSyncingEnabled,
@@ -26,6 +27,23 @@ import {
TextVariant,
} from '../../../../helpers/constants/design-system';
import Preloader from '../../../../components/ui/icon/preloader/preloader-icon.component';
+import { getUseExternalServices } from '../../../../selectors';
+
+function ProfileSyncBasicFunctionalitySetting() {
+ const basicFunctionality: boolean = useSelector(getUseExternalServices);
+ const { setIsProfileSyncingEnabled } = useSetIsProfileSyncingEnabled();
+
+ // Effect - toggle profile syncing off when basic functionality is off
+ useEffect(() => {
+ if (basicFunctionality === false) {
+ setIsProfileSyncingEnabled(false);
+ }
+ }, [basicFunctionality, setIsProfileSyncingEnabled]);
+
+ return {
+ isProfileSyncDisabled: !basicFunctionality,
+ };
+}
const ProfileSyncToggle = () => {
const t = useI18nContext();
@@ -36,6 +54,8 @@ const ProfileSyncToggle = () => {
const { disableProfileSyncing, error: disableProfileSyncingError } =
useDisableProfileSyncing();
+ const { isProfileSyncDisabled } = ProfileSyncBasicFunctionalitySetting();
+
const error = enableProfileSyncingError || disableProfileSyncingError;
const isProfileSyncingEnabled = useSelector(selectIsProfileSyncingEnabled);
@@ -113,6 +133,7 @@ const ProfileSyncToggle = () => {
{!isProfileSyncingUpdateLoading && (