Peng/230 unit tests for common

app/src/renderer/components/common/NiDataMsg.vue

@@ -1,9 +1,9 @@
 <template lang="pug">
 .ni-data-msg
-  .icon: i.material-icons(:class="iconCssClass") {{ icon }}
-  .text
-    .title: slot(name="title") {{ title }}
-    .subtitle: slot(name="subtitle") {{ subtitle }}
+  .ni-data-msg__icon: i.material-icons(:class="iconCssClass") {{ icon }}
+  .ni-data-msg__text
+    .ni-data-msg__title: slot(name="title") {{ title }}
+    .ni-data-msg__subtitle: slot(name="subtitle") {{ subtitle }}
 </template>
 
 <script>
@@ -24,26 +24,31 @@ export default {
 .ni-data-msg
   background app-fg
   padding 1rem
-  .icon
-    margin-bottom 0.5rem
-    i.material-icons
-      font-size 3rem
-      color txt
-  .text
-    max-width 30rem
-    .title
-      color bright
-      font-size h2
-    .subtitle
-      color dim
+
+.ni-data-msg__icon
+  margin-bottom 0.5rem
+  i.material-icons
+    font-size 3rem
+    color txt
+
+.ni-data-msg__text
+  max-width 30rem
+
+.ni-data-msg__title
+  color bright
+  font-size h2
+
+.ni-data-msg__subtitle
+  color dim
 
 @media screen and (min-width: 768px)
   .ni-data-msg
     display flex
     padding 3rem
-    .icon
-      margin-bottom 0
-      margin-right 1.5rem
-      i.material-icons
-        font-size 4rem
+
+  .ni-data-msg__icon
+    margin-bottom 0
+    margin-right 1.5rem
+    i.material-icons
+      font-size 4rem
 </style>

app/src/renderer/components/common/NiFormGroup.vue

@@ -1,7 +1,8 @@
 <template lang='pug'>
 div(:class='cssClass')
-  label(:for='fieldId' v-if="fieldId && fieldLabel") {{ fieldLabel }}
-  .ni-form-group-field: slot
+  label.ni-form-group__label(:for='fieldId' v-if="fieldId && fieldLabel")
+    | {{ fieldLabel }}
+  .ni-form-group__field: slot
 </template>
 
 <script>
@@ -10,7 +11,7 @@ export default {
   computed: {
     cssClass () {
       let value = 'ni-form-group'
-      if (this.error) value += ' form-group-error'
+      if (this.error) value += ' ni-form-group--error'
       return value
     }
   },
@@ -30,32 +31,31 @@ export default {
   input
     width 100%
 
-  label
-    display block
-    line-height 2rem
-    color txt
-
-  .ni-form-msg-error
+  .ni-form-msg--error
     display none
 
-  &.form-group-error
-    .ni-field, .ni-select
-      border-color danger
-    .ni-form-msg-error
-      display flex
+.ni-form-group--error
+  .ni-field, .ni-select
+    border-color danger
+
+  .ni-form-msg--error
+    display flex
 
-.ni-form-footer
-  border-top 2px solid bc-dim
+.ni-form-group__label
+  display block
+  line-height 2rem
+  color txt
 
 @media (min-width: 768px)
   .ni-form-group
     display flex
-    label
-      flex 0 0 16rem
-    .ni-form-group-field
-      flex 1
 
-  .ni-form-group-field
+  .ni-form-group__label
+    flex 0 0 16rem
+
+  .ni-form-group__field
+    flex 1
+
     > .ni-field
     > .ni-field-group
       width 100%

app/src/renderer/components/common/NiFormMsg.vue

@@ -10,9 +10,9 @@ export default {
     cssClass () {
       let value = 'ni-form-msg sm'
       if (this.type) {
-        value += ' ni-form-msg-error'
+        value += ' ni-form-msg--error'
       } else {
-        value += ' ni-form-msg-desc'
+        value += ' ni-form-msg--desc'
       }
       return value
     },
@@ -68,17 +68,17 @@ export default {
   font-family 'Material Icons'
   padding-right 0.35rem
 
-.ni-form-msg.ni-form-msg-error
+.ni-form-msg.ni-form-msg--error
   color danger
 
-.ni-form-msg.ni-form-msg-error:before
+.ni-form-msg.ni-form-msg--error:before
   content 'error'
   color danger
 
-.ni-form-msg.ni-form-msg-desc
+.ni-form-msg.ni-form-msg--desc
   color warning
 
-.ni-form-msg.ni-form-msg-desc:before
+.ni-form-msg.ni-form-msg--desc:before
   content 'priority_high'
   color warning
 </style>

app/src/renderer/components/common/NiFormStruct.vue

@@ -1,19 +1,16 @@
-<template>
-  <form :class="cssClass" v-on:submit.prevent.default="submit">
-    <div class="ni-form-container">
-      <slot name="overlay"></slot>
-      <header class="ni-form-header" v-if="hasHeader">
-        <div class="ni-form-title"><slot name="title"></slot></div>
-        <div class="ni-form-subtitle"><slot name="subtitle"></slot></div>
-      </header>
-      <main class="ni-form-main">
-        <slot></slot>
-      </main>
-      <footer class="ni-form-footer" v-if="hasFooter">
-        <slot name="footer"></slot>
-      </footer>
-    </div>
-  </form>
+<template lang="pug">
+form(:class='cssClass' v-on:submit.prevent.default='submit')
+  .ni-form-container
+    slot(name='overlay')
+    header.ni-form-header(v-if='hasHeader')
+      .ni-form-title
+        slot(name='title')
+      .ni-form-subtitle
+        slot(name='subtitle')
+    main.ni-form-main
+      slot
+    footer.ni-form-footer(v-if='hasFooter')
+      slot(name='footer')
 </template>
 
 <script>

app/src/renderer/components/common/NiHardwareState.vue

@@ -1,7 +1,7 @@
 <template lang='pug'>
 .ni-hardware-state
-  i.material-icons(:class="iconClass") {{ icon }}
-  p {{ value }}
+  i.ni-hardware-state__icon.material-icons(:class="iconClass") {{ icon }}
+  .ni-hardware-state__label {{ value }}
 </template>
 
 <script>
@@ -32,11 +32,12 @@ export default {
 
   user-select none
 
-  i
-    font-size 5rem
-    margin-bottom 1rem
-    color dim
-  p
-    text-align center
-    color bright
+.ni-hardware-state__icon
+  font-size 5rem
+  margin-bottom 1rem
+  color dim
+
+.ni-hardware-state__label
+  text-align center
+  color bright
 </style>

package.json

@@ -125,7 +125,7 @@
     "superagent": "^3.5.2",
     "tail": "^1.2.1",
     "tendermint-crypto": "github:mappum/js-crypto",
-    "vue-test-utils": "^1.0.0-beta.6",
+    "vue-test-utils": "^1.0.0-beta.8",
     "vuelidate": "^0.5.0",
     "xmlhttprequest": "^1.8.0"
   },

test/unit/specs/LiTransaction.spec.js

@@ -42,7 +42,7 @@ describe('LiTransaction', () => {
   })
 
   it('should show incoming transactions', () => {
-    expect(wrapper.find('.ni-li-tx').hasClass('ni-li-tx-received')).toBe(true)
+    expect(wrapper.find('.ni-li-tx').classes()).toContain('ni-li-tx-received')
   })
 
   it('should show outgoing transactions', () => {
@@ -72,7 +72,7 @@ describe('LiTransaction', () => {
       },
       address: 'myAddress'
     })
-    expect(wrapper.find('.ni-li-tx').hasClass('ni-li-tx-sent')).toBe(true)
+    expect(wrapper.find('.ni-li-tx').classes()).toContain('ni-li-tx-sent')
   })
 
   it('should show all coins of the transaction', () => {

test/unit/specs/NiDataLoading.spec.js

@@ -0,0 +1,34 @@
+import { mount } from 'vue-test-utils'
+import htmlBeautify from 'html-beautify'
+import NiDataLoading from 'common/NiDataLoading'
+
+describe('NiDataLoading', () => {
+  let wrapper
+  beforeEach(() => {
+    wrapper = mount(NiDataLoading)
+  })
+
+  it('has the expected html structure', () => {
+    expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
+  })
+
+  it('has an icon', () => {
+    expect(wrapper.find('.ni-data-msg__icon i.material-icons').text().trim())
+      .toBe('rotate_right')
+  })
+
+  it('has a spinning icon', () => {
+    expect(wrapper.find('.ni-data-msg__icon').contains('i.material-icons.fa-spin'))
+      .toBe(true)
+  })
+
+  it('has a title', () => {
+    expect(wrapper.find('.ni-data-msg__title div').text().trim())
+      .toBe('Data is loading…')
+  })
+
+  it('has a subtitle', () => {
+    expect(wrapper.find('.ni-data-msg__subtitle div').text().trim())
+      .toBe('Please wait a moment.')
+  })
+})

test/unit/specs/NiDataMsg.spec.js

@@ -0,0 +1,41 @@
+import { mount } from 'vue-test-utils'
+import htmlBeautify from 'html-beautify'
+import NiDataMsg from 'common/NiDataMsg'
+
+describe('NiDataMsg', () => {
+  let wrapper
+
+  let propsData = {
+    title: 'sOmEtHiNg Is HaPpEnIng!!!',
+    subtitle: 'Oh my! What could it be?',
+    icon: 'help',
+    spin: false
+  }
+
+  beforeEach(() => {
+    wrapper = mount(NiDataMsg, { propsData })
+  })
+
+  it('has a title from props', () => {
+    expect(wrapper.vm.title).toBe('sOmEtHiNg Is HaPpEnIng!!!')
+  })
+
+  it('has the expected html structure', () => {
+    expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
+  })
+
+  it('has an icon', () => {
+    expect(wrapper.find('.ni-data-msg__icon i.material-icons').text())
+      .toBe('help')
+  })
+
+  it('doesn\'t have a spinning icon', () => {
+    expect(wrapper.find('.ni-data-msg__icon').contains('i.material-icons.fa-spin'))
+      .toBe(false)
+  })
+
+  it('has a subtitle', () => {
+    expect(wrapper.find('.ni-data-msg__subtitle').text())
+      .toBe('Oh my! What could it be?')
+  })
+})

test/unit/specs/NiFieldAddon.spec.js

@@ -0,0 +1,23 @@
+import { mount } from 'vue-test-utils'
+import htmlBeautify from 'html-beautify'
+import NiFieldAddon from 'common/NiFieldAddon'
+
+describe('NiFieldAddon', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mount(NiFieldAddon, {
+      slots: {
+        default: '<div class="fake-addon">ATOM</div>'
+      }
+    })
+  })
+
+  it('has the expected html structure', () => {
+    expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
+  })
+
+  it('has a slot with content', () => {
+    expect(wrapper.findAll('.fake-addon').length).toBe(1)
+  })
+})

test/unit/specs/NiFieldGroup.spec.js

@@ -0,0 +1,23 @@
+import { mount } from 'vue-test-utils'
+import htmlBeautify from 'html-beautify'
+import NiFieldGroup from 'common/NiFieldGroup'
+
+describe('NiFieldGroup', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mount(NiFieldGroup, {
+      slots: {
+        default: '<input class="fake-field" placeholder="Fake">'
+      }
+    })
+  })
+
+  it('has the expected html structure', () => {
+    expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
+  })
+
+  it('has a slot with a field', () => {
+    expect(wrapper.findAll('.fake-field').length).toBe(1)
+  })
+})