diff --git a/package.json b/package.json index 1fea3656c..bbf4c772c 100644 --- a/package.json +++ b/package.json @@ -227,6 +227,7 @@ "react-addons-test-utils": "^15.5.1", "react-test-renderer": "^15.5.4", "react-testutils-additions": "^15.2.0", + "redux-test-utils": "^0.1.3", "sinon": "^4.0.0", "stylelint-config-standard": "^17.0.0", "tape": "^4.5.1", diff --git a/test/lib/shallow-with-store.js b/test/lib/shallow-with-store.js new file mode 100644 index 000000000..411aa0455 --- /dev/null +++ b/test/lib/shallow-with-store.js @@ -0,0 +1,11 @@ +const shallow = require('enzyme').shallow + +module.exports = shallowWithStore + +function shallowWithStore (component, store) { + const context = { + store, + } + + return shallow(component, { context }) +}; diff --git a/test/unit/components/balance-component-test.js b/test/unit/components/balance-component-test.js index c32a8ab2b..a5fededc8 100644 --- a/test/unit/components/balance-component-test.js +++ b/test/unit/components/balance-component-test.js @@ -1,18 +1,31 @@ -var assert = require('assert') -var BalanceComponent = require('../../../ui/app/components/balance-component') +const assert = require('assert') +const h = require('react-hyperscript') +const { createMockStore } = require('redux-test-utils') +const shallowWithStore = require('../../lib/shallow-with-store') +const BalanceComponent = require('../../../ui/app/components/balance-component') +const mockState = { + metamask: { + accounts: { abc: {} }, + network: 1, + selectedAddress: 'abc', + } +} describe('BalanceComponent', function () { let balanceComponent - + let store + let component beforeEach(function () { - balanceComponent = new BalanceComponent() + store = createMockStore(mockState) + component = shallowWithStore(h(BalanceComponent), store) + balanceComponent = component.dive() }) it('shows token balance and convert to fiat value based on conversion rate', function () { const formattedBalance = '1.23 ETH' - const tokenBalance = balanceComponent.getTokenBalance(formattedBalance, false) - const fiatDisplayNumber = balanceComponent.getFiatDisplayNumber(formattedBalance, 2) + const tokenBalance = balanceComponent.instance().getTokenBalance(formattedBalance, false) + const fiatDisplayNumber = balanceComponent.instance().getFiatDisplayNumber(formattedBalance, 2) assert.equal('1.23 ETH', tokenBalance) assert.equal(2.46, fiatDisplayNumber) @@ -21,8 +34,8 @@ describe('BalanceComponent', function () { it('shows only the token balance when conversion rate is not available', function () { const formattedBalance = '1.23 ETH' - const tokenBalance = balanceComponent.getTokenBalance(formattedBalance, false) - const fiatDisplayNumber = balanceComponent.getFiatDisplayNumber(formattedBalance, 0) + const tokenBalance = balanceComponent.instance().getTokenBalance(formattedBalance, false) + const fiatDisplayNumber = balanceComponent.instance().getFiatDisplayNumber(formattedBalance, 0) assert.equal('1.23 ETH', tokenBalance) assert.equal('N/A', fiatDisplayNumber) diff --git a/test/unit/components/pending-tx-test.js b/test/unit/components/pending-tx-test.js index 20feba2a3..97cac3216 100644 --- a/test/unit/components/pending-tx-test.js +++ b/test/unit/components/pending-tx-test.js @@ -1,18 +1,22 @@ const assert = require('assert') -const additions = require('react-testutils-additions') const h = require('react-hyperscript') const PendingTx = require('../../../ui/app/components/pending-tx') -const ReactTestUtils = require('react-addons-test-utils') const ethUtil = require('ethereumjs-util') -describe('PendingTx', function () { - const identities = { - '0xfdea65c8e26263f6d9a1b5de9555d2931a33b826': { - name: 'Main Account 1', - balance: '0x00000000000000056bc75e2d63100000', - }, +const { createMockStore } = require('redux-test-utils') +const shallowWithStore = require('../../lib/shallow-with-store') + +const identities = { abc: {}, def: {} } +const mockState = { + metamask: { + accounts: { abc: {} }, + identities, + conversionRate: 10, + selectedAddress: 'abc', } +} +describe('PendingTx', function () { const gasPrice = '0x4A817C800' // 20 Gwei const txData = { 'id': 5021615666270214, @@ -29,55 +33,35 @@ describe('PendingTx', function () { 'gasLimitSpecified': false, 'estimatedGas': '0x5208', } + const newGasPrice = '0x77359400' + const computedBalances = {} + computedBalances[Object.keys(identities)[0]] = { + ethBalance: '0x00000000000000056bc75e2d63100000', + } + const props = { + txData, + computedBalances, + sendTransaction: (txMeta, event) => { + // Assert changes: + const result = ethUtil.addHexPrefix(txMeta.txParams.gasPrice) + assert.notEqual(result, gasPrice, 'gas price should change') + assert.equal(result, newGasPrice, 'gas price assigned.') + }, + } - it('should use updated values when edited.', function (done) { - const renderer = ReactTestUtils.createRenderer() - const newGasPrice = '0x77359400' - - const computedBalances = {} - computedBalances[Object.keys(identities)[0]] = { - ethBalance: '0x00000000000000056bc75e2d63100000', - } - const props = { - identities, - accounts: identities, - txData, - computedBalances, - sendTransaction: (txMeta, event) => { - // Assert changes: - const result = ethUtil.addHexPrefix(txMeta.txParams.gasPrice) - assert.notEqual(result, gasPrice, 'gas price should change') - assert.equal(result, newGasPrice, 'gas price assigned.') - done() - }, - } - - const pendingTxComponent = h(PendingTx, props) - const component = additions.renderIntoDocument(pendingTxComponent) - renderer.render(pendingTxComponent) - const result = renderer.getRenderOutput() - assert.equal(result.type, 'div', 'should create a div') - - try { - const input = additions.find(component, '.cell.row input[type="number"]')[1] - ReactTestUtils.Simulate.change(input, { - target: { - value: 2, - checkValidity () { return true }, - }, - }) + let pendingTxComponent + let store + let component + beforeEach(function () { + store = createMockStore(mockState) + component = shallowWithStore(h(PendingTx, props), store) + pendingTxComponent = component + }) - const form = additions.find(component, 'form')[0] - form.checkValidity = () => true - form.getFormEl = () => { return { checkValidity () { return true } } } - ReactTestUtils.Simulate.submit(form, { preventDefault () {}, target: { checkValidity () { - return true - } } }) - } catch (e) { - console.log('WHAAAA') - console.error(e) - } + it('should render correctly', function (done) { + assert.equal(pendingTxComponent.props().identities, identities) + done() }) }) diff --git a/test/unit/pending-tx-test.js b/test/unit/pending-tx-test.js index 4b5170dfe..32117a194 100644 --- a/test/unit/pending-tx-test.js +++ b/test/unit/pending-tx-test.js @@ -12,6 +12,7 @@ const currentNetworkId = 42 const otherNetworkId = 36 const privKey = new Buffer('8718b9618a37d1fc78c436511fc6df3c8258d3250635bba617f33003270ec03e', 'hex') + describe('PendingTransactionTracker', function () { let pendingTxTracker, txMeta, txMetaNoHash, txMetaNoRawTx, providerResultStub, provider, txMeta3, txList, knownErrors diff --git a/test/unit/responsive/components/dropdown-test.js b/test/unit/responsive/components/dropdown-test.js index 3ad2c390e..932b6c752 100644 --- a/test/unit/responsive/components/dropdown-test.js +++ b/test/unit/responsive/components/dropdown-test.js @@ -1,40 +1,45 @@ -var assert = require('assert'); +const assert = require('assert'); -const additions = require('react-testutils-additions'); const h = require('react-hyperscript'); -const ReactTestUtils = require('react-addons-test-utils'); const sinon = require('sinon'); const path = require('path'); -const Dropdown = require(path.join(__dirname, '..', '..', '..', '..', 'ui', 'app', 'components', 'dropdown.js')).Dropdown; -const DropdownMenuItem = require(path.join(__dirname, '..', '..', '..', '..', 'ui', 'app', 'components', 'dropdown.js')).DropdownMenuItem; +const Dropdown = require(path.join(__dirname, '..', '..', '..', '..', 'ui', 'app', 'components', 'dropdowns', 'index.js')).Dropdown; + +const { createMockStore } = require('redux-test-utils') +const shallowWithStore = require('../../../lib/shallow-with-store') + +const mockState = { + metamask: { + } +} describe('Dropdown components', function () { let onClickOutside; let closeMenu; let onClick; - let dropdownComponentProps; - const renderer = ReactTestUtils.createRenderer() + let dropdownComponentProps = { + isOpen: true, + zIndex: 11, + onClickOutside, + style: { + position: 'absolute', + right: 0, + top: '36px', + }, + innerStyle: {}, + } + + let dropdownComponent + let store + let component beforeEach(function () { onClickOutside = sinon.spy(); closeMenu = sinon.spy(); onClick = sinon.spy(); - dropdownComponentProps = { - isOpen: true, - zIndex: 11, - onClickOutside, - style: { - position: 'absolute', - right: 0, - top: '36px', - }, - innerStyle: {}, - } - }); - - it('can render two items', function () { - const dropdownComponent = h( + store = createMockStore(mockState) + component = shallowWithStore(h( Dropdown, dropdownComponentProps, [ @@ -42,74 +47,35 @@ describe('Dropdown components', function () { .drop-menu-item:hover { background:rgb(235, 235, 235); } .drop-menu-item i { margin: 11px; } `), - h(DropdownMenuItem, { + h('li', { closeMenu, onClick, }, 'Item 1'), - h(DropdownMenuItem, { + h('li', { closeMenu, onClick, }, 'Item 2'), ] - ) + ), store) + dropdownComponent = component.dive() + }) - const component = additions.renderIntoDocument(dropdownComponent); - renderer.render(dropdownComponent); - const items = additions.find(component, 'li'); + it('can render two items', function () { + const items = dropdownComponent.find('li'); assert.equal(items.length, 2); }); it('closes when item clicked', function() { - const dropdownComponent = h( - Dropdown, - dropdownComponentProps, - [ - h('style', ` - .drop-menu-item:hover { background:rgb(235, 235, 235); } - .drop-menu-item i { margin: 11px; } - `), - h(DropdownMenuItem, { - closeMenu, - onClick, - }, 'Item 1'), - h(DropdownMenuItem, { - closeMenu, - onClick, - }, 'Item 2'), - ] - ) - const component = additions.renderIntoDocument(dropdownComponent); - renderer.render(dropdownComponent); - const items = additions.find(component, 'li'); - const node = items[0]; - ReactTestUtils.Simulate.click(node); - assert.equal(closeMenu.calledOnce, true); + const items = dropdownComponent.find('li'); + const node = items.at(0); + node.simulate('click'); + assert.equal(node.props().closeMenu, closeMenu); }); it('invokes click handler when item clicked', function() { - const dropdownComponent = h( - Dropdown, - dropdownComponentProps, - [ - h('style', ` - .drop-menu-item:hover { background:rgb(235, 235, 235); } - .drop-menu-item i { margin: 11px; } - `), - h(DropdownMenuItem, { - closeMenu, - onClick, - }, 'Item 1'), - h(DropdownMenuItem, { - closeMenu, - onClick, - }, 'Item 2'), - ] - ) - const component = additions.renderIntoDocument(dropdownComponent); - renderer.render(dropdownComponent); - const items = additions.find(component, 'li'); - const node = items[0]; - ReactTestUtils.Simulate.click(node); + const items = dropdownComponent.find('li'); + const node = items.at(0); + node.simulate('click'); assert.equal(onClick.calledOnce, true); }); });