[greenboard] Adds Deposit scenario

packages/greenboard/tests/deposit.spec.ts

@@ -0,0 +1,47 @@
+import {
+  ACCOUNT_BALANCE_SELECTORS,
+  LAYOUT_HEADER_SELECTORS
+} from "../utils/counterfactual-wallet-selectors";
+import { TestBrowser } from "../utils/test-browser";
+import { CounterfactualScreenName, MetamaskFlowType } from "../utils/types";
+
+jest.setTimeout(100000);
+
+let browser: TestBrowser;
+
+beforeAll(async () => {
+  browser = new TestBrowser();
+  await browser.start();
+  await browser.prepare(MetamaskFlowType.ReturningUser);
+});
+
+it("logs in with an existing account, goes to /balance, makes a deposit", async () => {
+  const {
+    loginButton,
+    balanceContainer,
+    balanceText
+  } = LAYOUT_HEADER_SELECTORS;
+  const { depositAmountInput } = ACCOUNT_BALANCE_SELECTORS;
+
+  await browser.injectIntoMetamaskLocalStorage();
+  await browser.switchToWallet();
+  await browser.clickOnElement(loginButton);
+  await browser.signTransaction();
+  await browser.waitForLoginToBeFinished();
+  await browser.clickOnElement(balanceContainer);
+  await browser.waitForElement(depositAmountInput);
+  await browser.fillAccountDepositFormAndSubmit();
+
+  expect(await browser.getCurrentScreenName()).toEqual(
+    CounterfactualScreenName.Channels
+  );
+  expect(await browser.getTextFromElement(balanceText)).toEqual("0.2 ETH");
+});
+
+afterAll(async () => {
+  // We collect data again so the Withdraw scenario has a coherent
+  // Node state for an account with a balance of 0.2 ETH.
+  await browser.collectMetamaskLocalStorage();
+
+  await browser.closeBrowser();
+});

packages/greenboard/utils/counterfactual-wallet-selectors.ts

