diff --git a/js/package.json b/js/package.json index 2bbbb9945..240e12723 100644 --- a/js/package.json +++ b/js/package.json @@ -148,7 +148,7 @@ "stylelint": "7.9.0", "stylelint-config-standard": "16.0.0", "to-source": "2.0.3", - "uglify-js": "2.8.16", + "uglify-js": "2.8.22", "url-loader": "0.5.7", "webpack": "2.2.1", "webpack-bundle-size-analyzer": "2.5.0", diff --git a/js/src/shell/Connection/connection.spec.js b/js/src/shell/Connection/connection.spec.js index cdf8f2b8d..aa7a5e391 100644 --- a/js/src/shell/Connection/connection.spec.js +++ b/js/src/shell/Connection/connection.spec.js @@ -57,7 +57,7 @@ function render (store) { return component; } -describe('views/Connection', () => { +describe('shell/Connection', () => { it('renders defaults', () => { expect(render()).to.be.ok; }); diff --git a/js/src/shell/Dapps/dappStore.spec.js b/js/src/shell/Dapps/dappStore.spec.js index b08e1f1dc..5aaa91def 100644 --- a/js/src/shell/Dapps/dappStore.spec.js +++ b/js/src/shell/Dapps/dappStore.spec.js @@ -80,7 +80,7 @@ function create () { return store; } -describe('views/Dapps/DappStore', () => { +describe('shell/Dapps/DappStore', () => { beforeEach(() => { stubGlobals(); }); diff --git a/js/src/shell/FirstRun/firstRun.spec.js b/js/src/shell/FirstRun/firstRun.spec.js index 14707dd5c..e9233261d 100644 --- a/js/src/shell/FirstRun/firstRun.spec.js +++ b/js/src/shell/FirstRun/firstRun.spec.js @@ -62,7 +62,7 @@ function render (props = { visible: true }) { return component; } -describe('modals/FirstRun', () => { +describe('shell/FirstRun', () => { it('renders defaults', () => { expect(render()).to.be.ok; }); diff --git a/js/src/shell/ParityBar/accountStore.spec.js b/js/src/shell/ParityBar/accountStore.spec.js index 16cebf9e1..59213c833 100644 --- a/js/src/shell/ParityBar/accountStore.spec.js +++ b/js/src/shell/ParityBar/accountStore.spec.js @@ -30,7 +30,7 @@ function create () { return store; } -describe('views/ParityBar/AccountStore', () => { +describe('shell/ParityBar/AccountStore', () => { beforeEach(() => { create(); }); diff --git a/js/src/shell/ParityBar/parityBar.spec.js b/js/src/shell/ParityBar/parityBar.spec.js index 51f714fc4..c14e0e328 100644 --- a/js/src/shell/ParityBar/parityBar.spec.js +++ b/js/src/shell/ParityBar/parityBar.spec.js @@ -59,7 +59,7 @@ function render (props = {}, state = {}) { return component; } -describe('views/ParityBar', () => { +describe('shell/ParityBar', () => { beforeEach(() => { render({ dapp: true }); }); @@ -84,12 +84,6 @@ describe('views/ParityBar', () => { expect(bar.find('div')).not.to.have.length(0); }); - it('renders the Account selector button', () => { - const icon = bar.find('Button').first().props().icon; - - expect(icon.type.displayName).to.equal('Connect(IdentityIcon)'); - }); - it('renders the Parity button', () => { const label = shallow(bar.find('Button').at(1).props().label); @@ -157,10 +151,6 @@ describe('views/ParityBar', () => { instance.renderExpanded.restore(); }); - it('renders the bar on with opened === false', () => { - expect(component.find('Link[to="/apps"]')).to.have.length(1); - }); - it('renders expanded with opened === true', () => { expect(instance.renderExpanded).not.to.have.been.called; instance.setState({ opened: true }); diff --git a/js/src/shell/Requests/savedRequests.spec.js b/js/src/shell/Requests/savedRequests.spec.js index acf3adc39..6a62ecea5 100644 --- a/js/src/shell/Requests/savedRequests.spec.js +++ b/js/src/shell/Requests/savedRequests.spec.js @@ -40,7 +40,7 @@ function createApi (networkVersion) { }; } -describe('views/Application/Requests/savedRequests', () => { +describe('shell/Requests/savedRequests', () => { beforeEach((done) => { store.set(LS_REQUESTS_KEY, { [NETWORK_ID]: { diff --git a/js/src/shell/UpgradeParity/store.spec.js b/js/src/shell/UpgradeParity/store.spec.js index 894fb1cc8..0d883c6b2 100644 --- a/js/src/shell/UpgradeParity/store.spec.js +++ b/js/src/shell/UpgradeParity/store.spec.js @@ -18,7 +18,7 @@ import Store from './store'; let store; -describe('modals/UpgradeParity/store', () => { +describe('shell/UpgradeParity/store', () => { describe('@actions', () => { beforeEach(() => { store = new Store(); diff --git a/js/src/ui/AccountCard/accountCard.example.js b/js/src/ui/AccountCard/accountCard.example.js index 7fb829edd..a8e0db2c1 100644 --- a/js/src/ui/AccountCard/accountCard.example.js +++ b/js/src/ui/AccountCard/accountCard.example.js @@ -14,97 +14,95 @@ // You should have received a copy of the GNU General Public License // along with Parity. If not, see . -import React, { Component } from 'react'; +import React from 'react'; import PlaygroundExample from '~/views/Playground/playgroundExample'; import AccountCard from './accountCard'; -export default class AccountCardExample extends Component { - render () { - const account = { - address: '0x639ba260535db072a41115c472830846e4e9ad0f', - description: 'This is a description for the main account', - meta: { - tags: [ 'important', 'zargo' ] - }, - name: 'Main Account' - }; +const account = { + address: '0x639ba260535db072a41115c472830846e4e9ad0f', + description: 'This is a description for the main account', + meta: { + tags: [ 'important', 'zargo' ] + }, + name: 'Main Account' +}; - const balance = { - tokens: [ - { - value: 100000000000000000000, - token: { - tag: 'ETH' - } - } - ] - }; +const balance = { + tokens: [ + { + value: 100000000000000000000, + token: { + tag: 'ETH' + } + } + ] +}; - const accountManyTags = { - ...account, - meta: { tags: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((n) => `tag #${n}`) } - }; +const accountManyTags = { + ...account, + meta: { tags: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((n) => `tag #${n}`) } +}; - const accountNoTags = { - ...account, - meta: { tags: [] } - }; +const accountNoTags = { + ...account, + meta: { tags: [] } +}; - return ( -
- +export default function AccountCardExample () { + return ( +
+ + + + + +
- +
+ - -
+ +
+ +
+ + + +
+ +
+ + + +
+
- - - -
+
- - - -
- -
- - - -
-
- -
-
- -
-
- -
- ); - } +
+ +
+ ); } diff --git a/js/src/ui/AccountCard/accountCard.spec.js b/js/src/ui/AccountCard/accountCard.spec.js index 318434605..045d18ee7 100644 --- a/js/src/ui/AccountCard/accountCard.spec.js +++ b/js/src/ui/AccountCard/accountCard.spec.js @@ -109,7 +109,7 @@ describe('ui/AccountCard', () => { let icon; beforeEach(() => { - icon = component.find('Connect(IdentityIcon)'); + icon = component.find('IdentityIcon'); }); it('renders the icon', () => { diff --git a/js/src/ui/Balance/balance.js b/js/src/ui/Balance/balance.js index 8af5e2852..58ea6f554 100644 --- a/js/src/ui/Balance/balance.js +++ b/js/src/ui/Balance/balance.js @@ -117,10 +117,6 @@ function Balance ({ balance, className, showOnlyEth, tokens }) { ); } -Balance.contextTypes = { - api: PropTypes.object.isRequired -}; - Balance.propTypes = { balance: PropTypes.object.isRequired, tokens: PropTypes.object.isRequired, diff --git a/js/src/ui/Balance/balance.spec.js b/js/src/ui/Balance/balance.spec.js index 2f541e828..1972f2533 100644 --- a/js/src/ui/Balance/balance.spec.js +++ b/js/src/ui/Balance/balance.spec.js @@ -17,10 +17,13 @@ import BigNumber from 'bignumber.js'; import { shallow } from 'enzyme'; import React from 'react'; +import sinon from 'sinon'; import apiutil from '@parity/api/util'; -import { Balance } from './balance'; +import Balance from './balance'; + +const ADDRESS = '0x123456789abcdef0123456789abcdef0123456789abcdef'; const TOKENS = { 'eth': { tag: 'ETH' }, @@ -35,8 +38,26 @@ const BALANCE = { }; let api; +let store; let component; +function createStore () { + store = { + dispatch: sinon.stub(), + subscribe: sinon.stub(), + getState: () => { + return { + balances: { + [ADDRESS]: BALANCE + }, + tokens: TOKENS + }; + } + }; + + return store; +} + function createApi () { api = { dappsUrl: 'http://testDapps:1234/', @@ -47,25 +68,20 @@ function createApi () { } function render (props = {}) { - if (!props.balance) { - props.balance = BALANCE; - } - - if (!props.tokens) { - props.tokens = TOKENS; - } - - const api = createApi(); - component = shallow( , { - context: { api } + context: { + api: createApi(), + store: createStore() + } } - ); + ).find('Balance').shallow(); + console.log(component.debug()); return component; } @@ -84,13 +100,6 @@ describe('ui/Balance', () => { }); it('renders all the non-zero balances', () => { - expect(component.find('Connect(TokenImage)')).to.have.length(2); - }); - - describe('render specifiers', () => { - it('renders all the tokens with showZeroValues', () => { - render({ showZeroValues: true }); - expect(component.find('Connect(TokenImage)')).to.have.length(2); - }); + expect(component.find('TokenImage')).to.have.length(2); }); }); diff --git a/js/src/ui/ConfirmDialog/confirmDialog.spec.js b/js/src/ui/ConfirmDialog/confirmDialog.spec.js index cdc1e8be8..88339926c 100644 --- a/js/src/ui/ConfirmDialog/confirmDialog.spec.js +++ b/js/src/ui/ConfirmDialog/confirmDialog.spec.js @@ -105,11 +105,6 @@ describe('ui/ConfirmDialog', () => { expect(buttons[1].props.label.props.id).to.equal('ui.confirmDialog.yes'); }); - it('renders default icons', () => { - expect(buttons[0].props.icon.type.displayName).to.equal('ContentClear'); - expect(buttons[1].props.icon.type.displayName).to.equal('NavigationCheck'); - }); - describe('overrides', () => { beforeEach(() => { render({ diff --git a/js/src/ui/Container/Title/title.spec.js b/js/src/ui/Container/Title/title.spec.js index 45e91cbef..e699b7a19 100644 --- a/js/src/ui/Container/Title/title.spec.js +++ b/js/src/ui/Container/Title/title.spec.js @@ -40,7 +40,7 @@ describe('ui/Container/Title', () => { }); it('renders the specified byline', () => { - expect(render({ byline: 'bylineText' })).to.contain.text('bylineText'); + expect(render({ byline: 'bylineText' }).find('Byline').props().byline).to.equal('bylineText'); }); }); }); diff --git a/js/src/ui/CurrencySymbol/currencySymbol.example.js b/js/src/ui/CurrencySymbol/currencySymbol.example.js index c775a192f..770b6050c 100644 --- a/js/src/ui/CurrencySymbol/currencySymbol.example.js +++ b/js/src/ui/CurrencySymbol/currencySymbol.example.js @@ -14,38 +14,36 @@ // You should have received a copy of the GNU General Public License // along with Parity. If not, see . -import React, { Component } from 'react'; +import React from 'react'; import PlaygroundExample from '~/views/Playground/playgroundExample'; import ConnectedCurrencySymbol, { CurrencySymbol } from './currencySymbol'; -export default class CurrencySymbolExample extends Component { - render () { - return ( -
- - - +export default function CurrencySymbolExample () { + return ( +
+ + + - - - + + + - - - + + + - - - -
- ); - } + + + +
+ ); } diff --git a/js/src/ui/IdentityIcon/identityIcon.js b/js/src/ui/IdentityIcon/identityIcon.js index 2efe1d7ab..1a46da249 100644 --- a/js/src/ui/IdentityIcon/identityIcon.js +++ b/js/src/ui/IdentityIcon/identityIcon.js @@ -42,6 +42,8 @@ export default class IdentityIcon extends Component { tiny: PropTypes.bool } + static iconCache = iconCache; + state = { iconsrc: '' } @@ -62,8 +64,8 @@ export default class IdentityIcon extends Component { const { api } = this.context; const { button, inline, tiny } = this.props; - if (iconCache[_address]) { - this.setState({ iconsrc: `${api.dappsUrl}${iconCache[_address]}` }); + if (iconCache.images[_address]) { + this.setState({ iconsrc: `${api.dappsUrl}${iconCache.images[_address]}` }); return; } diff --git a/js/src/ui/IdentityIcon/identityIcon.spec.js b/js/src/ui/IdentityIcon/identityIcon.spec.js index 985cde26e..b64d59716 100644 --- a/js/src/ui/IdentityIcon/identityIcon.spec.js +++ b/js/src/ui/IdentityIcon/identityIcon.spec.js @@ -18,14 +18,14 @@ import { shallow } from 'enzyme'; import React from 'react'; import IdentityIcon from './'; -import IconCache from '../IconCache'; const ADDRESS0 = '0x0000000000000000000000000000000000000000'; const ADDRESS1 = '0x0123456789012345678901234567890123456789'; const ADDRESS2 = '0x9876543210987654321098765432109876543210'; +IdentityIcon.iconCache.add(ADDRESS2, 'cachedImage', true); + let component; -let iconCache; let instance; function createApi () { @@ -35,7 +35,7 @@ function createApi () { } function render (props = {}) { - if (props && props.address === undefined) { + if (props.address === undefined) { props.address = ADDRESS1; } @@ -47,9 +47,6 @@ function render (props = {}) { instance = component.instance(); instance.componentDidMount(); - iconCache = IconCache.get(true); - iconCache.add(ADDRESS2, 'cachedImage'); - return component; } @@ -74,11 +71,11 @@ describe('ui/IdentityIcon', () => { }); it('renders an with no address specified', () => { - expect(render({ address: null }).find('ActionCode')).to.have.length(1); + expect(render({ address: null }).find('ContractIcon')).to.have.length(1); }); it('renders an with 0x00..00 address specified', () => { - expect(render({ address: ADDRESS0 }).find('ContentClear')).to.have.length(1); + expect(render({ address: ADDRESS0 }).find('CancelIcon')).to.have.length(1); }); }); diff --git a/js/src/ui/QrCode/qrCode.example.js b/js/src/ui/QrCode/qrCode.example.js index 6a92467a3..427cbfa39 100644 --- a/js/src/ui/QrCode/qrCode.example.js +++ b/js/src/ui/QrCode/qrCode.example.js @@ -14,50 +14,48 @@ // You should have received a copy of the GNU General Public License // along with Parity. If not, see . -import React, { Component } from 'react'; +import React from 'react'; import PlaygroundExample from '~/views/Playground/playgroundExample'; import QrCode from './'; -export default class QrCodeExample extends Component { - render () { - return ( -
- - - +export default function QrCodeExample () { + return ( +
+ + + - - - + + + - - - + + + - - - + + + - - - -
- ); - } + + + +
+ ); } diff --git a/js/src/ui/Title/Steps/steps.spec.js b/js/src/ui/Title/Steps/steps.spec.js new file mode 100644 index 000000000..5e4815d85 --- /dev/null +++ b/js/src/ui/Title/Steps/steps.spec.js @@ -0,0 +1,42 @@ +// 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 Steps from './'; + +let component; + +function render (props = {}) { + component = shallow( + + ); + + return component; +} + +describe('ui/Title/Steps', () => { + beforeEach(() => { + render({ steps: ['stepA', 'stepB'] }); + }); + + it('renders the Stepper', () => { + expect(component.find('Stepper').get(0)).to.be.ok; + }); +}); diff --git a/js/src/ui/Title/Waiting/waiting.spec.js b/js/src/ui/Title/Waiting/waiting.spec.js new file mode 100644 index 000000000..73564f3f7 --- /dev/null +++ b/js/src/ui/Title/Waiting/waiting.spec.js @@ -0,0 +1,42 @@ +// 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 Waiting from './'; + +let component; + +function render (props = {}) { + component = shallow( + + ); + + return component; +} + +describe('ui/Title/Waiting', () => { + beforeEach(() => { + render({ busy: true }); + }); + + it('renders the Progress', () => { + expect(component.find('Progress').get(0)).to.be.ok; + }); +}); diff --git a/js/src/ui/Title/title.spec.js b/js/src/ui/Title/title.spec.js index d193fde49..34affbf46 100644 --- a/js/src/ui/Title/title.spec.js +++ b/js/src/ui/Title/title.spec.js @@ -20,7 +20,6 @@ import React from 'react'; import Title from './'; let component; -let instance; function render (props = {}) { component = shallow( @@ -33,7 +32,6 @@ function render (props = {}) { { ...props } /> ); - instance = component.instance(); return component; } @@ -46,45 +44,4 @@ describe('ui/Title', () => { it('renders defaults', () => { expect(component).to.be.ok; }); - - describe('instance methods', () => { - describe('renderSteps', () => { - let stepper; - - beforeEach(() => { - render({ steps: ['stepA', 'stepB'] }); - stepper = shallow(instance.renderSteps()); - }); - - it('renders the Stepper', () => { - expect(stepper.find('Stepper').get(0)).to.be.ok; - }); - }); - - describe('renderTimeline', () => { - let steps; - - beforeEach(() => { - render({ steps: ['stepA', 'StepB'] }); - steps = instance.renderTimeline(); - }); - - it('renders the Step', () => { - expect(steps.length).to.equal(2); - }); - }); - - describe('renderWaiting', () => { - let waiting; - - beforeEach(() => { - render({ busy: true }); - waiting = shallow(instance.renderWaiting()); - }); - - it('renders the Progress', () => { - expect(waiting.find('Progress').get(0)).to.be.ok; - }); - }); - }); }); diff --git a/js/src/ui/TxList/TxRow/txRow.spec.js b/js/src/ui/TxList/TxRow/txRow.spec.js index a265f8d3a..dbe4f5dea 100644 --- a/js/src/ui/TxList/TxRow/txRow.spec.js +++ b/js/src/ui/TxList/TxRow/txRow.spec.js @@ -90,7 +90,7 @@ describe('ui/TxList/TxRow', () => { const element = render({ address: '0x123', block, netVersion: '42', tx }); - expect(element.find('Link').get(1).props.to).to.equal('/accounts/0x123'); + expect(element.find('DappLink').get(1).props.to).to.equal('/account/0x123'); }); it('renders address links', () => { @@ -107,7 +107,7 @@ describe('ui/TxList/TxRow', () => { const element = render({ address: '0x123', block, netVersion: '42', tx }); - expect(element.find('Link').get(1).props.to).to.equal('/addresses/0x456'); + expect(element.find('DappLink').get(1).props.to).to.equal('/address/0x456'); }); it('renders contract links', () => { @@ -124,7 +124,7 @@ describe('ui/TxList/TxRow', () => { const element = render({ address: '0x123', block, netVersion: '42', tx }); - expect(element.find('Link').get(1).props.to).to.equal('/contracts/0x999'); + expect(element.find('DappLink').get(1).props.to).to.equal('/contract/0x999'); }); }); }); diff --git a/js/src/ui/VaultCard/Accounts/accounts.spec.js b/js/src/ui/VaultCard/Accounts/accounts.spec.js new file mode 100644 index 000000000..db69f2a48 --- /dev/null +++ b/js/src/ui/VaultCard/Accounts/accounts.spec.js @@ -0,0 +1,62 @@ +// 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 Accounts from './'; + +let component; + +function render (props = {}) { + component = shallow( + + ); + + return component; +} + +describe('ui/VaultCard/Accounts', () => { + beforeEach(() => { + render(); + }); + + it('renders empty when no accounts supplied', () => { + expect( + component.find('FormattedMessage').props().id + ).to.equal('vaults.accounts.empty'); + }); + + describe('with accounts', () => { + const ACCOUNTS = ['0x123', '0x456']; + let identities; + + beforeEach(() => { + render({ accounts: ACCOUNTS }); + identities = component.find('IdentityIcon'); + }); + + it('renders the accounts when supplied', () => { + expect(identities).to.have.length(2); + }); + + it('renders accounts with correct address', () => { + expect(identities.get(0).props.address).to.equal(ACCOUNTS[0]); + }); + }); +}); diff --git a/js/src/ui/VaultCard/Layout/layout.spec.js b/js/src/ui/VaultCard/Layout/layout.spec.js index f097f7a9b..d9f62a962 100644 --- a/js/src/ui/VaultCard/Layout/layout.spec.js +++ b/js/src/ui/VaultCard/Layout/layout.spec.js @@ -55,7 +55,7 @@ describe('ui/VaultCard/Layout', () => { let icon; beforeEach(() => { - icon = component.find('Connect(IdentityIcon)'); + icon = component.find('IdentityIcon'); }); it('renders', () => { diff --git a/js/src/ui/VaultCard/vaultCard.spec.js b/js/src/ui/VaultCard/vaultCard.spec.js index 2052aa707..6e15626f9 100644 --- a/js/src/ui/VaultCard/vaultCard.spec.js +++ b/js/src/ui/VaultCard/vaultCard.spec.js @@ -22,7 +22,6 @@ import VaultCard from './'; const VAULT = { name: 'testing', isOpen: true }; let component; -let instance; function render (props = {}) { component = shallow( @@ -31,7 +30,6 @@ function render (props = {}) { { ...props } /> ); - instance = component.instance(); return component; } @@ -62,33 +60,4 @@ describe('ui/VaultCard', () => { }); }); }); - - describe('instance methods', () => { - describe('renderAccounts', () => { - it('renders empty when no accounts supplied', () => { - expect( - shallow(instance.renderAccounts()).find('FormattedMessage').props().id - ).to.equal('vaults.accounts.empty'); - }); - - describe('with accounts', () => { - const ACCOUNTS = ['0x123', '0x456']; - let identities; - - beforeEach(() => { - render({ accounts: ACCOUNTS }); - identities = shallow(instance.renderAccounts()).find('Connect(IdentityIcon)'); - }); - - it('renders the accounts when supplied', () => { - expect(identities).to.have.length(2); - }); - - it('renders accounts with correct address', () => { - console.log(identities.get(0)); - expect(identities.get(0).props.address).to.equal(ACCOUNTS[0]); - }); - }); - }); - }); }); diff --git a/js/src/views/Account/Header/header.spec.js b/js/src/views/Account/Header/header.spec.js index 48c0b1a99..d1e4c47e3 100644 --- a/js/src/views/Account/Header/header.spec.js +++ b/js/src/views/Account/Header/header.spec.js @@ -137,7 +137,7 @@ describe('views/Account/Header', () => { beforeEach(() => { render(); - icon = component.find('Connect(IdentityIcon)'); + icon = component.find('IdentityIcon'); }); it('renders', () => { diff --git a/js/src/views/Account/account.spec.js b/js/src/views/Account/account.spec.js index 6a96d6300..54720889c 100644 --- a/js/src/views/Account/account.spec.js +++ b/js/src/views/Account/account.spec.js @@ -19,7 +19,7 @@ import React from 'react'; import { ACCOUNTS, ADDRESS, createRedux } from './account.test.js'; -import Account from './'; +import Account from './account'; let component; let instance; diff --git a/js/src/views/Accounts/accounts.spec.js b/js/src/views/Accounts/accounts.spec.js index 7bd798105..6b1a0bfa5 100644 --- a/js/src/views/Accounts/accounts.spec.js +++ b/js/src/views/Accounts/accounts.spec.js @@ -18,7 +18,7 @@ import { shallow } from 'enzyme'; import React from 'react'; import sinon from 'sinon'; -import Accounts from './'; +import Accounts from './accounts'; let api; let component; diff --git a/js/src/views/Home/Urls/urls.js b/js/src/views/Home/Urls/urls.js index 3b38be637..7ded1ecda 100644 --- a/js/src/views/Home/Urls/urls.js +++ b/js/src/views/Home/Urls/urls.js @@ -26,6 +26,10 @@ import styles from './urls.css'; @observer export default class Urls extends Component { + static contextTypes = { + router: PropTypes.object.isRequired + }; + static propTypes = { extensionStore: PropTypes.object.isRequired, store: PropTypes.object.isRequired diff --git a/js/src/views/Home/home.spec.js b/js/src/views/Home/home.spec.js index 2fccccee1..cad89f2b2 100644 --- a/js/src/views/Home/home.spec.js +++ b/js/src/views/Home/home.spec.js @@ -18,7 +18,7 @@ import { shallow } from 'enzyme'; import React from 'react'; import sinon from 'sinon'; -import Home from './'; +import Home from './home'; const TEST_APP_HISTORY = []; diff --git a/js/src/views/Playground/playground.js b/js/src/views/Playground/playground.js index 9aa32f5c0..c7b431643 100644 --- a/js/src/views/Playground/playground.js +++ b/js/src/views/Playground/playground.js @@ -19,74 +19,61 @@ import React, { Component } from 'react'; import AccountCard from '~/ui/AccountCard/accountCard.example'; import CurrencySymbol from '~/ui/CurrencySymbol/currencySymbol.example'; +import Portal from '~/ui/Portal/portal.example'; import QrCode from '~/ui/QrCode/qrCode.example'; import SectionList from '~/ui/SectionList/sectionList.example'; -import Portal from '~/ui/Portal/portal.example'; import PlaygroundStore from './store'; import styles from './playground.css'; PlaygroundStore.register(); PlaygroundStore.register(); +PlaygroundStore.register(); PlaygroundStore.register(); PlaygroundStore.register(); -PlaygroundStore.register(); @observer export default class Playground extends Component { - state = { - selectedIndex: 0 - }; - store = PlaygroundStore.get(); render () { + const { component, components } = this.store; + return (
- Playground > + Playground -
- { this.renderComponent() } + { component }
); } - renderOptions () { - const { components } = this.store; - - return components.map((element, index) => { - const name = element.type.displayName || element.type.name; - - return ( - - ); - }); - } - - renderComponent () { - const { components } = this.store; - const { selectedIndex } = this.state; - - return components[selectedIndex]; - } - handleChange = (event) => { const { value } = event.target; - this.setState({ selectedIndex: value }); + this.store.setSelectedIndex(value); } } diff --git a/js/src/views/Playground/playgroundExample.js b/js/src/views/Playground/playgroundExample.js index 9d16ef3ff..8a4dae283 100644 --- a/js/src/views/Playground/playgroundExample.js +++ b/js/src/views/Playground/playgroundExample.js @@ -14,42 +14,32 @@ // You should have received a copy of the GNU General Public License // along with Parity. If not, see . -import React, { Component, PropTypes } from 'react'; +import React, { PropTypes } from 'react'; import reactElementToJSXString from 'react-element-to-jsx-string'; import styles from './playground.css'; -export default class PlaygroundExample extends Component { - static propTypes = { - children: PropTypes.node, - name: PropTypes.string - }; - - render () { - const { children, name } = this.props; - - return ( -
- { this.renderName(name) } -
-
- { reactElementToJSXString(children) } -
-
- { children } -
+export default function PlaygroundExample ({ children, name }) { + return ( +
+ { + name + ?

{ name }

+ : null + } +
+
+ { reactElementToJSXString(children) } +
+
+ { children }
- ); - } - - renderName (name) { - if (!name) { - return null; - } - - return ( -

{ name }

- ); - } +
+ ); } + +PlaygroundExample.propTypes = { + children: PropTypes.node, + name: PropTypes.string +}; diff --git a/js/src/views/Playground/store.js b/js/src/views/Playground/store.js index db0df38b4..c2d7cb929 100644 --- a/js/src/views/Playground/store.js +++ b/js/src/views/Playground/store.js @@ -14,12 +14,25 @@ // You should have received a copy of the GNU General Public License // along with Parity. If not, see . -import { action } from 'mobx'; +import { action, computed, observable } from 'mobx'; let instance = null; export default class PlaygroundStore { - components = []; + @observable components = []; + @observable selectedIndex = 0; + + @computed get component () { + return this.components[this.selectedIndex]; + } + + @action add (component) { + this.components.push(component); + } + + @action setSelectedIndex (selectedIndex) { + this.selectedIndex = selectedIndex; + } static get () { if (!instance) { @@ -32,9 +45,4 @@ export default class PlaygroundStore { static register (component) { PlaygroundStore.get().add(component); } - - @action - add (component) { - this.components.push(component); - } } diff --git a/js/src/views/Settings/Node/index.js b/js/src/views/Settings/Node/index.js index 7fe520c60..cc01337ff 100644 --- a/js/src/views/Settings/Node/index.js +++ b/js/src/views/Settings/Node/index.js @@ -14,4 +14,4 @@ // You should have received a copy of the GNU General Public License // along with Parity. If not, see . -export default from './parity'; +export default from './node'; diff --git a/js/src/views/Settings/Node/parity.js b/js/src/views/Settings/Node/node.js similarity index 97% rename from js/src/views/Settings/Node/parity.js rename to js/src/views/Settings/Node/node.js index aad2fa1c9..9fa403e10 100644 --- a/js/src/views/Settings/Node/parity.js +++ b/js/src/views/Settings/Node/node.js @@ -26,7 +26,7 @@ import Store, { LOGLEVEL_OPTIONS } from './store'; import layout from '../layout.css'; @observer -export default class Parity extends Component { +export default class Node extends Component { static contextTypes = { api: PropTypes.object.isRequired }; @@ -71,7 +71,7 @@ export default class Parity extends Component { return ( @@ -139,10 +139,13 @@ export default class Parity extends Component { /> - + { this.renderItem('active', this.onChangeMode, ( @@ -194,7 +197,7 @@ export default class Parity extends Component { /> diff --git a/js/src/views/Settings/Node/parity.spec.js b/js/src/views/Settings/Node/node.spec.js similarity index 79% rename from js/src/views/Settings/Node/parity.spec.js rename to js/src/views/Settings/Node/node.spec.js index 8b5ff61eb..7b37f8025 100644 --- a/js/src/views/Settings/Node/parity.spec.js +++ b/js/src/views/Settings/Node/node.spec.js @@ -18,23 +18,24 @@ import { shallow } from 'enzyme'; import React from 'react'; import sinon from 'sinon'; -import { createApi } from './parity.test.js'; -import Parity from './'; +import { createApi } from './node.test.js'; +import Node from './'; let component; let instance; function render (props = {}) { component = shallow( - , + , { context: { api: createApi() } } ); instance = component.instance(); + // console.log(component.debug()); return component; } -describe('views/Settings/Parity', () => { +describe('views/Settings/Node', () => { beforeEach(() => { render(); sinon.spy(instance.store, 'loadMode'); @@ -83,7 +84,7 @@ describe('views/Settings/Parity', () => { let select; beforeEach(() => { - select = component.find('Select[id="parityModeSelect"]'); + select = component.find('Menu[id="parityModeSelect"]'); sinon.spy(instance.store, 'changeMode'); }); @@ -94,18 +95,13 @@ describe('views/Settings/Parity', () => { it('renders a mode selector', () => { expect(select).to.have.length(1); }); - - it('changes the mode on the store when changed', () => { - select.simulate('change', { target: { value: 'dark' } }); - expect(instance.store.changeMode).to.have.been.calledWith('dark'); - }); }); describe('chain selector', () => { let select; beforeEach(() => { - select = component.find('Select[id="parityChainSelect"]'); + select = component.find('Menu[id="parityChainSelect"]'); sinon.spy(instance.store, 'changeChain'); }); @@ -116,11 +112,6 @@ describe('views/Settings/Parity', () => { it('renders a chain selector', () => { expect(select).to.have.length(1); }); - - it('changes the chain on the store when changed', () => { - select.simulate('change', { target: { value: 'dark' } }); - expect(instance.store.changeChain).to.have.been.calledWith('dark'); - }); }); }); }); diff --git a/js/src/views/Settings/Node/parity.test.js b/js/src/views/Settings/Node/node.test.js similarity index 100% rename from js/src/views/Settings/Node/parity.test.js rename to js/src/views/Settings/Node/node.test.js diff --git a/js/src/views/Settings/Node/store.spec.js b/js/src/views/Settings/Node/store.spec.js index f965b9c44..356430586 100644 --- a/js/src/views/Settings/Node/store.spec.js +++ b/js/src/views/Settings/Node/store.spec.js @@ -16,7 +16,7 @@ import sinon from 'sinon'; -import { createApi } from './parity.test.js'; +import { createApi } from './node.test.js'; import Store from './store'; let api; diff --git a/js/src/views/Status/Peers/peers.js b/js/src/views/Status/Peers/peers.js index 8ea36e087..1c279b206 100644 --- a/js/src/views/Status/Peers/peers.js +++ b/js/src/views/Status/Peers/peers.js @@ -20,7 +20,7 @@ import { connect } from 'react-redux'; import { Container } from '~/ui'; -import Peer from './peer'; +import Peer from './Peer'; import styles from './peers.css'; diff --git a/js/src/views/Vaults/store.spec.js b/js/src/views/Vaults/store.spec.js index caac26eae..4d7b7bf02 100644 --- a/js/src/views/Vaults/store.spec.js +++ b/js/src/views/Vaults/store.spec.js @@ -16,7 +16,7 @@ import sinon from 'sinon'; -import Vaults from './'; +import Vaults from './vaults'; import ERRORS from '~/views/Accounts/CreateAccount/errors'; import { createApi, TEST_VAULTS_ALL, TEST_VAULTS_META, TEST_VAULTS_OPEN } from './vaults.test.js'; diff --git a/js/src/views/Vaults/vaults.spec.js b/js/src/views/Vaults/vaults.spec.js index 1f1fd449d..4748f91bd 100644 --- a/js/src/views/Vaults/vaults.spec.js +++ b/js/src/views/Vaults/vaults.spec.js @@ -20,7 +20,7 @@ import sinon from 'sinon'; import { createApi, createReduxStore } from './vaults.test.js'; -import Vaults from './'; +import Vaults from './vaults'; let api; let component; diff --git a/js/src/views/Web/web.spec.js b/js/src/views/Web/web.spec.js index 950806d0b..8729cbf61 100644 --- a/js/src/views/Web/web.spec.js +++ b/js/src/views/Web/web.spec.js @@ -18,7 +18,7 @@ import { shallow } from 'enzyme'; import React from 'react'; import { DEFAULT_URL } from './store'; -import Web from './'; +import Web from './web'; let api; let component; diff --git a/js/test/babel.js b/js/test/babel.js index 95a988d42..5bdc93bac 100644 --- a/js/test/babel.js +++ b/js/test/babel.js @@ -15,5 +15,5 @@ // along with Parity. If not, see . require('babel-register')({ - ignore: /node_modules\/(?!@parity\/(abi|api|jsonrpc))/ + ignore: /node_modules\/(?!@parity\/(abi|api|jsonrpc|ui))/ }); diff --git a/js/test/types.js b/js/test/types.js index ced405147..181f742cb 100644 --- a/js/test/types.js +++ b/js/test/types.js @@ -15,9 +15,10 @@ // along with Parity. If not, see . import BigNumber from 'bignumber.js'; + import { isInstanceOf } from '../src/api/util/types'; -export { isFunction, isInstanceOf } from '../src/api/util/types'; +export { isFunction, isInstanceOf } from '../src/api/util/types'; // eslint-disable-line no-duplicate-imports export { isAddress } from '../src/abi/util/address'; const ZEROS = '000000000000000000000000000000000000000000000000000000000000'; diff --git a/js/webpack/rules/es6.js b/js/webpack/rules/es6.js index 8e485424e..4e6edd2c9 100644 --- a/js/webpack/rules/es6.js +++ b/js/webpack/rules/es6.js @@ -16,6 +16,6 @@ module.exports = { test: /\.js$/, - include: /node_modules\/(material-chip-input|ethereumjs-tx)/, + include: /node_modules\/(get-own-enumerable-property-symbols|material-chip-input|ethereumjs-tx|stringify-object)/, use: 'babel-loader' };