From 69aa5b3fd9913140132b33d8b3adde5f0f1afa15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Zag=C3=B3rski?= Date: Tue, 2 Nov 2021 14:09:24 +0100 Subject: [PATCH 01/14] Updated clicked element on 'editor.submit()'. --- tests/_pom/editor.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/tests/_pom/editor.js b/tests/_pom/editor.js index 5329105..ed213d2 100644 --- a/tests/_pom/editor.js +++ b/tests/_pom/editor.js @@ -68,7 +68,9 @@ class Editor { */ async submit() { const selector = `[data-github-writer-id="${ this.id }"] .btn-primary`; - await this.page.browserPage.click( selector ); + const matchedElementHandles = await this.page.browserPage.$$( selector ); + + await matchedElementHandles[ matchedElementHandles.length - 1 ].click(); return this.page; } From dccf79133b8e41649cc9bc60033e06bca56c9577 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Zag=C3=B3rski?= Date: Tue, 2 Nov 2021 16:45:59 +0100 Subject: [PATCH 02/14] Updating selector for deleting test issues. --- tests/_pom/pages/issuepage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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(); From 6d14e3cff7e1f67f5b11c04720715c8490fc33c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Zag=C3=B3rski?= Date: Tue, 2 Nov 2021 16:56:30 +0100 Subject: [PATCH 03/14] Updated path from 'master' to 'main'. --- tests/functional/pullrequest.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/functional/pullrequest.js b/tests/functional/pullrequest.js index 88dae58..4b9effd 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(); From 207a40b26de5e18ee9af82ac14bc74ddd0ba6eaf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Zag=C3=B3rski?= Date: Thu, 4 Nov 2021 08:28:17 +0100 Subject: [PATCH 04/14] Updated editComment method. --- tests/_pom/pages/commentstimelinepage.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/tests/_pom/pages/commentstimelinepage.js b/tests/_pom/pages/commentstimelinepage.js index b669e7a..9f7dbb5 100644 --- a/tests/_pom/pages/commentstimelinepage.js +++ b/tests/_pom/pages/commentstimelinepage.js @@ -27,12 +27,20 @@ class CommentsTimelinePage extends GitHubPage { */ async editComment( index ) { 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]' ) ); + + actionButton.hover(); + await this.browserPage.waitFor( 2000 ); 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 ); From 343dd4cab096bf8efcdf68663ca8420325d19b28 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Zag=C3=B3rski?= Date: Thu, 4 Nov 2021 08:36:54 +0100 Subject: [PATCH 05/14] Type() updated to use correct browser platform. --- tests/_pom/util.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) 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' ); } } }; From 62fa0f2ecb2395ec2be964a1a47a75df7a4a6c99 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Zag=C3=B3rski?= Date: Thu, 4 Nov 2021 15:22:12 +0100 Subject: [PATCH 06/14] Changing some selectors in tests and 'revieweditor'. --- src/app/features/revieweditor.js | 2 +- tests/_pom/pages/commentstimelinepage.js | 4 ++-- tests/_pom/pages/pullrequestpage.js | 6 +++--- 3 files changed, 6 insertions(+), 6 deletions(-) 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/pages/commentstimelinepage.js b/tests/_pom/pages/commentstimelinepage.js index 9f7dbb5..6b60a11 100644 --- a/tests/_pom/pages/commentstimelinepage.js +++ b/tests/_pom/pages/commentstimelinepage.js @@ -57,11 +57,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/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 ); } From 51a639f5c1cc2aeb9a173a40e74dd9eb17f4a8f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Zag=C3=B3rski?= Date: Thu, 4 Nov 2021 15:23:24 +0100 Subject: [PATCH 07/14] Added waitFor() at the end of issue tests. --- tests/functional/issue.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/tests/functional/issue.js b/tests/functional/issue.js index e7e22b0..c422d69 100644 --- a/tests/functional/issue.js +++ b/tests/functional/issue.js @@ -15,6 +15,8 @@ describe( 'Issue', function() { if ( page instanceof IssuePage ) { await page.deleteIssue(); } + // Forcing wait so the page can fully load before PR tests start to run. + await page.browserPage.waitFor( 2000 ); } ); it( 'should create a new issue', async () => { From ca07a73f2da70d9700c024b8958882a966ce7664 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Zag=C3=B3rski?= Date: Thu, 4 Nov 2021 15:25:43 +0100 Subject: [PATCH 08/14] Updating NewLineCommentEditor submit() selector. --- tests/_pom/editor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/_pom/editor.js b/tests/_pom/editor.js index ed213d2..bcc7f07 100644 --- a/tests/_pom/editor.js +++ b/tests/_pom/editor.js @@ -257,7 +257,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 ); From d566342d20a0bc9f7c02e25d03f04f64a4c88b08 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Zag=C3=B3rski?= Date: Thu, 4 Nov 2021 21:54:03 +0100 Subject: [PATCH 09/14] Updated editor.submit() logic. --- tests/_pom/editor.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/tests/_pom/editor.js b/tests/_pom/editor.js index bcc7f07..6874cd9 100644 --- a/tests/_pom/editor.js +++ b/tests/_pom/editor.js @@ -67,10 +67,18 @@ class Editor { * @return {Promise} The current page. */ async submit() { - const selector = `[data-github-writer-id="${ this.id }"] .btn-primary`; + const selector = `[data-github-writer-id="${ this.id }"] .btn-primary[type="submit"]`; const matchedElementHandles = await this.page.browserPage.$$( selector ); - await matchedElementHandles[ matchedElementHandles.length - 1 ].click(); + // 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; } From d585f939f0ae6e92bd4512406df702183779f173 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Zag=C3=B3rski?= Date: Fri, 5 Nov 2021 11:01:25 +0100 Subject: [PATCH 10/14] Removed fixed-time timeouts. --- tests/_pom/pages/commentstimelinepage.js | 2 +- tests/functional/issue.js | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/tests/_pom/pages/commentstimelinepage.js b/tests/_pom/pages/commentstimelinepage.js index 6b60a11..b038c64 100644 --- a/tests/_pom/pages/commentstimelinepage.js +++ b/tests/_pom/pages/commentstimelinepage.js @@ -33,7 +33,7 @@ class CommentsTimelinePage extends GitHubPage { .parentElement.querySelector( 'summary[role=button]' ) ); actionButton.hover(); - await this.browserPage.waitFor( 2000 ); + await this.browserPage.waitForSelector( '.js-comment-edit-button' ); await actionButton.click(); await this.hasElement( '.js-comment-edit-button' ); diff --git a/tests/functional/issue.js b/tests/functional/issue.js index c422d69..b18b7ed 100644 --- a/tests/functional/issue.js +++ b/tests/functional/issue.js @@ -15,8 +15,7 @@ describe( 'Issue', function() { if ( page instanceof IssuePage ) { await page.deleteIssue(); } - // Forcing wait so the page can fully load before PR tests start to run. - await page.browserPage.waitFor( 2000 ); + await page.waitForNavigation(); } ); it( 'should create a new issue', async () => { From ac1009ab82aadd4d3a0a0f07cbb84e97cf861ad4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Zag=C3=B3rski?= Date: Fri, 5 Nov 2021 12:33:07 +0100 Subject: [PATCH 11/14] Updated unit tests utils to reflect previous changes. --- tests/_util/githubpage.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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': { From 6584ffb6749c71e7bca78a66dbaa3ff9fcc93fd8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Zag=C3=B3rski?= Date: Tue, 9 Nov 2021 10:24:49 +0100 Subject: [PATCH 12/14] Added functional test for issues without prior hover. --- tests/_pom/pages/commentstimelinepage.js | 13 +++++++---- tests/functional/issue.js | 29 ++++++++++++++++++++---- 2 files changed, 34 insertions(+), 8 deletions(-) diff --git a/tests/_pom/pages/commentstimelinepage.js b/tests/_pom/pages/commentstimelinepage.js index b038c64..b7bdbf6 100644 --- a/tests/_pom/pages/commentstimelinepage.js +++ b/tests/_pom/pages/commentstimelinepage.js @@ -22,18 +22,23 @@ 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 actionButton = await root.evaluateHandle( root => root.closest( '.timeline-comment' ).querySelector( '.show-more-popover' ) .parentElement.querySelector( 'summary[role=button]' ) ); - actionButton.hover(); - await this.browserPage.waitForSelector( '.js-comment-edit-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' ); diff --git a/tests/functional/issue.js b/tests/functional/issue.js index b18b7ed..0e240e0 100644 --- a/tests/functional/issue.js +++ b/tests/functional/issue.js @@ -50,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 () => { @@ -70,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 }.

` ); } ); } ); From 6a1de7518c32eadfc26abe5422402b00757493c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Zag=C3=B3rski?= Date: Wed, 10 Nov 2021 11:02:07 +0100 Subject: [PATCH 13/14] Updated pullrequest functional tests. --- tests/functional/pullrequest.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/tests/functional/pullrequest.js b/tests/functional/pullrequest.js index 4b9effd..6abf08c 100644 --- a/tests/functional/pullrequest.js +++ b/tests/functional/pullrequest.js @@ -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 }.

` ); } ); } ); From da98aa31e0ba6927d3dc06c799f1d8b77b05ea3a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Zag=C3=B3rski?= Date: Mon, 15 Nov 2021 10:51:07 +0100 Subject: [PATCH 14/14] Updating click listener for commenteditor. --- src/app/features/commenteditor.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) 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 ); } } );