@@ -12,7 +12,7 @@ export const ACCOUNT_REGISTRATION_SELECTORS = {
 
 export const ACCOUNT_DEPOSIT_SELECTORS = {
   formTitle: By.css(".widget-header"),
-  amountInput: By.css("[data-test-selector='amount-input']"),
+  amountInput: By.css("[data-test-selector='deposit-amount-input']"),
   proceedButton: By.css("[data-test-selector='deposit-button']")
 };
 
@@ -21,5 +21,17 @@ export const LAYOUT_HEADER_SELECTORS = {
   logoContainer: By.css(".header > .header-content > .logo-container"),
   accountContainer: By.css("header > .header-content .account-container"),
   userNameText: By.css("[data-test-selector='info-user'] .info-content"),
+  balanceContainer: By.css("[data-test-selector='info-balance']"),
   balanceText: By.css("[data-test-selector='info-balance'] .info-content")
 };
+
+export const ACCOUNT_BALANCE_SELECTORS = {
+  depositAmountInput: By.css("[data-test-selector='deposit-amount-input']"),
+  depositProceedButton: By.css("[data-test-selector='deposit-button']"),
+  withdrawAmountInput: By.css("[data-test-selector='withdraw-amount-input']"),
+  withdrawProceedButton: By.css("[data-test-selector='withdraw-button']")
+};
+
+export const STATE_CHANNELS_SELECTORS = {
+  channelTreesContainer: By.css(".channel-trees")
+};

packages/greenboard/utils/test-browser.ts

@@ -3,6 +3,7 @@ require("chromedriver");
 import { resolve } from "path";
 import {
   Builder,
+  Key,
   Locator,
   until,
   WebDriver,
@@ -17,7 +18,8 @@ import {
 import {
   ACCOUNT_DEPOSIT_SELECTORS,
   ACCOUNT_REGISTRATION_SELECTORS,
-  LAYOUT_HEADER_SELECTORS
+  LAYOUT_HEADER_SELECTORS,
+  STATE_CHANNELS_SELECTORS
 } from "./counterfactual-wallet-selectors";
 import {
   DEPOSIT_SELECTORS,
@@ -44,6 +46,15 @@ import {
 
 export const EXTENSION_INSPECTOR = "chrome://inspect/#extensions";
 export const LOCATOR_TIMEOUT = 10000;
+export const DEPOSIT_TIMEOUT = 90000;
+
+export const METAMASK_ETH_ADDRESS =
+  "0x212C90fdF90BbD5E9b352b9d2B086f2666CFEED6";
+export const METAMASK_MNEMONIC =
+  "mistake cash photo pond little nerve neutral adapt item kite radar tray";
+export const METAMASK_PASSWORD = "The Cake Is A Lie";
+export const COUNTERFACTUAL_USER_USERNAME = "teapot";
+export const COUNTERFACTUAL_USER_EMAIL_ADDRESS = "[email protected]";
 
 export const METAMASK_ETH_ADDRESS =
   "0x212C90fdF90BbD5E9b352b9d2B086f2666CFEED6";
@@ -471,14 +482,20 @@ export class TestBrowser {
    * @todo Add check for texts "Transferring funds", "Collateralizing deposit".
    */
   async fillAccountDepositFormAndSubmit() {
-    const { formTitle, proceedButton } = ACCOUNT_DEPOSIT_SELECTORS;
+    const { proceedButton } = ACCOUNT_DEPOSIT_SELECTORS;
     const { logoContainer } = LAYOUT_HEADER_SELECTORS;
+    const { channelTreesContainer } = STATE_CHANNELS_SELECTORS;
 
-    await this.waitForElementToHaveText(formTitle, "Fund your account");
     await this.clickOnElement(proceedButton);
     await this.waitForElementToHaveText(proceedButton, "Check your wallet");
     await this.confirmDeposit();
-    await this.waitForElement(logoContainer, 90000);
+    await this.waitForElement(logoContainer, DEPOSIT_TIMEOUT);
+
+    const currentScreen = await this.getCurrentScreenName();
+
+    if (currentScreen === CounterfactualScreenName.Balance) {
+      await this.waitForElement(channelTreesContainer, DEPOSIT_TIMEOUT);
+    }
   }
 
   /**
@@ -505,6 +522,10 @@ export class TestBrowser {
       return CounterfactualScreenName.Channels;
     }
 
+    if (url.includes("balance")) {
+      return CounterfactualScreenName.Balance;
+    }
+
     return CounterfactualScreenName.Welcome;
   }
 
@@ -608,9 +629,23 @@ export class TestBrowser {
    * @param selector
    */
   async typeOnInput(selector: Locator, value: string) {
+    await this.clearInput(selector);
     await this.getElement(selector).sendKeys(value);
   }
 
+  /**
+   * Clears an input's value by selecting all text and pressing
+   * the BACKSPACE key.
+   *
+   * @param selector
+   */
+  async clearInput(selector: Locator) {
+    await this.getElement(selector).sendKeys(
+      Key.chord(Key.CONTROL, "A"),
+      Key.BACK_SPACE
+    );
+  }
+
   /**
    * Returns the text contained in an element found by the selector.
    *

packages/greenboard/utils/test-sequencer.js

@@ -5,7 +5,11 @@
  * Keep in mind that if you create a new scenario, you'll need to include it
  * on this list, otherwise it won't be executed.
  */
-const testSequence = ["tests/onboarding.spec.ts", "tests/login.spec.ts"];
+const testSequence = [
+  "tests/onboarding.spec.ts",
+  "tests/login.spec.ts",
+  "tests/deposit.spec.ts"
+];
 
 // Import the default test sequencer.
 const Sequencer = require("@jest/test-sequencer").default;
@@ -15,6 +19,7 @@ module.exports = class extends Sequencer {
    * Sorts the tests by order of appearance in the `testSequence` array.
    */
   sort(tests) {
+    // TODO: Add the ability to run tests in dependency order.
     return testSequence.map(testName =>
       tests.find(test => test.path.endsWith(testName))
     );

packages/greenboard/utils/types.ts

@@ -31,7 +31,8 @@ export const enum CounterfactualScreenName {
   Welcome = "welcome",
   OnboardingRegistration = "onboarding:register",
   OnboardingDeposit = "onboarding:deposit",
-  Channels = "channels"
+  Channels = "channels",
+  Balance = "balance"
 }
 
 export type StringHashMap = { [key: string]: string };

packages/wallet-ui/src/pages/account-deposit/AccountDeposit.tsx

@@ -130,7 +130,7 @@ export class AccountDeposit extends React.Component<
             className="input--balance"
             type="number"
             units={nodeAddresses}
-            name="amount"
+            name="deposit-amount"
             min={0.02}
             max={Number(ethereumBalance)}
             value={formatEther(amount)}

packages/wallet-ui/src/pages/account-withdraw/AccountWithdraw.tsx

@@ -127,7 +127,7 @@ export class AccountWithdraw extends React.Component<
             className="input--balance"
             type="number"
             units={nodeAddresses}
-            name="amount"
+            name="withdraw-amount"
             min={0.02}
             max={Number(ethereumBalance)}
             value={formatEther(amount)}
@@ -139,7 +139,7 @@ export class AccountWithdraw extends React.Component<
             <div className="error">Ups! something broke</div>
           ) : null}
           <FormButton
-            name="deposit"
+            name="withdraw"
             type="button"
             className="button"
             spinner={loading}