fix: Fix unit and e2e tests that were expected the date based privacy…

… policy components to not be shown (#25390)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

Fixture / mock data in unit and e2e tests have been modified to handle
the privacy policy toast. These tests previously assumed that the
privacy policy toast, and in one case the updated metametrics component
during onboarding, would not be shown. However, their display was date
dependent. With this PR, the updated test data takes these dates into
account, and tests should now pass.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/25390?quickstart=1)

## **Related issues**

Fixes: failing tests on develop

## **Manual testing steps**

e2e and unit tests should pass

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

---------

Co-authored-by: Dan Miller <danjm.com@gmail.com>

test/e2e/default-fixture.js

@@ -107,6 +107,8 @@ function defaultFixture(inputChainId = CHAIN_IDS.LOCALHOST) {
           '__FIXTURE_SUBSTITUTION__currentDateInMilliseconds',
         showTestnetMessageInDropdown: true,
         trezorModel: null,
+        newPrivacyPolicyToastClickedOrClosed: true,
+        newPrivacyPolicyToastShownDate: Date.now(),
         usedNetworks: {
           [CHAIN_IDS.MAINNET]: true,
           [CHAIN_IDS.LINEA_MAINNET]: true,

test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-background-state.json

@@ -39,8 +39,8 @@
     "showAccountBanner": true,
     "trezorModel": null,
     "onboardingDate": "object",
-    "newPrivacyPolicyToastClickedOrClosed": "object",
-    "newPrivacyPolicyToastShownDate": "object",
+    "newPrivacyPolicyToastClickedOrClosed": "boolean",
+    "newPrivacyPolicyToastShownDate": "number",
     "hadAdvancedGasFeesSetPriorToMigration92_3": false,
     "nftsDropdownState": {},
     "termsOfUseLastAgreed": "number",

test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-ui-state.json

@@ -75,8 +75,8 @@
     "showAccountBanner": true,
     "trezorModel": null,
     "onboardingDate": "object",
-    "newPrivacyPolicyToastClickedOrClosed": "object",
-    "newPrivacyPolicyToastShownDate": "object",
+    "newPrivacyPolicyToastClickedOrClosed": "boolean",
+    "newPrivacyPolicyToastShownDate": "number",
     "hadAdvancedGasFeesSetPriorToMigration92_3": false,
     "nftsDropdownState": {},
     "termsOfUseLastAgreed": "number",

test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-background-state.json

@@ -46,6 +46,8 @@
         "0x5": true,
         "0x539": true
       },
+      "newPrivacyPolicyToastClickedOrClosed": "boolean",
+      "newPrivacyPolicyToastShownDate": "number",
       "snapsInstallPrivacyWarningShown": true
     },
     "CurrencyController": {

test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-ui-state.json

@@ -46,6 +46,8 @@
         "0x5": true,
         "0x539": true
       },
