From bd31d5a54d00816c84ea018830ea0e1134654b95 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Thu, 19 Dec 2024 11:19:56 +0100 Subject: [PATCH] Refactor Cypress tests after `drupal/gin` update to `3.0.0-rc16` With the recent theme update, some UI elements changed. I have added two new Cypress commands: `clickSaveButton` and `deleteEntitiesIfExists`. These commands are now working as expected and is applied to all tests affected by the update. This also ensuring more reliable test execution in the future --- cypress/e2e/campaign.cy.ts | 29 +++++--------------------- cypress/e2e/events.cy.ts | 2 +- cypress/e2e/opening-hours-editor.cy.ts | 25 ++-------------------- cypress/e2e/varnish.cy.ts | 4 ++-- cypress/support/commands.ts | 29 ++++++++++++++++++++++++++ 5 files changed, 39 insertions(+), 50 deletions(-) diff --git a/cypress/e2e/campaign.cy.ts b/cypress/e2e/campaign.cy.ts index 7fb787214..579cd5995 100644 --- a/cypress/e2e/campaign.cy.ts +++ b/cypress/e2e/campaign.cy.ts @@ -346,10 +346,10 @@ describe('Campaign creation and endpoint', () => { cy.drupalLogin(); // Delete campaigns. - deleteCampaign(campaigns.authorCampaign); - deleteCampaign(campaigns.booksByJKRowling); - deleteCampaign(campaigns.rankingAndCampaign); - deleteCampaign(campaigns.rankingOrCampaign); + cy.deleteEntitiesIfExists(campaigns.authorCampaign); + cy.deleteEntitiesIfExists(campaigns.booksByJKRowling); + cy.deleteEntitiesIfExists(campaigns.rankingAndCampaign); + cy.deleteEntitiesIfExists(campaigns.rankingOrCampaign); cy.anonymousUser(); }); @@ -457,26 +457,7 @@ const createRankingOrCampaign = () => { const createCampaign = (callback: () => void) => { cy.visit('/node/add/campaign'); callback(); - cy.get('input[value="Save"]').click(); -}; - -const deleteCampaign = (title: string) => { - cy.visit('/admin/content'); - cy.contains(title) - .parents('tr') - .find('td li.dropbutton-toggle button') - .click() - .then(($button) => { - cy.wrap($button) - .parent('.dropbutton-toggle') - .parent('ul.dropbutton') - .find('li.delete a') - .click(); - cy.get('.ui-dialog .form-submit') - .filter(':visible') - .should('exist') - .click(); - }); + cy.clickSaveButton(); }; const createCampaignMainProperties = (name: string, logic: 'AND' | 'OR') => { diff --git a/cypress/e2e/events.cy.ts b/cypress/e2e/events.cy.ts index 26e6f9d30..cbaf437ba 100644 --- a/cypress/e2e/events.cy.ts +++ b/cypress/e2e/events.cy.ts @@ -34,7 +34,7 @@ describe('Events', () => { }); setDate('Start date', events.singleEvent.start); setDate('End date', events.singleEvent.end); - cy.findByRole('button', { name: 'Save' }).click(); + cy.clickSaveButton(); // Ensure that the core data from the event is displayed on the resulting page. // @todo This should probably be replaced by a visual regression test. diff --git a/cypress/e2e/opening-hours-editor.cy.ts b/cypress/e2e/opening-hours-editor.cy.ts index 425b8c199..2fc141d42 100644 --- a/cypress/e2e/opening-hours-editor.cy.ts +++ b/cypress/e2e/opening-hours-editor.cy.ts @@ -52,7 +52,7 @@ const createTestBranchAndVisitOpeningHoursAdmin = () => { cy.get('#edit-field-address-0-address-locality') .type('Example City', { force: true }) .should('have.value', 'Example City'); - cy.get('input[value="Save"]').click(); + cy.clickSaveButton(); cy.get('a[href^="/node/"][href$="/edit"]').click({ force: true }); cy.get('a[href*="/edit/opening-hours"]').click(); // Save the URL for the admin page and the page itself for later use @@ -63,27 +63,6 @@ const createTestBranchAndVisitOpeningHoursAdmin = () => { }); }; -const deleteAllTestBranchesIfExists = () => { - const formattedSearchString = branchTitle.toLowerCase().replace(/ /g, '+'); - cy.drupalLogin(); - cy.visit( - `/admin/content?title=${formattedSearchString}&type=branch&status=All&langcode=All`, - ); - - cy.get('tbody').then((tbody) => { - if (tbody.find('td.views-empty').length) { - cy.log('No branches to delete.'); - } else { - cy.get('input[title="Select all rows in this table"]').check({ - force: true, - }); - cy.get('#edit-action').select('node_delete_action'); - cy.contains('input', 'Apply to selected items').click(); - cy.contains('input', 'Delete').click(); - } - }); -}; - const visitOpeningHoursPage = (initialDate?: string) => { const pageUrl = Cypress.env('pageUrl'); if (pageUrl) { @@ -457,7 +436,7 @@ const deleteRestOfOpeningHoursSeries = ({ describe('Opening hours editor', () => { beforeEach(() => { - deleteAllTestBranchesIfExists(); + cy.deleteEntitiesIfExists(branchTitle); createTestBranchAndVisitOpeningHoursAdmin(); }); diff --git a/cypress/e2e/varnish.cy.ts b/cypress/e2e/varnish.cy.ts index e95bff1fd..34db85b88 100644 --- a/cypress/e2e/varnish.cy.ts +++ b/cypress/e2e/varnish.cy.ts @@ -24,7 +24,7 @@ describe('Varnish', () => { // Create a node as admin. cy.drupalLogin('/node/add/article'); cy.findByLabelText('Title').type(node.title); - cy.findByRole('button', { name: 'Save' }).click(); + cy.clickSaveButton(); cy.contains(node.title); cy.should('not.contain', node.subtitle); // We do not have a good way to store the current path between tests so @@ -48,7 +48,7 @@ describe('Varnish', () => { force: true, }); cy.findByLabelText('Subtitle').type(node.subtitle); - cy.findByRole('button', { name: 'Save' }).click(); + cy.clickSaveButton(); cy.contains(node.title); cy.contains(node.subtitle); diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index e187993b7..5cb5c3583 100644 --- a/cypress/support/commands.ts +++ b/cypress/support/commands.ts @@ -244,6 +244,7 @@ Cypress.Commands.add( }); }, ); + Cypress.Commands.add( 'setupAdgangsplatformenRegisterMappinngs', ({ @@ -330,6 +331,32 @@ Cypress.Commands.add('getBySel', (selector, checkVisible = false, ...args) => { return cy.get(`[data-cy="${selector}"]${visible(checkVisible)}`, ...args); }); +Cypress.Commands.add('clickSaveButton', () => { + cy.get('#edit-gin-sticky-actions input[value="Save"]').click(); +}); + +Cypress.Commands.add('deleteEntitiesIfExists', (name) => { + const formattedSearchString = name.toLowerCase().replace(/ /g, '+'); + + cy.drupalLogin(); + cy.visit( + `/admin/content?title=${formattedSearchString}&status=All&langcode=All`, + ); + + cy.get('tbody').then((tbody) => { + if (tbody.find('td.views-empty').length) { + cy.log('No branches to delete.'); + } else { + cy.get('input[title="Select all rows in this table"]').check({ + force: true, + }); + cy.get('#edit-action').select('node_delete_action'); + cy.contains('input', 'Apply to selected items').click(); + cy.contains('input', 'Delete').click(); + } + }); +}); + // According to the documentation of types and Cypress commands // the namespace is declared like it is done here. Therefore we'll bypass errors about it. /* eslint-disable @typescript-eslint/no-namespace */ @@ -367,6 +394,8 @@ declare global { checkVisible?: boolean, ...args: unknown[] ): Chainable; + deleteEntitiesIfExists(name: string): Chainable; + clickSaveButton(): Chainable; } } }