ERC1155 Import & Dapp interaction E2E tests (#17885)

.circleci/config.yml

@@ -177,6 +177,8 @@ workflows:
             - test-mozilla-lint-flask
             - test-e2e-chrome
             - test-e2e-firefox
+            - test-e2e-chrome-nft
+            - test-e2e-firefox-nft
             - test-e2e-chrome-snaps
             - test-e2e-firefox-snaps
             - test-storybook
@@ -817,7 +819,7 @@ jobs:
           destination: test-artifacts
       - store_test_results:
           path: test/test-results/e2e.xml
-          
+
   test-e2e-firefox-snaps:
     executor: node-browsers
     parallelism: 2

test/e2e/erc1155/import-erc1155.spec.js

@@ -0,0 +1,64 @@
+const { strict: assert } = require('assert');
+const { convertToHexValue, withFixtures } = require('../helpers');
+const { SMART_CONTRACTS } = require('../seeder/smart-contracts');
+const FixtureBuilder = require('../fixture-builder');
+
+describe('Import NFT', function () {
+  const smartContract = SMART_CONTRACTS.ERC1155;
+  const ganacheOptions = {
+    accounts: [
+      {
+        secretKey:
+          '0x7C9529A67102755B7E6102D6D950AC5D5863C98713805CEC576B945B15B71EAC',
+        balance: convertToHexValue(25000000000000000000),
+      },
+    ],
+  };
+
+  it('should be able to import an ERC1155 NFT that user owns', async function () {
+    await withFixtures(
+      {
+        dapp: true,
+        fixtures: new FixtureBuilder()
+          .withPermissionControllerConnectedToTestDapp()
+          .build(),
+        ganacheOptions,
+        smartContract,
+        title: this.test.title,
+      },
+      async ({ driver, _, contractRegistry }) => {
+        const contractAddress =
+          contractRegistry.getContractAddress(smartContract);
+        await driver.navigate();
+        await driver.fill('#password', 'correct horse battery staple');
+        await driver.press('#password', driver.Key.ENTER);
+
+        // After login, go to NFTs tab, open the import NFT/ERC1155 form
+        await driver.clickElement('[data-testid="home__nfts-tab"]');
+        await driver.clickElement({ text: 'Import NFTs', tag: 'a' });
+
+        // Enter a valid NFT that belongs to user and check success message appears
+        await driver.fill('[data-testid="address"]', contractAddress);
+        await driver.fill('[data-testid="token-id"]', '1');
+        await driver.clickElement({ text: 'Add', tag: 'button' });
+
+        const newNftNotification = await driver.findElement({
+          text: 'NFT was successfully added!',
+          tag: 'h6',
+        });
+        assert.equal(await newNftNotification.isDisplayed(), true);
+
+        // Check the imported ERC1155 and its image are displayed in the ERC1155 tab
+        const importedERC1155 = await driver.waitForSelector({
+          css: 'h5',
+          text: 'Rocks',
+        });
+        const importedERC1155Image = await driver.waitForSelector(
+          '[class="nfts-items__item-image"]',
+        );
+        assert.equal(await importedERC1155.isDisplayed(), true);
+        assert.equal(await importedERC1155Image.isDisplayed(), true);
+      },
+    );
+  });
+});

test/e2e/run-all.js

@@ -72,7 +72,10 @@ async function main() {
     testPaths = await getTestPathsForTestDir(testDir);
   } else if (nft) {
     const testDir = path.join(__dirname, 'nft');
-    testPaths = await getTestPathsForTestDir(testDir);
+    testPaths = [
+      ...(await getTestPathsForTestDir(testDir)),
+      ...(await getTestPathsForTestDir(path.join(__dirname, 'erc1155'))),
+    ];
   } else {
     const testDir = path.join(__dirname, 'tests');
     testPaths = [

test/e2e/seeder/ganache-seeder.js

@@ -50,6 +50,16 @@ class GanacheSeeder {
       });
       await transaction.wait();
     }
+
+    if (contractName === SMART_CONTRACTS.ERC1155) {
+      const transaction = await contract.mintBatch(
+        fromAddress,
+        [1, 2, 3],
+        [1, 1, 100000000000000],
+        '0x',
+      );
+      await transaction.wait();
+    }
     this.storeSmartContractAddress(contractName, contract.address);
   }
 

