From b51b7849dcfc205924eadf47803db81ab56524be Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Fri, 27 Jan 2017 14:41:41 +0100 Subject: [PATCH] Split Tab from TabBar (#4318) * Tab split (WIP) * Split Tab component --- js/src/views/Application/TabBar/Tab/index.js | 17 ++++ js/src/views/Application/TabBar/Tab/tab.js | 78 +++++++++++++++++++ .../views/Application/TabBar/Tab/tabs.spec.js | 78 +++++++++++++++++++ js/src/views/Application/TabBar/tabBar.js | 74 +++--------------- .../views/Application/TabBar/tabBar.spec.js | 63 +++++++++++++++ 5 files changed, 246 insertions(+), 64 deletions(-) create mode 100644 js/src/views/Application/TabBar/Tab/index.js create mode 100644 js/src/views/Application/TabBar/Tab/tab.js create mode 100644 js/src/views/Application/TabBar/Tab/tabs.spec.js create mode 100644 js/src/views/Application/TabBar/tabBar.spec.js diff --git a/js/src/views/Application/TabBar/Tab/index.js b/js/src/views/Application/TabBar/Tab/index.js new file mode 100644 index 000000000..5c539709f --- /dev/null +++ b/js/src/views/Application/TabBar/Tab/index.js @@ -0,0 +1,17 @@ +// Copyright 2015-2017 Parity Technologies (UK) Ltd. +// This file is part of Parity. + +// Parity is free software: you can redistribute it and/or modify +// it under the terms of the GNU General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. + +// Parity is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU General Public License for more details. + +// You should have received a copy of the GNU General Public License +// along with Parity. If not, see . + +export default from './tab'; diff --git a/js/src/views/Application/TabBar/Tab/tab.js b/js/src/views/Application/TabBar/Tab/tab.js new file mode 100644 index 000000000..7763c581a --- /dev/null +++ b/js/src/views/Application/TabBar/Tab/tab.js @@ -0,0 +1,78 @@ +// Copyright 2015-2017 Parity Technologies (UK) Ltd. +// This file is part of Parity. + +// Parity is free software: you can redistribute it and/or modify +// it under the terms of the GNU General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. + +// Parity is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU General Public License for more details. + +// You should have received a copy of the GNU General Public License +// along with Parity. If not, see . + +import { Tab as MUITab } from 'material-ui/Tabs'; +import React, { Component, PropTypes } from 'react'; +import { FormattedMessage } from 'react-intl'; + +import { Badge } from '~/ui'; + +import styles from '../tabBar.css'; + +const SIGNER_ID = 'signer'; + +export default class Tab extends Component { + static propTypes = { + children: PropTypes.node, + pendings: PropTypes.number, + view: PropTypes.object.isRequired + }; + + render () { + const { view, children } = this.props; + + return ( + + { children } + + ); + } + + renderLabel (id, bubble) { + return ( +
+ + { bubble } +
+ ); + } + + renderSignerLabel () { + const { pendings } = this.props; + let bubble; + + if (pendings) { + bubble = ( + + ); + } + + return this.renderLabel(SIGNER_ID, bubble); + } +} diff --git a/js/src/views/Application/TabBar/Tab/tabs.spec.js b/js/src/views/Application/TabBar/Tab/tabs.spec.js new file mode 100644 index 000000000..e7ab61a7b --- /dev/null +++ b/js/src/views/Application/TabBar/Tab/tabs.spec.js @@ -0,0 +1,78 @@ +// Copyright 2015-2017 Parity Technologies (UK) Ltd. +// This file is part of Parity. + +// Parity is free software: you can redistribute it and/or modify +// it under the terms of the GNU General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. + +// Parity is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU General Public License for more details. + +// You should have received a copy of the GNU General Public License +// along with Parity. If not, see . + +import { shallow } from 'enzyme'; +import React from 'react'; +import sinon from 'sinon'; + +import Tab from './'; + +let component; +let instance; + +function render (id = 'signer') { + component = shallow( + testChildren } + pending={ 5 } + view={ { id } } + /> + ); + instance = component.instance(); + + return component; +} + +describe('views/Application/TabBar/Tab', () => { + beforeEach(() => { + render(); + }); + + it('renders defaults', () => { + expect(component).to.be.ok; + }); + + describe('instance methods', () => { + describe('renderLabel', () => { + it('renders the label with correct label', () => { + expect( + shallow(instance.renderLabel('test')).find('FormattedMessage').props().id + ).to.equal('settings.views.test.label'); + }); + + it('renders the bubble when passed', () => { + expect( + shallow(instance.renderLabel('test', 'testBubble')).text() + ).to.equal('testBubble'); + }); + }); + + describe('renderSignerLabel', () => { + beforeEach(() => { + sinon.stub(instance, 'renderLabel'); + }); + + afterEach(() => { + instance.renderLabel.restore(); + }); + + it('calls renderLabel with the details', () => { + instance.renderSignerLabel(); + expect(instance.renderLabel).to.have.been.calledWith('signer'); + }); + }); + }); +}); diff --git a/js/src/views/Application/TabBar/tabBar.js b/js/src/views/Application/TabBar/tabBar.js index a4692d87f..b2347f854 100644 --- a/js/src/views/Application/TabBar/tabBar.js +++ b/js/src/views/Application/TabBar/tabBar.js @@ -15,77 +15,18 @@ // along with Parity. If not, see . import React, { Component, PropTypes } from 'react'; -import { FormattedMessage } from 'react-intl'; import { connect } from 'react-redux'; import { Link } from 'react-router'; import { Toolbar, ToolbarGroup } from 'material-ui/Toolbar'; -import { Tab as MUITab } from 'material-ui/Tabs'; import { isEqual } from 'lodash'; -import { Badge, Tooltip } from '~/ui'; - import imagesEthcoreBlock from '~/../assets/images/parity-logo-white-no-text.svg'; +import { Tooltip } from '~/ui'; +import Tab from './Tab'; import styles from './tabBar.css'; -class Tab extends Component { - static propTypes = { - children: PropTypes.node, - pendings: PropTypes.number, - view: PropTypes.object - }; - - render () { - const { view, children } = this.props; - - return ( - - { children } - - ); - } - - renderLabel (id, bubble) { - return ( -
- - { bubble } -
- ); - } - - renderSignerLabel (id) { - const { pendings } = this.props; - let bubble; - - if (pendings) { - bubble = ( - - ); - } - - return this.renderLabel(id, bubble); - } -} - class TabBar extends Component { - static contextTypes = { - router: PropTypes.object.isRequired - }; - static propTypes = { isTest: PropTypes.bool, netChain: PropTypes.string, @@ -111,7 +52,10 @@ class TabBar extends Component { return (
- +
); @@ -144,7 +88,8 @@ class TabBar extends Component { return ( . + +import { shallow } from 'enzyme'; +import React from 'react'; +import sinon from 'sinon'; + +import TabBar from './'; + +let component; +let store; + +function createStore () { + store = { + dispatch: sinon.stub(), + subscribe: sinon.stub(), + getState: () => { + return { + settings: { + views: { + settings: { fixed: true } + } + } + }; + } + }; + + return store; +} + +function render (props = {}) { + component = shallow( + , + { + context: { store: createStore() } + } + ).find('TabBar').shallow(); + + return component; +} + +describe('views/Application/TabBar', () => { + beforeEach(() => { + render(); + }); + + it('renders defaults', () => { + expect(component).to.be.ok; + }); +});