|
|
@ -1,26 +1,24 @@ |
|
|
|
var assert = require('assert'); |
|
|
|
const assert = require('assert'); |
|
|
|
|
|
|
|
|
|
|
|
const additions = require('react-testutils-additions'); |
|
|
|
|
|
|
|
const h = require('react-hyperscript'); |
|
|
|
const h = require('react-hyperscript'); |
|
|
|
const ReactTestUtils = require('react-addons-test-utils'); |
|
|
|
|
|
|
|
const sinon = require('sinon'); |
|
|
|
const sinon = require('sinon'); |
|
|
|
const path = require('path'); |
|
|
|
const path = require('path'); |
|
|
|
const Dropdown = require(path.join(__dirname, '..', '..', '..', '..', 'ui', 'app', 'components', 'dropdown.js')).Dropdown; |
|
|
|
const Dropdown = require(path.join(__dirname, '..', '..', '..', '..', 'ui', 'app', 'components', 'dropdowns', 'index.js')).Dropdown; |
|
|
|
const DropdownMenuItem = require(path.join(__dirname, '..', '..', '..', '..', 'ui', 'app', 'components', 'dropdown.js')).DropdownMenuItem; |
|
|
|
|
|
|
|
|
|
|
|
const { createMockStore } = require('redux-test-utils') |
|
|
|
|
|
|
|
const shallowWithStore = require('../../../lib/shallow-with-store') |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const mockState = { |
|
|
|
|
|
|
|
metamask: { |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
describe('Dropdown components', function () { |
|
|
|
describe('Dropdown components', function () { |
|
|
|
let onClickOutside; |
|
|
|
let onClickOutside; |
|
|
|
let closeMenu; |
|
|
|
let closeMenu; |
|
|
|
let onClick; |
|
|
|
let onClick; |
|
|
|
|
|
|
|
|
|
|
|
let dropdownComponentProps; |
|
|
|
let dropdownComponentProps = { |
|
|
|
const renderer = ReactTestUtils.createRenderer() |
|
|
|
|
|
|
|
beforeEach(function () { |
|
|
|
|
|
|
|
onClickOutside = sinon.spy(); |
|
|
|
|
|
|
|
closeMenu = sinon.spy(); |
|
|
|
|
|
|
|
onClick = sinon.spy(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
dropdownComponentProps = { |
|
|
|
|
|
|
|
isOpen: true, |
|
|
|
isOpen: true, |
|
|
|
zIndex: 11, |
|
|
|
zIndex: 11, |
|
|
|
onClickOutside, |
|
|
|
onClickOutside, |
|
|
@ -31,10 +29,17 @@ describe('Dropdown components', function () { |
|
|
|
}, |
|
|
|
}, |
|
|
|
innerStyle: {}, |
|
|
|
innerStyle: {}, |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
it('can render two items', function () { |
|
|
|
let dropdownComponent |
|
|
|
const dropdownComponent = h( |
|
|
|
let store |
|
|
|
|
|
|
|
let component |
|
|
|
|
|
|
|
beforeEach(function () { |
|
|
|
|
|
|
|
onClickOutside = sinon.spy(); |
|
|
|
|
|
|
|
closeMenu = sinon.spy(); |
|
|
|
|
|
|
|
onClick = sinon.spy(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
store = createMockStore(mockState) |
|
|
|
|
|
|
|
component = shallowWithStore(h( |
|
|
|
Dropdown, |
|
|
|
Dropdown, |
|
|
|
dropdownComponentProps, |
|
|
|
dropdownComponentProps, |
|
|
|
[ |
|
|
|
[ |
|
|
@ -42,74 +47,35 @@ describe('Dropdown components', function () { |
|
|
|
.drop-menu-item:hover { background:rgb(235, 235, 235); } |
|
|
|
.drop-menu-item:hover { background:rgb(235, 235, 235); } |
|
|
|
.drop-menu-item i { margin: 11px; } |
|
|
|
.drop-menu-item i { margin: 11px; } |
|
|
|
`),
|
|
|
|
`),
|
|
|
|
h(DropdownMenuItem, { |
|
|
|
h('li', { |
|
|
|
closeMenu, |
|
|
|
closeMenu, |
|
|
|
onClick, |
|
|
|
onClick, |
|
|
|
}, 'Item 1'), |
|
|
|
}, 'Item 1'), |
|
|
|
h(DropdownMenuItem, { |
|
|
|
h('li', { |
|
|
|
closeMenu, |
|
|
|
closeMenu, |
|
|
|
onClick, |
|
|
|
onClick, |
|
|
|
}, 'Item 2'), |
|
|
|
}, 'Item 2'), |
|
|
|
] |
|
|
|
] |
|
|
|
) |
|
|
|
), store) |
|
|
|
|
|
|
|
dropdownComponent = component.dive() |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
const component = additions.renderIntoDocument(dropdownComponent); |
|
|
|
it('can render two items', function () { |
|
|
|
renderer.render(dropdownComponent); |
|
|
|
const items = dropdownComponent.find('li'); |
|
|
|
const items = additions.find(component, 'li'); |
|
|
|
|
|
|
|
assert.equal(items.length, 2); |
|
|
|
assert.equal(items.length, 2); |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
it('closes when item clicked', function() { |
|
|
|
it('closes when item clicked', function() { |
|
|
|
const dropdownComponent = h( |
|
|
|
const items = dropdownComponent.find('li'); |
|
|
|
Dropdown, |
|
|
|
const node = items.at(0); |
|
|
|
dropdownComponentProps, |
|
|
|
node.simulate('click'); |
|
|
|
[ |
|
|
|
assert.equal(node.props().closeMenu, closeMenu); |
|
|
|
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); |
|
|
|
|
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
it('invokes click handler when item clicked', function() { |
|
|
|
it('invokes click handler when item clicked', function() { |
|
|
|
const dropdownComponent = h( |
|
|
|
const items = dropdownComponent.find('li'); |
|
|
|
Dropdown, |
|
|
|
const node = items.at(0); |
|
|
|
dropdownComponentProps, |
|
|
|
node.simulate('click'); |
|
|
|
[ |
|
|
|
|
|
|
|
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(onClick.calledOnce, true); |
|
|
|
assert.equal(onClick.calledOnce, true); |
|
|
|
}); |
|
|
|
}); |
|
|
|
}); |
|
|
|
}); |
|
|
|