test/e2e/seeder/smart-contracts.js

@@ -5,6 +5,8 @@ const {
   piggybankAbi,
   collectiblesAbi,
   collectiblesBytecode,
+  erc1155Abi,
+  erc1155Bytecode,
   failingContractAbi,
   failingContractBytecode,
   multisigAbi,
@@ -25,6 +27,11 @@ const nftsFactory = {
   abi: collectiblesAbi,
 };
 
+const erc1155Factory = {
+  bytecode: erc1155Bytecode,
+  abi: erc1155Abi,
+};
+
 const piggybankFactory = {
   bytecode: piggybankBytecode,
   abi: piggybankAbi,
@@ -43,6 +50,7 @@ const multisigFactory = {
 const SMART_CONTRACTS = {
   HST: 'hst',
   NFTS: 'nfts',
+  ERC1155: 'erc1155',
   PIGGYBANK: 'piggybank',
   FAILING: 'failing',
   MULTISIG: 'multisig',
@@ -51,6 +59,7 @@ const SMART_CONTRACTS = {
 const contractConfiguration = {
   [SMART_CONTRACTS.HST]: hstFactory,
   [SMART_CONTRACTS.NFTS]: nftsFactory,
+  [SMART_CONTRACTS.ERC1155]: erc1155Factory,
   [SMART_CONTRACTS.PIGGYBANK]: piggybankFactory,
   [SMART_CONTRACTS.FAILING]: failingContract,
   [SMART_CONTRACTS.MULTISIG]: multisigFactory,

test/e2e/tests/erc1155.spec.js

@@ -0,0 +1,109 @@
+const { convertToHexValue, withFixtures } = require('../helpers');
+const { SMART_CONTRACTS } = require('../seeder/smart-contracts');
+const FixtureBuilder = require('../fixture-builder');
+
+describe('ERC1155', function () {
+  const smartContract = SMART_CONTRACTS.ERC1155;
+  const ganacheOptions = {
+    accounts: [
+      {
+        secretKey:
+          '0x7C9529A67102755B7E6102D6D950AC5D5863C98713805CEC576B945B15B71EAC',
+        balance: convertToHexValue(25000000000000000000),
+      },
+    ],
+  };
+
+  it('should mint', async function () {
+    await withFixtures(
+      {
+        dapp: true,
+        fixtures: new FixtureBuilder()
+          .withPermissionControllerConnectedToTestDapp()
+          .build(),
+        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');
+
+        // Mint
+        await driver.fill('#batchMintTokenIds', '1, 2, 3');
+        await driver.fill('#batchMintIdAmounts', '1, 1, 1000000000000000');
+        await driver.clickElement('#batchMintButton');
+
+        // Notification
+        await driver.waitUntilXWindowHandles(3);
+        const windowHandles = await driver.getAllWindowHandles();
+        const [extension] = windowHandles;
+        await driver.switchToWindowWithTitle(
+          'MetaMask Notification',
+          windowHandles,
+        );
+
+        // Confirm Mint
+        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 },
+        );
+      },
+    );
+  });
+
+  it('should batch transfers', async function () {
+    await withFixtures(
+      {
+        dapp: true,
+        fixtures: new FixtureBuilder()
+          .withPermissionControllerConnectedToTestDapp()
+          .build(),
+        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);
+
+        await driver.openNewPage(`http://127.0.0.1:8080/?contract=${contract}`);
+
+        await driver.fill('#batchTransferTokenIds', '1, 2, 3');
+        await driver.fill('#batchTransferTokenAmounts', '1, 1, 1000000000000');
+        await driver.clickElement('#batchTransferFromButton');
+
+        await driver.waitUntilXWindowHandles(3);
+        const windowHandles = await driver.getAllWindowHandles();
+        const [extension] = windowHandles;
+        await driver.switchToWindowWithTitle(
+          'MetaMask Notification',
+          windowHandles,
+        );
+
+        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 },
+        );
+      },
+    );
+  });
+});