Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

E2e testing: Add test for empty blocks with enter and backspace handling #5515

Closed
wants to merge 21 commits into from
Closed

E2e testing: Add test for empty blocks with enter and backspace handling #5515

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
73392f5
Added nested block testing file
twsp Mar 8, 2018
1c03e20
Added e2e test for splitting/merging paragraph blocks using Enter/Bac…
twsp Mar 8, 2018
80a19f8
More specific comments
twsp Mar 8, 2018
d5aa10f
Removed some extraneous unrelated changes
twsp Mar 8, 2018
2e87e4c
Switched from spaces to tabs
twsp Mar 8, 2018
08cff74
Added missing spaces around arguments
twsp Mar 8, 2018
f9534bd
Fixed indentation
twsp Mar 9, 2018
025d875
Revert "Make preferences reducer deterministic"
noisysocks Mar 9, 2018
09cd0b1
Merge pull request #5517 from WordPress/revert-5423-fix/make-reducer-…
noisysocks Mar 9, 2018
a7d100f
Fixed description
twsp Mar 9, 2018
6332d40
Restyle block warnings (#5383)
nshki Mar 9, 2018
069eccd
Added nested block testing file
twsp Mar 8, 2018
f9a478f
Added e2e test for splitting/merging paragraph blocks using Enter/Bac…
twsp Mar 8, 2018
e03fed6
More specific comments
twsp Mar 8, 2018
2d6d57a
Removed some extraneous unrelated changes
twsp Mar 8, 2018
a9f9802
Switched from spaces to tabs
twsp Mar 8, 2018
5fea1a8
Added missing spaces around arguments
twsp Mar 8, 2018
8334e11
Fixed indentation
twsp Mar 9, 2018
a207eaf
Fixed description
twsp Mar 9, 2018
73993f8
Merge branch 'e2eTesting' of https://github.com/twsp/gutenberg into e…
twsp Mar 9, 2018
0f4035b
Fixed issue with not typing in second paragraph block
twsp Mar 9, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions editor/components/block-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,8 @@
&.has-warning .editor-block-list__block-edit {
position: relative;
min-height: 250px;
max-height: 500px;
overflow: hidden;

> :not( .editor-warning ) {
pointer-events: none;
Expand All @@ -59,6 +61,7 @@
bottom: 0;
left: 0;
background-color: rgba( $white, 0.6 );
background-image: linear-gradient( to bottom, transparent, #fff );
}

// simpler style for a block that has cursor focus (but hasn't been selected)
Expand Down
4 changes: 2 additions & 2 deletions editor/components/warning/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
.editor-warning {
z-index: z-index( '.editor-warning' );
position: absolute;
top: 50%;
top: 15px;
left: 50%;
transform: translate( -50%, -50% );
transform: translateX( -50% );
display: flex;
flex-direction: column;
justify-content: space-around;
Expand Down
2 changes: 0 additions & 2 deletions editor/store/actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,6 @@ export function replaceBlocks( uids, blocks ) {
type: 'REPLACE_BLOCKS',
uids: castArray( uids ),
blocks: castArray( blocks ),
time: Date.now(),
};
}

Expand Down Expand Up @@ -222,7 +221,6 @@ export function insertBlocks( blocks, index, rootUID ) {
blocks: castArray( blocks ),
index,
rootUID,
time: Date.now(),
};
}

Expand Down
2 changes: 1 addition & 1 deletion editor/store/reducer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -705,7 +705,7 @@ export function preferences( state = PREFERENCES_DEFAULTS, action ) {
insertUsage: {
...prevState.insertUsage,
[ id ]: {
time: action.time,
time: Date.now(),
count: prevState.insertUsage[ id ] ? prevState.insertUsage[ id ].count + 1 : 1,
insert,
},
Expand Down
10 changes: 2 additions & 8 deletions editor/store/test/actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,6 @@ describe( 'actions', () => {
type: 'REPLACE_BLOCKS',
uids: [ 'chicken' ],
blocks: [ block ],
time: expect.any( Number ),
} );
} );
} );
Expand All @@ -178,7 +177,6 @@ describe( 'actions', () => {
type: 'REPLACE_BLOCKS',
uids: [ 'chicken' ],
blocks,
time: expect.any( Number ),
} );
} );
} );
Expand All @@ -189,12 +187,10 @@ describe( 'actions', () => {
uid: 'ribs',
};
const index = 5;
expect( insertBlock( block, index, 'test_uid' ) ).toEqual( {
expect( insertBlock( block, index ) ).toEqual( {
type: 'INSERT_BLOCKS',
blocks: [ block ],
index,
rootUID: 'test_uid',
time: expect.any( Number ),
} );
} );
} );
Expand All @@ -205,12 +201,10 @@ describe( 'actions', () => {
uid: 'ribs',
} ];
const index = 3;
expect( insertBlocks( blocks, index, 'test_uid' ) ).toEqual( {
expect( insertBlocks( blocks, index ) ).toEqual( {
type: 'INSERT_BLOCKS',
blocks,
index,
rootUID: 'test_uid',
time: expect.any( Number ),
} );
} );
} );
Expand Down
22 changes: 9 additions & 13 deletions editor/store/test/effects.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,14 +151,11 @@ describe( 'effects', () => {

expect( dispatch ).toHaveBeenCalledTimes( 2 );
expect( dispatch ).toHaveBeenCalledWith( selectBlock( 'chicken', -1 ) );
expect( dispatch ).toHaveBeenCalledWith( {
...replaceBlocks( [ 'chicken', 'ribs' ], [ {
uid: 'chicken',
name: 'core/test-block',
attributes: { content: 'chicken ribs' },
} ] ),
time: expect.any( Number ),
} );
expect( dispatch ).toHaveBeenCalledWith( replaceBlocks( [ 'chicken', 'ribs' ], [ {
uid: 'chicken',
name: 'core/test-block',
attributes: { content: 'chicken ribs' },
} ] ) );
} );

