Metametrics onboarding unit test, snapshot (#18253)

* Metametrics onboarding unit test, snapshot

* Test route navigation in metametrics

ui/pages/onboarding-flow/metametrics/__snapshots__/metametrics.test.js.snap

@@ -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 don’t 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 don’t 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>
+`;

ui/pages/onboarding-flow/metametrics/metametrics.test.js

@@ -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,
+      );
+    });
+  });
+});