adding test id's and more pages

nym-wallet/src/pages/welcome/pages/existing-account.tsx

@@ -15,14 +15,14 @@ export const ExistingAccount: React.FC<{ page: 'existing account'; onPrev: () =>
   return (
     <Stack spacing={2} sx={{ width: 400 }} alignItems="center">
       <Subtitle subtitle="Enter your mnemonic from existing wallet" />
-      <TextField value={mnemonic} onChange={(e) => setMnemonic(e.target.value)} multiline rows={5} fullWidth />
+      <TextField value={mnemonic} onChange={(e) => setMnemonic(e.target.value)} data-testid="enterMnemonic" multiline rows={5} fullWidth />
       {error && (
         <Alert severity="error" variant="outlined" data-testid="error" sx={{ color: 'error.light', width: '100%' }}>
           {error}
         </Alert>
       )}
 
-      <Button variant="contained" size="large" fullWidth onClick={handleSignIn}>
+      <Button variant="contained" data-testid="signIn" size="large" fullWidth onClick={handleSignIn}>
         Sign in
       </Button>
       <Button
@@ -32,6 +32,7 @@ export const ExistingAccount: React.FC<{ page: 'existing account'; onPrev: () =>
         onClick={onPrev}
         fullWidth
         sx={{ color: 'common.white', border: '1px solid white', '&:hover': { border: '1px solid white' } }}
+        data-testid="backButton"
       >
         Back
       </Button>

nym-wallet/src/pages/welcome/pages/welcome-content.tsx

@@ -19,6 +19,7 @@ export const WelcomeContent: React.FC<{
           disableElevation
           size="large"
           onClick={onCreateAccountComplete}
+          data-testid="createAccount"
         >
           Create Account
         </Button>
@@ -33,6 +34,7 @@ export const WelcomeContent: React.FC<{
           }}
           onClick={onUseExisting}
           disableRipple
+          data-testid="signIn"
         >
           Sign in
         </Button>

nym-wallet/wallet-ui-test/.gitignore

@@ -0,0 +1,5 @@
+reports
+allure-results
+node_modules
+.vscode
+.idea

nym-wallet/wallet-ui-test/.prettierignore

@@ -0,0 +1,2 @@
+build
+coverage

nym-wallet/wallet-ui-test/.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 120,
+  "tabWidth": 2,
+  "semi": false
+}

nym-wallet/wallet-ui-test/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "wallet-ui-test",
+  "version": "1.0.0",
+  "description": "wallet ui tests for the nym wallet",
+  "scripts": {
+    "test": "wdio run wdio.conf.ts"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "-": "^0.0.1",
+    "@wdio/cli": "^7.16.16",
+    "save-dev": "^0.0.1-security",
+    "ts-node": "^10.6.0"
+  },
+  "devDependencies": {
+    "@wdio/local-runner": "^7.16.16",
+    "@wdio/mocha-framework": "^7.16.15",
+    "@wdio/spec-reporter": "^7.16.14",
+    "prettier": "2.5.1",
+    "typescript": "^4.6.2"
+  }
+}

nym-wallet/wallet-ui-test/test/pageobjects/wallet.login.ts

@@ -0,0 +1,45 @@
+class WalletLogin {
+  get errorValidation(): Promise<WebdriverIO.Element> {
+    return $("[data-testid='error']")
+  }
+
+  get signInAccount(): Promise<WebdriverIO.Element> {
+    return $("[data-testid='signIn']")
+  }
+
+  get createAccount(): Promise<WebdriverIO.Element> {
+    return $("[data-testid='createAccount']")
+  }
+
+  get getMnemonicPhrase(): Promise<WebdriverIO.Element> {
+    return $("[data-testid='mnemonic-phrase']")
+  }
+
+  get signInButtonReturn(): Promise<WebdriverIO.Element> {
+    return $("[data-testid='sign-in-button']")
+  }
+
+  get backButton(): Promise<WebdriverIO.Element> {
+    return $("[data-testid='backButton']")
+  }
+
+  get mnemonic(): Promise<WebdriverIO.Element> {
+    return $('#mui-1')
+  }
+
+  get selectTextArea(): Promise<WebdriverIO.Element> {
+    //bit nasty using the xpath - but it's not liking the elements
+    return $("//*[@id='mui-1']")
+  }
+
+  get accountBalance(): Promise<WebdriverIO.Element> {
+    //bit nasty using the xpath - but it's not liking the elements
+    return $("[data-testid='refresh-success']")
+  }
+
+  enterMnemonic = async (mnemonic: string): Promise<void> => {
+    await (await this.selectTextArea).click()
+    await (await this.mnemonic).addValue(mnemonic)
+  }
+}
+export default new WalletLogin()

nym-wallet/wallet-ui-test/test/pageobjects/wallet.receive.ts

@@ -0,0 +1,39 @@
+class WalletReceive {
+  get receiveNymHeader(): Promise<WebdriverIO.Element> {
+    return $(
+      '#root > div > div:nth-child(2) > div:nth-child(2) > div > div > div > div.MuiCardHeader-root > div > span',
+    )
+  }
+  get receiveNymText(): Promise<WebdriverIO.Element> {
+    return $("[data-testid='receive-nym']")
+  }
+  get walletAddress(): Promise<WebdriverIO.Element> {
+    return $("[data-testid='client-address']")
+  }
+  get copyButton(): Promise<WebdriverIO.Element> {
+    return $("[data-testid='copy-button']")
+  }
+  get qrCode(): Promise<WebdriverIO.Element> {
+    return $("[data-testid='qr-code']")
+  }
+
+  WaitForButtonChangeOnCopy = async (): Promise<void> => {
+    await (await this.copyButton).click()
+
+    await (await this.copyButton).waitForDisplayed({ timeout: 1500 })
+
+    await (
+      await this.copyButton
+    ).waitUntil(
+      async function () {
+        return (await this.getText()) === 'COPIED'
+      },
+      {
+        timeout: 1500,
+        timeoutMsg: 'expected text to be different after 1.5s',
+      },
+    )
+  }
+}
+
+export default new WalletReceive()

nym-wallet/wallet-ui-test/test/pageobjects/wallet.send.ts

@@ -0,0 +1,52 @@
+class WalletSend {
+  get fromAddress() {
+    return $('#from')
+  }
+  get toAddress(): Promise<WebdriverIO.Element> {
+    return $('#to')
+  }
+  get amount(): Promise<WebdriverIO.Element> {
+    return $('#amount')
+  }
+  get nextButton(): Promise<WebdriverIO.Element> {
+    return $("[data-testid='button")
+  }
+  get sendHeader(): Promise<WebdriverIO.Element> {
+    return $("[data-testid='Send punk']")
+  }
+  get accountBalance(): Promise<WebdriverIO.Element> {
+    return $("[data-testid='account-balance']")
+  }
+  get amountReviewAndSend(): Promise<WebdriverIO.Element> {
+    return $("[data-testid='Amount']")
+  }
+  get toAddressReviewAndSend(): Promise<WebdriverIO.Element> {
+    return $("[data-testid='To']")
+  }
+  get fromAddressReviewAndSend(): Promise<WebdriverIO.Element> {
+    return $("[data-testid='From']")
+  }
+  get transferFeeAmount(): Promise<WebdriverIO.Element> {
+    return $("[data-testid='Transfer fee']")
+  }
+  get reviewAndSendBackButton(): Promise<WebdriverIO.Element> {
+    return $("[data-testid='back-button']")
+  }
+  get sendButton(): Promise<WebdriverIO.Element> {
+    return $("[data-testid='button']")
+  }
+  get transactionComplete(): Promise<WebdriverIO.Element> {
+    return $("[data-testid='transaction-complete']")
+  }
+  get transactionCompleteRecipient(): Promise<WebdriverIO.Element> {
+    return $("[data-testid='to-address']")
+  }
+  get transactionCompleteAmount(): Promise<WebdriverIO.Element> {
+    return $("[data-testid='send-amount']")
+  }
+  get finishButton(): Promise<WebdriverIO.Element> {
+    return $("[data-testid='button']")
+  }
+}
+
+export default new WalletSend()

nym-wallet/wallet-ui-test/test/pageobjects/wallet.undelegate.ts

@@ -0,0 +1,22 @@
+class WallentUndelegate {
+  get transactionFee(): Promise<WebdriverIO.Element> {
+    return $("[data-testid='fee-amount']")
+  }
+  get mixNodeRadioButton(): Promise<WebdriverIO.Element> {
+    return $("[value='mixnode']")
+  }
+  get gatewayRadionButton(): Promise<WebdriverIO.Element> {
+    return $("[value='gateway']")
+  }
+  get nodeIdentity(): Promise<WebdriverIO.Element> {
+    return $('#mui-55011')
+  }
+  get identityHelper(): Promise<WebdriverIO.Element> {
+    return $('#identity-helper-text')
+  }
+  get delegateButton(): Promise<WebdriverIO.Element> {
+    return $("[data-testid='submit-button']")
+  }
+}
+
+export default new WallentUndelegate()

nym-wallet/wallet-ui-test/test/specs/login.test.ts

@@ -0,0 +1,44 @@
+import walletLogin from '../pageobjects/wallet.login'
+
+describe('Wallet login functionality', () => {
+  it.skip('submitting with no mnemonic throws error', async () => {
+    //sign into account
+    await (await walletLogin.signInAccount).click()
+
+    //submit sign in with no mnemominc
+    await (await walletLogin.signInAccount).click()
+
+    await (await walletLogin.errorValidation).waitForDisplayed({ timeout: 1500 })
+    let getErrorWarning = await (await walletLogin.errorValidation).getText()
+
+    await (await walletLogin.backButton).click()
+
+    //assert that the error was thrown
+    const errorText = 'mnemonic has a word count that is not a multiple of 6: 0'
+    expect(getErrorWarning).toStrictEqual(errorText)
+  })
+
+  it('should login with valid credentials', async () => {
+    //create account
+    await (await walletLogin.createAccount).click()
+
+    //allow time for the api to create the wallet address
+    await browser.pause(500)
+    await (await walletLogin.getMnemonicPhrase).waitForDisplayed({ timeout: 1500 })
+
+    //retrieve mnemonic - copy
+    let mnemonicPhrase = await (await walletLogin.getMnemonicPhrase).getText()
+
+    await (await walletLogin.signInButtonReturn).click()
+
+    //input new wallet mnemonic and be inside the app
+    await walletLogin.enterMnemonic(mnemonicPhrase)
+
+    await (await walletLogin.signInAccount).click()
+
+    await (await walletLogin.accountBalance).waitForDisplayed({ timeout: 1500 })
+    let balance = await (await walletLogin.accountBalance).getText()
+    //new accounts will always default to mainnet
+    expect(balance).toStrictEqual('0 NYM')
+  })
+})

nym-wallet/wallet-ui-test/test/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "types": ["node", "webdriverio/async", "@wdio/mocha-framework", "expect-webdriverio"],
+    "target": "ES5"
+  }
+}

