Add tests for the BlockMover Component. #980
Conversation
BE-Webdesign
added
the
[Type] Automated Testing
editor/block-mover/index.js
Outdated
| @@ -15,7 +15,8 @@ import { IconButton } from 'components'; | |||
| import './style.scss'; | |||
| import { isFirstBlock, isLastBlock } from '../selectors'; | |||
|
|
|||
| function BlockMover( { onMoveUp, onMoveDown, isFirst, isLast } ) { | |||
| // Only exported for testing. | |||
There was a problem hiding this comment.
I'm a bit conflicted on including the comment. I think I might be motivated to avoid acknowledging the existence of tests from runtime code. The value of this named export isn't exclusive to tests only, but any consumer who'd want the presentational component. Then again, the distinction between importing a named export and the module default doesn't really clearly communicate this difference. It's rare though that we'd ever want to import the unconnected component in the UI, so this worry is not likely to come to light.
Which is all to say... I don't think we ought to include the comment, even though in all reality it truly is only exported for testing.
There was a problem hiding this comment.
I will stop adding this comment in for connected components or similar things. Is the runtime code not stripping comments out?
There was a problem hiding this comment.
Is the runtime code not stripping comments out?
They are stripped in the minified (production) bundle, yes.
editor/block-mover/test/index.js
Outdated
| expect( moveDown.type().name ).to.equal( 'IconButton' ); | ||
| expect( moveUp.props() ).to.include( { | ||
| className: 'editor-block-mover__control', | ||
| onClick: undefined, |
There was a problem hiding this comment.
The behavior of includes and undefined here is such that even if the IconButton did assign an onClick handler, the test would still pass. You can see this with the following diff applied:
diff --git a/editor/block-mover/index.js b/editor/block-mover/index.js
index f040d239..cba1a09c 100644
--- a/editor/block-mover/index.js
+++ b/editor/block-mover/index.js
@@ -25,7 +25,7 @@ function BlockMover( { onMoveUp, onMoveDown, isFirst, isLast } ) {
<div className="editor-block-mover">
<IconButton
className="editor-block-mover__control"
- onClick={ isFirst ? null : onMoveUp }
+ onClick={ isFirst ? function() {} : onMoveUp }
icon="arrow-up-alt2"
aria-disabled={ isFirst }
/>There was a problem hiding this comment.
Not fully following this, but I will look it over and hopefully come up with a better solution that will better match the actual logic going on.
There was a problem hiding this comment.
More specifically, it interprets the assertion without making any expectations about the value of onClick, so the test would behave the same if the onClick property weren't included at all.
expect( moveUp.props() ).to.include( {
className: 'editor-block-mover__control',
icon: 'arrow-up-alt2',
label: 'Move 2 blocks from position 1 up by one place',
'aria-disabled': undefined,
} );Which, of course, is probably not what we want.
There was a problem hiding this comment.
It always comes out as undefined because isFirst is undefined. JSX conversion will interpret the value of onClick to be undefined regardless of what is on the other side of ? in our ternary. Do you want to pass in isFirst and isLast as false for each, I added another set of test cases to accomplish what I think you are looking for?
There was a problem hiding this comment.
I think we just need to change this from onClick: undefined to onClick: null in the test?
There was a problem hiding this comment.
It will show up undefined because of how I have the JSX and the way I am creating the Element for the test, i.e. with isFirst undefined. Should I add in failing tests for a different expected behavior or should I be matching what is already expected behavior in the component?
There was a problem hiding this comment.
Okay, looking at this again, I think I see what's happening. I assumed the test case was asserting on the null value passed to onClick, and that includes assertion wasn't smart enough to differentiate between a value being explicitly undefined, vs. not making an assertion on that value.
Instead, includes will make this assert that the value is explicitly undefined, and it's not the null value we're expecting here, it's onMoveUp, which in this case is undefined because we're not passing this prop to the component in the test.
Which is all to say... this is fine 😄
There was a problem hiding this comment.
Yeah, I probably did a bad job of explaining that. It also took me a while to figure out the conditional as well.
| } ); | ||
|
|
||
| it( 'should render the up arrow with a onMoveUp callback', () => { | ||
| const onMoveUp = ( event ) => event; |
There was a problem hiding this comment.
Should we do any click simulations with a Sinon spy?
https://github.com/airbnb/enzyme/blob/master/docs/api/ShallowWrapper/simulate.md
There was a problem hiding this comment.
Probably wouldn't hurt.
There was a problem hiding this comment.
With the Mocha to Jest migration it would require using jest.fn() instead to achieve similar result.
|
Thank you for the review, I will get back to this at some point next weekish. 👍 on all feedback. |
|
Looks like the BlockMover has changed a bit since I last was on this branch, I will add extra tests as well. |
BE-Webdesign
force-pushed
the
add/test/editor/block-mover
branch
2 times, most recently
from
e53d83d to
b10ee8c
Compare
|
It looks like we updated tests to use |
Adds tests for the BlockMover Component. Related to progress on #641. The tests ensure that the callbacks render properly depending on whether the block isFirst or isLast.
Updating the tests to incorporate new changes to BlockMover.
gziolo
force-pushed
the
add/test/editor/block-mover
branch
from
b10ee8c to
fd3f21a
Compare
Codecov Report
@@ Coverage Diff @@
## master #980 +/- ##
==========================================
+ Coverage 33.81% 33.89% +0.08%
==========================================
Files 250 250
Lines 6734 6723 -11
Branches 1218 1218
==========================================
+ Hits 2277 2279 +2
+ Misses 3763 3750 -13
Partials 694 694
Continue to review full report at Codecov.
|
@aduth we can open a follow-up PR to add more test cases. I rebased with master and update code to work with Jest. It looks like ready to merge. We can iterate later. |
Adds tests for the BlockMover Component. Related to progress on #641.
The tests ensure that the callbacks render properly depending on whether
the block isFirst or isLast.