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.

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

Annotations: Add end-to-end tests for annotations API #12186

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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
64 changes: 59 additions & 5 deletions test/e2e/specs/annotations.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ describe( 'Using Plugins API', () => {
* @return {void}
*/
async function annotateFirstBlock( start, end ) {
await clickOnMoreMenuItem( 'Annotations Sidebar' );

await page.focus( '#annotations-tests-range-start' );
await page.keyboard.press( 'Backspace' );
await page.keyboard.type( start + '' );
Expand Down Expand Up @@ -85,12 +87,25 @@ describe( 'Using Plugins API', () => {
}, htmlContent[ 0 ] );
}

/**
* Returns the rerender count from the window counter.
*
* It's not quite the rerender count, but it's counting how many times
* prepareEditableTree is called. We can deduct how many renders that
* entails.
*
* @return {Promise<number>} The amount of 'rerenders' triggered.
*/
async function getRerenderCount() {
return await page.evaluate( () => {
return window.annotationsCountingRerenders;
} );
}

describe( 'Annotations', () => {
it( 'Allows a block to be annotated', async () => {
await page.keyboard.type( 'Title' + '\n' + 'Paragraph to annotate' );

await clickOnMoreMenuItem( 'Annotations Sidebar' );

let annotations = await page.$$( ANNOTATIONS_SELECTOR );
expect( annotations ).toHaveLength( 0 );

Expand All @@ -115,7 +130,6 @@ describe( 'Using Plugins API', () => {

it( 'Keeps the cursor in the same location when applying annotation', async () => {
await page.keyboard.type( 'Title' + '\n' + 'ABC' );
await clickOnMoreMenuItem( 'Annotations Sidebar' );

await annotateFirstBlock( 1, 2 );

Expand All @@ -133,7 +147,6 @@ describe( 'Using Plugins API', () => {

it( 'Moves when typing before it', async () => {
await page.keyboard.type( 'Title' + '\n' + 'ABC' );
await clickOnMoreMenuItem( 'Annotations Sidebar' );

await annotateFirstBlock( 1, 2 );

Expand All @@ -153,7 +166,6 @@ describe( 'Using Plugins API', () => {

it( 'Grows when typing inside it', async () => {
await page.keyboard.type( 'Title' + '\n' + 'ABC' );
await clickOnMoreMenuItem( 'Annotations Sidebar' );

await annotateFirstBlock( 1, 2 );

Expand All @@ -169,5 +181,47 @@ describe( 'Using Plugins API', () => {
const blockText = await getRichTextInnerHTML();
expect( blockText ).toBe( 'AB2C' );
} );

it( 'Should only re-render the relevant block', async () => {
await page.keyboard.type( 'Title' + '\n' + 'RerenderCounter' + '\n' );

const rerendersBeforeTyping = await getRerenderCount();

await page.keyboard.type( 'More' );

const rerendersAfterTyping = await getRerenderCount();

// Typing in the second block should not trigger a re-render in the first block.
expect( rerendersAfterTyping ).toEqual( rerendersBeforeTyping );
} );

const ANNOTATION_RERENDERS = 1;

it( 'Should re-render once when applying an annotation', async () => {
await page.keyboard.type( 'Title' + '\n' + 'RerenderCounter' + '\n' );

const rerendersBeforeAnnotating = await getRerenderCount();

await annotateFirstBlock( 0, 10 );

const rerendersAfterAnnotating = await getRerenderCount();

// Typing in the second block should not trigger a re-render in the first block.
expect( rerendersAfterAnnotating ).toEqual( rerendersBeforeAnnotating + ANNOTATION_RERENDERS );
} );

it( 'Should re-render once when removing an annotation', async () => {
await page.keyboard.type( 'Title' + '\n' + 'RerenderCounter' + '\n' );
await annotateFirstBlock( 0, 10 );

const rerendersBeforeAnnotating = await getRerenderCount();

await removeAnnotations();

const rerendersAfterAnnotating = await getRerenderCount();

// Typing in the second block should not trigger a re-render in the first block.
expect( rerendersAfterAnnotating ).toEqual( rerendersBeforeAnnotating + ANNOTATION_RERENDERS );
Copy link
Member

Choose a reason for hiding this comment

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

This can be written as toBe.

} );
} );
} );
37 changes: 37 additions & 0 deletions test/e2e/test-plugins/plugins-api/annotations-sidebar.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@
var registerPlugin = wp.plugins.registerPlugin;
var PluginSidebar = wp.editPost.PluginSidebar;
var PluginSidebarMoreMenuItem = wp.editPost.PluginSidebarMoreMenuItem;
var applyFormat = wp.richText.applyFormat;
Copy link
Member

Choose a reason for hiding this comment

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

wp-rich-text must be defined as a dependency of this script.

var registerFormatType = wp.richText.registerFormatType;
var domReady = wp.domReady;
Copy link
Member

Choose a reason for hiding this comment

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

wp-dom-ready must be defined as a dependency of this script.


class SidebarContents extends Component {
constructor( props ) {
Expand Down Expand Up @@ -118,4 +121,38 @@
icon: 'text',
render: AnnotationsSidebar
} );

window.annotationsCountingRerenders = 0;
const props = {};

const FORMAT_NAME = 'rerender/counter';

function countRerender( formats, text ) {
if ( text.startsWith( 'RerenderCounter' ) ) {
Copy link
Member

Choose a reason for hiding this comment

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

Can't we create a separate format type for these tests?

Copy link
Member

Choose a reason for hiding this comment

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

Assuming it is already separate because it's called rerender/counter. So why do we have this check?

window.annotationsCountingRerenders++;
Copy link
Member

Choose a reason for hiding this comment

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

It's strange to me that this is being set in a separate file. I have no idea from looking at the other file where it's coming from. Maybe better to more this registration to the test cases?

}

return formats;
}

domReady( () => {
Copy link
Member

Choose a reason for hiding this comment

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

Why is a format being registered when the DOM is ready? What does the DOM have to do with this?

registerFormatType( FORMAT_NAME, {
name: FORMAT_NAME,
Copy link
Member

Choose a reason for hiding this comment

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

I think this attribute is not needed?

title: __( 'Rerender counter' ),
tagName: 'mark',
className: 'annotations-rerender-counter',
attributes: {
className: 'class',
},
edit: () => {
return null;
},
__experimentalCreatePrepareEditableTree: () => {
return countRerender;
},
__experimentalGetPropsForEditableTreePreparation: () => {
return props;
}
} );
} )
} )();