Skip to content

Commit

Permalink
Dropdown: remove .state() usage in Enzyme
Browse files Browse the repository at this point in the history
  • Loading branch information
@layershifter
layershifter committed Sep 29, 2020
1 parent cb4b816 commit 0670a37
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 73 deletions.
139 changes: 67 additions & 72 deletions test/specs/modules/Dropdown/Dropdown-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,30 @@ const dropdownMenuIsClosed = () => {
}
}

function bodyIsFocused() {
const isFocused = document.activeElement === document.body

isFocused.should.be.true(
`Expected Dropdown to be the active element but found ${document.activeElement} instead.`,
)
}

function dropdownIsFocused() {
const isFocused = document.activeElement === document.querySelector('div.dropdown')

isFocused.should.be.true(
`Expected Dropdown to be the active element but found ${document.activeElement} instead.`,
)
}

function dropdownInputIsFocused() {
const isFocused = document.activeElement === document.querySelector('input.search')

isFocused.should.be.true(
`Expected DropdownSearchInput to be the active element but found ${document.activeElement} instead.`,
)
}

const dropdownMenuIsOpen = () => {
wrapper.childAt(0).should.have.className('active')
wrapper.childAt(0).should.have.className('visible')
Expand Down Expand Up @@ -141,7 +165,8 @@ describe('Dropdown', () => {

describe('defaultSearchQuery', () => {
it('changes default value of searchQuery', () => {
shallow(<Dropdown defaultSearchQuery='foo' />).should.have.state('searchQuery', 'foo')
wrapperMount(<Dropdown defaultSearchQuery='foo' search />)
wrapper.find('input.search').should.have.value('foo')
})
})

Expand Down Expand Up @@ -369,22 +394,23 @@ describe('Dropdown', () => {
const event = { stopPropagation: _.noop }
const onChange = sandbox.spy()

wrapperShallow(
wrapperMount(
<Dropdown defaultValue={defaultValue} clearable onChange={onChange} options={options} />,
)
wrapper.find('Icon').simulate('click', event)
wrapper.find('i.clear').simulate('click', event)

onChange.should.have.been.calledOnce()
onChange.should.have.been.calledWithMatch(event, { value: '' })
wrapper.should.have.state('selectedIndex', 0)
wrapper.should.have.exactly(1).descendants('.selected.item')
wrapper.find('.item').at(0).should.have.className('selected')
})

it('clears when value is multiple and is not empty', () => {
const defaultValue = _.map(options, 'value')
const event = { stopPropagation: _.noop }
const onChange = sandbox.spy()

wrapperShallow(
wrapperMount(
<Dropdown
defaultValue={defaultValue}
clearable
Expand All @@ -393,11 +419,12 @@ describe('Dropdown', () => {
options={options}
/>,
)
wrapper.find('Icon').simulate('click', event)
wrapper.find('i.clear').simulate('click', event)

onChange.should.have.been.calledOnce()
onChange.should.have.been.calledWithMatch(event, { value: [] })
wrapper.should.have.state('selectedIndex', 0)
wrapper.should.have.exactly(1).descendants('.selected.item')
wrapper.find('.item').at(0).should.have.className('selected')
})
})

Expand Down Expand Up @@ -447,19 +474,11 @@ describe('Dropdown', () => {
onChange.should.have.been.calledOnce()
})

it('sets focus state to false', () => {
wrapperShallow(<Dropdown selectOnBlur />)

wrapper.childAt(0).simulate('blur')
wrapper.should.have.state('focus', false)
})

it('sets searchQuery state to empty', () => {
wrapperShallow(<Dropdown />)
wrapperMount(<Dropdown defaultSearchQuery='foo' search />)

wrapper.setState({ searchQuery: 'foo' })
wrapper.childAt(0).simulate('blur')
wrapper.should.have.state('searchQuery', '')
wrapper.find('input.search').should.have.value('')
})

it('does not call onBlur when the mouse is down', () => {
Expand All @@ -486,15 +505,6 @@ describe('Dropdown', () => {

instance.makeSelectedItemActive.should.not.have.been.called()
})

it('does not set focus state when the mouse is down', () => {
wrapperShallow(<Dropdown />)

wrapper.setState({ focus: 'foo' })
wrapper.simulate('mousedown')
wrapper.simulate('blur')
wrapper.should.have.state('focus', 'foo')
})
})

describe('handleClose', () => {
Expand Down Expand Up @@ -522,7 +532,7 @@ describe('Dropdown', () => {
dropdownMenuIsOpen()

wrapper.find('DropdownItem').first().simulate('click')
wrapper.should.have.state('value', options[0].value)
wrapper.find('.item').at(0).should.have.className('active')
dropdownMenuIsClosed()

// The dropdown will be still focused after an item will be selected, we should remove
Expand Down Expand Up @@ -595,21 +605,22 @@ describe('Dropdown', () => {

wrapper.simulate('click')
wrapper.simulate('keydown', { key: 'ArrowDown' })
wrapper.should.have.state('selectedIndex', 1)
wrapper.should.have.exactly(1).descendants('.selected.item')
wrapper.find('.item').at(1).should.have.className('selected')

wrapper.setProps({ options: [] })
wrapper.should.have.not.state('selectedIndex')
wrapper.should.not.have.descendants('.selected.item')
})

it('will not call setSelectedIndex if options have not changed', () => {
wrapperMount(<Dropdown options={options} />)

wrapper.simulate('click')
wrapper.simulate('keydown', { key: 'ArrowDown' })
wrapper.should.have.state('selectedIndex', 1)
wrapper.find('.item').at(1).should.have.className('selected')

wrapper.setProps({ options })
wrapper.should.have.state('selectedIndex', 1)
wrapper.find('.item').at(1).should.have.className('selected')
})
})

Expand All @@ -623,16 +634,15 @@ describe('Dropdown', () => {
// open, simulate search and select option
wrapper.simulate('click')
wrapper.simulate('keydown', { key: 'ArrowDown' })
wrapper.should.have.state('selectedIndex', 1)
wrapper.find('.item').at(1).should.have.className('selected')

input.simulate('change', { target: { value: option.text } })
wrapper.simulate('keydown', { key: 'Enter' })

wrapper.should.have.state('selectedIndex', 4)
wrapper.find('.item').at(4).should.have.className('selected')

// open again
wrapper.simulate('click')
wrapper.should.have.state('selectedIndex', 4)
wrapper.find('.item').at(4).should.have.className('selected')
})

it('keeps "selectedIndex" when the same item was selected', () => {
Expand All @@ -644,13 +654,12 @@ describe('Dropdown', () => {
// simulate search and select option
input.simulate('change', { target: { value: option.text } })
wrapper.simulate('keydown', { key: 'Enter' })

wrapper.should.have.state('selectedIndex', 4)
wrapper.find('.item').at(4).should.have.className('selected')

// select the same option again
input.simulate('change', { target: { value: option.text } })
wrapper.simulate('keydown', { key: 'Enter' })
wrapper.should.have.state('selectedIndex', 4)
wrapper.find('.item').at(4).should.have.className('selected')
})
})

Expand Down Expand Up @@ -703,11 +712,13 @@ describe('Dropdown', () => {

describe('searchQuery', () => {
it('defaults to empty string', () => {
shallow(<Dropdown />).should.have.state('searchQuery', '')
wrapperMount(<Dropdown search />)
wrapper.find('input.search').should.have.value('')
})

it('passes value to state', () => {
shallow(<Dropdown searchQuery='foo' />).should.have.state('searchQuery', 'foo')
wrapperMount(<Dropdown search searchQuery='foo' />)
wrapper.find('input.search').should.have.value('foo')
})
})

Expand Down Expand Up @@ -1054,7 +1065,7 @@ describe('Dropdown', () => {
wrapper.simulate('click')
wrapper.simulate('keydown', { key: 'ArrowDown' })

wrapper.should.have.state('searchQuery', 'foo')
wrapper.find('input.search').should.have.value('foo')
})
})

Expand Down Expand Up @@ -1110,17 +1121,15 @@ describe('Dropdown', () => {

wrapper.simulate('click')
wrapper.simulate('keydown', { key: 'ArrowDown' })

wrapper.should.have.state('value', options[1].value)
wrapper.find('.item').at(1).should.have.className('active')
})

it('updates value on up arrow', () => {
wrapperMount(<Dropdown options={options} selection />)

wrapper.simulate('click')
wrapper.simulate('keydown', { key: 'ArrowUp' })

wrapper.should.have.state('value', options[4].value)
wrapper.find('.item').at(4).should.have.className('active')
})
})

Expand Down Expand Up @@ -1359,15 +1368,15 @@ describe('Dropdown', () => {

it('handles focus correctly', () => {
wrapperMount(<Dropdown options={options} selection />)
wrapper.should.have.state('focus', false)
bodyIsFocused()

// focus
wrapper.getDOMNode().focus()
wrapper.should.have.state('focus', true)
dropdownIsFocused()

// click outside
domEvent.click(document.body)
wrapper.should.have.state('focus', false)
bodyIsFocused()
})

it('closes on esc key', () => {
Expand Down Expand Up @@ -1718,6 +1727,7 @@ describe('Dropdown', () => {
spy.should.have.been.calledOnce()
spy.should.have.been.calledWithMatch({}, { value: expected })
})

it('removes the last item when there is no search query when uncontrolled', () => {
const value = _.map(options, 'value')
const expected = _.dropRight(value)
Expand All @@ -1734,14 +1744,12 @@ describe('Dropdown', () => {

// open
wrapper.simulate('click')

domEvent.keyDown(document, { key: 'Backspace' })

spy.should.have.been.calledOnce()
spy.should.have.been.calledWithMatch({}, { value: expected })

wrapper.state('value').should.deep.equal(expected)
})

it('does not remove the last item when there is a search query', () => {
// search for random item
const searchQuery = _.sample(options).text
Expand Down Expand Up @@ -2099,7 +2107,7 @@ describe('Dropdown', () => {
wrapper.find('DropdownItem').first().simulate('click')

// bye bye search query
wrapper.should.have.state('searchQuery', '')
wrapper.find('input.search').should.have.value('')
})

it('opens the menu on change if there is a query and not already open', () => {
Expand Down Expand Up @@ -2173,10 +2181,10 @@ describe('Dropdown', () => {
// avoid it to prevent false positives
wrapper.simulate('click')
wrapper.simulate('keydown', { key: 'ArrowUp' })
wrapper.should.have.state('selectedIndex', 3)
wrapper.find('.item').at(3).should.have.className('selected')

wrapper.find('input.search').simulate('change', { target: { value: 'baz' } })
wrapper.should.have.state('selectedIndex', 0)
wrapper.find('.item').at(0).should.have.className('selected')
})

it('still allows moving selection after blur/focus', () => {
Expand Down Expand Up @@ -2226,13 +2234,7 @@ describe('Dropdown', () => {
.simulate('click', nativeEvent)

dropdownMenuIsClosed()

const activeElement = document.activeElement
const searchIsFocused = activeElement === document.querySelector('input.search')
searchIsFocused.should.be.true(
`Expected "input.search" to be the active element but found ${activeElement} instead.`,
)
wrapper.should.have.state('focus', true)
dropdownInputIsFocused()
})

it('sets focus to the dropdown after selection', () => {
Expand All @@ -2247,14 +2249,7 @@ describe('Dropdown', () => {
// TODO: try reenable after Enzyme update
// https://github.com/Semantic-Org/Semantic-UI-React/pull/3747#issuecomment-522018329
// dropdownMenuIsClosed()

const activeElement = document.activeElement
const dropdownIsFocused = activeElement === document.querySelector('div.dropdown')
dropdownIsFocused.should.be.true(
`Expected Dropdown to be the active element but found ${activeElement} instead.`,
)

wrapper.should.have.state('focus', true)
dropdownIsFocused()
})
})

Expand Down Expand Up @@ -2687,7 +2682,7 @@ describe('Dropdown', () => {
search.simulate('change', { target: { value: 'boo' } })
search.simulate('keydown', { key: 'Enter' })

wrapper.should.have.state('searchQuery', '')
wrapper.find('input.search').should.have.value('')
})
})

Expand Down Expand Up @@ -2755,7 +2750,7 @@ describe('Dropdown', () => {
wrapper.simulate('keydown', { key: 'ArrowDown' })

onChange.should.have.been.called()
wrapper.should.have.state('value', options[1].value)
wrapper.find('.item').at(1).should.have.className('active')
})

it('does not change value when set to false', () => {
Expand All @@ -2776,7 +2771,7 @@ describe('Dropdown', () => {
wrapper.simulate('keydown', { key: 'ArrowDown' })

onChange.should.not.have.been.called()
wrapper.should.have.state('value', value)
wrapper.find('.item').at(0).should.have.className('active')
})
})

Expand Down
2 changes: 1 addition & 1 deletion test/specs/modules/Transition/Transition-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ let wrapper
const wrapperMount = (...args) => (wrapper = mount(...args))
const wrapperShallow = (...args) => (wrapper = shallow(...args))

describe.only('Transition', () => {
describe('Transition', () => {
common.hasSubcomponents(Transition, [TransitionGroup])
common.hasValidTypings(Transition)

Expand Down

0 comments on commit 0670a37

Please sign in to comment.