Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Peng/230 unit tests for common #249

Merged
merged 15 commits into from
Dec 18, 2017
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