diff --git a/apps/trading/components/settings/settings.tsx b/apps/trading/components/settings/settings.tsx index 4d7fc94b6..0d5f5eb43 100644 --- a/apps/trading/components/settings/settings.tsx +++ b/apps/trading/components/settings/settings.tsx @@ -24,8 +24,8 @@ export const Settings = () => { > setIsApproved(isOn)} - checked={isApproved} + onCheckedChange={(isOn) => setIsApproved(isOn ? 'true' : 'false')} + checked={isApproved === 'true'} /> diff --git a/apps/trading/components/welcome-dialog/telemetry-approval.spec.tsx b/apps/trading/components/welcome-dialog/telemetry-approval.spec.tsx index ac66dcaff..37fd35258 100644 --- a/apps/trading/components/welcome-dialog/telemetry-approval.spec.tsx +++ b/apps/trading/components/welcome-dialog/telemetry-approval.spec.tsx @@ -2,29 +2,35 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { TelemetryApproval } from './telemetry-approval'; -jest.mock('@vegaprotocol/logger', () => ({ - SentryInit: () => undefined, - SentryClose: () => undefined, -})); - -jest.mock('@vegaprotocol/environment', () => ({ - useEnvironment: () => ({ VEGA_ENV: 'test', SENTRY_DSN: 'sentry-dsn' }), -})); - describe('TelemetryApproval', () => { - it('click on checkbox should be properly handled', async () => { - const helpText = 'My help text'; - render(); - expect(screen.getByRole('checkbox')).toHaveAttribute( - 'data-state', - 'unchecked' + it('click on buttons should be properly handled', async () => { + const mockSetTelemetryValue = jest.fn(); + render( + ); - await userEvent.click(screen.getByRole('checkbox')); - expect(screen.getByRole('checkbox')).toHaveAttribute( - 'data-state', - 'checked' + expect( + screen.getByRole('button', { name: 'No thanks' }) + ).toBeInTheDocument(); + await userEvent.click(screen.getByRole('button', { name: 'No thanks' })); + expect(mockSetTelemetryValue).toHaveBeenCalledWith('false'); + expect(screen.getByText('Share data')).toBeInTheDocument(); + await userEvent.click(screen.getByText('Share data')); + expect(mockSetTelemetryValue).toHaveBeenCalledWith('true'); + }); + + it('confirm button should have proper text', async () => { + const mockSetTelemetryValue = jest.fn(); + render( + ); - expect(screen.getByText('Share usage data')).toBeInTheDocument(); - expect(screen.getByText(helpText)).toBeInTheDocument(); + expect(screen.getByText('Continue sharing data')).toBeInTheDocument(); + await userEvent.click(screen.getByText('Continue sharing data')); + expect(mockSetTelemetryValue).toHaveBeenCalledWith('true'); }); }); diff --git a/apps/trading/components/welcome-dialog/telemetry-approval.tsx b/apps/trading/components/welcome-dialog/telemetry-approval.tsx index 2e5ecb5ba..4cee8c13e 100644 --- a/apps/trading/components/welcome-dialog/telemetry-approval.tsx +++ b/apps/trading/components/welcome-dialog/telemetry-approval.tsx @@ -2,11 +2,14 @@ import { Button, Icon } from '@vegaprotocol/ui-toolkit'; import { t } from '@vegaprotocol/i18n'; interface Props { - isApproved: string; - setApproved: (value: string) => void; + telemetryValue: string; + setTelemetryValue: (value: string) => void; } -export const TelemetryApproval = ({ isApproved, setApproved }: Props) => { +export const TelemetryApproval = ({ + telemetryValue, + setTelemetryValue, +}: Props) => { return (
@@ -32,7 +35,7 @@ export const TelemetryApproval = ({ isApproved, setApproved }: Props) => {
diff --git a/apps/trading/components/welcome-dialog/welcome-dialog.tsx b/apps/trading/components/welcome-dialog/welcome-dialog.tsx index d1c50892c..4469dc89a 100644 --- a/apps/trading/components/welcome-dialog/welcome-dialog.tsx +++ b/apps/trading/components/welcome-dialog/welcome-dialog.tsx @@ -1,4 +1,3 @@ -import React, { useCallback, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import { Dialog, Intent } from '@vegaprotocol/ui-toolkit'; import { t } from '@vegaprotocol/i18n'; @@ -16,19 +15,8 @@ import { TelemetryApproval } from './telemetry-approval'; import { useTelemetryApproval } from '../../lib/hooks/use-telemetry-approval'; export const WelcomeDialog = () => { - const [ - telemetryOn, - setTelemetryOn, - defaultTelemetryValue, - isTelemetryNeeded, - closeTelemetry, - ] = useTelemetryApproval(); - useEffect(() => { - if (!telemetryOn) { - setTelemetryOn(defaultTelemetryValue); - } - }, [telemetryOn, setTelemetryOn, defaultTelemetryValue]); - + const [telemetryValue, setTelemetryValue, isTelemetryNeeded, closeTelemetry] = + useTelemetryApproval(); const { VEGA_ENV } = useEnvironment(); const [onBoardingViewed] = useLocalStorage(constants.ONBOARDING_VIEWED_KEY); const update = useGlobalStore((store) => store.update); @@ -43,17 +31,9 @@ export const WelcomeDialog = () => { !dismissed; const marketId = useGlobalStore((store) => store.marketId); - const setApproved = useCallback( - (value: string) => { - setTelemetryOn(value); - closeTelemetry(); - }, - [setTelemetryOn, closeTelemetry] - ); - const onClose = () => { if (isTelemetryNeeded) { - setApproved(telemetryOn || defaultTelemetryValue); + closeTelemetry(); } else { const link = marketId ? Links[Routes.MARKET](marketId) @@ -78,7 +58,10 @@ export const WelcomeDialog = () => { ); const content = isTelemetryNeeded ? ( - + ) : isOnboardingDialogNeeded ? ( ) : null; diff --git a/apps/trading/lib/hooks/use-telemetry-approval.spec.ts b/apps/trading/lib/hooks/use-telemetry-approval.spec.ts index bd0be96b9..12357e64a 100644 --- a/apps/trading/lib/hooks/use-telemetry-approval.spec.ts +++ b/apps/trading/lib/hooks/use-telemetry-approval.spec.ts @@ -2,18 +2,22 @@ import { renderHook, act, waitFor } from '@testing-library/react'; import { useLocalStorage } from '@vegaprotocol/react-helpers'; import { SentryInit, SentryClose } from '@vegaprotocol/logger'; import { STORAGE_KEY, useTelemetryApproval } from './use-telemetry-approval'; +import { Networks } from '@vegaprotocol/environment'; const mockSetValue = jest.fn(); -const mockRemoveValue = jest.fn(); +let mockStorageHookResult = [null, mockSetValue]; jest.mock('@vegaprotocol/logger'); jest.mock('@vegaprotocol/react-helpers', () => ({ ...jest.requireActual('@vegaprotocol/react-helpers'), - useLocalStorage: jest - .fn() - .mockImplementation(() => [false, mockSetValue, mockRemoveValue]), + useLocalStorage: jest.fn().mockImplementation(() => mockStorageHookResult), })); +let mockVegaEnv = 'test'; jest.mock('@vegaprotocol/environment', () => ({ - useEnvironment: () => ({ VEGA_ENV: 'test', SENTRY_DSN: 'sentry-dsn' }), + ...jest.requireActual('@vegaprotocol/environment'), + useEnvironment: jest.fn(() => ({ + VEGA_ENV: mockVegaEnv, + SENTRY_DSN: 'sentry-dsn', + })), })); describe('useTelemetryApproval', () => { @@ -21,32 +25,53 @@ describe('useTelemetryApproval', () => { jest.clearAllMocks(); }); - it('hook should return proper array', () => { + it('when empty hook should return proper array', () => { const { result } = renderHook(() => useTelemetryApproval()); - expect(result.current[0]).toEqual(false); + expect(result.current[0]).toEqual(''); expect(result.current[1]).toEqual(expect.any(Function)); + expect(result.current[2]).toEqual(true); + expect(result.current[3]).toEqual(expect.any(Function)); expect(useLocalStorage).toHaveBeenCalledWith(STORAGE_KEY); + expect(mockSetValue).toHaveBeenCalledWith('true'); + }); + + it('when NOT empty hook should return proper array', () => { + mockStorageHookResult = ['false', mockSetValue]; + const { result } = renderHook(() => useTelemetryApproval()); + expect(result.current[0]).toEqual('false'); + expect(result.current[1]).toEqual(expect.any(Function)); + expect(result.current[2]).toEqual(false); + expect(result.current[3]).toEqual(expect.any(Function)); + expect(useLocalStorage).toHaveBeenCalledWith(STORAGE_KEY); + expect(mockSetValue).not.toHaveBeenCalled(); + }); + + it('on mainnet hook should init properly', () => { + mockStorageHookResult = [null, mockSetValue]; + mockVegaEnv = Networks.MAINNET; + renderHook(() => useTelemetryApproval()); + expect(mockSetValue).toHaveBeenCalledWith('false'); }); it('hook should init stuff properly', async () => { const { result } = renderHook(() => useTelemetryApproval()); await act(() => { - result.current[1](true); + result.current[1]('true'); }); await waitFor(() => { expect(SentryInit).toHaveBeenCalled(); - expect(mockSetValue).toHaveBeenCalledWith('1'); + expect(mockSetValue).toHaveBeenCalledWith('true'); }); }); it('hook should close stuff properly', async () => { const { result } = renderHook(() => useTelemetryApproval()); await act(() => { - result.current[1](false); + result.current[1]('false'); }); await waitFor(() => { expect(SentryClose).toHaveBeenCalled(); - expect(mockRemoveValue).toHaveBeenCalledWith(); + expect(mockSetValue).toHaveBeenCalledWith('false'); }); }); }); diff --git a/apps/trading/lib/hooks/use-telemetry-approval.ts b/apps/trading/lib/hooks/use-telemetry-approval.ts index e33808068..895dbbb61 100644 --- a/apps/trading/lib/hooks/use-telemetry-approval.ts +++ b/apps/trading/lib/hooks/use-telemetry-approval.ts @@ -1,13 +1,13 @@ import { useLocalStorage } from '@vegaprotocol/react-helpers'; -import { useCallback, useEffect, useRef, useState } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { SentryInit, SentryClose } from '@vegaprotocol/logger'; import { Networks, useEnvironment } from '@vegaprotocol/environment'; + export const STORAGE_KEY = 'vega_telemetry_approval'; export const useTelemetryApproval = (): [ value: string, setValue: (value: string) => void, - defaultValue: string, shouldOpen: boolean, close: () => void ] => { @@ -16,16 +16,10 @@ export const useTelemetryApproval = (): [ VEGA_ENV === Networks.MAINNET ? 'false' : 'true'; const [value, setValue] = useLocalStorage(STORAGE_KEY); const [shouldOpen, setShouldOpen] = useState(!value); - const valueRef = useRef(Boolean(value)); - useEffect(() => { - if (!valueRef.current) { - setShouldOpen(true); - } - }, []); const close = useCallback(() => { setShouldOpen(false); }, []); - const setApprove = useCallback( + const manageValue = useCallback( (value: string) => { if (value === 'true' && SENTRY_DSN) { SentryInit(SENTRY_DSN, VEGA_ENV); @@ -36,5 +30,18 @@ export const useTelemetryApproval = (): [ }, [setValue, SENTRY_DSN, VEGA_ENV] ); - return [value || '', setApprove, defaultTelemetryValue, shouldOpen, close]; + const setTelemetryValue = useCallback( + (value: string) => { + setShouldOpen(false); + manageValue(value); + }, + [manageValue] + ); + useEffect(() => { + if (!value) { + manageValue(defaultTelemetryValue); + } + }, [value, manageValue, defaultTelemetryValue]); + + return [value || '', setTelemetryValue, shouldOpen, close]; };