diff --git a/src/app/features/commenteditor.js b/src/app/features/commenteditor.js index 923cfd0..64c1bac 100644 --- a/src/app/features/commenteditor.js +++ b/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 ); } } ); diff --git a/src/app/features/revieweditor.js b/src/app/features/revieweditor.js index 3472404..b445f7a 100644 --- a/src/app/features/revieweditor.js +++ b/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' ); } } diff --git a/tests/_pom/editor.js b/tests/_pom/editor.js index 5329105..6874cd9 100644 --- a/tests/_pom/editor.js +++ b/tests/_pom/editor.js @@ -67,8 +67,18 @@ class Editor { * @return {Promise} 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 ); diff --git a/tests/_pom/pages/commentstimelinepage.js b/tests/_pom/pages/commentstimelinepage.js index b669e7a..b7bdbf6 100644 --- a/tests/_pom/pages/commentstimelinepage.js +++ b/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} 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 ); } diff --git a/tests/_pom/pages/issuepage.js b/tests/_pom/pages/issuepage.js index c2f6686..360d93c 100644 --- a/tests/_pom/pages/issuepage.js +++ b/tests/_pom/pages/issuepage.js @@ -25,7 +25,7 @@ class IssuePage extends CommentsTimelinePage { * @return {Promise} 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(); diff --git a/tests/_pom/pages/pullrequestpage.js b/tests/_pom/pages/pullrequestpage.js index 96405b1..a7c7e00 100644 --- a/tests/_pom/pages/pullrequestpage.js +++ b/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 ); } diff --git a/tests/_pom/util.js b/tests/_pom/util.js index 075d5c0..20af2d9 100644 --- a/tests/_pom/util.js +++ b/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' ); } } }; diff --git a/tests/_util/githubpage.js b/tests/_util/githubpage.js index aad6f09..55115fe 100644 --- a/tests/_util/githubpage.js +++ b/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': { diff --git a/tests/functional/issue.js b/tests/functional/issue.js index e7e22b0..0e240e0 100644 --- a/tests/functional/issue.js +++ b/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( - '

Commenting with GitHub Writer.

\n' + - `

Time stamp: ${ timestamp }.

` ); + '

Commenting with GitHub Writer.

\n' + + `

Time stamp: ${ timestamp }.

` ); } ); it( 'should edit the created comment', async () => { @@ -69,7 +70,28 @@ describe( 'Issue', function() { await editor.submit(); expect( await page.getCommentHtml( 1 ) ).to.equals( - '

Editing with GitHub Writer.

\n' + - `

Time stamp: ${ timestamp }.

` ); + '

Editing with GitHub Writer.

\n' + + `

Time stamp: ${ timestamp }.

` ); + } ); + + 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( + '

Editing with GitHub Writer.

\n' + + `

Time stamp: ${ timestamp }.

` ); } ); } ); diff --git a/tests/functional/pullrequest.js b/tests/functional/pullrequest.js index 88dae58..6abf08c 100644 --- a/tests/functional/pullrequest.js +++ b/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( - '

Typing inside GitHub Writer.

\n' + - `

Time stamp: ${ timestamp }.

` ); + '

Typing inside GitHub Writer.

\n' + + `

Time stamp: ${ timestamp }.

` ); } ); 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( - '

Commenting with GitHub Writer.

\n' + - `

Time stamp: ${ timestamp }.

` ); + '

Commenting with GitHub Writer.

\n' + + `

Time stamp: ${ timestamp }.

` ); } ); 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( - '

Editing with GitHub Writer.

\n' + - `

Time stamp: ${ timestamp }.

` ); + '

Editing with GitHub Writer.

\n' + + `

Time stamp: ${ timestamp }.

` ); } ); 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( - '

Code line comment with GitHub Writer.

\n' + - `

Time stamp: ${ timestamp }.

` ); + '

Code line comment with GitHub Writer.

\n' + + `

Time stamp: ${ timestamp }.

` ); } ); 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( - '

Reviewing with GitHub Writer.

\n' + - `

Time stamp: ${ timestamp }.

` ); + '

Reviewing with GitHub Writer.

\n' + + `

Time stamp: ${ timestamp }.

` ); } ); } );