Refactoring threebox.spec.js to use fixtures (#10849)

test/e2e/fixtures/threebox-enabled/state.json

@@ -0,0 +1,122 @@
+{
+  "data": {
+    "AppStateController": {
+      "swapsWelcomeMessageHasBeenShown": true,
+      "connectedStatusPopoverHasBeenShown": false
+    },
+    "CachedBalancesController": {
+      "cachedBalances": {
+        "0x539": {
+          "0x5cfe73b6021e818b776b421b1c4db2474086a7e1": "0x15af1d78b58c40000"
+        }
+      }
+    },
+    "CurrencyController": {
+      "conversionDate": 1617897791.928,
+      "conversionRate": 2072.49,
+      "currentCurrency": "usd",
+      "nativeCurrency": "ETH",
+      "usdConversionRate": 2072.49
+    },
+    "IncomingTransactionsController": {
+      "incomingTransactions": {},
+      "incomingTxLastFetchedBlockByChainId": {
+        "0x5": null,
+        "0x2a": null,
+        "0x1": null,
+        "0x4": 5570536
+      }
+    },
+    "KeyringController": {
+      "vault": "{\"data\":\"s6TpYjlUNsn7ifhEFTkuDGBUM1GyOlPrim7JSjtfIxgTt8/6MiXgiR/CtFfR4dWW2xhq85/NGIBYEeWrZThGdKGarBzeIqBfLFhw9n509jprzJ0zc2Rf+9HVFGLw+xxC4xPxgCS0IIWeAJQ+XtGcHmn0UZXriXm8Ja4kdlow6SWinB7sr/WM3R0+frYs4WgllkwggDf2/Tv6VHygvLnhtzp6hIJFyTjh+l/KnyJTyZW1TkZhDaNDzX3SCOHT\",\"iv\":\"FbeHDAW5afeWNORfNJBR0Q==\",\"salt\":\"TxZ+WbCW6891C9LK/hbMAoUsSEW1E8pyGLVBU6x5KR8=\"}"
+    },
+    "NetworkController": {
+      "provider": {
+        "nickname": "Localhost 8545",
+        "rpcUrl": "http://localhost:8545",
+        "chainId": "0x539",
+        "ticker": "ETH",
+        "type": "rpc"
+      },
+      "previousProviderStore": {
+        "nickname": "Localhost 8545",
+        "rpcUrl": "http://localhost:8545",
+        "chainId": "0x539",
+        "ticker": "ETH",
+        "type": "rpc"
+      },
+      "network": "1337"
+    },
+    "OnboardingController": {
+      "onboardingTabs": {},
+      "seedPhraseBackedUp": true
+    },
+    "PreferencesController": {
+      "frequentRpcListDetail": [
+        {
+          "rpcUrl": "http://localhost:8545",
+          "chainId": "0x539",
+          "ticker": "ETH",
+          "nickname": "Localhost 8545",
+          "rpcPrefs": {}
+        }
+      ],
+      "accountTokens": {
+        "0x5cfe73b6021e818b776b421b1c4db2474086a7e1": {
+          "0x4": [],
+          "0x3": []
+        }
+      },
+      "accountHiddenTokens": {},
+      "assetImages": {},
+      "tokens": [],
+      "hiddenTokens": [],
+      "suggestedTokens": {},
+      "useBlockie": true,
+      "useNonceField": false,
+      "usePhishDetect": true,
+      "featureFlags": {
+        "showIncomingTransactions": true,
+        "transactionTime": false
+      },
+      "knownMethodData": {},
+      "firstTimeFlowType": "create",
+      "currentLocale": "en",
+      "identities": {
+        "0x5cfe73b6021e818b776b421b1c4db2474086a7e1": {
+          "address": "0x5cfe73b6021e818b776b421b1c4db2474086a7e1",
+          "name": "Account 1"
+        }
+      },
+      "lostIdentities": {},
+      "forgottenPassword": false,
+      "preferences": {
+        "useNativeCurrencyAsPrimaryCurrency": true
+      },
+      "completedOnboarding": true,
+      "ipfsGateway": "dweb.link",
+      "selectedAddress": "0x5cfe73b6021e818b776b421b1c4db2474086a7e1"
+    },
+    "config": {},
+    "firstTimeInfo": {
+      "date": 1575697234195,
+      "version": "7.7.0"
+    },
+    "MetaMetricsController": {
+      "metaMetricsId": null,
+      "participateInMetaMetrics": false,
+      "metaMetricsSendCount": 0
+    },
+    "ThreeBoxController": {
+      "threeBoxSyncingAllowed": true,
+      "showRestorePrompt": true,
+      "threeBoxLastUpdated": 0,
+      "threeBoxAddress": "0x64480aa2768ef12f3f19c5a01206ceb0f82d06b9",
+      "threeBoxSynced": true,
+      "threeBoxDisabled": false
+    }
+  },
+  "meta": {
+    "version": 57
+  }
+}

test/e2e/mock-3box/threebox-mock-server.js

@@ -0,0 +1,57 @@
+const http = require('http');
+
+const PORT = 8889;
+
+class ThreeboxMockServer {
+  constructor() {
+    this.server = http.createServer(this.requestHandler);
+    this.database = {};
+  }
+
+  async start() {
+    return new Promise((resolve, reject) => {
+      this.server = this.server.listen(PORT);
+      this.server.once('error', reject);
+      this.server.once('listening', resolve);
+    });
+  }
+
+  async stop() {
+    if (!this.server) {
+      return;
+    }
+
+    await new Promise((resolve, reject) => {
+      this.server.close();
+      this.server.once('error', reject);
+      this.server.once('close', resolve);
+    });
+  }
+
+  requestHandler = (request, response) => {
+    response.setHeader('Content-Type', 'application/json');
+    if (request.method === 'POST') {
+      let body = '';
+      request.on('data', (chunk) => {
+        body += chunk.toString(); // convert Buffer to string
+      });
+      request.on('end', () => {
+        const { key, data } = JSON.parse(body);
+        this.database[key] = data;
+        response.setHeader('Access-Control-Allow-Headers', '*');
+        response.end('ok');
+      });
+    } else if (request.method === 'GET') {
+      const key = new URL(request.url, 'https://example.org/').searchParams.get(
+        'key',
+      );
+
+      response.setHeader('Access-Control-Allow-Headers', '*');
+      response.end(JSON.stringify(this.database[key] || ''));
+    } else {
+      response.end('unknown request');
+    }
+  };
+}
+
+module.exports = ThreeboxMockServer;

test/e2e/run-all.sh

@@ -55,10 +55,3 @@ retry concurrently --kill-others \
   'yarn sendwithprivatedapp' \
   'mocha test/e2e/incremental-security.spec'
 
-retry concurrently --kill-others \
-  --names '3box,dapp,e2e' \
-  --prefix '[{time}][{name}]' \
-  --success first \
-  'node test/e2e/mock-3box/server.js' \
-  'yarn dapp' \
-  'mocha test/e2e/threebox.spec'

test/e2e/tests/threebox.spec.js

@@ -0,0 +1,100 @@
+const { strict: assert } = require('assert');
+const { By, Key } = require('selenium-webdriver');
+const { withFixtures, largeDelayMs } = require('../helpers');
+const ThreeboxMockServer = require('../mock-3box/threebox-mock-server');
+
+describe('Threebox', function () {
+  const ganacheOptions = {
+    accounts: [
+      {
+        secretKey:
+          '0x7C9529A67102755B7E6102D6D950AC5D5863C98713805CEC576B945B15B71EAC',
+        balance: 25000000000000000000,
+      },
+    ],
+  };
+  let threeboxServer;
+  before(async function () {
+    threeboxServer = new ThreeboxMockServer();
+    await threeboxServer.start();
+  });
+  after(async function () {
+    await threeboxServer.stop();
+  });
+  it('Set up data to be restored by 3box', async function () {
+    await withFixtures(
+      {
+        fixtures: 'imported-account',
+        ganacheOptions,
+        title: this.test.title,
+      },
+      async ({ driver }) => {
+        await driver.navigate();
+        const passwordField = await driver.findElement(By.css('#password'));
+        await passwordField.sendKeys('correct horse battery staple');
+        await passwordField.sendKeys(Key.ENTER);
+
+        // turns on threebox syncing
+        await driver.clickElement('.account-menu__icon');
+        await driver.clickElement({ text: 'Settings', tag: 'div' });
+
+        // turns on threebox syncing
+        await driver.clickElement({ text: 'Advanced', tag: 'div' });
+        await driver.clickElement(
+          '[data-testid="advanced-setting-3box"] .toggle-button div',
+        );
+
+        // updates settings and address book
+        // navigates to General settings
+        await driver.clickElement({ text: 'General', tag: 'div' });
+
+        // turns on use of blockies
+        await driver.clickElement('.toggle-button > div');
+
+        // adds an address to the contact list
+        await driver.clickElement({ text: 'Contacts', tag: 'div' });
+
+        await driver.clickElement('.address-book-add-button__button');
+        const addAddressInputs = await driver.findElements('input');
+        await addAddressInputs[0].sendKeys('Test User Name 11');
+        await addAddressInputs[1].sendKeys(
+          '0x2f318C334780961FB129D2a6c30D0763d9a5C970',
+        );
+        await driver.delay(largeDelayMs * 2);
+        await driver.clickElement({ text: 'Save', tag: 'button' });
+        await driver.findElement({ text: 'Test User Name 11', tag: 'div' });
+      },
+    );
+  });
+  it('Restore from 3box', async function () {
+    await withFixtures(
+      {
+        fixtures: 'threebox-enabled',
+        ganacheOptions,
+        title: this.test.title,
+      },
+      async ({ driver }) => {
+        await driver.navigate();
+        const passwordField = await driver.findElement(By.css('#password'));
+        await passwordField.sendKeys('correct horse battery staple');
+        await passwordField.sendKeys(Key.ENTER);
+
+        // confirms the 3box restore notification
+        await driver.clickElement('.home-notification__accept-button');
+
+        // goes to the settings screen
+        await driver.clickElement('.account-menu__icon');
+        await driver.clickElement({ text: 'Settings', tag: 'div' });
+
+        // finds the blockies toggle turned on
+        const toggleLabel = await driver.findElement('.toggle-button__status');
+        const toggleLabelText = await toggleLabel.getText();
+        assert.equal(toggleLabelText, 'ON');
+
+        // finds the restored address in the contact list
+        await driver.clickElement({ text: 'Contacts', tag: 'div' });
+        await driver.findElement({ text: 'Test User Name 11', tag: 'div' });
+      },
+    );
+  });
+});