Add tests for the BlockMover Component. #980

BE-Webdesign · 2017-06-01T17:03:22Z

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.

aduth · 2017-06-02T18:38:02Z

editor/block-mover/index.js

@@ -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.


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.

I will stop adding this comment in for connected components or similar things. Is the runtime code not stripping comments out?

Is the runtime code not stripping comments out?

They are stripped in the minified (production) bundle, yes.

aduth · 2017-06-02T18:40:13Z

editor/block-mover/test/index.js

+			expect( moveDown.type().name ).to.equal( 'IconButton' );
+			expect( moveUp.props() ).to.include( {
+				className: 'editor-block-mover__control',
+				onClick: undefined,


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 } />

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.

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.

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?

I think we just need to change this from onClick: undefined to onClick: null in the test?

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?

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 😄

Yeah, I probably did a bad job of explaining that. It also took me a while to figure out the conditional as well.

aduth · 2017-06-02T18:41:18Z

editor/block-mover/test/index.js

+		} );
+
+		it( 'should render the up arrow with a onMoveUp callback', () => {
+			const onMoveUp = ( event ) => event;


Should we do any click simulations with a Sinon spy?

https://github.com/airbnb/enzyme/blob/master/docs/api/ShallowWrapper/simulate.md

Probably wouldn't hurt.

With the Mocha to Jest migration it would require using jest.fn() instead to achieve similar result.

BE-Webdesign · 2017-06-02T19:01:30Z

Thank you for the review, I will get back to this at some point next weekish. 👍 on all feedback.

BE-Webdesign · 2017-06-09T23:53:27Z

Looks like the BlockMover has changed a bit since I last was on this branch, I will add extra tests as well.

gziolo · 2017-09-21T15:47:18Z

It looks like we updated tests to use Jest and its API in the meantime. We no longer use chai. @BE-Webdesign, do you plan to continue your work on this PR? Let me know if you need help with expect changes to make it work.

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.

codecov · 2017-11-13T07:36:55Z

Codecov Report

Merging #980 into master will increase coverage by 0.08%.
The diff coverage is n/a.

@@            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

Impacted Files	Coverage Δ
editor/block-mover/index.js	`10% <ø> (+10%)`	⬆️
editor/block-mover/mover-label.js	`100% <0%> (+4.54%)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 77ea75a...fd3f21a. Read the comment docs.

gziolo · 2017-11-13T07:45:13Z

Should we do any click simulations with a Sinon spy?

https://github.com/airbnb/enzyme/blob/master/docs/api/ShallowWrapper/simulate.md

@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.

BE-Webdesign added the [Type] Automated Testing Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests. label Jun 1, 2017

BE-Webdesign mentioned this pull request Jun 1, 2017

Unit Testing Components #641

Closed

aduth requested changes Jun 2, 2017

View reviewed changes

BE-Webdesign force-pushed the add/test/editor/block-mover branch 2 times, most recently from e53d83d to b10ee8c Compare June 14, 2017 16:48

BE-Webdesign and others added 3 commits November 13, 2017 08:17

Add tests for the BlockMover Component.

b76e8ee

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.

Update tests.

0b9c616

Updating the tests to incorporate new changes to BlockMover.

Tests: Update BLockMover tests to use Jest API

fd3f21a

gziolo force-pushed the add/test/editor/block-mover branch from b10ee8c to fd3f21a Compare November 13, 2017 07:26

gziolo approved these changes Nov 13, 2017

View reviewed changes

gziolo merged commit 829c75c into master Nov 13, 2017

gziolo deleted the add/test/editor/block-mover branch November 13, 2017 07:45

snyk-bot mentioned this pull request Feb 1, 2020

[Snyk] Fix for 1 vulnerabilities SeppPenner/gutenberg#114

Merged

npneeraj mentioned this pull request Jul 7, 2023

[Snyk] Security upgrade babel-loader from 8.3.0 to 9.1.3 npneeraj/gutenberg#19

Open

soloinovator mentioned this pull request Jul 8, 2023

[Snyk] Security upgrade babel-loader from 8.3.0 to 9.1.3 soloinovator/gutenberg#90

Open

Verdinjoshua26 mentioned this pull request Jul 8, 2023

[Snyk] Fix for 1 vulnerabilities Verdinjoshua26/gutenberg#84

Open

yassine4999 mentioned this pull request Jul 8, 2023

[Snyk] Fix for 1 vulnerabilities yassine4999/gutenberg#19

Open

MaxMood96 mentioned this pull request Jul 8, 2023

[Snyk] Security upgrade babel-loader from 8.3.0 to 9.1.3 MaxMood96/gutenberg#106

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add tests for the BlockMover Component. #980

Add tests for the BlockMover Component. #980

BE-Webdesign commented Jun 1, 2017

aduth Jun 2, 2017

BE-Webdesign Jun 9, 2017

aduth Jun 14, 2017

aduth Jun 2, 2017

BE-Webdesign Jun 9, 2017

aduth Jun 12, 2017

BE-Webdesign Jun 12, 2017

aduth Jun 12, 2017

BE-Webdesign Jun 12, 2017 •

edited

Loading

aduth Jun 14, 2017

BE-Webdesign Jun 14, 2017 •

edited

Loading

aduth Jun 2, 2017

BE-Webdesign Jun 9, 2017

gziolo Sep 21, 2017

BE-Webdesign commented Jun 2, 2017

BE-Webdesign commented Jun 9, 2017

gziolo commented Sep 21, 2017

codecov bot commented Nov 13, 2017 •

edited

Loading

gziolo commented Nov 13, 2017

Add tests for the BlockMover Component. #980

Add tests for the BlockMover Component. #980

Conversation

BE-Webdesign commented Jun 1, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

BE-Webdesign Jun 12, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

BE-Webdesign Jun 14, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

BE-Webdesign commented Jun 2, 2017

BE-Webdesign commented Jun 9, 2017

gziolo commented Sep 21, 2017

codecov bot commented Nov 13, 2017 • edited Loading

Codecov Report

gziolo commented Nov 13, 2017

BE-Webdesign Jun 12, 2017 •

edited

Loading

BE-Webdesign Jun 14, 2017 •

edited

Loading

codecov bot commented Nov 13, 2017 •

edited

Loading