it( 'should not merge the blocks have different types without transformation', () => {
Expand Down Expand Up @@ -884,13 +881,12 @@ describe( 'effects', () => {
expect( dispatch ).toHaveBeenCalledWith(
saveReusableBlock( expect.any( Number ) )
);
expect( dispatch ).toHaveBeenCalledWith( {
...replaceBlocks(
expect( dispatch ).toHaveBeenCalledWith(
replaceBlocks(
[ staticBlock.uid ],
[ createBlock( 'core/block', { ref: expect.any( Number ) } ) ]
),
time: expect.any( Number ),
} );
)
);
} );
} );
} );
Expand Down
10 changes: 4 additions & 6 deletions editor/store/test/reducer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1272,13 +1272,12 @@ describe( 'state', () => {
uid: 'bacon',
name: 'core-embed/twitter',
} ],
time: 123456,
} );

expect( state ).toEqual( {
insertUsage: {
'core-embed/twitter': {
time: 123456,
time: expect.any( Number ),
count: 1,
insert: { name: 'core-embed/twitter' },
},
Expand All @@ -1288,7 +1287,7 @@ describe( 'state', () => {
const twoRecentBlocks = preferences( deepFreeze( {
insertUsage: {
'core-embed/twitter': {
time: 123456,
time: expect.any( Number ),
count: 1,
insert: { name: 'core-embed/twitter' },
},
Expand All @@ -1303,18 +1302,17 @@ describe( 'state', () => {
name: 'core/block',
attributes: { ref: 123 },
} ],
time: 123457,
} );

expect( twoRecentBlocks ).toEqual( {
insertUsage: {
'core-embed/twitter': {
time: 123457,
time: expect.any( Number ),
count: 2,
insert: { name: 'core-embed/twitter' },
},
'core/block/123': {
time: 123457,
time: expect.any( Number ),
count: 1,
insert: { name: 'core/block', ref: 123 },
},
Expand Down
24 changes: 24 additions & 0 deletions test/e2e/integration/005-splitting-merging-paragraph-blocks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
describe( 'Splitting and merging paragraph blocks', () => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems like it could be part of the existing test suite: https://github.com/twsp/gutenberg/blob/0f4035b0b266390f9e8facc05037175180dceb67/test/e2e/integration/002-adding-blocks.js

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm going to work a little more on this and then submit another pull request. Should I keep the testing of splitting/merging in a separate file, or add it onto 002-adding-blocks.js?

Copy link
Member

@gziolo gziolo Mar 9, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it fits the existing test file, so you can put it there 👍 - see my other comment :)

before( () => {
cy.newPost();
} );

it( 'Should split and merge paragraph blocks using Enter and Backspace', () => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This test looks like it is testing if enter creates a new paragraph and backspace removes an empty paragraph. Am I missing something?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had assumed this was the same functionality that's behind splitting and merging. I was trying to type in the blocks first, but Cypress is absolutely awful when it comes to moving cursors while typing. I will gladly spend some more time trying to add some text in order to make sure it is also splitting and merging text correctly.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, Cypress has some improvements queued in their pipeline. See #4089 and cypress-io/cypress#1108.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know what you meant. When there is a paragraph with text and you type enter in the middle. Then move the cursor to the start of next paragraph and type backspace. Yes, this is splitting and merging. I think it is specific to the paragraph and a few text-like blocks like heading or list.

Let's rename to 005-splitting-merging-blocks.js and add some text inside the blocks.

// Insert paragraph block and split using Enter
cy.get( '.editor-default-block-appender' ).click();
cy.get( '.mce-content-body' ).type( '{enter}' );

// Assertion to check for two paragraph blocks
cy.get( '.mce-content-body' ).should( ( $p ) => {
expect( $p ).to.have.length( 2 );
} );

// Merge second paragraph block back into first using Backspace
cy.get( '.mce-content-body:first' ).type( '{backspace}' );

// Assertion to check for one paragraph block
cy.get( '.mce-content-body' ).should( ( $p ) => {
expect( $p ).to.have.length( 1 );
} );
} );
} );