How to test dropdown when calls e.nativeEvent.stopImmediatePropogation

lifehackett commented 7 years ago

Steps

I have a MutiSelect implementation of Dropdown that I am writing unit tests for and when I simulate the change event for it I get

TypeError: e.nativeEvent.stopImmediatePropagation is not a function

Source: https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/modules/Dropdown/Dropdown.js#L653

    it('is called each time another item is selected', () => {
      const wrapper = mount(<MultiSelect onChange={ handlerSpy } options={ options } />)
      wrapper.find('.ui.dropdown .menu .item').at(1).simulate('click')
      expect(handlerSpy.args[0][1]).to.deep.equal({ id: undefined, value: [0] });
    });

I am using Enzyme which is a simple wrapper around ReactTestUtils who's docs seem to indicate that it only supports the Synthentic Event

Simulate has a method for every event that React understands.

I looked through your tests/issues, stackoverflow, JSDom, ReactTestUtils, and Enzyme to try to understand how to mock the nativeEvent, but couldn't find the solution. Any thoughts?

(Apologies, as I know this sort of spans multiple OS repos, but thought since your tests are passing that you would have solved this)

Expected Result

Test passes

Actual Result

TypeError: e.nativeEvent.stopImmediatePropagation is not a function

Version

0.63.5

levithomason commented 7 years ago

You can review thousands of lines of dropdown tests for examples here 😄 https://github.com/Semantic-Org/Semantic-UI-React/blob/master/test/specs/modules/Dropdown/Dropdown-test.js

const nativeEvent = { nativeEvent: { stopImmediatePropagation: _.noop } }

// ...later
.simulate('click', nativeEvent)

lifehackett commented 7 years ago

:hanging_head_in_shame:

Sorry, not sure how I missed that. I focused on dropdown-item.test.js

Thanks for humoring me none-the-less

Semantic-Org / Semantic-UI-React