m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 01:47:00 +01:00
Code

Feat/srp metrics (#18015)

Browse Source 
* add srp metrics

* add event names

* fix text

* add test

* add event test to hold to reveal modal

* fix lint

* add event test to reveal seed

* update coverage target

* revert willHide

* add more tests

* fix lint

* update coverage

* git commit -m "fix comments"

* fix merge conflict

* fixed the merge conflicts with #18353

* fix text

* update deprecated import

* alphabetize metametrics enums

* update coverage

* update coverage

---------

Co-authored-by: Brad Decker <bhdecker84@gmail.com>
Co-authored-by: Howard Braham <howrad@gmail.com>
This commit is contained in:
Monte Lai 2023-05-04 00:26:45 +08:00 committed by GitHub
parent a356c40c86
commit a3cf0036ad
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 589 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
coverage-targets.js
View File

@ -6,10 +6,10 @@
// subset of files to check against these targets.
module.exports = {
global: {
lines: 69.92,
branches: 57.63,
statements: 69.24,
functions: 62.51,
lines: 70.26,
branches: 57.91,
statements: 69.59,
functions: 62.97,
},
transforms: {
branches: 100,

82
shared/constants/metametrics.ts
View File

@ -521,34 +521,7 @@ export enum MetaMetricsEventName {
NavBuyButtonClicked = 'Buy Button Clicked',
NavSendButtonClicked = 'Send Button Clicked',
NavSwapButtonClicked = 'Swap Button Clicked',
SrpToConfirmBackup = 'SRP Backup Confirm Displayed',
WalletSetupStarted = 'Wallet Setup Selected',
WalletSetupCanceled = 'Wallet Setup Canceled',
WalletSetupFailed = 'Wallet Setup Failed',
WalletCreated = 'Wallet Created',
NftAdded = 'NFT Added',
OnrampProviderSelected = 'On-ramp Provider Selected',
PermissionsApproved = 'Permissions Approved',
PermissionsRejected = 'Permissions Rejected',
PermissionsRequested = 'Permissions Requested',
PhishingPageDisplayed = 'Phishing Page Displayed',
PortfolioLinkClicked = 'Portfolio Link Clicked',
PublicAddressCopied = 'Public Address Copied',
ProviderMethodCalled = 'Provider Method Called',
SignatureApproved = 'Signature Approved',
SignatureFailed = 'Signature Failed',
SignatureRejected = 'Signature Rejected',
SignatureRequested = 'Signature Requested',
TermsOfUseShown = 'Terms of Use Shown',
TermsOfUseAccepted = 'Terms of Use Accepted',
TokenImportButtonClicked = 'Import Token Button Clicked',
TokenScreenOpened = 'Token Screen Opened',
SupportLinkClicked = 'Support Link Clicked',
TokenAdded = 'Token Added',
TokenDetected = 'Token Detected',
TokenHidden = 'Token Hidden',
TokenImportCanceled = 'Token Import Canceled',
TokenImportClicked = 'Token Import Clicked',
OnboardingWelcome = 'App Installed',
OnboardingWalletCreationStarted = 'Wallet Setup Selected',
OnboardingWalletImportStarted = 'Wallet Import Started',
@ -566,7 +539,48 @@ export enum MetaMetricsEventName {
OnboardingWalletImportAttempted = 'Wallet Import Attempted',
OnboardingWalletVideoPlay = 'SRP Intro Video Played',
OnboardingTwitterClick = 'External Link Clicked',
OnrampProviderSelected = 'On-ramp Provider Selected',
PermissionsApproved = 'Permissions Approved',
PermissionsRejected = 'Permissions Rejected',
PermissionsRequested = 'Permissions Requested',
PhishingPageDisplayed = 'Phishing Page Displayed',
PortfolioLinkClicked = 'Portfolio Link Clicked',
ProviderMethodCalled = 'Provider Method Called',
PublicAddressCopied = 'Public Address Copied',
ServiceWorkerRestarted = 'Service Worker Restarted',
SignatureApproved = 'Signature Approved',
SignatureFailed = 'Signature Failed',
SignatureRejected = 'Signature Rejected',
SignatureRequested = 'Signature Requested',
SrpRevealStarted = 'Reveal SRP Initiated',
SrpRevealClicked = 'Clicked Reveal Secret Recovery',
SrpRevealViewed = 'Views Reveal Secret Recovery',
SrpRevealBackButtonClicked = 'Clicked Back on Reveal SRP Password Page',
SrpRevealCancelled = 'Reveal SRP Cancelled',
SrpRevealCancelButtonClicked = 'Clicks Cancel on Reveal Secret Recovery Phrase Page',
SrpRevealCloseClicked = 'Clicks CLOSE with SRP',
SrpRevealNextClicked = 'Clicks Next on Reveal Secret Recovery Phrase',
SrpHoldToRevealClickStarted = 'Reveal SRP Click Started',
SrpHoldToRevealCloseClicked = 'Closes Hold To Reveal SRP',
SrpHoldToRevealCompleted = 'Reveal SRP Completed',
SrpViewsSrpQR = 'Views SRP QR Code',
SrpViewSrpText = 'Views SRP',
SrpCopiedToClipboard = 'Copies SRP to clipboard',
SrpToConfirmBackup = 'SRP Backup Confirm Displayed',
SupportLinkClicked = 'Support Link Clicked',
TermsOfUseShown = 'Terms of Use Shown',
TermsOfUseAccepted = 'Terms of Use Accepted',
TokenImportButtonClicked = 'Import Token Button Clicked',
TokenScreenOpened = 'Token Screen Opened',
TokenAdded = 'Token Added',
TokenDetected = 'Token Detected',
TokenHidden = 'Token Hidden',
TokenImportCanceled = 'Token Import Canceled',
TokenImportClicked = 'Token Import Clicked',
WalletSetupStarted = 'Wallet Setup Selected',
WalletSetupCanceled = 'Wallet Setup Canceled',
WalletSetupFailed = 'Wallet Setup Failed',
WalletCreated = 'Wallet Created',
///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
UserClickedDeepLink = 'User clicked deeplink',
///: END:ONLY_INCLUDE_IN
@ -585,8 +599,8 @@ export enum MetaMetricsEventName {
export enum MetaMetricsEventAccountType {
Default = 'metamask',
Imported = 'imported',
Hardware = 'hardware',
Imported = 'imported',
}
export enum MetaMetricsEventAccountImportType {
@ -600,6 +614,7 @@ export enum MetaMetricsEventCategory {
App = 'App',
Auth = 'Auth',
Background = 'Background',
Desktop = 'Desktop',
// The TypeScript ESLint rule is incorrectly marking this line.
/* eslint-disable-next-line @typescript-eslint/no-shadow */
Error = 'Error',
@ -613,13 +628,12 @@ export enum MetaMetricsEventCategory {
Onboarding = 'Onboarding',
Phishing = 'Phishing',
Retention = 'Retention',
ServiceWorkers = 'service_workers',
Settings = 'Settings',
Snaps = 'Snaps',
Swaps = 'Swaps',
Transactions = 'Transactions',
Wallet = 'Wallet',
Desktop = 'Desktop',
ServiceWorkers = 'service_workers',
///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
MMI = 'Institutional',
///: END:ONLY_INCLUDE_IN
@ -627,10 +641,10 @@ export enum MetaMetricsEventCategory {
}
export enum MetaMetricsEventLinkType {
TransactionBlockExplorer = 'Transaction Block Explorer',
BlockExplorer = 'Block Explorer',
AccountTracker = 'Account Tracker',
BlockExplorer = 'Block Explorer',
TokenTracker = 'Token Tracker',
TransactionBlockExplorer = 'Transaction Block Explorer',
}
export enum MetaMetricsEventKeyType {
@ -642,9 +656,9 @@ export enum MetaMetricsEventKeyType {
export enum MetaMetricsEventOnrampProviderType {
Coinbase = 'coinbase',
Moonpay = 'moonpay',
Wyre = 'wyre',
Transak = 'transak',
SelfDeposit = 'direct_deposit',
Transak = 'transak',
Wyre = 'wyre',
}
export enum MetaMetricsNetworkEventSource {

30
ui/components/app/hold-to-reveal-button/hold-to-reveal-button.js
View File

@ -9,6 +9,12 @@ import {
DISPLAY,
JustifyContent,
} from '../../../helpers/constants/design-system';
import { MetaMetricsContext } from '../../../contexts/metametrics';
import {
MetaMetricsEventCategory,
MetaMetricsEventKeyType,
MetaMetricsEventName,
} from '../../../../shared/constants/metametrics';
const radius = 14;
const strokeWidth = 2;
@ -19,6 +25,7 @@ export default function HoldToRevealButton({ buttonText, onLongPressed }) {
const isLongPressing = useRef(false);
const [isUnlocking, setIsUnlocking] = useState(false);
const [hasTriggeredUnlock, setHasTriggeredUnlock] = useState(false);
const trackEvent = useContext(MetaMetricsContext);
/**
* Prevent animation events from propogating up
@ -34,6 +41,13 @@ export default function HoldToRevealButton({ buttonText, onLongPressed }) {
*/
const onMouseDown = () => {
isLongPressing.current = true;
trackEvent({
category: MetaMetricsEventCategory.Keys,
event: MetaMetricsEventName.SrpHoldToRevealClickStarted,
properties: {
key_type: MetaMetricsEventKeyType.Srp,
},
});
};
/**
@ -57,6 +71,20 @@ export default function HoldToRevealButton({ buttonText, onLongPressed }) {
*/
const triggerOnLongPressed = useCallback(
(e) => {
trackEvent({
category: MetaMetricsEventCategory.Keys,
event: MetaMetricsEventName.SrpHoldToRevealCompleted,
properties: {
key_type: MetaMetricsEventKeyType.Srp,
},
});
trackEvent({
category: MetaMetricsEventCategory.Keys,
event: MetaMetricsEventName.SrpRevealViewed,
properties: {
key_type: MetaMetricsEventKeyType.Srp,
},
});
onLongPressed();
setHasTriggeredUnlock(true);
preventPropogation(e);
@ -93,6 +121,7 @@ export default function HoldToRevealButton({ buttonText, onLongPressed }) {
<Box className="hold-to-reveal-button__absolute-fill">
<svg className="hold-to-reveal-button__circle-svg">
<circle
aria-label="circle-locked"
onTransitionEnd={onProgressComplete}
className="hold-to-reveal-button__circle-foreground"
cx={radius}
@ -152,6 +181,7 @@ export default function HoldToRevealButton({ buttonText, onLongPressed }) {
</svg>
</div>
<div
aria-label="circle-unlocked"
className="hold-to-reveal-button__unlock-icon-container"
onAnimationEnd={triggerOnLongPressed}
>

75
ui/components/app/hold-to-reveal-button/hold-to-reveal-button.test.js
View File

@ -1,7 +1,19 @@
import React from 'react';
import { render, fireEvent, waitFor } from '@testing-library/react';
import {
MetaMetricsEventCategory,
MetaMetricsEventKeyType,
MetaMetricsEventName,
} from '../../../../shared/constants/metametrics';
import HoldToRevealButton from './hold-to-reveal-button';
const mockTrackEvent = jest.fn();
jest.mock('react', () => ({
...jest.requireActual('react'),
useContext: () => mockTrackEvent,
}));
describe('HoldToRevealButton', () => {
let props = {};
@ -14,6 +26,10 @@ describe('HoldToRevealButton', () => {
};
});
afterEach(() => {
jest.resetAllMocks();
});
it('should render a button with label', () => {
const { getByText } = render(<HoldToRevealButton {...props} />);
@ -34,39 +50,66 @@ describe('HoldToRevealButton', () => {
expect(button).toBeDefined();
});
it('should not show the locked padlock when a button is long pressed and then should show it after it was lifted off before the animation concludes', () => {
const { getByText } = render(<HoldToRevealButton {...props} />);
it('should show the locked padlock when a button is long pressed and then should show it after it was lifted off before the animation concludes', async () => {
const { getByText, queryByLabelText } = render(
<HoldToRevealButton {...props} />,
);
const button = getByText('Hold to reveal SRP');
fireEvent.mouseDown(button);
const circleLocked = queryByLabelText('circle-locked');
waitFor(() => {
expect(button.firstChild).toHaveClass(
'hold-to-reveal-button__lock-icon-container',
);
await waitFor(() => {
expect(circleLocked).toBeInTheDocument();
});
fireEvent.mouseUp(button);
const circleUnlocked = queryByLabelText('circle-unlocked');
waitFor(() => {
expect(button.firstChild).not.toHaveClass(
'hold-to-reveal-button__lock-icon-container',
);
await waitFor(() => {
expect(circleUnlocked).not.toBeInTheDocument();
});
});
it('should show the unlocked padlock when a button is long pressed for the duration of the animation', () => {
const { getByText } = render(<HoldToRevealButton {...props} />);
it('should show the unlocked padlock when a button is long pressed for the duration of the animation', async () => {
const { getByText, queryByLabelText } = render(
<HoldToRevealButton {...props} />,
);
const button = getByText('Hold to reveal SRP');
fireEvent.mouseDown(button);
waitFor(() => {
expect(button.firstChild).toHaveClass(
'hold-to-reveal-button__unlock-icon-container',
);
const circleLocked = queryByLabelText('circle-locked');
fireEvent.transitionEnd(circleLocked);
const circleUnlocked = queryByLabelText('circle-unlocked');
fireEvent.animationEnd(circleUnlocked);
await waitFor(() => {
expect(circleUnlocked).toBeInTheDocument();
expect(mockTrackEvent).toHaveBeenNthCalledWith(2, {
category: MetaMetricsEventCategory.Keys,
event: MetaMetricsEventName.SrpHoldToRevealClickStarted,
properties: {
key_type: MetaMetricsEventKeyType.Srp,
},
});
expect(mockTrackEvent).toHaveBeenNthCalledWith(5, {
category: MetaMetricsEventCategory.Keys,
event: MetaMetricsEventName.SrpHoldToRevealCompleted,
properties: {
key_type: MetaMetricsEventKeyType.Srp,
},
});
expect(mockTrackEvent).toHaveBeenNthCalledWith(6, {
category: MetaMetricsEventCategory.Keys,
event: MetaMetricsEventName.SrpRevealViewed,
properties: {
key_type: MetaMetricsEventKeyType.Srp,
},
});
});
});
});

20
ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.js
View File

@ -1,5 +1,5 @@
import PropTypes from 'prop-types';
import React from 'react';
import React, { useContext } from 'react';
import withModalProps from '../../../../helpers/higher-order-components/with-modal-props';
import Box from '../../../ui/box';
import {
@ -20,9 +20,16 @@ import {
import HoldToRevealButton from '../../hold-to-reveal-button';
import { useI18nContext } from '../../../../hooks/useI18nContext';
import ZENDESK_URLS from '../../../../helpers/constants/zendesk-url';
import { MetaMetricsContext } from '../../../../contexts/metametrics';
import {
MetaMetricsEventCategory,
MetaMetricsEventKeyType,
MetaMetricsEventName,
} from '../../../../../shared/constants/metametrics';
const HoldToRevealModal = ({ onLongPressed, hideModal }) => {
const t = useI18nContext();
const trackEvent = useContext(MetaMetricsContext);
const unlock = () => {
onLongPressed();
@ -53,7 +60,16 @@ const HoldToRevealModal = ({ onLongPressed, hideModal }) => {
className="hold-to-reveal-modal__close"
iconName={IconName.Close}
size={Size.SM}
onClick={handleCancel}
onClick={() => {
trackEvent({
category: MetaMetricsEventCategory.Keys,
event: MetaMetricsEventName.SrpHoldToRevealCloseClicked,
properties: {
key_type: MetaMetricsEventKeyType.Srp,
},
});
handleCancel();
}}
ariaLabel={t('close')}
/>
</Box>

118
ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.test.js
View File

@ -12,23 +12,25 @@ import {
holdToRevealContent5,
holdToRevealTitle,
} from '../../../../../app/_locales/en/messages.json';
import {
MetaMetricsEventCategory,
MetaMetricsEventKeyType,
MetaMetricsEventName,
} from '../../../../../shared/constants/metametrics';
import { MetaMetricsContext } from '../../../../contexts/metametrics';
import HoldToRevealModal from '.';
const mockShowModal = jest.fn();
jest.mock('../../../../store/actions.ts', () => {
return {
showModal: () => mockShowModal,
};
});
describe('Hold to Reveal Modal', () => {
const mockStore = configureMockState([thunk])(mockState);
const onLongPressStub = jest.fn().mockResolvedValue();
const hideModalStub = jest.fn().mockResolvedValue();
const onLongPressStub = jest.fn();
const hideModalStub = jest.fn();
global.platform = { openTab: jest.fn() };
afterEach(() => {
jest.resetAllMocks();
});
it('should render the srp warning text and button', () => {
const { getByText } = renderWithProvider(
<HoldToRevealModal
@ -72,7 +74,7 @@ describe('Hold to Reveal Modal', () => {
});
it('should should execute onLongPressed after long press', async () => {
const { getByText } = renderWithProvider(
const { getByText, queryByLabelText } = renderWithProvider(
<HoldToRevealModal
onLongPressed={onLongPressStub}
hideModal={hideModalStub}
@ -81,17 +83,24 @@ describe('Hold to Reveal Modal', () => {
);
const holdButton = getByText('Hold to reveal SRP');
waitFor(() => {
const circleLocked = queryByLabelText('circle-locked');
fireEvent.mouseDown(holdButton);
fireEvent.transitionEnd(circleLocked);
const circleUnlocked = queryByLabelText('circle-unlocked');
fireEvent.animationEnd(circleUnlocked);
await waitFor(() => {
expect(holdButton.firstChild).toHaveClass(
'hold-to-reveal-button__unlock-icon-container',
'box hold-to-reveal-button__icon-container box--flex-direction-row',
);
expect(onLongPressStub.callCount).toBe(1);
expect(hideModalStub.callCount).toBe(1);
expect(onLongPressStub).toHaveBeenCalled();
});
});
it('should remain open if long pressed was not complete', async () => {
const { getByText } = renderWithProvider(
const { getByText, queryByLabelText } = renderWithProvider(
<HoldToRevealModal
onLongPressed={onLongPressStub}
hideModal={hideModalStub}
@ -100,15 +109,74 @@ describe('Hold to Reveal Modal', () => {
);
const holdButton = getByText('Hold to reveal SRP');
waitFor(
() => {
expect(holdButton.firstChild).toHaveClass(
'hold-to-reveal-button__unlock-icon-container',
);
expect(onLongPressStub.callCount).toBe(0);
expect(hideModalStub.callCount).toBe(0);
},
{ interval: 100 },
fireEvent.click(holdButton);
const circleLocked = queryByLabelText('circle-locked');
const circleUnlocked = queryByLabelText('circle-unlocked');
await waitFor(() => {
expect(circleLocked).toBeInTheDocument();
expect(circleUnlocked).not.toBeInTheDocument();
expect(onLongPressStub).not.toHaveBeenCalled();
expect(hideModalStub).not.toHaveBeenCalled();
});
});
it('should fire event when closing', async () => {
const mockTrackEvent = jest.fn();
const { queryByLabelText } = renderWithProvider(
<MetaMetricsContext.Provider value={mockTrackEvent}>
<HoldToRevealModal
onLongPressed={onLongPressStub}
hideModal={hideModalStub}
/>
,
</MetaMetricsContext.Provider>,
mockStore,
);
const closeButton = queryByLabelText('Close');
fireEvent.click(closeButton);
await waitFor(() => {
expect(mockTrackEvent).toHaveBeenCalledWith({
category: MetaMetricsEventCategory.Keys,
event: MetaMetricsEventName.SrpHoldToRevealCloseClicked,
properties: {
key_type: MetaMetricsEventKeyType.Srp,
},
});
});
});
it('should not hide modal after completing long press if set to false', async () => {
const { getByText, queryByLabelText } = renderWithProvider(
<HoldToRevealModal
onLongPressed={onLongPressStub}
hideModal={hideModalStub}
willHide={false}
/>,
mockStore,
);
const holdButton = getByText('Hold to reveal SRP');
const circleLocked = queryByLabelText('circle-locked');
fireEvent.mouseDown(holdButton);
fireEvent.transitionEnd(circleLocked);
const circleUnlocked = queryByLabelText('circle-unlocked');
fireEvent.animationEnd(circleUnlocked);
await waitFor(() => {
expect(holdButton.firstChild).toHaveClass(
'box hold-to-reveal-button__icon-container box--flex-direction-row',
);
expect(onLongPressStub).toHaveBeenCalled();
expect(hideModalStub).not.toHaveBeenCalled();
});
});
});

65
ui/pages/keychains/reveal-seed.js
View File

@ -148,9 +148,39 @@ const RevealSeedPage = () => {
};
const renderRevealSeedContent = () => {
// default for SRP_VIEW_SRP_TEXT event because this is the first thing shown after rendering
trackEvent({
category: MetaMetricsEventCategory.Keys,
event: MetaMetricsEventName.SrpViewSrpText,
properties: {
key_type: MetaMetricsEventKeyType.Srp,
},
});
return (
<div>
<Tabs defaultActiveTabName={t('revealSeedWordsText')}>
<Tabs
defaultActiveTabName={t('revealSeedWordsText')}
onTabClick={(tabName) => {
if (tabName === 'text-seed') {
trackEvent({
category: MetaMetricsEventCategory.Keys,
event: MetaMetricsEventName.SrpViewSrpText,
properties: {
key_type: MetaMetricsEventKeyType.Srp,
},
});
} else if (tabName === 'qr-seed') {
trackEvent({
category: MetaMetricsEventCategory.Keys,
event: MetaMetricsEventName.SrpViewsSrpQR,
properties: {
key_type: MetaMetricsEventKeyType.Srp,
},
});
}
}}
>
<Tab
name={t('revealSeedWordsText')}
className="reveal-seed__tab"
@ -169,6 +199,14 @@ const RevealSeedPage = () => {
copy_method: 'clipboard',
},
});
trackEvent({
category: MetaMetricsEventCategory.Keys,
event: MetaMetricsEventName.SrpCopiedToClipboard,
properties: {
key_type: MetaMetricsEventKeyType.Srp,
copy_method: 'clipboard',
},
});
}}
/>
</Tab>
@ -211,6 +249,13 @@ const RevealSeedPage = () => {
key_type: MetaMetricsEventKeyType.Srp,
},
});
trackEvent({
category: MetaMetricsEventCategory.Keys,
event: MetaMetricsEventName.SrpRevealCancelled,
properties: {
key_type: MetaMetricsEventKeyType.Srp,
},
});
history.push(mostRecentOverviewPage);
}}
>
@ -227,6 +272,13 @@ const RevealSeedPage = () => {
key_type: MetaMetricsEventKeyType.Srp,
},
});
trackEvent({
category: MetaMetricsEventCategory.Keys,
event: MetaMetricsEventName.SrpRevealNextClicked,
properties: {
key_type: MetaMetricsEventKeyType.Srp,
},
});
handleSubmit(event);
}}
disabled={password === ''}
@ -244,7 +296,16 @@ const RevealSeedPage = () => {
variant={BUTTON_VARIANT.SECONDARY}
width={BLOCK_SIZES.FULL}
size={Size.LG}
onClick={() => history.push(mostRecentOverviewPage)}
onClick={() => {
trackEvent({
category: MetaMetricsEventCategory.Keys,
event: MetaMetricsEventName.SrpRevealCloseClicked,
properties: {
key_type: MetaMetricsEventKeyType.Srp,
},
});
history.push(mostRecentOverviewPage);
}}
>
{t('close')}
</Button>

285
ui/pages/keychains/reveal-seed.test.js
View File

@ -3,30 +3,46 @@ import configureMockStore from 'redux-mock-store';
import { fireEvent, waitFor } from '@testing-library/react';
import thunk from 'redux-thunk';
import { renderWithProvider } from '../../../test/lib/render-helpers';
import { MODAL_OPEN } from '../../store/actionConstants';
import mockState from '../../../test/data/mock-state.json';
import { MetaMetricsContext } from '../../contexts/metametrics';
import {
MetaMetricsEventCategory,
MetaMetricsEventKeyType,
MetaMetricsEventName,
} from '../../../shared/constants/metametrics';
import { Modal } from '../../components/app/modals';
import configureStore from '../../store/store';
import RevealSeedPage from './reveal-seed';
const mockRequestRevealSeedWords = jest
.fn()
.mockResolvedValue('test seed words');
const mockShowModal = jest.fn().mockResolvedValue({
type: MODAL_OPEN,
payload: { name: 'HOLD_TO_REVEAL_SRP' },
});
const mockRequestRevealSeedWords = jest.fn();
const mockShowModal = jest.fn();
jest.mock('../../store/actions.ts', () => ({
...jest.requireActual('../../store/actions.ts'),
requestRevealSeedWords: () => mockRequestRevealSeedWords,
showModal: () => mockShowModal,
}));
const mockStateWithModal = {
...mockState,
appState: {
...mockState.appState,
modal: {
open: true,
modalState: {
name: 'HOLD_TO_REVEAL_SRP',
props: {
onLongPressed: jest.fn(),
},
},
},
},
};
describe('Reveal Seed Page', () => {
const mockStore = configureMockStore([thunk])(mockState);
const mockStore = configureMockStore([thunk])(mockStateWithModal);
afterEach(() => {
mockRequestRevealSeedWords.mockClear();
mockShowModal.mockClear();
jest.clearAllMocks();
});
it('should match snapshot', () => {
@ -36,6 +52,7 @@ describe('Reveal Seed Page', () => {
});
it('form submit', async () => {
mockRequestRevealSeedWords.mockResolvedValueOnce('test srp');
const { queryByTestId, queryByText } = renderWithProvider(
<RevealSeedPage />,
mockStore,
@ -53,6 +70,7 @@ describe('Reveal Seed Page', () => {
});
it('shows hold to reveal', async () => {
mockRequestRevealSeedWords.mockResolvedValueOnce('test srp');
const { queryByTestId, queryByText } = renderWithProvider(
<RevealSeedPage />,
mockStore,
@ -66,16 +84,12 @@ describe('Reveal Seed Page', () => {
await waitFor(() => {
expect(mockRequestRevealSeedWords).toHaveBeenCalled();
expect(mockShowModal).toHaveBeenCalled();
});
});
it('does not show modal on bad password', async () => {
const mockRequestPasswordFail = jest.fn().mockRejectedValue();
jest.mock('../../store/actions.ts', () => ({
requestRevealSeedWords: () => mockRequestPasswordFail,
showModal: () => mockShowModal,
}));
mockRequestRevealSeedWords.mockRejectedValueOnce('incorrect password');
const { queryByTestId, queryByText } = renderWithProvider(
<RevealSeedPage />,
mockStore,
@ -91,4 +105,237 @@ describe('Reveal Seed Page', () => {
expect(mockShowModal).not.toHaveBeenCalled();
});
});
it('should show srp after hold to reveal', async () => {
// need to use actual store because redux-mock-store does not execute actions
const store = configureStore(mockState);
mockRequestRevealSeedWords.mockResolvedValueOnce('test srp');
const { queryByTestId, queryByText } = renderWithProvider(
<div>
<Modal />
<RevealSeedPage />
</div>,
store,
);
const nextButton = queryByText('Next');
fireEvent.change(queryByTestId('input-password'), {
target: { value: 'password' },
});
fireEvent.click(nextButton);
await waitFor(() => {
expect(mockRequestRevealSeedWords).toHaveBeenCalled();
expect(queryByText('Keep your SRP safe')).toBeInTheDocument();
});
});
it('emits events when correct password is entered', async () => {
const store = configureStore(mockState);
mockRequestRevealSeedWords
.mockRejectedValueOnce('incorrect password')
.mockResolvedValueOnce('test srp');
const mockTrackEvent = jest.fn();
const { queryByTestId, queryByText, getByText, queryByLabelText } =
renderWithProvider(
<MetaMetricsContext.Provider value={mockTrackEvent}>
<Modal />
<RevealSeedPage />
</MetaMetricsContext.Provider>,
store,
);
fireEvent.change(queryByTestId('input-password'), {
target: { value: 'bad-password' },
});
fireEvent.click(queryByText('Next'));
await waitFor(() => {
expect(mockRequestRevealSeedWords).toHaveBeenCalled();
expect(mockTrackEvent).toHaveBeenNthCalledWith(1, {
category: MetaMetricsEventCategory.Keys,
event: MetaMetricsEventName.KeyExportRequested,
properties: {
key_type: MetaMetricsEventKeyType.Srp,
},
});
expect(mockTrackEvent).toHaveBeenNthCalledWith(2, {
category: MetaMetricsEventCategory.Keys,
event: MetaMetricsEventName.SrpRevealNextClicked,
properties: {
key_type: MetaMetricsEventKeyType.Srp,
},
});
expect(mockTrackEvent).toHaveBeenLastCalledWith({
category: MetaMetricsEventCategory.Keys,
event: MetaMetricsEventName.KeyExportFailed,
properties: {
key_type: MetaMetricsEventKeyType.Srp,
reason: undefined,
},
});
});
mockTrackEvent.mockClear();
fireEvent.change(queryByTestId('input-password'), {
target: { value: 'password' },
});
fireEvent.click(queryByText('Next'));
await waitFor(() => {
expect(mockTrackEvent).toHaveBeenNthCalledWith(1, {
category: MetaMetricsEventCategory.Keys,
event: MetaMetricsEventName.KeyExportRequested,
properties: {
key_type: MetaMetricsEventKeyType.Srp,
},
});
expect(mockTrackEvent).toHaveBeenNthCalledWith(2, {
category: MetaMetricsEventCategory.Keys,
event: MetaMetricsEventName.SrpRevealNextClicked,
properties: {
key_type: MetaMetricsEventKeyType.Srp,
},
});
expect(mockTrackEvent).toHaveBeenLastCalledWith({
category: MetaMetricsEventCategory.Keys,
event: MetaMetricsEventName.KeyExportRevealed,
properties: {
key_type: MetaMetricsEventKeyType.Srp,
},
});
expect(queryByText('Keep your SRP safe')).toBeInTheDocument();
});
const holdButton = getByText('Hold to reveal SRP');
const circleLocked = queryByLabelText('circle-locked');
fireEvent.mouseDown(holdButton);
fireEvent.transitionEnd(circleLocked);
const circleUnlocked = queryByLabelText('circle-unlocked');
fireEvent.animationEnd(circleUnlocked);
await waitFor(() => {
expect(holdButton.firstChild).toHaveClass(
'box hold-to-reveal-button__icon-container box--flex-direction-row',
);
// tests that the mock srp is now shown.
expect(getByText('test srp')).toBeInTheDocument();
expect(mockTrackEvent).toHaveBeenLastCalledWith({
category: MetaMetricsEventCategory.Keys,
event: MetaMetricsEventName.SrpViewSrpText,
properties: {
key_type: MetaMetricsEventKeyType.Srp,
},
});
});
mockTrackEvent.mockClear();
// completed hold click
const qrTab = getByText('QR');
const textTab = getByText('Text');
fireEvent.click(qrTab);
await waitFor(() => {
expect(mockTrackEvent).toHaveBeenLastCalledWith({
category: MetaMetricsEventCategory.Keys,
event: MetaMetricsEventName.SrpViewsSrpQR,
properties: {
key_type: MetaMetricsEventKeyType.Srp,
},
});
});
fireEvent.click(textTab);
await waitFor(() => {
expect(mockTrackEvent).toHaveBeenLastCalledWith({
category: MetaMetricsEventCategory.Keys,
event: MetaMetricsEventName.SrpViewSrpText,
properties: {
key_type: MetaMetricsEventKeyType.Srp,
},
});
});
mockTrackEvent.mockClear();
const copyButton = getByText('Copy to clipboard');
fireEvent.click(copyButton);
await waitFor(() => {
expect(mockTrackEvent).toHaveBeenNthCalledWith(1, {
category: MetaMetricsEventCategory.Keys,
event: MetaMetricsEventName.KeyExportCopied,
properties: {
key_type: MetaMetricsEventKeyType.Srp,
copy_method: 'clipboard',
},
});
expect(mockTrackEvent).toHaveBeenNthCalledWith(2, {
category: MetaMetricsEventCategory.Keys,
event: MetaMetricsEventName.SrpCopiedToClipboard,
properties: {
key_type: MetaMetricsEventKeyType.Srp,
copy_method: 'clipboard',
},
});
});
const doneButton = getByText('Close');
fireEvent.click(doneButton);
await waitFor(() => {
expect(mockTrackEvent).toHaveBeenLastCalledWith({
category: MetaMetricsEventCategory.Keys,
event: MetaMetricsEventName.SrpRevealCloseClicked,
properties: {
key_type: MetaMetricsEventKeyType.Srp,
},
});
});
});
it('should emit event when cancel is clicked', async () => {
mockRequestRevealSeedWords
.mockRejectedValueOnce('incorrect password')
.mockResolvedValueOnce('test srp');
const mockTrackEvent = jest.fn();
const { queryByText } = renderWithProvider(
<MetaMetricsContext.Provider value={mockTrackEvent}>
<RevealSeedPage />
</MetaMetricsContext.Provider>,
mockStore,
);
const cancelButton = queryByText('Cancel');
fireEvent.click(cancelButton);
await waitFor(() => {
expect(mockTrackEvent).toHaveBeenNthCalledWith(1, {
category: MetaMetricsEventCategory.Keys,
event: MetaMetricsEventName.KeyExportCanceled,
properties: {
key_type: MetaMetricsEventKeyType.Srp,
},
});
expect(mockTrackEvent).toHaveBeenNthCalledWith(2, {
category: MetaMetricsEventCategory.Keys,
event: MetaMetricsEventName.SrpRevealCancelled,
properties: {
key_type: MetaMetricsEventKeyType.Srp,
},
});
});
});
});

8
ui/pages/settings/security-tab/security-tab.component.js
View File

@ -121,6 +121,14 @@ export default class SecurityTab extends PureComponent {
location: 'Settings',
},
});
this.context.trackEvent({
category: MetaMetricsEventCategory.Settings,
event: MetaMetricsEventName.SrpRevealClicked,
properties: {
key_type: MetaMetricsEventKeyType.Srp,
location: 'Settings',
},
});
history.push(REVEAL_SEED_ROUTE);
}}
>