From 385ca271aa3df678315b89e9d26ae668396f4221 Mon Sep 17 00:00:00 2001 From: Peng Zhong Date: Fri, 29 Dec 2017 12:42:11 +0900 Subject: [PATCH 1/3] init --- app/src/renderer/components/common/NiPage.vue | 16 +++++-- .../renderer/components/common/NiToolBar.vue | 2 +- .../specs/__snapshots__/NiPage.spec.js.snap | 25 +---------- .../specs/__snapshots__/Page404.spec.js.snap | 22 +--------- .../__snapshots__/PageBalances.spec.js.snap | 44 +------------------ .../specs/__snapshots__/PageBond.spec.js.snap | 22 +--------- .../__snapshots__/PageDelegate.spec.js.snap | 22 +--------- .../__snapshots__/PageDelegates.spec.js.snap | 44 +------------------ .../specs/__snapshots__/PageSend.spec.js.snap | 22 +--------- .../PageTransactions.spec.js.snap | 44 +------------------ 10 files changed, 26 insertions(+), 237 deletions(-) diff --git a/app/src/renderer/components/common/NiPage.vue b/app/src/renderer/components/common/NiPage.vue index 41787bfd20..9ca0f35bb1 100644 --- a/app/src/renderer/components/common/NiPage.vue +++ b/app/src/renderer/components/common/NiPage.vue @@ -22,10 +22,20 @@ export default { computed: { ...mapGetters(['config']) }, + data: () => ({ + ps: {} + }), + methods: { + handleResize () { + if (this.config.desktop) { + this.ps = new PerfectScrollbar('.ni-page-main') + } else { + this.ps.destroy() + } + } + }, mounted () { - const container = this.$el.querySelector('.ni-page-main') - // eslint-disable-next-line no-new - new PerfectScrollbar(container) + window.addEventListener('resize', this.handleResize) } } diff --git a/app/src/renderer/components/common/NiToolBar.vue b/app/src/renderer/components/common/NiToolBar.vue index a2515b3674..b540a6ebc5 100644 --- a/app/src/renderer/components/common/NiToolBar.vue +++ b/app/src/renderer/components/common/NiToolBar.vue @@ -98,7 +98,7 @@ export default { @media screen and (max-width: 567px) .ni-tool-bar - z-index z(toolbar) + z-index z(toolBar) position fixed bottom 0 left 0 diff --git a/test/unit/specs/__snapshots__/NiPage.spec.js.snap b/test/unit/specs/__snapshots__/NiPage.spec.js.snap index 4d93d626f2..09a9b5e8df 100644 --- a/test/unit/specs/__snapshots__/NiPage.spec.js.snap +++ b/test/unit/specs/__snapshots__/NiPage.spec.js.snap @@ -37,28 +37,7 @@ exports[`NiPage has the expected html structure 1`] = `
-
-
-
-
-
-
-
+ class="ni-page-main" + /> `; diff --git a/test/unit/specs/__snapshots__/Page404.spec.js.snap b/test/unit/specs/__snapshots__/Page404.spec.js.snap index 4be6b498c0..3bd06d0b03 100644 --- a/test/unit/specs/__snapshots__/Page404.spec.js.snap +++ b/test/unit/specs/__snapshots__/Page404.spec.js.snap @@ -36,7 +36,7 @@ exports[`Page404 has the expected html structure 1`] = `
-
-
-
-
-
-
`; diff --git a/test/unit/specs/__snapshots__/PageBalances.spec.js.snap b/test/unit/specs/__snapshots__/PageBalances.spec.js.snap index 7d81ac4f9e..7ee89fdb7b 100644 --- a/test/unit/specs/__snapshots__/PageBalances.spec.js.snap +++ b/test/unit/specs/__snapshots__/PageBalances.spec.js.snap @@ -84,7 +84,7 @@ exports[`PageBalances has the expected html structure 1`] = `
-
-
-
-
-
-
`; @@ -336,7 +316,7 @@ exports[`PageBalances should filter the balances 1`] = `
-
-
-
-
-
-
`; diff --git a/test/unit/specs/__snapshots__/PageBond.spec.js.snap b/test/unit/specs/__snapshots__/PageBond.spec.js.snap index a2c1483014..9c98d904c5 100644 --- a/test/unit/specs/__snapshots__/PageBond.spec.js.snap +++ b/test/unit/specs/__snapshots__/PageBond.spec.js.snap @@ -75,7 +75,7 @@ exports[`PageBond has the expected html structure 1`] = `
-
-
-
-
-
-
`; diff --git a/test/unit/specs/__snapshots__/PageDelegate.spec.js.snap b/test/unit/specs/__snapshots__/PageDelegate.spec.js.snap index c68237fd8e..6ad70ef073 100644 --- a/test/unit/specs/__snapshots__/PageDelegate.spec.js.snap +++ b/test/unit/specs/__snapshots__/PageDelegate.spec.js.snap @@ -88,7 +88,7 @@ exports[`PageDelegate has the expected html structure 1`] = `
-
-
-
-
-
-
`; diff --git a/test/unit/specs/__snapshots__/PageDelegates.spec.js.snap b/test/unit/specs/__snapshots__/PageDelegates.spec.js.snap index 504804a438..862701c3fb 100644 --- a/test/unit/specs/__snapshots__/PageDelegates.spec.js.snap +++ b/test/unit/specs/__snapshots__/PageDelegates.spec.js.snap @@ -99,7 +99,7 @@ exports[`PageDelegates has the expected html structure 1`] = `
-
-
-
-
-
-
`; @@ -394,7 +374,7 @@ exports[`PageDelegates should filter the delegates 1`] = `
-
-
-
-
-
-
`; diff --git a/test/unit/specs/__snapshots__/PageSend.spec.js.snap b/test/unit/specs/__snapshots__/PageSend.spec.js.snap index e41be7ab6c..ce6c70c347 100644 --- a/test/unit/specs/__snapshots__/PageSend.spec.js.snap +++ b/test/unit/specs/__snapshots__/PageSend.spec.js.snap @@ -59,7 +59,7 @@ exports[`PageSend has the expected html structure 1`] = `
-
-
-
-
-
-
`; diff --git a/test/unit/specs/__snapshots__/PageTransactions.spec.js.snap b/test/unit/specs/__snapshots__/PageTransactions.spec.js.snap index 93b0eaf5a6..ddd36b56ae 100644 --- a/test/unit/specs/__snapshots__/PageTransactions.spec.js.snap +++ b/test/unit/specs/__snapshots__/PageTransactions.spec.js.snap @@ -72,7 +72,7 @@ exports[`PageTransactions has the expected html structure 1`] = `
-
-
-
-
-
-
`; @@ -181,7 +161,7 @@ exports[`PageTransactions should filter the transactions 1`] = `
-
-
-
-
-
-
`; From da52a04d406000e1789dca89e410f51f64de17cb Mon Sep 17 00:00:00 2001 From: Peng Zhong Date: Fri, 29 Dec 2017 13:47:37 +0900 Subject: [PATCH 2/3] factor our NiConnectivity --- .../renderer/components/common/AppFooter.vue | 46 ++++--------------- .../renderer/components/common/AppMenu.vue | 6 +++ .../components/common/NiConnectivity.vue | 43 +++++++++++++++++ app/src/renderer/components/common/NiPage.vue | 11 +++-- .../renderer/components/common/NiToolBar.vue | 7 +-- 5 files changed, 68 insertions(+), 45 deletions(-) create mode 100644 app/src/renderer/components/common/NiConnectivity.vue diff --git a/app/src/renderer/components/common/AppFooter.vue b/app/src/renderer/components/common/AppFooter.vue index 25b6e1ee9f..b1fa55d854 100644 --- a/app/src/renderer/components/common/AppFooter.vue +++ b/app/src/renderer/components/common/AppFooter.vue @@ -1,24 +1,14 @@ @@ -26,28 +16,10 @@ export default { diff --git a/app/src/renderer/components/common/AppMenu.vue b/app/src/renderer/components/common/AppMenu.vue index 28b3523b04..6623e29a8a 100644 --- a/app/src/renderer/components/common/AppMenu.vue +++ b/app/src/renderer/components/common/AppMenu.vue @@ -13,6 +13,8 @@ menu.app-menu list-item(to="/blockchain" exact @click.native="close" title="Blockchain") list-item(to="/validators" exact @click.native="close" title="Validators" v-bind:class="{ 'active': isValidatorPage }") + part(title='Connectivity') + connectivity user-pane @@ -21,6 +23,7 @@ import PerfectScrollbar from 'perfect-scrollbar' import { mapGetters } from 'vuex' import Btn from '@nylira/vue-button' import noScroll from 'no-scroll' +import Connectivity from 'common/NiConnectivity' import ListItem from 'common/NiListItem' import UserPane from 'common/NiUserPane' import Part from 'common/NiPart' @@ -28,6 +31,7 @@ export default { name: 'app-menu', components: { Btn, + Connectivity, ListItem, Part, UserPane @@ -117,4 +121,6 @@ export default { @media screen and (min-width:1024px) .app-menu flex 1 + .ni-connectivity + display none diff --git a/app/src/renderer/components/common/NiConnectivity.vue b/app/src/renderer/components/common/NiConnectivity.vue new file mode 100644 index 0000000000..ad43150d72 --- /dev/null +++ b/app/src/renderer/components/common/NiConnectivity.vue @@ -0,0 +1,43 @@ + + + + + diff --git a/app/src/renderer/components/common/NiPage.vue b/app/src/renderer/components/common/NiPage.vue index 9ca0f35bb1..9603b86b41 100644 --- a/app/src/renderer/components/common/NiPage.vue +++ b/app/src/renderer/components/common/NiPage.vue @@ -23,18 +23,23 @@ export default { ...mapGetters(['config']) }, data: () => ({ - ps: {} + ps: '' }), methods: { handleResize () { if (this.config.desktop) { - this.ps = new PerfectScrollbar('.ni-page-main') - } else { + const container = this.$el.querySelector('.ni-page-main') + this.ps = new PerfectScrollbar(container) + // console.log('its desktop', this.ps) + } else if (this.ps.destroy) { this.ps.destroy() + this.ps = null + // console.log('its not desktop', this.ps) } } }, mounted () { + this.handleResize() window.addEventListener('resize', this.handleResize) } } diff --git a/app/src/renderer/components/common/NiToolBar.vue b/app/src/renderer/components/common/NiToolBar.vue index b540a6ebc5..165df70581 100644 --- a/app/src/renderer/components/common/NiToolBar.vue +++ b/app/src/renderer/components/common/NiToolBar.vue @@ -96,7 +96,7 @@ export default { i color dim -@media screen and (max-width: 567px) +@media screen and (max-width: 1023px) .ni-tool-bar z-index z(toolBar) position fixed @@ -112,13 +112,10 @@ export default { .ni-page padding-bottom 3rem -@media screen and (min-width: 568px) +@media screen and (min-width: 1024px) .ni-tool-bar-container .main justify-content flex-end - -@media screen and (min-width: 1024px) - .ni-tool-bar-container a margin-top 0.7rem From b43d6a56a68c310fb54a156b01488608765ae2e3 Mon Sep 17 00:00:00 2001 From: Peng Zhong Date: Fri, 29 Dec 2017 14:27:09 +0900 Subject: [PATCH 3/3] add test for NiConnectivity --- test/unit/specs/NiConnectivity.spec.js | 50 +++++++++++++++++++ .../__snapshots__/NiConnectivity.spec.js.snap | 32 ++++++++++++ 2 files changed, 82 insertions(+) create mode 100644 test/unit/specs/NiConnectivity.spec.js create mode 100644 test/unit/specs/__snapshots__/NiConnectivity.spec.js.snap diff --git a/test/unit/specs/NiConnectivity.spec.js b/test/unit/specs/NiConnectivity.spec.js new file mode 100644 index 0000000000..3839a349b1 --- /dev/null +++ b/test/unit/specs/NiConnectivity.spec.js @@ -0,0 +1,50 @@ +import Vuex from 'vuex' +import { mount, createLocalVue } from 'vue-test-utils' +import htmlBeautify from 'html-beautify' +import NiConnectivity from 'common/NiConnectivity' + +const localVue = createLocalVue() +localVue.use(Vuex) + +describe('NiConnectivity', () => { + let wrapper + let store = new Vuex.Store({ + getters: { + connected: () => true, + lastHeader: () => ({ chain_id: 'gaia-home', height: '31337' }), + nodeIP: () => '127.0.0.1' + } + }) + store.commit = jest.fn() + + beforeEach(() => { + wrapper = mount(NiConnectivity, { + localVue, + store + }) + }) + + it('has the expected html structure', () => { + expect(htmlBeautify(wrapper.html())).toMatchSnapshot() + }) + + it('has a network icon', () => { + expect(wrapper.find('.ni-li:nth-child(1) i.material-icons').text().trim()) + .toBe('done') + }) + + it('has a network string', () => { + expect(wrapper.find('.ni-li:nth-child(1) .ni-li-title').text().trim()) + .toBe('gaia-home (#31,337)') + }) + + it('has an IP icon', () => { + expect(wrapper.find('.ni-li:nth-child(2) i.material-icons').text().trim()) + .toBe('settings_ethernet') + }) + + it('has an IP string', () => { + expect(wrapper.find('.ni-li:nth-child(2) .ni-li-title').text().trim()) + .toBe('127.0.0.1') + }) +}) diff --git a/test/unit/specs/__snapshots__/NiConnectivity.spec.js.snap b/test/unit/specs/__snapshots__/NiConnectivity.spec.js.snap new file mode 100644 index 0000000000..cc49d8ec73 --- /dev/null +++ b/test/unit/specs/__snapshots__/NiConnectivity.spec.js.snap @@ -0,0 +1,32 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`NiConnectivity has the expected html structure 1`] = ` +"
+
+
+
+ done +
+
+
+ gaia-home (#31,337) +
+
+
+
+
+
+
+
+ settings_ethernet +
+
+
+ 127.0.0.1 +
+
+
+
+
+
" +`;