Fabo/2138 fix nbsp (#2163)

* defensive programming * fix non breaking space issue * more snaps * fixed typo * changelog * fixed validator state
luniehq · Mar 5, 2019 · b43ff87 · b43ff87
1 parent 5dcf5bf
commit b43ff87
Show file tree

Hide file tree

Showing 12 changed files with 61 additions and 51 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Fixed
+
+- [\#2138](https://github.com/cosmos/voyager/issues/2138) Non breaking space not renderer correctly on hardware state indicator @faboweb
+- [\#1211](https://github.com/cosmos/voyager/issues/1211) Fixed thrown error on page validator when validator wasn't loaded yet @faboweb
+- [\#2128](https://github.com/cosmos/voyager/pull/2128) remove loading status on validator page when disconnected from the network @fedekunze
+
 ### Added
 
 - [\#1306](https://github.com/cosmos/voyager/issues/1306) Withdraw fee distribution rewards @fedekunze
@@ -15,10 +21,6 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 - [\#1897](https://github.com/cosmos/voyager/issues/1897) made action modals smaller @jbibla
 
-### Fixed
-
-- [\#2128](https://github.com/cosmos/voyager/pull/2128) remove loading status on validator page when disconnected from the network @fedekunze
-
 ## [1.0.0-beta.13] - 2019-03-05
 
 ### Added

diff --git a/app/src/renderer/components/common/ActionModal.vue b/app/src/renderer/components/common/ActionModal.vue
@@ -5,7 +5,7 @@
  <img
  class="icon action-modal-atom"
  src="~assets/images/cosmos-logo.png"
- >
+ />
  <span class="action-modal-title">
  {{ session.signedIn ? title : `Sign in required` }}
  </span>
@@ -57,16 +57,12 @@
  </tm-form-group>
  </div>
  <div v-else-if="step === `sign`" class="action-modal-form">
- <hardware-state
- v-if="sending"
- :loading="true"
- value="Waiting for signature on app"
- />
- <hardware-state
- v-else
- icon="usb"
- value="Please unlock the Cosmos app on your Ledger Nano&nbsp;S"
- />
+ <hardware-state v-if="sending" :loading="true">
+ Waiting for signature on app
+ </hardware-state>
+ <hardware-state v-else icon="usb">
+ Please unlock the Cosmos app on your Ledger&nbsp;Nano&nbsp;S
+ </hardware-state>
  </div>
 
  <div class="action-modal-footer">

diff --git a/app/src/renderer/components/common/TmHardwareState.vue b/app/src/renderer/components/common/TmHardwareState.vue
@@ -1,9 +1,9 @@
 <template>
  <div class="tm-hardware-state">
- <img v-if="loading" src="~assets/images/loader.svg">
+ <img v-if="loading" src="~assets/images/loader.svg" >
  <i class="tm-hardware-state__icon material-icons">{{ icon }}</i>
  <div class="tm-hardware-state__label">
- {{ value }}
+ <slot />
  </div>
  </div>
 </template>
@@ -15,10 +15,6 @@ export default {
  type: String,
  default: ``
  },
- value: {
- type: String,
- required: true
- },
  loading: {
  type: Boolean,
  default: false

diff --git a/app/src/renderer/components/common/TmSessionHardware.vue b/app/src/renderer/components/common/TmSessionHardware.vue
@@ -16,15 +16,17 @@
  <hardware-state
  v-if="status == 'connect'"
  icon="usb"
- value="Please plug in your Ledger Nano S and open the Cosmos app"
  @click.native="connectLedger()"
- />
+ >
+ Please plug in your Ledger&nbsp;Nano&nbsp;S and open the Cosmos app
+ </hardware-state>
  <hardware-state
  v-if="status == 'detect'"
  :loading="true"
- value="Connecting..."
  @click.native="setStatus('connect')"
- />
+ >
+ Connecting...
+ </hardware-state>
  <p class="ledger-install">
  Don't have the Cøsmos Ledger App yet? Install it
  <a
@@ -33,7 +35,8 @@
  rel="noopener noreferrer"
  >
  here
- </a>.
+ </a>
+ .
  </p>
  </div>
  <div class="tm-session-footer">

diff --git a/app/src/renderer/components/common/TmSessionWelcome.vue b/app/src/renderer/components/common/TmSessionWelcome.vue
@@ -17,9 +17,7 @@
  subtitle="If you have a Ledger Wallet, choose this option."
  @click.native="setState('hardware')"
  />
- <template
- v-if="session.insecureMode"
- >
+ <template v-if="session.insecureMode">
  <li-session
  v-if="accountExists"
  id="sign-in-with-account"
@@ -66,7 +64,7 @@ export default {
  },
  closeSession() {
  this.$store.commit(`toggleSessionModal`, false)
- },
+ }
  }
 }
 </script>
diff --git a/app/src/renderer/components/staking/PageValidator.vue b/app/src/renderer/components/staking/PageValidator.vue
@@ -1,6 +1,7 @@
 <template>
  <tm-page data-title="Validator">
- <tm-data-error v-if="delegates.loaded && !validator" />
+ <tm-data-loading v-if="delegates.loading" />
+ <tm-data-error v-else-if="delegates.loaded && !validator" />
  <template v-else>
  <div class="page-profile__header page-profile__section">
  <div class="row">
@@ -77,7 +78,10 @@
  {{ percent(validator.commission.rate) }}
  </dd>
  </dl>
- <dl v-if="session.experimentalMode" class="info_dl colored_dl">
+ <dl
+ v-if="session.experimentalMode"
+ class="info_dl colored_dl"
+ >
  <dt>Slashes</dt>
  <dd>--</dd>
  </dl>
@@ -158,7 +162,10 @@
  :denom="bondDenom"
  />
 
- <tm-modal v-if="showCannotModal" :close="closeCannotModal">
+ <tm-modal
+ v-if="showCannotModal"
+ :close="closeCannotModal"
+ >
  <div slot="title">
  Cannot {{ action === `delegate` ? `Delegate` : `Undelegate` }}
  </div>

diff --git a/app/src/renderer/vuex/modules/delegates.js b/app/src/renderer/vuex/modules/delegates.js
@@ -69,7 +69,7 @@ export default ({ node }) => {
  }
  commit(`setDelegates`, validators)
  },
- async getDelegates({ commit, dispatch, rootState }) {
+ async getDelegates({ state, commit, dispatch, rootState }) {
  commit(`setDelegateLoading`, true)
 
  if (!rootState.connection.connected) return

diff --git a/test/unit/specs/components/common/TmHardwareState.spec.js b/test/unit/specs/components/common/TmHardwareState.spec.js
@@ -6,12 +6,13 @@ describe(`TmHardwareState`, () => {
 
  const propsData = {
  icon: `rotate_right`,
- loading: true,
- value: `Detecting your Ledger Wallet`
+ loading: true
  }
 
  beforeEach(() => {
- wrapper = mount(TmHardwareState, { propsData })
+ wrapper = mount(TmHardwareState, { propsData, slots: {
+ default: `Detecting your Ledger Wallet`
+ } })
  })
 
  it(`has the expected html structure`, () => {

diff --git a/test/unit/specs/components/common/__snapshots__/ActionModal.spec.js.snap b/test/unit/specs/components/common/__snapshots__/ActionModal.spec.js.snap
@@ -99,8 +99,11 @@ exports[`ActionModal has the expected html structure when user has logged in wit
  >
  <hardware-state-stub
  icon="usb"
- value="Please unlock the Cosmos app on your Ledger Nano&nbsp;S"
- />
+ >
+ 
+ Please unlock the Cosmos app on your Ledger Nano S
+ 
+ </hardware-state-stub>
  </div>
  
  <div

diff --git a/test/unit/specs/components/common/__snapshots__/TmHardwareState.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmHardwareState.spec.js.snap
@@ -17,9 +17,7 @@ exports[`TmHardwareState has the expected html structure 1`] = `
  <div
  class="tm-hardware-state__label"
  >
- 
  Detecting your Ledger Wallet
- 
  </div>
 </div>
 `;
diff --git a/test/unit/specs/components/common/__snapshots__/TmSessionHardware.spec.js.snap b/test/unit/specs/components/common/__snapshots__/TmSessionHardware.spec.js.snap
@@ -53,8 +53,8 @@ exports[`TmSessionHardware has the expected html structure when there're errors
  class="tm-hardware-state__label"
  >
  
- Please plug in your Ledger Nano S and open the Cosmos app
- 
+  Please plug in your Ledger Nano S and open the Cosmos app
+  
  </div>
  </div>
  
@@ -75,6 +75,7 @@ exports[`TmSessionHardware has the expected html structure when there're errors
  here
  
  </a>
+ 
  .
  
  </p>
@@ -148,8 +149,8 @@ exports[`TmSessionHardware has the expected html structure with no errors 1`] =
  class="tm-hardware-state__label"
  >
  
- Please plug in your Ledger Nano S and open the Cosmos app
- 
+  Please plug in your Ledger Nano S and open the Cosmos app
+  
  </div>
  </div>
  
@@ -170,6 +171,7 @@ exports[`TmSessionHardware has the expected html structure with no errors 1`] =
  here
  
  </a>
+ 
  .
  
  </p>
@@ -188,24 +190,26 @@ exports[`TmSessionHardware should show a state indicator for different states of
 "<div class=\\"tm-session\\"><div class=\\"tm-session-container\\"><div class=\\"tm-session-header\\"><a><i class=\\"material-icons\\">arrow_back</i></a> <div class=\\"tm-session-title\\">
  Sign In
  </div> <a><i class=\\"material-icons\\">close</i></a></div> <div class=\\"tm-session-main\\"><div class=\\"tm-hardware-state\\"><!----> <i class=\\"tm-hardware-state__icon material-icons\\">usb</i> <div class=\\"tm-hardware-state__label\\">
- Please plug in your Ledger Nano S and open the Cosmos app
- </div></div> <!----> <p class=\\"ledger-install\\">
+  Please plug in your Ledger&nbsp;Nano&nbsp;S and open the Cosmos app
+  </div></div> <!----> <p class=\\"ledger-install\\">
  Don't have the Cøsmos Ledger App yet? Install it
  <a href=\\"https://github.com/cosmos/voyager#ledger-cosmos-app\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">
  here
- </a>.
+ </a>
+ .
  </p></div> <div class=\\"tm-session-footer\\"><!----></div></div></div>"
 `;
 
 exports[`TmSessionHardware should show a state indicator for different states of the hardware connection 2`] = `
 "<div class=\\"tm-session\\"><div class=\\"tm-session-container\\"><div class=\\"tm-session-header\\"><a><i class=\\"material-icons\\">arrow_back</i></a> <div class=\\"tm-session-title\\">
  Sign In
  </div> <a><i class=\\"material-icons\\">close</i></a></div> <div class=\\"tm-session-main\\"><!----> <div class=\\"tm-hardware-state\\"><img src=\\"~assets/images/loader.svg\\"> <i class=\\"tm-hardware-state__icon material-icons\\"></i> <div class=\\"tm-hardware-state__label\\">
- Connecting...
- </div></div> <p class=\\"ledger-install\\">
+  Connecting...
+  </div></div> <p class=\\"ledger-install\\">
  Don't have the Cøsmos Ledger App yet? Install it
  <a href=\\"https://github.com/cosmos/voyager#ledger-cosmos-app\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">
  here
- </a>.
+ </a>
+ .
  </p></div> <div class=\\"tm-session-footer\\"><!----></div></div></div>"
 `;
diff --git a/test/unit/specs/store/delegates.spec.js b/test/unit/specs/store/delegates.spec.js
@@ -238,6 +238,7 @@ describe(`Module: Delegates`, () => {
  await actions.getDelegates({
  commit: jest.fn(),
  dispatch: jest.fn(),
+ state,
  rootState: mockRootState
  })
  expect(state.error).toBe(`Error`)
@@ -249,6 +250,7 @@ describe(`Module: Delegates`, () => {
  await actions.getDelegates({
  commit: jest.fn(),
  dispatch: jest.fn(),
+ state,
  rootState: mockRootState
  })
  expect(state.error).toBe(`Error`)