1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-25 20:02:58 +01:00

Metametrics onboarding unit test, snapshot (#18253)

* Metametrics onboarding unit test, snapshot

* Test route navigation in metametrics
This commit is contained in:
Thomas Huang 2023-04-20 13:12:37 -05:00 committed by GitHub
parent c38cd21629
commit f9f628690c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 251 additions and 0 deletions

View File

@ -0,0 +1,156 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Onboarding Metametrics Component should match snapshot 1`] = `
<div>
<div
class="onboarding-metametrics"
data-testid="onboarding-metametrics"
>
<h2
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h2 typography--weight-bold typography--style-normal typography--align-center typography--color-text-default"
>
Help us improve MetaMask
</h2>
<p
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography onboarding-metametrics__desc typography--p typography--weight-normal typography--style-normal typography--align-center typography--color-text-default"
>
MetaMask would like to gather usage data to better understand how our users interact with MetaMask. This data will be used to provide the service, which includes improving the service based on your use.
</p>
<p
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography onboarding-metametrics__desc typography--p typography--weight-normal typography--style-normal typography--align-center typography--color-text-default"
>
MetaMask will...
</p>
<ul>
<li>
<span
class="box mm-icon mm-icon--size-md box--margin-inline-end-3 box--display-inline-block box--flex-direction-row box--color-success-default"
style="mask-image: url('./images/icons/check.svg');"
/>
Always allow you to opt-out via Settings
</li>
<li>
<span
class="box mm-icon mm-icon--size-md box--margin-inline-end-3 box--display-inline-block box--flex-direction-row box--color-success-default"
style="mask-image: url('./images/icons/check.svg');"
/>
Send anonymized click and pageview events
</li>
<li>
<div
class="box box--flex-direction-row"
>
<span
class="box mm-icon mm-icon--size-sm box--margin-inline-end-2 box--display-inline-block box--flex-direction-row box--color-error-default"
style="mask-image: url('./images/icons/close.svg');"
/>
<span>
<span
class="box box--margin-bottom-1 box--flex-direction-row typography typography--span typography--weight-bold typography--style-normal typography--color-text-default"
>
Never
</span>
collect information we dont need to provide the service (such as keys, addresses, transaction hashes, or balances)
</span>
</div>
</li>
<li>
<div
class="box box--flex-direction-row"
>
<span
class="box mm-icon mm-icon--size-sm box--margin-inline-end-2 box--display-inline-block box--flex-direction-row box--color-error-default"
style="mask-image: url('./images/icons/close.svg');"
/>
<span>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--span typography--weight-bold typography--style-normal typography--color-text-default"
>
Never
</span>
collect your full IP address*
</span>
</div>
</li>
<li>
<div
class="box box--flex-direction-row"
>
<span
class="box mm-icon mm-icon--size-sm box--margin-inline-end-2 box--display-inline-block box--flex-direction-row box--color-error-default"
style="mask-image: url('./images/icons/close.svg');"
/>
<span>
<span
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--span typography--weight-bold typography--style-normal typography--color-text-default"
>
Never
</span>
sell data. Ever!
</span>
</div>
</li>
</ul>
<h6
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography onboarding-metametrics__terms typography--h6 typography--weight-normal typography--style-normal typography--align-center typography--color-text-alternative"
>
This data is aggregated and is therefore anonymous for the purposes of General Data Protection Regulation (EU) 2016/679.
</h6>
<h6
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography onboarding-metametrics__terms typography--h6 typography--weight-normal typography--style-normal typography--align-center typography--color-text-alternative"
>
<span>
* When you use Infura as your default RPC provider in MetaMask, Infura will collect your IP address and your Ethereum wallet address when you send a transaction. We dont store this information in a way that allows our systems to associate those two pieces of data. For more information on how MetaMask and Infura interact from a data collection perspective, see our update
<a
href="https://consensys.net/blog/news/consensys-data-retention-update/"
rel="noopener noreferrer"
target="_blank"
>
here
</a>
. For more information on our privacy practices in general, see our
<a
href="https://metamask.io/privacy.html"
rel="noopener noreferrer"
target="_blank"
>
Privacy Policy here
</a>
.
</span>
</h6>
<div
class="onboarding-metametrics__buttons"
>
<button
class="button btn--rounded btn-primary btn--large"
data-testid="metametrics-i-agree"
role="button"
tabindex="0"
>
I agree
</button>
<button
class="button btn--rounded btn-secondary btn--large"
data-testid="metametrics-no-thanks"
role="button"
tabindex="0"
>
No thanks
</button>
</div>
</div>
</div>
`;

View File

@ -0,0 +1,95 @@
import React from 'react';
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 { ONBOARDING_CREATE_PASSWORD_ROUTE } from '../../../helpers/constants/routes';
import {
onboardingMetametricsAgree,
onboardingMetametricsDisagree,
} from '../../../../app/_locales/en/messages.json';
import { setParticipateInMetaMetrics } from '../../../store/actions';
import OnboardingMetametrics from './metametrics';
const mockPushHistory = jest.fn();
jest.mock('react-router-dom', () => {
const original = jest.requireActual('react-router-dom');
return {
...original,
useLocation: jest.fn(() => ({ search: '' })),
useHistory: () => ({
push: mockPushHistory,
}),
};
});
jest.mock('../../../store/actions.ts', () => ({
setParticipateInMetaMetrics: jest
.fn()
.mockReturnValue(jest.fn((val) => Promise.resolve([val]))),
}));
describe('Onboarding Metametrics Component', () => {
let mockStore;
const mockState = {
metamask: {
firstTimeFlowType: 'create',
participateInMetaMetrics: '',
},
};
beforeEach(() => {
mockStore = configureMockStore([thunk])(mockState);
});
afterEach(() => {
jest.clearAllMocks();
});
it('should match snapshot', () => {
const { container } = renderWithProvider(
<OnboardingMetametrics />,
mockStore,
);
expect(container).toMatchSnapshot();
});
it('should set setParticipateInMetaMetrics to true when clicking agree', async () => {
const { queryByText } = renderWithProvider(
<OnboardingMetametrics />,
mockStore,
);
const confirmAgree = queryByText(onboardingMetametricsAgree.message);
fireEvent.click(confirmAgree);
await waitFor(() => {
expect(setParticipateInMetaMetrics).toHaveBeenCalledWith(true);
expect(mockPushHistory).toHaveBeenCalledWith(
ONBOARDING_CREATE_PASSWORD_ROUTE,
);
});
});
it('should set setParticipateInMetaMetrics to false when clicking cancel', async () => {
const { queryByText } = renderWithProvider(
<OnboardingMetametrics />,
mockStore,
);
const confirmCancel = queryByText(onboardingMetametricsDisagree.message);
fireEvent.click(confirmCancel);
await waitFor(() => {
expect(setParticipateInMetaMetrics).toHaveBeenCalledWith(false);
expect(mockPushHistory).toHaveBeenCalledWith(
ONBOARDING_CREATE_PASSWORD_ROUTE,
);
});
});
});