Updated failing functional tests.

src/app/features/commenteditor.js

@@ -21,12 +21,15 @@ export default class CommentEditor extends Editor {
 	static run() {
 		// Edit option for comments: listen to "comment action" buttons and create the editor.
 		addClickListener( '.timeline-comment-action', actionsButton => {
-			let editButton = actionsButton.closest( 'details' );
-			editButton = editButton && editButton.querySelector( '.js-comment-edit-button' );
+			// We're only interested in clicking on more button not on the reaction button.
+			if ( !actionsButton.matches( '[role="button"].timeline-comment-action' ) ) {
+				return;
+			}
+
+			const commentForm = actionsButton.closest( '.js-comment' ).querySelector( 'form.js-comment-update' );
 
-			if ( editButton ) {
-				const rootElement = editButton.closest( '.js-comment' ).querySelector( 'form.js-comment-update' );
-				this.createEditor( rootElement, true );
+			if ( commentForm ) {
+				this.createEditor( commentForm, true );
 			}
 		} );
 

src/app/features/revieweditor.js

@@ -11,6 +11,6 @@ export default class ReviewEditor extends Editor {
 	}
 
 	static run() {
-		return this.createEditor( 'div.pull-request-review-menu > form' );
+		return this.createEditor( 'div.SelectMenu-list > form.color-bg-primary' );
 	}
 }

tests/_pom/editor.js

@@ -67,8 +67,18 @@ class Editor {
 	 * @return {Promise<GitHubPage>} The current page.
 	 */
 	async submit() {
-		const selector = `[data-github-writer-id="${ this.id }"] .btn-primary`;
-		await this.page.browserPage.click( selector );
+		const selector = `[data-github-writer-id="${ this.id }"] .btn-primary[type="submit"]`;
+		const matchedElementHandles = await this.page.browserPage.$$( selector );
+
+		// On the `newIssue` page there are 2 submit buttons available. Filtering the one visible is needed, as they're
+		// positioned differently, depending on the browser window size (devtools on/off).
+		if ( matchedElementHandles.length > 1 ) {
+			await matchedElementHandles.filter( handle => {
+				return handle.boundingBox() ? handle.click() : ''; } );
+		} else {
+			await matchedElementHandles[ 0 ].click();
+		}
+
 		return this.page;
 	}
 
@@ -255,7 +265,7 @@ class NewLineCommentEditor extends Editor {
 				.nextElementSibling
 				.querySelector( '.js-comments-holder' );
 
-			const count = container.querySelectorAll( '.review-comment-contents.js-suggested-changes-contents' ).length;
+			const count = container.querySelectorAll( '.js-pending-review-comment .js-suggested-changes-contents' ).length;
 
 			return count === expectedCount;
 		}, {}, this.line, commentsCount + 1 );

tests/_pom/pages/commentstimelinepage.js

@@ -22,17 +22,30 @@ class CommentsTimelinePage extends GitHubPage {
 	/**
 	 * Opens the comment editing editor.
 	 *
-	 * @param index {Number} The comment index in the page.
+	 * @param {Number} index The comment index in the page.
+	 * @param {Object} [options] Additional comment edit customizations.
+	 * @param {Boolean} [options.skipHover=false] If set to `true` puppeteer will do pointer hover over
+	 * the action button before clicking it.
 	 * @return {Promise<CommentEditor>} The editor used to edit the comment.
 	 */
-	async editComment( index ) {
+	async editComment( index, options = { skipHover: false } ) {
 		const root = ( await this.browserPage.$$( 'form.js-comment-update' ) )[ index ];
-		const editButton = await root.evaluateHandle( root =>
-			root.closest( '.timeline-comment' ).querySelector( '.js-comment-edit-button' ) );
-		const actionButton = await editButton.evaluateHandle( editButton =>
-			editButton.closest( 'details-menu' ).previousElementSibling );
+
+		const actionButton = await root.evaluateHandle( root =>
+			root.closest( '.timeline-comment' ).querySelector( '.show-more-popover' )
+				.parentElement.querySelector( 'summary[role=button]' ) );
+
+		if ( options.skipHover !== true ) {
+			actionButton.hover();
+			await this.browserPage.waitForSelector( '.js-comment-edit-button' );
+		}
 
 		await actionButton.click();
+		await this.hasElement( '.js-comment-edit-button' );
+
+		const editButton = await actionButton.evaluateHandle( actionButton =>
+			actionButton.parentElement.querySelector( '.dropdown-menu' ).querySelector( '.js-comment-edit-button' ) );
+
 		await this.waitVisible( editButton );
 		await editButton.click();
 		await this.waitVisible( root );
@@ -49,11 +62,11 @@ class CommentsTimelinePage extends GitHubPage {
 	async getCommentHtml( index ) {
 		// Wait for the comment to be available.
 		await this.browserPage.waitForFunction( function getCommentHtmlWait( index ) {
-			return !!document.querySelectorAll( '.timeline-comment.comment td.comment-body' )[ index ];
+			return !!document.querySelectorAll( '.timeline-comment.comment .js-comment-body' )[ index ];
 		}, {}, index );
 
 		return await this.browserPage.evaluate( function getCommentHtmlEval( index ) {
-			const element = document.querySelectorAll( '.timeline-comment.comment td.comment-body' )[ index ];
+			const element = document.querySelectorAll( '.timeline-comment.comment .js-comment-body' )[ index ];
 			return element.innerHTML.replace( /^\s+|\s+$/g, '' );
 		}, index );
 	}

tests/_pom/pages/issuepage.js

@@ -25,7 +25,7 @@ class IssuePage extends CommentsTimelinePage {
 	 * @return {Promise<GitHubPage>} The page loaded after the issue is deleted (`/issues`);
 	 */
 	async deleteIssue() {
-		await this.browserPage.click( '.discussion-sidebar-item svg.octicon-trashcan' );
+		await this.browserPage.click( '.discussion-sidebar-item svg.octicon-trash' );
 		await this.waitForNavigation( this.browserPage.click( 'button[name="verify_delete"]' ) );
 
 		return await GitHubPage.getCurrentPage();

tests/_pom/pages/pullrequestpage.js

@@ -71,7 +71,7 @@ class PullRequestPage extends CommentsTimelinePage {
 
 		await this.browserPage.click( '.js-reviews-toggle' );
 
-		return await this.getEditorByRoot( 'div.pull-request-review-menu > form', MainEditor );
+		return await this.getEditorByRoot( 'div.SelectMenu-list form.color-bg-primary', MainEditor );
 	}
 
 	/**
@@ -115,7 +115,7 @@ class PullRequestPage extends CommentsTimelinePage {
 			container = container && container.querySelector( '.js-comments-holder' );
 
 			return !!container && !!container.querySelectorAll(
-				'.review-comment-contents.js-suggested-changes-contents' )[ index ];
+				'.js-pending-review-comment .js-suggested-changes-contents' )[ index ];
 		}, {}, position, index );
 
 		return await this.browserPage.evaluate( function getLineCommentHtmlEval( position, index ) {
@@ -127,7 +127,7 @@ class PullRequestPage extends CommentsTimelinePage {
 				.querySelector( '.js-comments-holder' );
 
 			const element = container.querySelectorAll(
-				'.review-comment-contents.js-suggested-changes-contents .js-comment-body' )[ index ];
+				'.js-pending-review-comment .js-suggested-changes-contents .js-comment-body' )[ index ];
 			return element.innerHTML.replace( /^\s+|\s+$/g, '' );
 		}, position, index );
 	}

tests/_pom/util.js

@@ -47,9 +47,8 @@ const util = {
 	 *  - [Enter]
 	 *  - [Ctrl+ArrowRight]
 	 *  - [Ctrl+Shift+Alt+Z]
-	 *  - [CtrlCmd+Space]
 	 *
-	 *  The "CtrlCmd" modified sends the `command` (meta) key on mac and the `control` key in other OSs.
+	 *  By default "Ctrl" is used, and it is modified to equal `Control` or `Meta`, depending on the OS used.
 	 *
 	 * @param targetElement {ElementHandle} The element to receive the typing.
 	 * @param texts {...String} The texts to be typed.
@@ -75,8 +74,7 @@ const util = {
 					modifiers = modifiers.map( key => key
 						.replace( /Shift/i, 'Shift' )
 						.replace( /Alt/i, 'Alt' )
-						.replace( /CtrlCmd/i, ctrlCmdKey )
-						.replace( /Ctrl/i, 'Control' )
+						.replace( /Ctrl/i, ctrlCmdKey )
 					);
 
 					for ( let i = 0; i < modifiers.length; i++ ) {
@@ -95,7 +93,7 @@ const util = {
 		}
 
 		async function getCtrlCmdKey() {
-			return await browserPage.evaluate( () => /Mac/i.test( navigator.platform ) ? 'Meta' : 'Control' );
+			return await browserPage.evaluate( () => /MacIntel/i.test( navigator.platform ) ? 'Meta' : 'Control' );
 		}
 	}
 };

tests/_util/githubpage.js

@@ -78,8 +78,9 @@ export const GitHubPage = {
 			}
 			case 'pull-request-review': {
 				container = document.createElement( 'div' );
-				container.classList.add( 'pull-request-review-menu' );
+				container.classList.add( 'SelectMenu-list' );
 				container.append( root );
+				root.classList.add( 'color-bg-primary' );
 				break;
 			}
 			case 'comment-code-line': {

tests/functional/issue.js

@@ -15,6 +15,7 @@ describe( 'Issue', function() {
 		if ( page instanceof IssuePage ) {
 			await page.deleteIssue();
 		}
+		await page.waitForNavigation();
 	} );
 
 	it( 'should create a new issue', async () => {
@@ -49,8 +50,8 @@ describe( 'Issue', function() {
 		await editor.submit();
 
 		expect( await page.getCommentHtml( 1 ) ).to.equals(
-			'<p>Commenting with <strong>GitHub Writer</strong>.</p>\n' +
-			`<p>Time stamp: ${ timestamp }.</p>` );
+			'<p dir="auto">Commenting with <strong>GitHub Writer</strong>.</p>\n' +
+			`<p dir="auto">Time stamp: ${ timestamp }.</p>` );
 	} );
 
 	it( 'should edit the created comment', async () => {
@@ -69,7 +70,28 @@ describe( 'Issue', function() {
 		await editor.submit();
 
 		expect( await page.getCommentHtml( 1 ) ).to.equals(
-			'<p>Editing with <strong>GitHub Writer</strong>.</p>\n' +
-			`<p>Time stamp: ${ timestamp }.</p>` );
+			'<p dir="auto">Editing with <strong>GitHub Writer</strong>.</p>\n' +
+			`<p dir="auto">Time stamp: ${ timestamp }.</p>` );
+	} );
+
+	it( 'should edit the created comment without prior hover', async () => {
+		// (#285).
+		expect( page ).to.be.an.instanceOf( IssuePage );
+
+		const timestamp = ( new Date() ).toISOString();
+
+		const editor = await page.editComment( 1, { skipHover: true } );
+		await editor.type(
+			'[Ctrl+A][Delete]',
+			'Editing with [Ctrl+B]GitHub Writer[Ctrl+B].',
+			'[Enter]',
+			`Time stamp: ${ timestamp }.`
+		);
+
+		await editor.submit();
+
+		expect( await page.getCommentHtml( 1 ) ).to.equals(
+			'<p dir="auto">Editing with <strong>GitHub Writer</strong>.</p>\n' +
+			`<p dir="auto">Time stamp: ${ timestamp }.</p>` );
 	} );
 } );

tests/functional/pullrequest.js

@@ -20,7 +20,7 @@ describe( 'Pull Request', function() {
 	} );
 
 	it( 'should create a new pull request', async () => {
-		page = await FileEditPage.getPage( 'master/README.md' );
+		page = await FileEditPage.getPage( 'main/README.md' );
 
 		const timestamp = ( new Date() ).toISOString();
 
@@ -42,8 +42,8 @@ describe( 'Pull Request', function() {
 		expect( page ).to.be.an.instanceOf( PullRequestPage );
 
 		expect( await page.getCommentHtml( 0 ) ).to.equals(
-			'<p>Typing inside <strong>GitHub Writer</strong>.</p>\n' +
-			`<p>Time stamp: ${ timestamp }.</p>` );
+			'<p dir="auto">Typing inside <strong>GitHub Writer</strong>.</p>\n' +
+			`<p dir="auto">Time stamp: ${ timestamp }.</p>` );
 	} );
 
 	it( 'should create a new comment', async () => {
@@ -61,8 +61,8 @@ describe( 'Pull Request', function() {
 		await editor.submit();
 
 		expect( await page.getCommentHtml( 1 ) ).to.equals(
-			'<p>Commenting with <strong>GitHub Writer</strong>.</p>\n' +
-			`<p>Time stamp: ${ timestamp }.</p>` );
+			'<p dir="auto">Commenting with <strong>GitHub Writer</strong>.</p>\n' +
+			`<p dir="auto">Time stamp: ${ timestamp }.</p>` );
 	} );
 
 	it( 'should edit the created comment', async () => {
@@ -80,8 +80,8 @@ describe( 'Pull Request', function() {
 		await editor.submit();
 
 		expect( await page.getCommentHtml( 1 ) ).to.equals(
-			'<p>Editing with <strong>GitHub Writer</strong>.</p>\n' +
-			`<p>Time stamp: ${ timestamp }.</p>` );
+			'<p dir="auto">Editing with <strong>GitHub Writer</strong>.</p>\n' +
+			`<p dir="auto">Time stamp: ${ timestamp }.</p>` );
 	} );
 
 	it( 'should add a code line comment', async () => {
@@ -99,8 +99,8 @@ describe( 'Pull Request', function() {
 		await editor.submit();
 
 		expect( await page.getLineCommentHtml( 1, 0 ) ).to.equals(
-			'<p>Code line comment with <strong>GitHub Writer</strong>.</p>\n' +
-			`<p>Time stamp: ${ timestamp }.</p>` );
+			'<p dir="auto">Code line comment with <strong>GitHub Writer</strong>.</p>\n' +
+			`<p dir="auto">Time stamp: ${ timestamp }.</p>` );
 	} );
 
 	it( 'should add a review comment', async () => {
@@ -118,7 +118,7 @@ describe( 'Pull Request', function() {
 		await editor.submit();
 
 		expect( await page.getCommentHtml( 2 ) ).to.equals(
-			'<p>Reviewing with <strong>GitHub Writer</strong>.</p>\n' +
-			`<p>Time stamp: ${ timestamp }.</p>` );
+			'<p dir="auto">Reviewing with <strong>GitHub Writer</strong>.</p>\n' +
+			`<p dir="auto">Time stamp: ${ timestamp }.</p>` );
 	} );
 } );