David/1219 new delegation

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 * Created new "My Stake" tab. @NodeGuy
 * possibility to end unbonding transactions @faboweb
 * close buttons to Staking modal @NodeGuy
+* more tests for new staking modal @NodeGuy
 
 ### Changed
 

app/src/renderer/components/staking/ModalStake.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .modal-stake
+  .modal-stake#modal-stake
     //- Header
     .stake-header
       img.icon(class='stake-atom' src="~assets/images/cosmos-logo.png")

app/src/renderer/components/staking/PageStaking.vue

@@ -11,7 +11,7 @@ tm-page(data-title="Staking", :title="config.devMode ? '' : 'Staking'")
 
   modal-search(type="delegates" v-if="somethingToSearch")
 
-  .delegates-tabs
+  .staking-tabs
     .tab(
       v-for="tab in tabs",
       :class="{'tab-selected': $route.name === tab}",
@@ -202,7 +202,7 @@ export default {
 <style lang="stylus">
 @require '~variables'
 
-.delegates-tabs
+.staking-tabs
   display flex
 
   .tab

test/e2e/staking.js

@@ -1,6 +1,6 @@
 let test = require("tape-promise/tape")
 let { getApp, restart } = require("./launch.js")
-let { navigate, login } = require("./common.js")
+let { navigate, login, sleep } = require("./common.js")
 // let { navigate, waitForValue, login } = require("./common.js") // removed because of linting, add back when optimistic updates come
 /*
 * NOTE: don't use a global `let client = app.client` as the client object changes when restarting the app
@@ -15,12 +15,11 @@ test("staking", async function(t) {
   await navigate(app, "Staking")
 
   // default values from e2e mounted node
-  let totalUserStake = 150
   let bondedStake = 100
 
   t.test("Validators", async function(t) {
     // Select the Validators tab.
-    await app.client.$(`.delegates-tabs`).click("a=Validators")
+    await app.client.click(`//a[. = 'Validators']`)
 
     t.equal(
       (await app.client.$$(".li-validator")).length,
@@ -50,106 +49,33 @@ test("staking", async function(t) {
     t.end()
   })
 
-  t.test("bonding", async function(t) {
-    // validator should already be in the cart so we only need to click a button to go to the bonding view
-    await app.client.$("#go-to-bonding-btn").click()
-    // the unbonded atoms are equal to the total owned stake minus the bonded atoms (150 - 100 == 50)
-    t.equal(
-      await app.client.$("#new-unbonded-atoms").getValue(),
-      (totalUserStake - bondedStake).toString(),
-      "Left over steak shows correctly"
-    )
-    t.equal(
-      await app.client.$(".bond-candidate .bond-value__input").getValue(),
-      bondedStake.toString(),
-      "Candidate bond matches current bond"
-    )
-
-    await app.client
-      .$(".bond-candidate .bond-value__input")
-      .setValue(bondedStake + 20)
-    t.equal(
-      await app.client.$("#new-unbonded-atoms").getValue(),
-      (totalUserStake - bondedStake - 20).toString(),
-      "Left over steak shows correctly after adjusting bond"
-    )
-
-    await app.client.$("#btn-bond").click()
-
-    // should fail
-    t.ok(await app.client.isVisible(".tm-form-msg--error"), "shows error")
-
-    await app.client.$("#bond-confirm").click()
-    await app.client.$("#btn-bond").click()
-
-    t.ok(!(await app.client.isVisible(".tm-form-msg--error")), "hides error")
+  t.test(`Stake`, async t => {
+    // Select the second validator.
+    await app.client.click(`//*[. = 'local_2']`)
 
-    bondedStake += 20
+    // For some reason we need to sleep at this point in order to prevent the
+    // following error:
+    //
+    // Element <span class="tm-btn__container tm-btn--primary">...</span> is not
+    // clickable at point (960, 219). Other element would receive the click:
+    // <div class="ps__rail-y" style="top: 0px; height: 557px; right:
+    // 0px;">...</div>
+    await sleep(500)
 
-    // wait until the validators are showing again
-    await app.client.waitForVisible("#go-to-bonding-btn", 30000)
-    // TODO: re-enable once we've added back optimistic updates
-    // t.equal(
-    //   await app.client.$(".li-validator__value.your-votes").getText(),
-    //   bondedStake.toString(),
-    //   "Delegate steak in validator updated correctly"
-    // )
-
-    t.end()
-  })
-
-  t.test("unbonding", async function(t) {
-    // validator should already be in the cart so we only need to click a button to go to the bonding view
-    await app.client.$("#go-to-bonding-btn").click()
-    // the unbonded atoms are equal to the total owned stake minus the bonded atoms (150 - 100 == 50)
-    //TOD: re-enable after optimistic loading (or actual loading) update
-    // t.ok(
-    //   await waitForValue(
-    //     () => app.client.$("#new-unbonded-atoms"),
-    //     (totalUserStake - bondedStake).toString()
-    //   ),
-    //   "Left over steak shows correctly"
-    // )
-    // the bonded amount should show 120
-    // t.equal(
-    //   await app.client.$(".bond-candidate .bond-value__input").getValue(),
-    //   bondedStake.toString(),
-    //   "Candidate bond matches current bond"
-    // )
-
-    // the bonded candidate is lowered by 20 stake
-    // this is reflected correctly in the unbonded atoms section (50 - 20 === 30)
     await app.client
-      .$(".bond-candidate .bond-value__input")
-      .setValue(bondedStake - 20)
-    //TOD: re-enable after optimistic loading (or actual loading) update
-    // t.equal(
-    //   await app.client.$("#new-unbonding-atoms").getValue(),
-    //   (20).toString(),
-    //   "Unbonding steak shows correctly"
-    // )
-
-    await app.client.$("#btn-bond").click()
-
-    // should fail
-    t.ok(await app.client.isVisible(".tm-form-msg--error"), "shows error")
-
-    await app.client.$("#bond-confirm").click()
-    await app.client.$("#btn-bond").click()
-
-    t.ok(!(await app.client.isVisible(".tm-form-msg--error")), "hides error")
-
-    bondedStake -= 20
-
-    // wait until the validators are showing again
-    // await app.client.waitForVisible("#go-to-bonding-btn", 30000)
-    // TODO: Update when we fix the optimistic ui changes again
-    // t.equal(
-    //   await app.client.$(".li-validator__value.your-votes").getText(),
-    //   bondedStake.toString(),
-    //   "Delegate steak in validator updated correctly"
-    // )
-
+      .click(`//button/*[. = 'Stake']`)
+      .setValue(`#amount`, 10)
+      .click(`//*[@id = 'modal-stake']//button//*[. = 'Stake']`)
+      .waitForVisible(
+        `//*[. = 'You have successfully staked your Steaks.']`,
+        5 * 1000
+      )
+
+      // Go back to Staking page.
+      .click(`//a//*[. = 'Staking']`)
+
+    // Why is this necessary?  See
+    // https://github.com/jprichardson/tape-promise#example-asyncawait
     t.end()
   })
 

test/unit/specs/components/staking/ModalStake.spec.js

@@ -1,5 +1,6 @@
 "use strict"
 
+import htmlBeautify from "html-beautify"
 import { mount } from "@vue/test-utils"
 import ModalStake from "staking/ModalStake"
 
@@ -16,6 +17,10 @@ const Wrapper = () => {
   })
 }
 
+test(`renders correctly`, () => {
+  expect(htmlBeautify(Wrapper().html())).toMatchSnapshot()
+})
+
 test(`the "amount" field defaults to 1`, () => {
   expect(Wrapper().vm.amount).toEqual(1)
 })

test/unit/specs/components/staking/__snapshots__/ModalStake.spec.js.snap

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+"<div id=\\"modal-stake\\" class=\\"modal-stake\\">
+   <div class=\\"stake-header\\">
+      <img src=\\"~assets/images/cosmos-logo.png\\" class=\\"icon stake-atom\\"><span class=\\"tm-modal-title\\">Stake</span>
+      <div class=\\"tm-modal-icon tm-modal-close\\">
+         <i class=\\"material-icons\\">close</i>
+      </div>
+</div>
+<div class=\\"stake-form-group tm-form-group\\">
+   <!---->
+   <label for=\\"to\\" class=\\"tm-form-group__label\\">To</label>
+   <div class=\\"tm-form-group__field\\">
+      <input class=\\"tm-field\\" id=\\"to\\" readonly=\\"readonly\\">
+   </div>
+</div>
+<div class=\\"stake-form-group tm-form-group\\">
+   <!---->
+   <label for=\\"from\\" class=\\"tm-form-group__label\\">From</label>
+   <div class=\\"tm-form-group__field\\">
+      <div class=\\"tm-select\\" id=\\"from\\">
+         <select class=\\"tm-field tm-field-select\\">
+         <option value=\\"\\" disabled=\\"disabled\\" selected=\\"selected\\" hidden=\\"hidden\\">
+            Select option...
+         </option>
+         <option value=\\"\\"></option>
+         </select>
+         <div class=\\"tm-field-select-addon\\">
+            <i class=\\"material-icons\\">arrow_drop_down</i>
+         </div>
+</div>
+</div>
+</div>
+<div class=\\"stake-form-group tm-form-group\\">
+   <!---->
+   <label for=\\"amount\\" class=\\"tm-form-group__label\\">Amount</label>
+   <div class=\\"tm-form-group__field\\">
+      <input type=\\"number\\" max=\\"100\\" min=\\"1\\" class=\\"tm-field\\" id=\\"amount\\">
+   </div>
+</div>
+<div class=\\"stake-footer\\">
+   <button class=\\"tm-btn\\"><span class=\\"tm-btn__container tm-btn--size-lg\\">
+   <!---->
+   <!---->
+   <span class=\\"tm-btn__value\\">Cancel</span></span></button><button class=\\"tm-btn\\"><span class=\\"tm-btn__container tm-btn--size-lg tm-btn--primary\\">
+   <!---->
+   <!---->
+   <span class=\\"tm-btn__value\\">Stake</span></span></button>
+</div>
+</div>"
+`;

test/unit/specs/components/staking/__snapshots__/PageStaking.spec.js.snap

@@ -58,7 +58,7 @@ exports[`PageStaking has the expected html structure 1`] = `
 </header>
 <main class=\\"tm-page-main ps\\">
    <!---->
-   <div class=\\"delegates-tabs\\">
+   <div class=\\"staking-tabs\\">
       <div class=\\"tab\\">
          <a href=\\"#/staking/My Stake\\" class=\\"\\">My Stake</a>
       </div>
@@ -431,7 +431,7 @@ exports[`PageStaking should filter the delegates 1`] = `
       </div>
     </div>
     <div
-      class="delegates-tabs"
+      class="staking-tabs"
     >
       <div
         class="tab"