nym-wallet/wallet-ui-test/wdio.conf.ts

@@ -0,0 +1,82 @@
+const os = require('os')
+const path = require('path')
+const { spawn, spawnSync } = require('child_process')
+//insert path to binary
+const nym_path = '../target/debug/nym_wallet'
+
+let tauriDriver: any
+
+exports.config = {
+  autoCompileOpts: {
+    autoCompile: true,
+    tsNodeOpts: {
+      transpileOnly: true,
+      project: 'test/tsconfig.json',
+    },
+  },
+  specs: ['./test/specs/**/*.ts'],
+  // Patterns to exclude.
+  exclude: [
+    // 'path/to/excluded/files'
+  ],
+  maxInstances: 1,
+  capabilities: [
+    {
+      maxInstances: 1,
+      'tauri:options': {
+        application: nym_path,
+      },
+    },
+  ],
+  //
+  // ===================
+  // Test Configurations
+  // ===================
+  // Define all options that are relevant for the WebdriverIO instance here
+  //
+  // Level of logging verbosity: trace | debug | info | warn | error | silent
+  logLevel: 'info',
+  bail: 0,
+  framework: 'mocha',
+  reporters: ['spec'],
+  mochaOpts: {
+    ui: 'bdd',
+    timeout: 60000,
+  },
+  // ===================
+  // Test Reporters
+  // ===================
+  // reporters: [
+  //     [
+  //         "allure",
+  //         {
+  //             outputDir: "allure-results",
+  //             disableWebdriverStepsReporting: true,
+  //             disableWebdriverScreenshotsReporting: true,
+  //         },
+  //     ],
+  // ],
+
+  // this is documentented in the readme - you will need to build the project first
+  // ensure the rust project is built since we expect this binary to exist for the webdriver sessions
+  //onPrepare: () => spawnSync("cargo", ["build", "--release"]),
+
+  // ensure we are running `tauri-driver` before the session starts so that we can proxy the webdriver requests
+  beforeSession: () =>
+    (tauriDriver = spawn(path.resolve(os.homedir(), '.cargo', 'bin', 'tauri-driver'), [], {
+      stdio: [null, process.stdout, process.stderr],
+    })),
+
+  //   afterTest: function (
+  //     test,
+  //     context,
+  //     { error, result, duration, passed, retries }
+  //   ) {
+  //     if (error) {
+  //       browser.takeScreenshot();
+  //     }
+  //   },
+
+  // clean up the `tauri-driver` process we spawned at the start of the session
+  afterSession: () => tauriDriver.kill(),
+}