[e2e]: blockaid toggle settings (#20454)

* wip * toggle settings e2e * fix test * removed unused code * fix failing snapshot * lint fix * fix git conflict * test: ppom ci (#20896) * ppom ci * Move ppom test inside snaps folder * fix failing test * fix failing snapshot test * fix snapshot test * improve variable naming * improve testid * update snapshot --------- Co-authored-by: seaona <[email protected]>
MetaMask · Sep 18, 2023 · 8157dc9 · 8157dc9
1 parent ca7c028
commit 8157dc9
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "user-actions-benchmark:chrome": "SELENIUM_BROWSER=chrome ts-node test/e2e/user-actions-benchmark.js",
     "benchmark:firefox": "SELENIUM_BROWSER=firefox ts-node test/e2e/benchmark.js",
     "build:test": "SEGMENT_HOST='https://api.segment.io' SEGMENT_WRITE_KEY='FAKE' SENTRY_DSN_DEV=https://[email protected]/0000000 PORTFOLIO_URL=http://127.0.0.1:8080 yarn build test",
-    "build:test:flask": "yarn build test --build-type flask",
+    "build:test:flask": "BLOCKAID_FILE_CDN=storage.googleapis.com/ppom-mock-cdn yarn build test --build-type flask",
     "build:test:mv3": "ENABLE_MV3=true SEGMENT_HOST='https://api.segment.io' SEGMENT_WRITE_KEY='FAKE' SENTRY_DSN_DEV=https://[email protected]/0000000 PORTFOLIO_URL=http://127.0.0.1:8080 yarn build test",
     "build:test:dev:mv3": "ENABLE_MV3=true SEGMENT_HOST='https://api.segment.io' SEGMENT_WRITE_KEY='FAKE' SENTRY_DSN_DEV=https://[email protected]/0000000 PORTFOLIO_URL=http://127.0.0.1:8080 yarn build:dev testDev --apply-lavamoat=false",
     "test": "yarn lint && yarn test:unit && yarn test:unit:jest",

diff --git a/test/e2e/run-all.js b/test/e2e/run-all.js
@@ -108,6 +108,7 @@ async function main() {
         'test-snap-manageAccount.spec.js',
         'test-snap-rpc.spec.js',
         'test-snap-lifecycle.spec.js',
+        'ppom-toggle-settings.spec.js',
       ];
       testPaths = testPaths.filter((p) =>
         filteredTests.every((filteredTest) => !p.endsWith(filteredTest)),

diff --git a/test/e2e/snaps/ppom-toggle-settings.spec.js b/test/e2e/snaps/ppom-toggle-settings.spec.js
@@ -0,0 +1,87 @@
+const { strict: assert } = require('assert');
+const {
+  withFixtures,
+  unlockWallet,
+  openDapp,
+  defaultGanacheOptions,
+  getWindowHandles,
+} = require('../helpers');
+const FixtureBuilder = require('../fixture-builder');
+
+const mainnetProviderConfig = {
+  providerConfig: {
+    chainId: '0x1',
+    nickname: '',
+    rpcUrl: '',
+    type: 'mainnet',
+  },
+};
+
+describe('PPOM Settings', function () {
+  it('should not show the PPOM warning when toggle is off', async function () {
+    await withFixtures(
+      {
+        dapp: true,
+        fixtures: new FixtureBuilder()
+          .withNetworkController(mainnetProviderConfig)
+          .withPermissionControllerConnectedToTestDapp()
+          .build(),
+        ganacheOptions: defaultGanacheOptions,
+        title: this.test.title,
+      },
+      async ({ driver }) => {
+        await driver.navigate();
+        await unlockWallet(driver);
+
+        await openDapp(driver);
+        await driver.clickElement('#maliciousPermit');
+        const windowHandles = await getWindowHandles(driver, 3);
+        await driver.switchToWindow(windowHandles.popup);
+
+        const blockaidResponseTitle =
+          '[data-testid="security-provider-banner-alert"]';
+        const exists = await driver.isElementPresent(blockaidResponseTitle);
+        assert.equal(exists, false, 'This is a deceptive request');
+      },
+    );
+  });
+
+  it('should show the PPOM warning when the toggle is on', async function () {
+    await withFixtures(
+      {
+        dapp: true,
+        fixtures: new FixtureBuilder()
+          .withNetworkController(mainnetProviderConfig)
+          .withPermissionControllerConnectedToTestDapp()
+          .build(),
+        ganacheOptions: defaultGanacheOptions,
+        title: this.test.title,
+      },
+      async ({ driver }) => {
+        await driver.navigate();
+        await unlockWallet(driver);
+
+        await driver.clickElement(
+          '[data-testid="account-options-menu-button"]',
+        );
+
+        await driver.clickElement({ text: 'Settings', tag: 'div' });
+        await driver.clickElement({ text: 'Experimental', tag: 'div' });
+
+        await driver.clickElement(
+          '[data-testid="settings-toggle-security-alert-blockaid"] .toggle-button > div',
+        );
+
+        await openDapp(driver);
+        await driver.clickElement('#maliciousPermit');
+        const windowHandles = await getWindowHandles(driver, 3);
+        await driver.switchToWindow(windowHandles.popup);
+
+        const blockaidResponseTitle =
+          '[data-testid="security-provider-banner-alert"]';
+        const exists = await driver.isElementPresent(blockaidResponseTitle);
+        assert.equal(exists, true, 'This is a deceptive request');
+      },
+    );
+  });
+});
diff --git a/.../security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap b/.../security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap
@@ -4,6 +4,7 @@ exports[`Security Provider Banner Alert should match snapshot 1`] = `
 <div>
   <div
     class="mm-box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger mm-box--padding-3 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--background-color-error-muted mm-box--rounded-sm"
+    data-testid="security-provider-banner-alert"
   >
     <span
       class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-error-default"

diff --git a/...vider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap b/...vider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap
@@ -3,6 +3,7 @@
 exports[`Blockaid Banner Alert should render 'danger' UI when securityAlertResponse.result_type is 'Malicious 1`] = `
 <div
   class="mm-box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger mm-box--padding-3 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--background-color-error-muted mm-box--rounded-sm"
+  data-testid="security-provider-banner-alert"
 >
   <span
     class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-error-default"
@@ -48,6 +49,7 @@ exports[`Blockaid Banner Alert should render 'danger' UI when securityAlertRespo
 exports[`Blockaid Banner Alert should render 'warning' UI when securityAlertResponse.result_type is 'Failed 1`] = `
 <div
   class="mm-box mm-banner-base mm-banner-alert mm-banner-alert--severity-warning mm-box--padding-3 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--background-color-warning-muted mm-box--rounded-sm"
+  data-testid="security-provider-banner-alert"
 >
   <span
     class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-warning-default"
@@ -71,6 +73,7 @@ exports[`Blockaid Banner Alert should render 'warning' UI when securityAlertResp
 exports[`Blockaid Banner Alert should render 'warning' UI when securityAlertResponse.result_type is 'Warning 1`] = `
 <div
   class="mm-box mm-banner-base mm-banner-alert mm-banner-alert--severity-warning mm-box--padding-3 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--background-color-warning-muted mm-box--rounded-sm"
+  data-testid="security-provider-banner-alert"
 >
   <span
     class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-warning-default"
@@ -117,6 +120,7 @@ exports[`Blockaid Banner Alert should render details when provided 1`] = `
 <div>
   <div
     class="mm-box mm-banner-base mm-banner-alert mm-banner-alert--severity-warning mm-box--padding-3 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--background-color-warning-muted mm-box--rounded-sm"
+    data-testid="security-provider-banner-alert"
   >
     <span
       class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-warning-default"

diff --git a/ui/components/app/security-provider-banner-alert/security-provider-banner-alert.js b/ui/components/app/security-provider-banner-alert/security-provider-banner-alert.js
@@ -38,7 +38,12 @@ function SecurityProviderBannerAlert({
   const t = useContext(I18nContext);
 
   return (
-    <BannerAlert title={title} severity={severity} {...props}>
+    <BannerAlert
+      data-testid="security-provider-banner-alert"
+      title={title}
+      severity={severity}
+      {...props}
+    >
       <Text marginTop={2}>{description}</Text>
 
       {details && (

diff --git a/ui/pages/settings/experimental-tab/__snapshots__/experimental-tab.test.js.snap b/ui/pages/settings/experimental-tab/__snapshots__/experimental-tab.test.js.snap
@@ -29,6 +29,7 @@ exports[`ExperimentalTab with desktop enabled renders ExperimentalTab component
           </p>
           <div
             class="settings-page__content-item-col settings-page__content-item-col__security-toggle-option"
+            data-testid="settings-toggle-security-alert-blockaid"
           >
             <p
               class="mm-box mm-text mm-text--body-md mm-box--color-text-default"

diff --git a/ui/pages/settings/experimental-tab/experimental-tab.component.js b/ui/pages/settings/experimental-tab/experimental-tab.component.js
@@ -88,7 +88,10 @@ export default class ExperimentalTab extends PureComponent {
               >
                 {t('securityAlertsDescription')}
               </Text>
-              <div className="settings-page__content-item-col settings-page__content-item-col__security-toggle-option">
+              <div
+                data-testid="settings-toggle-security-alert-blockaid"
+                className="settings-page__content-item-col settings-page__content-item-col__security-toggle-option"
+              >
                 <Text
                   variant={TextVariant.bodyMd}
                   color={TextColor.textDefault}
-Original file line number
+Diff line change
@@ Expand Up @@
     <div>
       <div
         class="mm-box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger mm-box--padding-3 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--background-color-error-muted mm-box--rounded-sm"
+        data-testid="security-provider-banner-alert"
       >
         <span
           class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-error-default"
@@ Expand Down @@