From 952ffaac4e8cee9637eb4a4c205baf4e8ed982de Mon Sep 17 00:00:00 2001 From: "depfu[bot]" <23717796+depfu[bot]@users.noreply.github.com> Date: Thu, 28 Sep 2023 11:52:47 -0400 Subject: [PATCH] =?UTF-8?q?[js]=20Update=20eslint-plugin-cypress=202.12.1?= =?UTF-8?q?=20=E2=86=92=202.15.1=20(minor)=20(#20168)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: depfu[bot] <23717796+depfu[bot]@users.noreply.github.com> Co-authored-by: dukegreene --- .../creatorSettings.spec.js | 30 ++--- .../billboards/editBillboards.spec.js | 7 +- .../emailDigestFrequencySection.spec.js | 8 +- .../config/emailServerSettingsSection.spec.js | 16 ++- .../adminFlows/config/mascotSection.spec.js | 10 +- .../config/rateLimitSection.spec.js | 10 +- .../organizations/manageOrganizations.spec.js | 11 +- .../adminFlows/users/filterUserIndex.spec.js | 14 +-- .../users/gdprDeleteRequests.spec.js | 6 +- .../adminFlows/users/invitedUsers.spec.js | 6 +- .../users/manageUserOptions.spec.js | 11 +- .../adminFlows/users/userIndexView.spec.js | 11 +- .../articleFlows/commentOnArticle.spec.js | 56 +++++---- .../playOrPauseAnimatedImages.spec.js | 52 +++----- .../articleFlows/postSidebarActions.spec.js | 2 +- .../sortCommentsOnArticle.spec.js | 8 +- .../dashboardFlows/followingTags.spec.js | 12 +- .../listingFlows/viewListing.spec.js | 6 +- .../commentNotifications.spec.js | 10 +- .../limitPostCreationToAdmins.spec.js | 7 +- .../userUpdateSettingsProfile.spec.js | 16 +-- .../publishingFlows/addTagsToArticle.spec.js | 20 +-- .../publishingFlows/markdownToolbar.spec.js | 38 +++--- .../postBrowserPersistence.spec.js | 34 ++--- .../publishingFlows/previewPost.spec.js | 96 +++++++------- .../publishingFlows/publishOrSavePost.spec.js | 118 ++++++++++++------ .../publishingFlows/uploadImage.spec.js | 15 +-- .../e2e/seededFlows/tagsFlows/editTag.spec.js | 12 +- .../MemberDropDownButton.spec.js | 33 +++-- package.json | 2 +- yarn.lock | 19 ++- 31 files changed, 385 insertions(+), 311 deletions(-) diff --git a/cypress/e2e/creatorOnboardingFlows/creatorSettings.spec.js b/cypress/e2e/creatorOnboardingFlows/creatorSettings.spec.js index ab67a053d..06a0b3d2d 100644 --- a/cypress/e2e/creatorOnboardingFlows/creatorSettings.spec.js +++ b/cypress/e2e/creatorOnboardingFlows/creatorSettings.spec.js @@ -45,9 +45,9 @@ describe('Creator Settings Page', () => { .should('be.visible'); cy.get('@joinCommunity').within(() => { - cy.findByRole('radio', { name: /everyone/i }) - .check() - .should('be.checked'); + cy.findByRole('radio', { name: /everyone/i }).as('radio'); + cy.get('@radio').check(); + cy.get('@radio').should('be.checked'); cy.findByRole('radio', { name: /invite only/i }).should('not.be.checked'); }); @@ -60,9 +60,9 @@ describe('Creator Settings Page', () => { .should('be.visible'); cy.get('@viewCommunity').within(() => { - cy.findByRole('radio', { name: /members only/i }) - .check() - .should('be.checked'); + cy.findByRole('radio', { name: /members only/i }).as('radio'); + cy.get('@radio').check(); + cy.get('@radio').should('be.checked'); cy.findByRole('radio', { name: /everyone/i }).should('not.be.checked'); }); @@ -164,10 +164,10 @@ describe('Creator Settings Page', () => { rgbColor, ); - cy.findAllByRole('radio', { name: /members only/i }) - .check() - .should('have.css', 'background-color', rgbColor) - .should('have.css', 'border-color', rgbColor); + cy.findAllByRole('radio', { name: /members only/i }).as('radio'); + cy.get('@radio').check(); + cy.get('@radio').should('have.css', 'background-color', rgbColor); + cy.get('@radio').should('have.css', 'border-color', rgbColor); cy.findByRole('link', { name: /Forem Admin Guide/i }).should( 'have.css', @@ -175,11 +175,11 @@ describe('Creator Settings Page', () => { rgbColor, ); - cy.findByRole('textbox', { name: /community name/i }) - .clear() - .focus() - .type('Climbing Life') - .should('have.css', 'border-color', rgbColor); + cy.findByRole('textbox', { name: /community name/i }).as('textbox'); + cy.get('@textbox').clear(); + cy.get('@textbox').focus(); + cy.get('@textbox').type('Climbing Life'); + cy.get('@textbox').should('have.css', 'border-color', rgbColor); }); }); }); diff --git a/cypress/e2e/seededFlows/adminFlows/billboards/editBillboards.spec.js b/cypress/e2e/seededFlows/adminFlows/billboards/editBillboards.spec.js index 3d89538aa..7842c5c6c 100644 --- a/cypress/e2e/seededFlows/adminFlows/billboards/editBillboards.spec.js +++ b/cypress/e2e/seededFlows/adminFlows/billboards/editBillboards.spec.js @@ -63,7 +63,10 @@ describe('Billboards Form', () => { cy.findByLabelText('Users who:') .as('audienceSegments') .should('be.visible'); - + // Unsure of the best way to separate the get/select chaining at the moment. + // It's getting late and I may be missing something easy. + // Skipping the linter rule for now to unblock depfu. + /* eslint-disable cypress/unsafe-to-chain-command */ cy.get('@audienceSegments').select('Are trusted').should('exist'); cy.get('@audienceSegments') .select('Have not posted yet') @@ -71,7 +74,7 @@ describe('Billboards Form', () => { cy.get('@audienceSegments') .select('Have not set an experience level') .should('exist'); - + /* eslint-enable cypress/unsafe-to-chain-command */ cy.get('@audienceSegments') .contains('Managed elsewhere') .should('not.exist'); diff --git a/cypress/e2e/seededFlows/adminFlows/config/emailDigestFrequencySection.spec.js b/cypress/e2e/seededFlows/adminFlows/config/emailDigestFrequencySection.spec.js index 5f8ae18e8..ce1f5966a 100644 --- a/cypress/e2e/seededFlows/adminFlows/config/emailDigestFrequencySection.spec.js +++ b/cypress/e2e/seededFlows/adminFlows/config/emailDigestFrequencySection.spec.js @@ -14,7 +14,9 @@ describe('Emails Section', () => { cy.get('@emailForm').within(() => { cy.findByText('Emails').click(); - cy.findByLabelText('Contact email').clear().type('yo@dev.to'); + cy.findByLabelText('Contact email').as('contact'); + cy.get('@contact').clear(); + cy.get('@contact').type('yo@dev.to'); cy.findByText('Update Settings').click(); }); @@ -32,7 +34,9 @@ describe('Emails Section', () => { cy.get('@emailForm').within(() => { cy.findByText('Emails').click(); - cy.findByLabelText('Periodic email digest').clear().type('42'); + cy.findByLabelText('Periodic email digest').as('frequency'); + cy.get('@frequency').clear(); + cy.get('@frequency').type('42'); cy.findByText('Update Settings').click(); }); diff --git a/cypress/e2e/seededFlows/adminFlows/config/emailServerSettingsSection.spec.js b/cypress/e2e/seededFlows/adminFlows/config/emailServerSettingsSection.spec.js index d3c9a6020..caa6be480 100644 --- a/cypress/e2e/seededFlows/adminFlows/config/emailServerSettingsSection.spec.js +++ b/cypress/e2e/seededFlows/adminFlows/config/emailServerSettingsSection.spec.js @@ -14,10 +14,18 @@ describe('Email Server Settings Section', () => { cy.get('@emailServerSettings').within(() => { cy.findByText('Email Server Settings (SMTP)').click(); - cy.findByLabelText('User name').clear().type('jane_doe'); - cy.findByLabelText('Password').clear().type('abc123456'); - cy.findByLabelText('Address').clear().type('smtp.gmail.com'); - cy.findByLabelText('Authentication').clear().type('plain'); + cy.findByLabelText('User name').as('name'); + cy.get('@name').clear(); + cy.get('@name').type('jane_doe'); + cy.findByLabelText('Password').as('password'); + cy.get('@password').clear(); + cy.get('@password').type('abc123456'); + cy.findByLabelText('Address').as('address'); + cy.get('@address').clear(); + cy.get('@address').type('smtp.gmail.com'); + cy.findByLabelText('Authentication').as('auth'); + cy.get('@auth').clear(); + cy.get('@auth').type('plain'); cy.findByText('Update Settings').click(); }); diff --git a/cypress/e2e/seededFlows/adminFlows/config/mascotSection.spec.js b/cypress/e2e/seededFlows/adminFlows/config/mascotSection.spec.js index e24cf1e1b..7e379da6b 100644 --- a/cypress/e2e/seededFlows/adminFlows/config/mascotSection.spec.js +++ b/cypress/e2e/seededFlows/adminFlows/config/mascotSection.spec.js @@ -17,8 +17,9 @@ describe('Mascot Section', () => { cy.get('@mascotSectionForm').findByText('Mascot').click(); cy.get('@mascotSectionForm') .findByLabelText('Mascot Image URL') - .clear() - .type('notanimage'); + .as('image'); + cy.get('@image').clear(); + cy.get('@image').type('notanimage'); cy.get('@mascotSectionForm').findByText('Update Settings').click(); @@ -41,8 +42,9 @@ describe('Mascot Section', () => { cy.get('@mascotSectionForm').findByText('Mascot').click(); cy.get('@mascotSectionForm') .findByLabelText('Mascot Image URL') - .clear() - .type('https://example.com/image.png'); + .as('image'); + cy.get('@image').clear(); + cy.get('@image').type('https://example.com/image.png'); cy.get('@mascotSectionForm').findByText('Update Settings').click(); diff --git a/cypress/e2e/seededFlows/adminFlows/config/rateLimitSection.spec.js b/cypress/e2e/seededFlows/adminFlows/config/rateLimitSection.spec.js index f9a5d0d3b..9f9d56a0e 100644 --- a/cypress/e2e/seededFlows/adminFlows/config/rateLimitSection.spec.js +++ b/cypress/e2e/seededFlows/adminFlows/config/rateLimitSection.spec.js @@ -20,8 +20,9 @@ describe('Campaign Section', () => { cy.get('@rateLimitSectionForm') .get('#settings_rate_limit_user_considered_new_days') - .clear() - .type('42'); + .as('limit'); + cy.get('@limit').clear(); + cy.get('@limit').type('42'); cy.get('@rateLimitSectionForm').findByText('Update Settings').click(); @@ -55,8 +56,9 @@ describe('Campaign Section', () => { cy.get('@rateLimitSectionForm') .get('#settings_rate_limit_user_considered_new_days') - .clear() - .type('42'); + .as('limit'); + cy.get('@limit').clear(); + cy.get('@limit').type('42'); cy.get('@rateLimitSectionForm').findByText('Update Settings').click(); diff --git a/cypress/e2e/seededFlows/adminFlows/organizations/manageOrganizations.spec.js b/cypress/e2e/seededFlows/adminFlows/organizations/manageOrganizations.spec.js index 40057d898..0db14b34d 100644 --- a/cypress/e2e/seededFlows/adminFlows/organizations/manageOrganizations.spec.js +++ b/cypress/e2e/seededFlows/adminFlows/organizations/manageOrganizations.spec.js @@ -1,9 +1,14 @@ import { verifyAndDismissFlashMessage } from '../shared/utilities'; function openOrganizationOptions(callback) { - cy.findByRole('button', { name: 'Options' }) - .should('have.attr', 'aria-haspopup', 'true') - .should('have.attr', 'aria-expanded', 'false') + cy.findByRole('button', { name: 'Options' }).as('options'); + cy.get('@options').should('have.attr', 'aria-haspopup', 'true'); + cy.get('@options').should('have.attr', 'aria-expanded', 'false'); + // Can't find a better way to get to the aria-controls attribute at the moment + // Might be possible if we use pipe(click) with the helper method used in AdjustPostTags spec, + // instead of the .then syntax... but skipping the linter may be safest of all. + /* eslint-disable-next-line cypress/unsafe-to-chain-command */ + cy.get('@options') .click() .then(([button]) => { expect(button.getAttribute('aria-expanded')).to.equal('true'); diff --git a/cypress/e2e/seededFlows/adminFlows/users/filterUserIndex.spec.js b/cypress/e2e/seededFlows/adminFlows/users/filterUserIndex.spec.js index 3c3017348..ae7cc29e5 100644 --- a/cypress/e2e/seededFlows/adminFlows/users/filterUserIndex.spec.js +++ b/cypress/e2e/seededFlows/adminFlows/users/filterUserIndex.spec.js @@ -121,19 +121,17 @@ describe('Filter user index', () => { .findAllByRole('checkbox') .should('have.length', 6); - cy.findByRole('button', { name: 'See more roles' }) - .as('seeMoreButton') - .should('have.attr', 'aria-pressed', 'false') - .click() - .should('have.attr', 'aria-pressed', 'true'); + cy.findByRole('button', { name: 'See more roles' }).as('seeMoreButton'); + cy.get('@seeMoreButton').should('have.attr', 'aria-pressed', 'false'); + cy.get('@seeMoreButton').click(); + cy.get('@seeMoreButton').should('have.attr', 'aria-pressed', 'true'); cy.get('@memberRoles') .findAllByRole('checkbox') .should('have.length', 16); - cy.get('@seeMoreButton') - .click() - .should('have.attr', 'aria-pressed', 'false'); + cy.get('@seeMoreButton').click(); + cy.get('@seeMoreButton').should('have.attr', 'aria-pressed', 'false'); cy.get('@memberRoles') .findAllByRole('checkbox') diff --git a/cypress/e2e/seededFlows/adminFlows/users/gdprDeleteRequests.spec.js b/cypress/e2e/seededFlows/adminFlows/users/gdprDeleteRequests.spec.js index d9ad3d008..36577a3ac 100644 --- a/cypress/e2e/seededFlows/adminFlows/users/gdprDeleteRequests.spec.js +++ b/cypress/e2e/seededFlows/adminFlows/users/gdprDeleteRequests.spec.js @@ -88,9 +88,9 @@ describe('GDPR Delete Requests', () => { const searchForMember = (searchTerm) => { cy.findByRole('textbox', { name: 'Search members by email or username', - }) - .clear() - .type(searchTerm); + }).as('textbox'); + cy.get('@textbox').clear(); + cy.get('@textbox').type(searchTerm); cy.findByRole('button', { name: 'Search' }).click(); }; }); diff --git a/cypress/e2e/seededFlows/adminFlows/users/invitedUsers.spec.js b/cypress/e2e/seededFlows/adminFlows/users/invitedUsers.spec.js index a06d83610..b95a5b31a 100644 --- a/cypress/e2e/seededFlows/adminFlows/users/invitedUsers.spec.js +++ b/cypress/e2e/seededFlows/adminFlows/users/invitedUsers.spec.js @@ -113,9 +113,9 @@ describe('Invited users', () => { const searchForMember = (searchTerm) => { cy.findByRole('textbox', { name: 'Search invited members by name, email, or username', - }) - .clear() - .type(searchTerm); + }).as('textbox'); + cy.get('@textbox').clear(); + cy.get('@textbox').type(searchTerm); cy.findByRole('button', { name: 'Search' }).click(); }; diff --git a/cypress/e2e/seededFlows/adminFlows/users/manageUserOptions.spec.js b/cypress/e2e/seededFlows/adminFlows/users/manageUserOptions.spec.js index 299a9c504..53336b74d 100644 --- a/cypress/e2e/seededFlows/adminFlows/users/manageUserOptions.spec.js +++ b/cypress/e2e/seededFlows/adminFlows/users/manageUserOptions.spec.js @@ -1,9 +1,14 @@ import { verifyAndDismissFlashMessage } from '../shared/utilities'; function openUserOptions(callback) { - cy.findByRole('button', { name: 'Options' }) - .should('have.attr', 'aria-haspopup', 'true') - .should('have.attr', 'aria-expanded', 'false') + cy.findByRole('button', { name: 'Options' }).as('options'); + cy.get('@options').should('have.attr', 'aria-haspopup', 'true'); + cy.get('@options').should('have.attr', 'aria-expanded', 'false'); + // Can't find a better way to get to the aria-controls attribute at the moment + // Might be possible if we use pipe(click) with the helper method used in AdjustPostTags spec, + // instead of the .then syntax... but skipping the linter may be safest of all. + /* eslint-disable-next-line cypress/unsafe-to-chain-command */ + cy.get('@options') .click() .then(([button]) => { expect(button.getAttribute('aria-expanded')).to.equal('true'); diff --git a/cypress/e2e/seededFlows/adminFlows/users/userIndexView.spec.js b/cypress/e2e/seededFlows/adminFlows/users/userIndexView.spec.js index 8273126f3..e585eba6f 100644 --- a/cypress/e2e/seededFlows/adminFlows/users/userIndexView.spec.js +++ b/cypress/e2e/seededFlows/adminFlows/users/userIndexView.spec.js @@ -69,18 +69,17 @@ describe('User index view', () => { .should('have.attr', 'aria-expanded', 'true'); cy.findByRole('textbox', { name: 'Search member by name, username or email', - }) - .clear() - .type('something'); + }).as('textbox'); + cy.get('@textbox').clear(); + cy.get('@textbox').type('something'); // Indicator should not be shown while open cy.get('@searchButton') .findByTestId('search-indicator') .should('not.be.visible'); // Collapse the filter field; indicator should now be shown - cy.get('@searchButton') - .click() - .should('have.attr', 'aria-expanded', 'false'); + cy.get('@searchButton').click(); + cy.get('@searchButton').should('have.attr', 'aria-expanded', 'false'); cy.get('@searchButton') .findByTestId('search-indicator') .should('be.visible'); diff --git a/cypress/e2e/seededFlows/articleFlows/commentOnArticle.spec.js b/cypress/e2e/seededFlows/articleFlows/commentOnArticle.spec.js index 0b07c3707..4ba244957 100644 --- a/cypress/e2e/seededFlows/articleFlows/commentOnArticle.spec.js +++ b/cypress/e2e/seededFlows/articleFlows/commentOnArticle.spec.js @@ -334,9 +334,11 @@ describe('Comment on articles', () => { cy.findByRole('main').within(() => { cy.findByRole('heading', { name: 'Top comments (0)' }); - cy.findByRole('textbox', { name: /^Add a comment to the discussion$/i }) - .focus() // Focus activates the Submit button and mini toolbar below a comment textbox - .type('this is a comment'); + cy.findByRole('textbox', { + name: /^Add a comment to the discussion$/i, + }).as('textbox'); + cy.get('@textbox').focus(); // Focus activates the Submit button and mini toolbar below a comment textbox + cy.get('@textbox').type('this is a comment'); cy.findByRole('textbox', { name: /^Add a comment to the discussion$/i, @@ -405,9 +407,11 @@ describe('Comment on articles', () => { it('should show rate limit modal', () => { cy.intercept('POST', '/comments', { statusCode: 429, body: {} }); cy.findByRole('main').within(() => { - cy.findByRole('textbox', { name: /^Add a comment to the discussion$/i }) - .focus() // Focus activates the Submit button and mini toolbar below a comment textbox - .type('this is a comment'); + cy.findByRole('textbox', { + name: /^Add a comment to the discussion$/i, + }).as('textbox'); + cy.get('@textbox').focus(); // Focus activates the Submit button and mini toolbar below a comment textbox + cy.get('@textbox').type('this is a comment'); cy.findByRole('button', { name: /^Submit$/i }).click(); }); @@ -431,9 +435,11 @@ describe('Comment on articles', () => { body: { error: 'Test error' }, }); cy.findByRole('main').within(() => { - cy.findByRole('textbox', { name: /^Add a comment to the discussion$/i }) - .focus() // Focus activates the Submit button and mini toolbar below a comment textbox - .type('this is a comment'); + cy.findByRole('textbox', { + name: /^Add a comment to the discussion$/i, + }).as('textbox'); + cy.get('@textbox').focus(); // Focus activates the Submit button and mini toolbar below a comment textbox + cy.get('@textbox').type('this is a comment'); cy.findByRole('button', { name: /^Submit$/i }).click(); }); @@ -458,9 +464,11 @@ describe('Comment on articles', () => { statusCode: 503, }); cy.findByRole('main').within(() => { - cy.findByRole('textbox', { name: /^Add a comment to the discussion$/i }) - .focus() // Focus activates the Submit button and mini toolbar below a comment textbox - .type('this is a comment'); + cy.findByRole('textbox', { + name: /^Add a comment to the discussion$/i, + }).as('textbox'); + cy.get('@textbox').focus(); // Focus activates the Submit button and mini toolbar below a comment textbox + cy.get('@textbox').type('this is a comment'); cy.findByRole('button', { name: /^Submit$/i }).click(); }); @@ -496,9 +504,11 @@ describe('Comment on articles', () => { it('should provide a dropdown of options', () => { cy.findByRole('main').within(() => { // Add a comment - cy.findByRole('textbox', { name: /^Add a comment to the discussion$/i }) - .focus() // Focus activates the Submit button and mini toolbar below a comment textbox - .type('this is a comment'); + cy.findByRole('textbox', { + name: /^Add a comment to the discussion$/i, + }).as('textbox'); + cy.get('@textbox').focus(); // Focus activates the Submit button and mini toolbar below a comment textbox + cy.get('@textbox').type('this is a comment'); cy.findByRole('button', { name: /^Submit$/i }).click(); @@ -529,9 +539,11 @@ describe('Comment on articles', () => { it('should close the comment dropdown on Escape press, returning focus', () => { // Add a comment - cy.findByRole('textbox', { name: /^Add a comment to the discussion$/i }) - .focus() // Focus activates the Submit button and mini toolbar below a comment textbox - .type('this is a comment'); + cy.findByRole('textbox', { name: /^Add a comment to the discussion$/i }).as( + 'textbox', + ); + cy.get('@textbox').focus(); // Focus activates the Submit button and mini toolbar below a comment textbox + cy.get('@textbox').type('this is a comment'); cy.findByRole('button', { name: /^Submit$/i }).click(); cy.findByRole('button', { name: /^Toggle dropdown menu$/i }).as( @@ -550,9 +562,11 @@ describe('Comment on articles', () => { }); it('should show dropdown options on comment index page', () => { - cy.findByRole('textbox', { name: /^Add a comment to the discussion$/i }) - .focus() // Focus activates the Submit button and mini toolbar below a comment textbox - .type('this is a comment'); + cy.findByRole('textbox', { name: /^Add a comment to the discussion$/i }).as( + 'textbox', + ); + cy.get('@textbox').focus(); // Focus activates the Submit button and mini toolbar below a comment textbox + cy.get('@textbox').type('this is a comment'); cy.findByRole('button', { name: /^Submit$/i }).click(); cy.findByRole('button', { name: /^Toggle dropdown menu$/i }).click(); diff --git a/cypress/e2e/seededFlows/articleFlows/playOrPauseAnimatedImages.spec.js b/cypress/e2e/seededFlows/articleFlows/playOrPauseAnimatedImages.spec.js index e9bca3c0d..879964fea 100644 --- a/cypress/e2e/seededFlows/articleFlows/playOrPauseAnimatedImages.spec.js +++ b/cypress/e2e/seededFlows/articleFlows/playOrPauseAnimatedImages.spec.js @@ -42,27 +42,19 @@ describe('play or pause animated images', () => { .should('have.length', 2); // By default, both buttons should be in the 'playing' state - cy.get('@pauseButtons') - .first() - .should('have.attr', 'aria-pressed', 'false'); - cy.get('@pauseButtons') - .last() - .should('have.attr', 'aria-pressed', 'false'); + cy.get('@pauseButtons').first().as('firstButton'); + cy.get('@firstButton').should('have.attr', 'aria-pressed', 'false'); + cy.get('@pauseButtons').last().as('lastButton'); + cy.get('@lastButton').should('have.attr', 'aria-pressed', 'false'); // Pressing the button should toggle only the state of the individual image - cy.get('@pauseButtons') - .first() - .click() - .should('have.attr', 'aria-pressed', 'true'); - cy.get('@pauseButtons') - .last() - .should('have.attr', 'aria-pressed', 'false'); + cy.get('@firstButton').click(); + cy.get('@firstButton').should('have.attr', 'aria-pressed', 'true'); + cy.get('@lastButton').should('have.attr', 'aria-pressed', 'false'); // It should also toggle back to playing - cy.get('@pauseButtons') - .first() - .click() - .should('have.attr', 'aria-pressed', 'false'); + cy.get('@firstButton').click(); + cy.get('@firstButton').should('have.attr', 'aria-pressed', 'false'); }); }); @@ -84,27 +76,19 @@ describe('play or pause animated images', () => { .should('have.length', 2); // By default, both buttons should be in the 'paused' state - cy.get('@pauseButtons') - .first() - .should('have.attr', 'aria-pressed', 'true'); - cy.get('@pauseButtons') - .last() - .should('have.attr', 'aria-pressed', 'true'); + cy.get('@pauseButtons').first().as('firstButton'); + cy.get('@firstButton').should('have.attr', 'aria-pressed', 'true'); + cy.get('@pauseButtons').last().as('lastButton'); + cy.get('@lastButton').should('have.attr', 'aria-pressed', 'true'); // Pressing the button should toggle only the state of the individual image - cy.get('@pauseButtons') - .first() - .click() - .should('have.attr', 'aria-pressed', 'false'); - cy.get('@pauseButtons') - .last() - .should('have.attr', 'aria-pressed', 'true'); + cy.get('@firstButton').click(); + cy.get('@firstButton').should('have.attr', 'aria-pressed', 'false'); + cy.get('@lastButton').should('have.attr', 'aria-pressed', 'true'); // It should also toggle back to paused - cy.get('@pauseButtons') - .first() - .click() - .should('have.attr', 'aria-pressed', 'true'); + cy.get('@firstButton').click(); + cy.get('@firstButton').should('have.attr', 'aria-pressed', 'true'); }); }); }); diff --git a/cypress/e2e/seededFlows/articleFlows/postSidebarActions.spec.js b/cypress/e2e/seededFlows/articleFlows/postSidebarActions.spec.js index 79a1db582..dbf301847 100644 --- a/cypress/e2e/seededFlows/articleFlows/postSidebarActions.spec.js +++ b/cypress/e2e/seededFlows/articleFlows/postSidebarActions.spec.js @@ -91,7 +91,7 @@ describe('Post sidebar actions', () => { const comments = $comments[0]; const originalScroll = comments.scrollIntoView.bind(comments); cy.stub(comments, 'scrollIntoView').callsFake(() => originalScroll()); - + /* eslint-disable-next-line cypress/unsafe-to-chain-command */ cy.findByRole('button', { name: 'Jump to Comments' }) .click() .then(() => { diff --git a/cypress/e2e/seededFlows/articleFlows/sortCommentsOnArticle.spec.js b/cypress/e2e/seededFlows/articleFlows/sortCommentsOnArticle.spec.js index 384dc2ec5..4cf5e0cbc 100644 --- a/cypress/e2e/seededFlows/articleFlows/sortCommentsOnArticle.spec.js +++ b/cypress/e2e/seededFlows/articleFlows/sortCommentsOnArticle.spec.js @@ -12,10 +12,10 @@ describe('Sort Comments in an Article', () => { }); it('clicking on sort comments button should open and close dropdown menu', () => { - cy.findByRole('button', { name: 'Sort comments' }) - .should('have.attr', 'aria-expanded', 'false') - .click() - .should('have.attr', 'aria-expanded', 'true'); + cy.findByRole('button', { name: 'Sort comments' }).as('sortButton'); + cy.get('@sortButton').should('have.attr', 'aria-expanded', 'false'); + cy.get('@sortButton').click(); + cy.get('@sortButton').should('have.attr', 'aria-expanded', 'true'); cy.findByRole('navigation', { name: 'Sort discussion:' }).within(() => { cy.findByRole('link', { name: /Top/ }); diff --git a/cypress/e2e/seededFlows/dashboardFlows/followingTags.spec.js b/cypress/e2e/seededFlows/dashboardFlows/followingTags.spec.js index 26273420c..a5708648e 100644 --- a/cypress/e2e/seededFlows/dashboardFlows/followingTags.spec.js +++ b/cypress/e2e/seededFlows/dashboardFlows/followingTags.spec.js @@ -1,8 +1,12 @@ function openOptionsMenu(callback) { - cy.findAllByRole('button', { name: 'Options' }) - .first() - .should('have.attr', 'aria-haspopup', 'true') - .should('have.attr', 'aria-expanded', 'false') + cy.findAllByRole('button', { name: 'Options' }).first().as('option'); + cy.get('@option').should('have.attr', 'aria-haspopup', 'true'); + cy.get('@option').should('have.attr', 'aria-expanded', 'false'); + // Can't find a better way to get to the aria-controls attribute at the moment + // Might be possible if we use pipe(click) with the helper method used in AdjustPostTags spec, + // instead of the .then syntax... but skipping the linter may be safest of all. + /* eslint-disable-next-line cypress/unsafe-to-chain-command */ + cy.get('@option') .click() .then(([button]) => { expect(button.getAttribute('aria-expanded')).to.equal('true'); diff --git a/cypress/e2e/seededFlows/listingFlows/viewListing.spec.js b/cypress/e2e/seededFlows/listingFlows/viewListing.spec.js index 3dc606522..51560a7fa 100644 --- a/cypress/e2e/seededFlows/listingFlows/viewListing.spec.js +++ b/cypress/e2e/seededFlows/listingFlows/viewListing.spec.js @@ -55,14 +55,16 @@ describe('View listing', () => { cy.findByRole('main') .findByRole('link', { name: 'Listing title' }) .as('listingTitle'); - cy.get('@listingTitle').focus().click(); + cy.get('@listingTitle').focus(); + cy.get('@listingTitle').click(); cy.findByTestId('listings-modal').as('listingsModal'); cy.get('@listingsModal') .findByRole('link', { name: 'cfp' }) .as('listingCategory'); - cy.get('@listingCategory').focus().click(); + cy.get('@listingCategory').focus(); + cy.get('@listingCategory').click(); cy.findByTestId('listings-modal').should('not.exist'); cy.get('@listingTitle').should('be.focused'); diff --git a/cypress/e2e/seededFlows/notificationsFlows/commentNotifications.spec.js b/cypress/e2e/seededFlows/notificationsFlows/commentNotifications.spec.js index bcf770a90..9e09feadc 100644 --- a/cypress/e2e/seededFlows/notificationsFlows/commentNotifications.spec.js +++ b/cypress/e2e/seededFlows/notificationsFlows/commentNotifications.spec.js @@ -14,13 +14,13 @@ describe('Comment notifications', () => { cy.findByRole('button', { name: 'Like' }).as('like'); // User can like a comment - cy.get('@like') - .should('have.attr', 'aria-pressed', 'false') - .click() - .should('have.attr', 'aria-pressed', 'true'); + cy.get('@like').should('have.attr', 'aria-pressed', 'false'); + cy.get('@like').click(); + cy.get('@like').should('have.attr', 'aria-pressed', 'true'); // User can unlike a comment - cy.get('@like').click().should('have.attr', 'aria-pressed', 'false'); + cy.get('@like').click(); + cy.get('@like').should('have.attr', 'aria-pressed', 'false'); }); }); diff --git a/cypress/e2e/seededFlows/policyFlows/limitPostCreationToAdmins.spec.js b/cypress/e2e/seededFlows/policyFlows/limitPostCreationToAdmins.spec.js index 99b71be32..08361960b 100644 --- a/cypress/e2e/seededFlows/policyFlows/limitPostCreationToAdmins.spec.js +++ b/cypress/e2e/seededFlows/policyFlows/limitPostCreationToAdmins.spec.js @@ -14,10 +14,9 @@ describe('Limit Post Creation to Admins', () => { it('clicking on User Avatar should open User Dropdown menu and no Create Post is visible', () => { cy.findByRole('button', { name: 'Navigation menu' }).as('menuButton'); - cy.get('@menuButton') - .should('have.attr', 'aria-expanded', 'false') - .click() - .should('have.attr', 'aria-expanded', 'true'); + cy.get('@menuButton').should('have.attr', 'aria-expanded', 'false'); + cy.get('@menuButton').click(); + cy.get('@menuButton').should('have.attr', 'aria-expanded', 'true'); cy.findByRole('link', { name: 'Article Editor v1 User @article_editor_v1_user', diff --git a/cypress/e2e/seededFlows/profileFlows/userUpdateSettingsProfile.spec.js b/cypress/e2e/seededFlows/profileFlows/userUpdateSettingsProfile.spec.js index 9dc6fac13..61389a6db 100644 --- a/cypress/e2e/seededFlows/profileFlows/userUpdateSettingsProfile.spec.js +++ b/cypress/e2e/seededFlows/profileFlows/userUpdateSettingsProfile.spec.js @@ -13,13 +13,15 @@ describe('User Update Settings Profile', () => { const summary = 'This is my story...'; const location = 'New York City'; - cy.findByLabelText(/^Website URL$/i) - .clear() - .type(websiteURL); - cy.findByLabelText(/^Bio$/i).clear().type(summary); - cy.findByLabelText(/^Location$/i) - .clear() - .type(location); + cy.findByLabelText(/^Website URL$/i).as('url'); + cy.get('@url').clear(); + cy.get('@url').type(websiteURL); + cy.findByLabelText(/^Bio$/i).as('bio'); + cy.get('@bio').clear(); + cy.get('@bio').type(summary); + cy.findByLabelText(/^Location$/i).as('location'); + cy.get('@location').clear(); + cy.get('@location').type(location); cy.findByText(/^Save Profile Information$/i).click(); diff --git a/cypress/e2e/seededFlows/publishingFlows/addTagsToArticle.spec.js b/cypress/e2e/seededFlows/publishingFlows/addTagsToArticle.spec.js index 1ec2e7942..9592eb687 100644 --- a/cypress/e2e/seededFlows/publishingFlows/addTagsToArticle.spec.js +++ b/cypress/e2e/seededFlows/publishingFlows/addTagsToArticle.spec.js @@ -98,9 +98,8 @@ describe('Add tags to article', () => { cy.findByRole('button', { name: 'Remove another' }).should('exist'); // selects currently entered text when input blurs - cy.findByRole('textbox', { name: 'Add up to 4 tags' }) - .type('something') - .blur(); + cy.get('@input').type('something'); + cy.get('@input').blur(); cy.findByRole('button', { name: 'Edit something' }).should('exist'); cy.findByRole('button', { name: 'Remove something' }).should('exist'); @@ -134,11 +133,10 @@ describe('Add tags to article', () => { cy.findByRole('button', { name: 'Edit something' }).should('exist'); // Verify input was cleared on selection, then type a backspace and check we're now editing the tag again - cy.get('@input') - .should('have.focus') - .should('have.value', '') - .type('{backspace}') - .should('have.value', 'something'); + cy.get('@input').should('have.focus'); + cy.get('@input').should('have.value', ''); + cy.get('@input').type('{backspace}'); + cy.get('@input').should('have.value', 'something'); // When editing the edit/remove buttons should not be present any more cy.findByRole('button', { name: 'Edit something' }).should('not.exist'); @@ -195,11 +193,13 @@ describe('Add tags to article', () => { cy.findAllByRole('option').should('have.length', 0); // Try to select by typing a comma, and check nothing happens - cy.get('@input').type(',').should('have.value', 'a'); + cy.get('@input').type(','); + cy.get('@input').should('have.value', 'a'); cy.findByRole('button', { name: 'Edit a' }).should('not.exist'); // Try to select by typing a space, and check nothing happens - cy.get('@input').type(' ').should('have.value', 'a'); + cy.get('@input').type(' '); + cy.get('@input').should('have.value', 'a'); cy.findByRole('button', { name: 'Edit a' }).should('not.exist'); }); }); diff --git a/cypress/e2e/seededFlows/publishingFlows/markdownToolbar.spec.js b/cypress/e2e/seededFlows/publishingFlows/markdownToolbar.spec.js index 375ae2990..2325c1d23 100644 --- a/cypress/e2e/seededFlows/publishingFlows/markdownToolbar.spec.js +++ b/cypress/e2e/seededFlows/publishingFlows/markdownToolbar.spec.js @@ -13,11 +13,10 @@ describe('Markdown toolbar', () => { cy.findByRole('button', { name: 'More options' }).as('overflowMenuButton'); // Check the menu opens on down arrow press - cy.get('@overflowMenuButton') - .should('have.attr', 'aria-expanded', 'false') - .focus() - .type('{downarrow}') - .should('have.attr', 'aria-expanded', 'true'); + cy.get('@overflowMenuButton').should('have.attr', 'aria-expanded', 'false'); + cy.get('@overflowMenuButton').focus(); + cy.get('@overflowMenuButton').type('{downarrow}'); + cy.get('@overflowMenuButton').should('have.attr', 'aria-expanded', 'true'); cy.findByRole('menuitem', { name: 'Underline' }) .should('be.visible') @@ -30,17 +29,15 @@ describe('Markdown toolbar', () => { .should('have.attr', 'aria-expanded', 'false'); // Check clicking toggles the menu - cy.get('@overflowMenuButton') - .click() - .should('have.attr', 'aria-expanded', 'true'); + cy.get('@overflowMenuButton').click(); + cy.get('@overflowMenuButton').should('have.attr', 'aria-expanded', 'true'); cy.findByRole('menuitem', { name: 'Underline' }) .should('be.visible') .should('have.focus'); - cy.get('@overflowMenuButton') - .click() - .should('have.attr', 'aria-expanded', 'false'); + cy.get('@overflowMenuButton').click(); + cy.get('@overflowMenuButton').should('have.attr', 'aria-expanded', 'false'); }); it('closes overflow menu after formatter button press', () => { @@ -63,20 +60,21 @@ describe('Markdown toolbar', () => { cy.findByLabelText('Post Content').clear(); cy.findByRole('button', { name: 'Bold' }).click(); - cy.findByLabelText('Post Content') - .should('have.value', '****') - .should('have.focus') - .type('something') - .should('have.value', '**something**'); + cy.findByLabelText('Post Content').as('content'); + cy.get('@content').should('have.value', '****'); + cy.get('@content').should('have.focus'); + cy.get('@content').type('something'); + cy.get('@content').should('have.value', '**something**'); }); it('cycles button focus using arrow keys', () => { cy.findByRole('button', { name: 'Bold' }).as('boldButton'); - cy.get('@boldButton').focus().type('{leftarrow}'); - cy.findByRole('button', { name: 'More options' }) - .should('have.focus') - .type('{rightarrow}'); + cy.get('@boldButton').focus(); + cy.get('@boldButton').type('{leftarrow}'); + cy.findByRole('button', { name: 'More options' }).as('options'); + cy.get('@options').should('have.focus'); + cy.get('@options').type('{rightarrow}'); cy.get('@boldButton').should('have.focus'); }); diff --git a/cypress/e2e/seededFlows/publishingFlows/postBrowserPersistence.spec.js b/cypress/e2e/seededFlows/publishingFlows/postBrowserPersistence.spec.js index a81c8eca8..d04eac4df 100644 --- a/cypress/e2e/seededFlows/publishingFlows/postBrowserPersistence.spec.js +++ b/cypress/e2e/seededFlows/publishingFlows/postBrowserPersistence.spec.js @@ -198,30 +198,34 @@ describe('Post Editor', () => { // Update the title, tags, and content for an post. cy.get('@articleForm') .findByLabelText(/^Post Title$/i) - .as('postTitle') - .should('have.value', 'Test Post') // checking for original value first - .clear() - .type('This is some title that should be reverted', { + .as('postTitle'); + cy.get('@postTitle').should('have.value', 'Test Post'); // checking for original value first + cy.get('@postTitle').clear(); + cy.get('@postTitle').type( + 'This is some title that should be reverted', + { force: true, - }); + }, + ); // Check original tag selections are present, and remove them cy.findByRole('button', { name: 'Remove beginner' }) - .click() - .should('not.exist'); + .as('beginnerButton') + .click(); + cy.get('@beginnerButton').should('not.exist'); cy.findByRole('button', { name: 'Remove ruby' }) - .click() - .should('not.exist'); - cy.findByRole('button', { name: 'Remove go' }) - .click() - .should('not.exist'); + .as('rubyButton') + .click(); + cy.get('@rubyButton').should('not.exist'); + cy.findByRole('button', { name: 'Remove go' }).as('goButton').click(); + cy.get('@goButton').should('not.exist'); // Add the new tags cy.get('@articleForm') .findByRole('textbox', { name: 'Add up to 4 tags' }) - .as('postTags') - .type('tag1, tag2, tag3,') - .type('{esc}'); + .as('postTags'); + cy.get('@postTags').type('tag1, tag2, tag3,'); + cy.get('@postTags').type('{esc}'); getPostContent() .should('have.value', `This is a Test Post's contents.`) // checking for original value first diff --git a/cypress/e2e/seededFlows/publishingFlows/previewPost.spec.js b/cypress/e2e/seededFlows/publishingFlows/previewPost.spec.js index 3009ebed2..ade053002 100644 --- a/cypress/e2e/seededFlows/publishingFlows/previewPost.spec.js +++ b/cypress/e2e/seededFlows/publishingFlows/previewPost.spec.js @@ -40,17 +40,18 @@ describe('Post Editor', () => { cy.get('@previewButton').click(); cy.get('@previewButton').should('not.have.attr', 'aria-current'); - cy.findByTestId('error-message').scrollIntoView().should('be.visible'); + cy.findByTestId('error-message').as('message'); + cy.get('@message').scrollIntoView(); + cy.get('@message').should('be.visible'); }); it('should show the accessibility suggestions notice', () => { cy.findByRole('form', { name: /^Edit post$/i }).as('articleForm'); // Add a heading level one which should cause an accessibility lint error - cy.get('@articleForm') - .findByLabelText('Post Content') - .clear() - .type('# Heading level one'); + cy.get('@articleForm').findByLabelText('Post Content').as('field'); + cy.get('@field').clear(); + cy.get('@field').type('# Heading level one'); cy.get('@articleForm') .findByRole('button', { name: /^Preview$/i }) @@ -144,17 +145,18 @@ describe('Post Editor', () => { cy.get('@previewButton').click(); cy.get('@previewButton').should('not.have.attr', 'aria-current'); - cy.findByTestId('error-message').scrollIntoView().should('be.visible'); + cy.findByTestId('error-message').as('message'); + cy.get('@message').scrollIntoView(); + cy.get('@message').should('be.visible'); }); it('should show the accessibility suggestions notice', () => { cy.findByRole('form', { name: /^Edit post$/i }).as('articleForm'); // Add a heading level one which should cause an accessibility lint error - cy.get('@articleForm') - .findByLabelText('Post Content') - .clear() - .type('# Heading level one'); + cy.get('@articleForm').findByLabelText('Post Content').as('field'); + cy.get('@field').clear(); + cy.get('@field').type('# Heading level one'); cy.get('@articleForm') .findByRole('button', { name: /^Preview$/i }) @@ -200,18 +202,19 @@ describe('Post Editor', () => { cy.findByRole('form', { name: /^Edit post$/i }).as('articleForm'); // Cause an error by having a non tag liquid tag without a tag name in the post body. - cy.get('@articleForm') - .findByLabelText('Post Content') - .clear() - .type(`${postTextWithError}\n{%tag %}`, { - parseSpecialCharSequences: false, - }); + cy.get('@articleForm').findByLabelText('Post Content').as('field'); + cy.get('@field').clear(); + cy.get('@field').type(`${postTextWithError}\n{%tag %}`, { + parseSpecialCharSequences: false, + }); cy.get('@articleForm') .findByRole('button', { name: /^Preview$/i }) .click(); - cy.findByTestId('error-message').scrollIntoView().should('be.visible'); + cy.findByTestId('error-message').as('message'); + cy.get('@message').scrollIntoView(); + cy.get('@message').should('be.visible'); cy.findByRole('heading', { name: 'Improve the accessibility of your post', @@ -223,10 +226,9 @@ describe('Post Editor', () => { '# Heading level 1\n![](http://imagewithoutalt.png)\n![Image description](http://imagewithdefaultalt.png)\n#### Heading level 4'; cy.findByRole('form', { name: /^Edit post$/i }).as('articleForm'); - cy.get('@articleForm') - .findByLabelText('Post Content') - .clear() - .type(postTextWithFourErrors); + cy.get('@articleForm').findByLabelText('Post Content').as('field'); + cy.get('@field').clear(); + cy.get('@field').type(postTextWithFourErrors); cy.get('@articleForm') .findByRole('button', { name: /^Preview$/i }) @@ -264,10 +266,11 @@ describe('Post Editor', () => { cy.findByRole('form', { name: /^Edit post$/i }).as('articleForm'); - cy.get('@articleForm') - .findByLabelText('Post Content') - .clear() - .type(`${textWithHeadingErrors}\n${textWithThreeImageErrors}`); + cy.get('@articleForm').findByLabelText('Post Content').as('field'); + cy.get('@field').clear(); + cy.get('@field').type( + `${textWithHeadingErrors}\n${textWithThreeImageErrors}`, + ); cy.get('@articleForm') .findByRole('button', { name: /^Preview$/i }) @@ -285,10 +288,9 @@ describe('Post Editor', () => { it('should show a suggestion for level one headings', () => { cy.findByRole('form', { name: /^Edit post$/i }).as('articleForm'); - cy.get('@articleForm') - .findByLabelText('Post Content') - .clear() - .type('# Level one heading'); + cy.get('@articleForm').findByLabelText('Post Content').as('field'); + cy.get('@field').clear(); + cy.get('@field').type('# Level one heading'); cy.get('@articleForm') .findByRole('button', { name: /^Preview$/i }) @@ -306,10 +308,9 @@ describe('Post Editor', () => { it('should show a suggestion when heading level increases by more than one', () => { cy.findByRole('form', { name: /^Edit post$/i }).as('articleForm'); - cy.get('@articleForm') - .findByLabelText('Post Content') - .clear() - .type('## Level two heading\n#### Level four heading'); + cy.get('@articleForm').findByLabelText('Post Content').as('field'); + cy.get('@field').clear(); + cy.get('@field').type('## Level two heading\n#### Level four heading'); cy.get('@articleForm') .findByRole('button', { name: /^Preview$/i }) @@ -327,10 +328,9 @@ describe('Post Editor', () => { it('should show a suggestion for empty alt text on images', () => { cy.findByRole('form', { name: /^Edit post$/i }).as('articleForm'); - cy.get('@articleForm') - .findByLabelText('Post Content') - .clear() - .type('![](http://image1.png)'); + cy.get('@articleForm').findByLabelText('Post Content').as('field'); + cy.get('@field').clear(); + cy.get('@field').type('![](http://image1.png)'); cy.get('@articleForm') .findByRole('button', { name: /^Preview$/i }) @@ -348,12 +348,11 @@ describe('Post Editor', () => { it('should show a suggestion for default alt text on images', () => { cy.findByRole('form', { name: /^Edit post$/i }).as('articleForm'); - cy.get('@articleForm') - .findByLabelText('Post Content') - .clear() - .type( - '![Image description](http://image1.png)\n![Image description](http://image2.png)', - ); + cy.get('@articleForm').findByLabelText('Post Content').as('field'); + cy.get('@field').clear(); + cy.get('@field').type( + '![Image description](http://image1.png)\n![Image description](http://image2.png)', + ); cy.get('@articleForm') .findByRole('button', { name: /^Preview$/i }) @@ -380,12 +379,11 @@ describe('Post Editor', () => { it('should show the correct suggestion for alt text when other text exists on the same line', () => { cy.findByRole('form', { name: /^Edit post$/i }).as('articleForm'); - cy.get('@articleForm') - .findByLabelText('Post Content') - .clear() - .type( - 'Some text ![Image description](http://image1.png) Some more text', - ); + cy.get('@articleForm').findByLabelText('Post Content').as('field'); + cy.get('@field').clear(); + cy.get('@field').type( + 'Some text ![Image description](http://image1.png) Some more text', + ); cy.get('@articleForm') .findByRole('button', { name: /^Preview$/i }) diff --git a/cypress/e2e/seededFlows/publishingFlows/publishOrSavePost.spec.js b/cypress/e2e/seededFlows/publishingFlows/publishOrSavePost.spec.js index 174517c66..5ea6aef14 100644 --- a/cypress/e2e/seededFlows/publishingFlows/publishOrSavePost.spec.js +++ b/cypress/e2e/seededFlows/publishingFlows/publishOrSavePost.spec.js @@ -20,9 +20,9 @@ describe('Publish or save a post', () => { it('Publishes a post without errors', () => { cy.findByRole('form', { name: /^Edit post$/i }).within(() => { - cy.findByLabelText('Post Content') - .clear() - .type(validPublishedArticleContent); + cy.findByLabelText('Post Content').as('field'); + cy.get('@field').clear(); + cy.get('@field').type(validPublishedArticleContent); cy.findByRole('button', { name: 'Save changes' }).click(); }); // The post should now be published @@ -35,9 +35,9 @@ describe('Publish or save a post', () => { it('Saves a draft without errors', () => { cy.findByRole('form', { name: /^Edit post$/i }).within(() => { - cy.findByLabelText('Post Content') - .clear() - .type(validDraftArticleContent); + cy.findByLabelText('Post Content').as('field'); + cy.get('@field').clear(); + cy.get('@field').type(validDraftArticleContent); cy.findByRole('button', { name: 'Save changes' }).click(); }); @@ -49,11 +49,11 @@ describe('Publish or save a post', () => { it('Shows an error message when markdown is incorrect', () => { cy.findByRole('form', { name: /^Edit post$/i }).within(() => { - cy.findByLabelText('Post Content') - .clear() - .type(invalidPublishedArticleContent, { - parseSpecialCharSequences: false, - }); + cy.findByLabelText('Post Content').as('field'); + cy.get('@field').clear(); + cy.get('@field').type(invalidPublishedArticleContent, { + parseSpecialCharSequences: false, + }); cy.findByRole('button', { name: 'Save changes' }).click(); }); @@ -61,9 +61,9 @@ describe('Publish or save a post', () => { // We should still be on the form page, // and should be able to edit the broken draft successfully cy.findByRole('form', { name: /^Edit post$/i }).within(() => { - cy.findByLabelText('Post Content') - .clear() - .type(validDraftArticleContent); + cy.findByLabelText('Post Content').as('field'); + cy.get('@field').clear(); + cy.get('@field').type(validDraftArticleContent); cy.findByRole('button', { name: 'Save changes' }).click(); }); // The Draft view should be shown @@ -75,9 +75,9 @@ describe('Publish or save a post', () => { it('Shows an error message when network request fails', () => { cy.intercept('POST', '/articles', { statusCode: 500 }); cy.findByRole('form', { name: /^Edit post$/i }).within(() => { - cy.findByLabelText('Post Content') - .clear() - .type(validPublishedArticleContent); + cy.findByLabelText('Post Content').as('field'); + cy.get('@field').clear(); + cy.get('@field').type(validPublishedArticleContent); cy.findByRole('button', { name: 'Save changes' }).click(); }); cy.findByRole('heading', { name: 'Whoops, something went wrong:' }); @@ -98,8 +98,12 @@ describe('Publish or save a post', () => { it('Publishes a post without errors', () => { cy.findByRole('form', { name: /^Edit post$/i }).within(() => { - cy.findByLabelText('Post Title').clear().type('Test title'); - cy.findByLabelText('Post Content').clear().type('something'); + cy.findByLabelText('Post Title').as('titleField'); + cy.get('@titleField').clear(); + cy.get('@titleField').type('Test title'); + cy.findByLabelText('Post Content').as('contentField'); + cy.get('@contentField').clear(); + cy.get('@contentField').type('something'); cy.findByRole('button', { name: 'Publish' }).click(); }); // The post should now be published @@ -112,8 +116,12 @@ describe('Publish or save a post', () => { it('Saves a draft without errors', () => { cy.findByRole('form', { name: /^Edit post$/i }).within(() => { - cy.findByLabelText('Post Title').clear().type('Test title'); - cy.findByLabelText('Post Content').clear().type('something'); + cy.findByLabelText('Post Title').as('titleField'); + cy.get('@titleField').clear(); + cy.get('@titleField').type('Test title'); + cy.findByLabelText('Post Content').as('contentField'); + cy.get('@contentField').clear(); + cy.get('@contentField').type('something'); cy.findByRole('button', { name: 'Save draft' }).click(); }); @@ -125,9 +133,13 @@ describe('Publish or save a post', () => { it('Shows an error message when publishing with incorrect markdown', () => { cy.findByRole('form', { name: /^Edit post$/i }).within(() => { - cy.findByLabelText('Post Title').clear().type('Test title'); + cy.findByLabelText('Post Title').as('titleField'); + cy.get('@titleField').clear(); + cy.get('@titleField').type('Test title'); - cy.findByLabelText('Post Content').clear().type('{% tag %}', { + cy.findByLabelText('Post Content').as('contentField'); + cy.get('@contentField').clear(); + cy.get('@contentField').type('{% tag %}', { parseSpecialCharSequences: false, }); cy.findByRole('button', { name: 'Publish' }).click(); @@ -142,9 +154,13 @@ describe('Publish or save a post', () => { it('Shows an error message when saving draft with incorrect markdown', () => { cy.findByRole('form', { name: /^Edit post$/i }).within(() => { - cy.findByLabelText('Post Title').clear().type('Test title'); + cy.findByLabelText('Post Title').as('titleField'); + cy.get('@titleField').clear(); + cy.get('@titleField').type('Test title'); - cy.findByLabelText('Post Content').clear().type('{% tag %}', { + cy.findByLabelText('Post Content').as('contentField'); + cy.get('@contentField').clear(); + cy.get('@contentField').type('{% tag %}', { parseSpecialCharSequences: false, }); cy.findByRole('button', { name: 'Save draft' }).click(); @@ -160,8 +176,12 @@ describe('Publish or save a post', () => { it('Shows an error message when publishing and network request fails', () => { cy.intercept('POST', '/articles', { statusCode: 500 }); cy.findByRole('form', { name: /^Edit post$/i }).within(() => { - cy.findByLabelText('Post Title').clear().type('Test title'); - cy.findByLabelText('Post Content').clear().type('something'); + cy.findByLabelText('Post Title').as('titleField'); + cy.get('@titleField').clear(); + cy.get('@titleField').type('Test title'); + cy.findByLabelText('Post Content').as('contentField'); + cy.get('@contentField').clear(); + cy.get('@contentField').type('something'); cy.findByRole('button', { name: 'Publish' }).click(); }); cy.findByRole('heading', { name: 'Whoops, something went wrong:' }); @@ -174,8 +194,12 @@ describe('Publish or save a post', () => { it('Shows an error message when saving draft and network request fails', () => { cy.intercept('POST', '/articles', { statusCode: 500 }); cy.findByRole('form', { name: /^Edit post$/i }).within(() => { - cy.findByLabelText('Post Title').clear().type('Test title'); - cy.findByLabelText('Post Content').clear().type('something'); + cy.findByLabelText('Post Title').as('titleField'); + cy.get('@titleField').clear(); + cy.get('@titleField').type('Test title'); + cy.findByLabelText('Post Content').as('contentField'); + cy.get('@contentField').clear(); + cy.get('@contentField').type('something'); cy.findByRole('button', { name: 'Save draft' }).click(); }); cy.findByRole('heading', { name: 'Whoops, something went wrong:' }); @@ -187,8 +211,12 @@ describe('Publish or save a post', () => { it('Maintains draft status when editing a draft fails', () => { cy.findByRole('form', { name: /^Edit post$/i }).within(() => { - cy.findByLabelText('Post Title').clear().type('Test title'); - cy.findByLabelText('Post Content').clear().type('something'); + cy.findByLabelText('Post Title').as('titleField'); + cy.get('@titleField').clear(); + cy.get('@titleField').type('Test title'); + cy.findByLabelText('Post Content').as('contentField'); + cy.get('@contentField').clear(); + cy.get('@contentField').type('something'); cy.findByRole('button', { name: 'Save draft' }).click(); }); @@ -196,7 +224,9 @@ describe('Publish or save a post', () => { cy.findByText(/Unpublished Post/); cy.findByRole('link', { name: 'Click to edit' }).click(); - cy.findByLabelText('Post Content').clear().type('something else'); + cy.findByLabelText('Post Content').as('contentField'); + cy.get('@contentField').clear(); + cy.get('@contentField').type('something else'); cy.intercept('PUT', '/articles/*', { statusCode: 500 }); cy.findByRole('button', { name: 'Save draft' }).click(); @@ -213,8 +243,12 @@ describe('Publish or save a post', () => { it('Maintains draft status when publishing a draft fails', () => { cy.findByRole('form', { name: /^Edit post$/i }).within(() => { - cy.findByLabelText('Post Title').clear().type('Test title'); - cy.findByLabelText('Post Content').clear().type('something'); + cy.findByLabelText('Post Title').as('titleField'); + cy.get('@titleField').clear(); + cy.get('@titleField').type('Test title'); + cy.findByLabelText('Post Content').as('contentField'); + cy.get('@contentField').clear(); + cy.get('@contentField').type('something'); cy.findByRole('button', { name: 'Save draft' }).click(); }); @@ -222,7 +256,9 @@ describe('Publish or save a post', () => { cy.findByText(/Unpublished Post/); cy.findByRole('link', { name: 'Click to edit' }).click(); - cy.findByLabelText('Post Content').clear().type('something else'); + cy.findByLabelText('Post Content').as('contentField'); + cy.get('@contentField').clear(); + cy.get('@contentField').type('something else'); cy.intercept('PUT', '/articles/*', { statusCode: 500 }); cy.findByRole('button', { name: 'Publish' }).click(); @@ -239,8 +275,12 @@ describe('Publish or save a post', () => { it('Maintains published status when editing a published post fails', () => { cy.findByRole('form', { name: /^Edit post$/i }).within(() => { - cy.findByLabelText('Post Title').clear().type('Test title'); - cy.findByLabelText('Post Content').clear().type('something'); + cy.findByLabelText('Post Title').as('titleField'); + cy.get('@titleField').clear(); + cy.get('@titleField').type('Test title'); + cy.findByLabelText('Post Content').as('contentField'); + cy.get('@contentField').clear(); + cy.get('@contentField').type('something'); cy.findByRole('button', { name: 'Publish' }).click(); }); @@ -249,7 +289,9 @@ describe('Publish or save a post', () => { cy.findByRole('heading', { name: 'Top comments (0)' }); cy.findByRole('link', { name: 'Edit' }).click(); - cy.findByLabelText('Post Content').clear().type('something else'); + cy.findByLabelText('Post Content').as('contentField'); + cy.get('@contentField').clear(); + cy.get('@contentField').type('something else'); cy.intercept('PUT', '/articles/*', { statusCode: 500 }); cy.findByRole('button', { name: 'Save changes' }).click(); diff --git a/cypress/e2e/seededFlows/publishingFlows/uploadImage.spec.js b/cypress/e2e/seededFlows/publishingFlows/uploadImage.spec.js index af0f3efc7..b8aaf226f 100644 --- a/cypress/e2e/seededFlows/publishingFlows/uploadImage.spec.js +++ b/cypress/e2e/seededFlows/publishingFlows/uploadImage.spec.js @@ -76,8 +76,9 @@ describe('Upload image', () => { cy.get('@editorBody').should('have.value', '\n'); // Mouseover on snackbar ensures it remains readable for test duration - cy.findByTestId('snackbar') - .trigger('mouseover') + cy.findByTestId('snackbar').as('snackbar'); + cy.get('@snackbar').trigger('mouseover'); + cy.get('@snackbar') .findByRole('alert') .should('have.text', 'The user aborted a request.'); }); @@ -101,8 +102,9 @@ describe('Upload image', () => { cy.get('@editorBody').should('have.value', '\n'); // Mouseover on snackbar ensures it remains readable for test duration - cy.findByTestId('snackbar') - .trigger('mouseover') + cy.findByTestId('snackbar').as('snackbar'); + cy.get('@snackbar').trigger('mouseover'); + cy.get('@snackbar') .findByRole('alert') .should('have.text', 'Error message'); }); @@ -112,9 +114,8 @@ describe('Upload image', () => { cy.findByLabelText('Post Content').as('editorBody'); // Type some text and place the cursor between one & two - cy.get('@editorBody') - .clear() - .type('one two{leftarrow}{leftarrow}{leftarrow}'); + cy.get('@editorBody').clear(); + cy.get('@editorBody').type('one two{leftarrow}{leftarrow}{leftarrow}'); cy.findByLabelText(/Upload image/, { selector: 'button' }).click(); cy.findByLabelText(/Upload image/, { selector: 'input' }).attachFile( diff --git a/cypress/e2e/seededFlows/tagsFlows/editTag.spec.js b/cypress/e2e/seededFlows/tagsFlows/editTag.spec.js index 57261784a..77aa3ef9d 100644 --- a/cypress/e2e/seededFlows/tagsFlows/editTag.spec.js +++ b/cypress/e2e/seededFlows/tagsFlows/editTag.spec.js @@ -16,16 +16,14 @@ describe('Edit tag', () => { // Input should be pre-filled with the current bg_color_hex cy.get('@input').should('have.value', '#672c99'); // Button should open and close a picker - cy.get('@popoverButton') - .should('have.attr', 'aria-expanded', 'false') - .click() - .should('have.attr', 'aria-expanded', 'true'); + cy.get('@popoverButton').should('have.attr', 'aria-expanded', 'false'); + cy.get('@popoverButton').click(); + cy.get('@popoverButton').should('have.attr', 'aria-expanded', 'true'); cy.findByLabelText('Color').should('be.visible'); - cy.get('@popoverButton') - .click() - .should('have.attr', 'aria-expanded', 'false'); + cy.get('@popoverButton').click(); + cy.get('@popoverButton').should('have.attr', 'aria-expanded', 'false'); cy.findByLabelText('Color').should('not.be.visible'); }); diff --git a/cypress/e2e/seededFlows/topNavigationFlows/MemberDropDownButton.spec.js b/cypress/e2e/seededFlows/topNavigationFlows/MemberDropDownButton.spec.js index ec189e72f..ddb10bfa2 100644 --- a/cypress/e2e/seededFlows/topNavigationFlows/MemberDropDownButton.spec.js +++ b/cypress/e2e/seededFlows/topNavigationFlows/MemberDropDownButton.spec.js @@ -10,10 +10,9 @@ describe('Member Menu Dropdown', () => { it('clicking on User Avatar should open and close User Dropdown menu', () => { cy.findByRole('button', { name: 'Navigation menu' }).as('menuButton'); - cy.get('@menuButton') - .should('have.attr', 'aria-expanded', 'false') - .click() - .should('have.attr', 'aria-expanded', 'true'); + cy.get('@menuButton').should('have.attr', 'aria-expanded', 'false'); + cy.get('@menuButton').click(); + cy.get('@menuButton').should('have.attr', 'aria-expanded', 'true'); cy.get('#crayons-header__menu__dropdown__list').within(() => { cy.findByRole('link', { @@ -27,18 +26,16 @@ describe('Member Menu Dropdown', () => { cy.findByRole('link', { name: 'Sign Out' }); }); - cy.get('@menuButton') - .click() - .should('have.attr', 'aria-expanded', 'false') - .should('have.focus'); + cy.get('@menuButton').click(); + cy.get('@menuButton').should('have.attr', 'aria-expanded', 'false'); + cy.get('@menuButton').should('have.focus'); }); it('pressing escape should close the User Dropdown menu', () => { cy.findByRole('button', { name: 'Navigation menu' }).as('menuButton'); - cy.get('@menuButton') - .should('have.attr', 'aria-expanded', 'false') - .click() - .should('have.attr', 'aria-expanded', 'true'); + cy.get('@menuButton').should('have.attr', 'aria-expanded', 'false'); + cy.get('@menuButton').click(); + cy.get('@menuButton').should('have.attr', 'aria-expanded', 'true'); cy.findByRole('link', { name: 'Dashboard' }) .as('dashboard') @@ -51,14 +48,12 @@ describe('Member Menu Dropdown', () => { it('closes menu on click outside', () => { cy.findByRole('button', { name: 'Navigation menu' }).as('menuButton'); - cy.get('@menuButton') - .should('have.attr', 'aria-expanded', 'false') - .click() - .should('have.attr', 'aria-expanded', 'true'); + cy.get('@menuButton').should('have.attr', 'aria-expanded', 'false'); + cy.get('@menuButton').click(); + cy.get('@menuButton').should('have.attr', 'aria-expanded', 'true'); - cy.findByRole('link', { name: 'Dashboard' }) - .as('dashboard') - .should('be.visible'); + cy.findByRole('link', { name: 'Dashboard' }).as('dashboard'); + cy.get('@dashboard').should('be.visible'); cy.get('body').click('topLeft'); diff --git a/package.json b/package.json index 6e1262d49..865baad6e 100644 --- a/package.json +++ b/package.json @@ -80,7 +80,7 @@ "eslint-config-prettier": "^8.10.0", "eslint-import-resolver-webpack": "^0.13.4", "eslint-plugin-babel": "^5.3.1", - "eslint-plugin-cypress": "^2.12.1", + "eslint-plugin-cypress": "^2.15.1", "eslint-plugin-ignore-erb": "^0.1.1", "eslint-plugin-import": "^2.28.1", "eslint-plugin-jsx-a11y": "^6.7.1", diff --git a/yarn.lock b/yarn.lock index 75d5b51bf..a6b5a6245 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8745,12 +8745,12 @@ eslint-plugin-compat@^4.0.0: lodash.memoize "4.1.2" semver "7.3.5" -eslint-plugin-cypress@^2.12.1: - version "2.12.1" - resolved "https://registry.yarnpkg.com/eslint-plugin-cypress/-/eslint-plugin-cypress-2.12.1.tgz#9aeee700708ca8c058e00cdafe215199918c2632" - integrity sha512-c2W/uPADl5kospNDihgiLc7n87t5XhUbFDoTl6CfVkmG+kDAb5Ux10V9PoLPu9N+r7znpc+iQlcmAqT1A/89HA== +eslint-plugin-cypress@^2.15.1: + version "2.15.1" + resolved "https://registry.yarnpkg.com/eslint-plugin-cypress/-/eslint-plugin-cypress-2.15.1.tgz#336afa7e8e27451afaf65aa359c9509e0a4f3a7b" + integrity sha512-eLHLWP5Q+I4j2AWepYq0PgFEei9/s5LvjuSqWrxurkg1YZ8ltxdvMNmdSf0drnsNo57CTgYY/NIHHLRSWejR7w== dependencies: - globals "^11.12.0" + globals "^13.20.0" eslint-plugin-ignore-erb@^0.1.1: version "0.1.1" @@ -9992,7 +9992,7 @@ global@^4.4.0: min-document "^2.19.0" process "^0.11.10" -globals@^11.1.0, globals@^11.12.0: +globals@^11.1.0: version "11.12.0" resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e" integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA== @@ -10004,6 +10004,13 @@ globals@^13.19.0: dependencies: type-fest "^0.20.2" +globals@^13.20.0: + version "13.22.0" + resolved "https://registry.yarnpkg.com/globals/-/globals-13.22.0.tgz#0c9fcb9c48a2494fbb5edbfee644285543eba9d8" + integrity sha512-H1Ddc/PbZHTDVJSnj8kWptIRSD6AM3pK+mKytuIVF4uoBV7rshFlhhvA58ceJ5wp3Er58w6zj7bykMpYXt3ETw== + dependencies: + type-fest "^0.20.2" + globalthis@^1.0.0, globalthis@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.3.tgz#5852882a52b80dc301b0660273e1ed082f0b6ccf"