Support multiple 'with event' calls

[joelmukuthu]

With blur, you'll want to first call onFocus then onBlur to be sure that the thing is behaving as expected.

I tried something like this:

const renderer = TestUtils.createRenderer();
renderer.render(<Button />);

return expect(
  renderer, 
  'with event focus', 
  'to contain', 
  <button className='focus' />
).then(() => expect(
  renderer, 
  'with event blur', 
  'to contain', 
  <button className='blur' />
));

// or the shorter version:

return expect(
  renderer, 
  'with event focus', 
  'with event blur', 
  'to contain', 
  <button className='blur' />
);

which didn't work. But if I triggered the events myself then it worked:

const {
  props: {
    onFocus,
    onBlur
  }
} = renderer.getRenderOutput();

onFocus();
return expect(
  renderer, 
  'to contain', 
  <button className='focus' />
).then(() => {
  onBlur();
  return expect(
    renderer, 
    'to contain', 
    <button className='blur' />
  );
);

Did I do something wrong or can this count as a feature request? :)

[joelmukuthu]

Upon further investigation, it seems this is a bug.

At first I couldn't reproduce it, see this gist.

But then I was able to, with this revision of the same gist.

The difference is the render function:

// works:
render() {
        const {
            focus
        } = this.state;

        return (
            <button 
                 onFocus={this.onFocus} 
                 onBlur={this.onBlur} 
                 className={focus ? 'focus' : 'no-focus'} />
        );
    }

// doesn't work
render() {
        const {
            focus
        } = this.state;

        return (
            <div tabIndex='0' onFocus={this.handleFocus} onBlur={this.handleBlur}>
                {focus &&
                    <div className='with-focus'>
                        <span>with focus</span>
                    </div>
                }
            </div>
        );
    }

i.e. the one that fails renders a new subtree if the element has focus.

[bruderstein]

I've just added the failing version of the gist to the repo regression tests, and all the tests passed. I'll try adding it to a fresh repo with dependencies installed normally.

Could you post the output of the test that fails?

[joelmukuthu]

:face_with_head_bandage: I was using an old version of the plugin (v3.1.2). It works fine with v3.3.2. Closing this, sorry for wasting time :)

[bruderstein]

No worries! Glad it's sorted. I'll add your test case to the repo anyway, good to have these sorts of issues validated that they don't return. Thanks for taking the time to create a repro case.

[joelmukuthu]

Great. No worries!