Skip to content

Commit

Permalink
Merge pull request #249 from cosmos/peng/230-unit-tests-for-common
Browse files Browse the repository at this point in the history
Peng/230 unit tests for common
  • Loading branch information
jbibla authored Dec 18, 2017
2 parents c45301c + 90694d5 commit a288326
Show file tree
Hide file tree
Showing 34 changed files with 599 additions and 112 deletions.
47 changes: 26 additions & 21 deletions app/src/renderer/components/common/NiDataMsg.vue
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
42 changes: 21 additions & 21 deletions app/src/renderer/components/common/NiFormGroup.vue
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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
}
},
Expand All @@ -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%
Expand Down
12 changes: 6 additions & 6 deletions app/src/renderer/components/common/NiFormMsg.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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
},
Expand Down Expand Up @@ -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>
29 changes: 13 additions & 16 deletions app/src/renderer/components/common/NiFormStruct.vue
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
19 changes: 10 additions & 9 deletions app/src/renderer/components/common/NiHardwareState.vue
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -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>
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
4 changes: 2 additions & 2 deletions test/unit/specs/LiTransaction.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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', () => {
Expand Down
34 changes: 34 additions & 0 deletions test/unit/specs/NiDataLoading.spec.js
Original file line number Diff line number Diff line change
@@ -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.')
})
})
41 changes: 41 additions & 0 deletions test/unit/specs/NiDataMsg.spec.js
Original file line number Diff line number Diff line change
@@ -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?')
})
})
23 changes: 23 additions & 0 deletions test/unit/specs/NiFieldAddon.spec.js
Original file line number Diff line number Diff line change
@@ -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)
})
})
23 changes: 23 additions & 0 deletions test/unit/specs/NiFieldGroup.spec.js
Original file line number Diff line number Diff line change
@@ -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)
})
})
Loading

0 comments on commit a288326

Please sign in to comment.