[E2E]: Revoke nft approval (#15995)

package.json

@@ -255,7 +255,7 @@
     "@metamask/eslint-config-typescript": "^9.0.1",
     "@metamask/forwarder": "^1.1.0",
     "@metamask/phishing-warning": "^1.2.1",
-    "@metamask/test-dapp": "^5.2.0",
+    "@metamask/test-dapp": "^5.2.1",
     "@sentry/cli": "^1.58.0",
     "@storybook/addon-a11y": "^6.5.10",
     "@storybook/addon-actions": "^6.5.10",

test/e2e/tests/collectibles.spec.js

@@ -1,9 +1,5 @@
 const { strict: assert } = require('assert');
-const {
+const { convertToHexValue, withFixtures } = require('../helpers');
-  convertToHexValue,
-  withFixtures,
-  veryLargeDelayMs,
-} = require('../helpers');
 const { SMART_CONTRACTS } = require('../seeder/smart-contracts');
 
 describe('Collectibles', function () {
@@ -33,18 +29,16 @@ describe('Collectibles', function () {
         await driver.fill('#password', 'correct horse battery staple');
         await driver.press('#password', driver.Key.ENTER);
 
-        // Click transfer
+        // Open Dapp and wait for deployed contract
         await driver.openNewPage(`http://127.0.0.1:8080/?contract=${contract}`);
-        await driver.waitForSelector({
+        await driver.findClickableElement('#deployButton');
-          css: '#collectiblesStatus',
+
-          text: 'Deployed',
+        // Click Transer
-        });
-        await driver.delay(veryLargeDelayMs);
         await driver.fill('#transferTokenInput', '1');
         await driver.clickElement('#transferFromButton');
         await driver.waitUntilXWindowHandles(3);
         const windowHandles = await driver.getAllWindowHandles();
-        const extension = windowHandles[0];
+        const [extension] = windowHandles;
         await driver.switchToWindowWithTitle(
           'MetaMask Notification',
           windowHandles,
@@ -87,18 +81,16 @@ describe('Collectibles', function () {
         await driver.fill('#password', 'correct horse battery staple');
         await driver.press('#password', driver.Key.ENTER);
 
-        // Click approve
+        // Open Dapp and wait for deployed contract
         await driver.openNewPage(`http://127.0.0.1:8080/?contract=${contract}`);
-        await driver.waitForSelector({
+        await driver.findClickableElement('#deployButton');
-          css: '#collectiblesStatus',
+
-          text: 'Deployed',
+        // Click Approve
-        });
-        await driver.delay(veryLargeDelayMs);
         await driver.fill('#approveTokenInput', '1');
         await driver.clickElement('#approveButton');
         await driver.waitUntilXWindowHandles(3);
         const windowHandles = await driver.getAllWindowHandles();
-        const extension = windowHandles[0];
+        const [extension] = windowHandles;
         await driver.switchToWindowWithTitle(
           'MetaMask Notification',
           windowHandles,
@@ -112,14 +104,14 @@ describe('Collectibles', function () {
           text: 'View full transaction details',
           css: '.confirm-approve-content__small-blue-text',
         });
-        const data = await driver.findElements(
+        const [func] = await driver.findElements(
           '.confirm-approve-content__data .confirm-approve-content__small-text',
         );
         assert.equal(
           await title.getText(),
           'Give permission to access your TestDappCollectibles (#1)?',
         );
-        assert.equal(await data[0].getText(), 'Function: Approve');
+        assert.equal(await func.getText(), 'Function: Approve');
 
         // Confirm approval
         await driver.clickElement({ text: 'Confirm', tag: 'button' });
@@ -138,7 +130,7 @@ describe('Collectibles', function () {
       },
     );
   });
-  it('should approve an address to transfer all NFTs', async function () {
+  it('should enable approval for a third party address to manage all NFTs', async function () {
     await withFixtures(
       {
         dapp: true,
@@ -154,17 +146,15 @@ describe('Collectibles', function () {
         await driver.fill('#password', 'correct horse battery staple');
         await driver.press('#password', driver.Key.ENTER);
 
-        // Click set approval for all
+        // Open Dapp and wait for deployed contract
         await driver.openNewPage(`http://127.0.0.1:8080/?contract=${contract}`);
-        await driver.waitForSelector({
+        await driver.findClickableElement('#deployButton');
-          css: '#collectiblesStatus',
+
-          text: 'Deployed',
+        // Enable Set approval for all
-        });
-        await driver.delay(veryLargeDelayMs);
         await driver.clickElement('#setApprovalForAllButton');
         await driver.waitUntilXWindowHandles(3);
         const windowHandles = await driver.getAllWindowHandles();
-        const extension = windowHandles[0];
+        const [extension] = windowHandles;
         await driver.switchToWindowWithTitle(
           'MetaMask Notification',
           windowHandles,
@@ -178,17 +168,90 @@ describe('Collectibles', function () {
           text: 'View full transaction details',
           css: '.confirm-approve-content__small-blue-text',
         });
-        const data = await driver.findElements(
+        const [func, params] = await driver.findElements(
           '.confirm-approve-content__data .confirm-approve-content__small-text',
         );
+        const proceedWithCautionIsDisplayed = await driver.isElementPresent(
+          '.dialog--error',
+        );
         assert.equal(
           await title.getText(),
           'Allow access to and transfer of all your TestDappCollectibles?',
         );
-        assert.equal(await data[0].getText(), 'Function: SetApprovalForAll');
+        assert.equal(await func.getText(), 'Function: SetApprovalForAll');
-        assert.equal(await data[1].getText(), 'Parameters: true');
+        assert.equal(await params.getText(), 'Parameters: true');
+        assert.equal(proceedWithCautionIsDisplayed, true);
 
-        // Confirmation set approval for all
+        // Confirm enabling set approval for all
+        await driver.clickElement({ text: 'Confirm', tag: 'button' });
+        await driver.waitUntilXWindowHandles(2);
+        await driver.switchToWindow(extension);
+        await driver.clickElement('[data-testid="home__activity-tab"]');
+        await driver.waitForSelector(
+          '.transaction-list__completed-transactions .transaction-list-item:nth-of-type(1)',
+          { timeout: 10000 },
+        );
+
+        // Verify transaction
+        const completedTx = await driver.findElement('.list-item__title');
+        const completedTxText = await completedTx.getText();
+        assert.equal(completedTxText, 'Approve Token with no spend limit');
+      },
+    );
+  });
+  it('should disable approval for a third party address to manage all NFTs', async function () {
+    await withFixtures(
+      {
+        dapp: true,
+        fixtures: 'connected-state',
+        ganacheOptions,
+        smartContract,
+        title: this.test.title,
+        failOnConsoleError: false,
+      },
+      async ({ driver, _, contractRegistry }) => {
+        const contract = contractRegistry.getContractAddress(smartContract);
+        await driver.navigate();
+        await driver.fill('#password', 'correct horse battery staple');
+        await driver.press('#password', driver.Key.ENTER);
+
+        // Open Dapp and wait for deployed contract
+        await driver.openNewPage(`http://127.0.0.1:8080/?contract=${contract}`);
+        await driver.findClickableElement('#deployButton');
+
+        // Disable Set approval for all
+        await driver.clickElement('#revokeButton');
+        await driver.waitUntilXWindowHandles(3);
+        const windowHandles = await driver.getAllWindowHandles();
+        const [extension] = windowHandles;
+        await driver.switchToWindowWithTitle(
+          'MetaMask Notification',
+          windowHandles,
+        );
+
+        // Verify dialog
+        const title = await driver.findElement(
+          '[data-testid="confirm-approve-title"]',
+        );
+        await driver.clickElement({
+          text: 'View full transaction details',
+          css: '.confirm-approve-content__small-blue-text',
+        });
+        const [func, params] = await driver.findElements(
+          '.confirm-approve-content__data .confirm-approve-content__small-text',
+        );
+        const proceedWithCautionIsDisplayed = await driver.isElementPresent(
+          '.dialog--error',
+        );
+        assert.equal(
+          await title.getText(),
+          'Revoke permission to access all of your TestDappCollectibles?',
+        );
+        assert.equal(await func.getText(), 'Function: SetApprovalForAll');
+        assert.equal(await params.getText(), 'Parameters: false');
+        assert.equal(proceedWithCautionIsDisplayed, false);
+
+        // Confirm disabling set approval for all
         await driver.clickElement({ text: 'Confirm', tag: 'button' });
         await driver.waitUntilXWindowHandles(2);
         await driver.switchToWindow(extension);

test/e2e/webdriver/driver.js

@@ -254,9 +254,9 @@ class Driver {
     assert.ok(!dataTab, 'Found element that should not be present');
   }
 
-  async isElementPresent(element) {
+  async isElementPresent(rawLocator) {
     try {
-      await this.findElement(element);
+      await this.findElement(rawLocator);
       return true;
     } catch (err) {
       return false;

yarn.lock

@@ -3538,10 +3538,10 @@
     semver "^7.3.7"
     ses "^0.15.17"
 
-"@metamask/test-dapp@^5.2.0":
+"@metamask/test-dapp@^5.2.1":
-  version "5.2.0"
+  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@metamask/test-dapp/-/test-dapp-5.2.0.tgz#ecae2525e7b4d5ef42b7f478b33e3a25152789f8"
+  resolved "https://registry.yarnpkg.com/@metamask/test-dapp/-/test-dapp-5.2.1.tgz#a7591393eec6d15f5e4bddee567018444db372ff"
-  integrity sha512-/1nUFm6kzYB0xigrLHc+yzkunnrUoqfnsiLs7eUD+Qfl2Qn5G6C9tIj9cgAx72lWVtqoo2vBTP+55ZW8lDroYw==
+  integrity sha512-p9Jt31RDAyVfzbNrPL3pFsYgFuren+saxSbeMlytU2LyKXkMIvxdpEYmyqWIvCoZvdBAc9LH/arXbeSSXJ+aMA==
 
 "@metamask/types@^1.1.0":
   version "1.1.0"