fix(Dimmer): allow children to be clicked

[ben174]

Fixes #780 by adding a disabled class when the Dimmer is not active. Also adds a test to ensure the fix isn't regressed.

[codecov-io]

Current coverage is 99.49% (diff: 100%)

Merging #782 into master will not change coverage

@@             master       #782   diff @@
==========================================
  Files           136        136          
  Lines          2185       2185          
  Methods           0          0          
  Messages          0          0          
  Branches          0          0          
==========================================
  Hits           2174       2174          
  Misses           11         11          
  Partials          0          0          

Powered by Codecov. Last update f4e1495...4791166

[layershifter]

We need asserts for disabled there, too.

[ben174]

Good point, I just tried creating such assertions while disabled and am getting false positives. I've tested it in the wild and am sure it's working correctly, but the test seems to be simulating a click directly against the anchor and bypassing the overlying element.

Do you know of a way to simulate an actual click on the anchor as if a user was clicking on the DOM, rather than clicking on the element itself?

[levithomason]

This test is already covered by common.rendersChildren() above. We can remove this one.

[levithomason]

The click simulation is not subject to z-index blocking effects like a user is. You can simulate an event on any node that can be accessed programmatically. The event is dispatched via a reference to the node, unlike a user event which is the result of the cursor position and top most element.

Instead, add a test that asserts the disabled className is added when active is false, and another that asserts disabled is not present when active is true. I did not test this, but it should be something like this:

describe('active', () => {
  it('removes the `disabled` className when true', () => {
    shallow(<Dimmer active />)
      .should.not.have.className('disabled')
  })
  it('adds the `disabled` className when false', () => {
    shallow(<Dimmer active={false} />)
      .should.have.className('disabled')
  })
})

[ben174]

Makes sense, I was trying to write something that actually validates that the item is clickable, rather than trusting that the disabled class fixes it. But I suppose tests covering the functionality of disabled elsewhere in the suite would be a more appropriate place for that.

[levithomason]

Correct, really the sizing would be a CSS test since it is testing what the result of the CSS rule is for that HTML class. We only want to assert that we are generating the correct markup.

[levithomason]

Released in [email protected], thanks much!