+      "newPrivacyPolicyToastClickedOrClosed": "boolean",
+      "newPrivacyPolicyToastShownDate": "number",
       "snapsInstallPrivacyWarningShown": true
     },
     "CurrencyController": {

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

@@ -4,55 +4,41 @@ exports[`Onboarding Metametrics Component should match snapshot 1`] = `
 <div>
   <div
     class="onboarding-metametrics"
-    data-testid="onboarding-legacy-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"
+      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-left 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.
+      We’d like to gather basic usage and diagnostics data to improve MetaMask. Know that we never sell the data you provide here.
     </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"
+      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-left typography--color-text-default"
     >
-      MetaMask will...
+      When we gather metrics, it will always be...
     </p>
     <ul>
-      <li>
-        <span
-          class="mm-box mm-icon mm-icon--size-md mm-box--margin-inline-end-3 mm-box--display-inline-block mm-box--color-success-default"
-          style="mask-image: url('./images/icons/check.svg');"
-        />
-        Always allow you to opt-out via Settings
-      </li>
-      <li>
-        <span
-          class="mm-box mm-icon mm-icon--size-md mm-box--margin-inline-end-3 mm-box--display-inline-block mm-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="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-end-2 mm-box--display-inline-block mm-box--color-error-default"
-            style="mask-image: url('./images/icons/close.svg');"
+            class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-end-2 mm-box--display-inline-block mm-box--color-success-default"
+            style="mask-image: url('./images/icons/check.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
+              Private:
             </span>
-             collect information we don’t need to provide the service (such as keys, addresses, transaction hashes, or balances)
+             clicks and views on the app are stored, but other details (like your public address) are not.
              
           </span>
         </div>
@@ -62,18 +48,18 @@ exports[`Onboarding Metametrics Component should match snapshot 1`] = `
           class="box box--flex-direction-row"
         >
           <span
-            class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-end-2 mm-box--display-inline-block mm-box--color-error-default"
-            style="mask-image: url('./images/icons/close.svg');"
+            class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-end-2 mm-box--display-inline-block mm-box--color-success-default"
+            style="mask-image: url('./images/icons/check.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
+              General:
             </span>
-             collect your full IP address*
+             we temporarily use your IP address to detect a general location (like your country or region), but it's never stored.
              
           </span>
         </div>
@@ -83,51 +69,56 @@ exports[`Onboarding Metametrics Component should match snapshot 1`] = `
           class="box box--flex-direction-row"
         >
           <span
-            class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-end-2 mm-box--display-inline-block mm-box--color-error-default"
-            style="mask-image: url('./images/icons/close.svg');"
+            class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-end-2 mm-box--display-inline-block mm-box--color-success-default"
+            style="mask-image: url('./images/icons/check.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
+              Optional:
             </span>
-             sell data.  Ever!
+             you decide if you want to share or delete your usage data via settings any time.
              
           </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"
+    <label
+      class="mm-box mm-text mm-checkbox mm-text--body-md mm-box--padding-bottom-3 mm-box--display-inline-flex mm-box--align-items-center mm-box--color-text-default"
+      for="metametrics-opt-in"
     >
-      This data is aggregated and is therefore anonymous for the purposes of General Data Protection Regulation (EU) 2016/679.
-    </h6>
+      <span
+        class="mm-checkbox__input-wrapper"
+      >
+        <input
+          class="mm-box mm-checkbox__input mm-box--margin-0 mm-box--margin-right-2 mm-box--display-flex mm-box--background-color-background-default mm-box--rounded-sm mm-box--border-color-border-default mm-box--border-width-2 box--border-style-solid"
+          id="metametrics-opt-in"
+          title="We’ll use this data to learn how you interact with our marketing communications. We may share relevant news (like product features)."
+          type="checkbox"
+        />
+      </span>
+      <span>
+        We’ll use this data to learn how you interact with our marketing communications. We may share relevant news (like product features).
+      </span>
+    </label>
     <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"
+      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-left 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.io/blog/consensys-data-retention-update"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          here
-        </a>
-        . For more information on our privacy practices in general, see our 
+        We’ll let you know if we decide to use this data for other purposes. You can review our 
         <a
           href="https://metamask.io/privacy.html"
           rel="noopener noreferrer"
           target="_blank"
         >
-          Privacy Policy here
+          Privacy Policy
         </a>
-        .
+         for more information. Remember, you can go to settings and opt out at any time.
          
       </span>
     </h6>

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

@@ -244,9 +244,7 @@ describe('Onboarding Flow', () => {
       ONBOARDING_METAMETRICS,
     );
 
-    const onboardingMetametrics = queryByTestId(
-      'onboarding-legacy-metametrics',
-    );
+    const onboardingMetametrics = queryByTestId('onboarding-metametrics');
     expect(onboardingMetametrics).toBeInTheDocument();
   });
 

ui/pages/routes/routes.component.test.js

@@ -114,6 +114,7 @@ describe('Routes Component', () => {
             ticker: 'ETH',
             type: NETWORK_TYPES.MAINNET,
           },
+          newPrivacyPolicyToastShownDate: new Date('0'),
         },
         send: {
           ...mockSendState.send,
@@ -130,7 +131,7 @@ describe('Routes Component', () => {
 });
 
 describe('toast display', () => {
-  const testState = {
+  const getToastDisplayTestState = (date) => ({
     ...mockState,
     metamask: {
       ...mockState.metamask,
@@ -139,17 +140,21 @@ describe('toast display', () => {
       completedOnboarding: true,
       usedNetworks: [],
       swapsState: { swapsFeatureIsLive: true },
+      newPrivacyPolicyToastShownDate: date,
     },
-  };
+  });
 
   it('renders toastContainer on default route', async () => {
-    await render([DEFAULT_ROUTE], testState);
+    await render([DEFAULT_ROUTE], getToastDisplayTestState(new Date('9999')));
     const toastContainer = document.querySelector('.toasts-container');
     expect(toastContainer).toBeInTheDocument();
   });
 
   it('does not render toastContainer on confirmation route', async () => {
-    await render([CONFIRMATION_V_NEXT_ROUTE], testState);
+    await render(
+      [CONFIRMATION_V_NEXT_ROUTE],
+      getToastDisplayTestState(new Date(0)),
+    );
     const toastContainer = document.querySelector('.toasts-container');
     expect(toastContainer).not.toBeInTheDocument();
   });