test(theming): update e2e tests after separating color button and preview

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

diff --git a/cypress/e2e/theming/admin-settings.cy.ts b/cypress/e2e/theming/admin-settings.cy.ts
index 6825e0045c29b35029b0aeefb9d03d9f554308b8..1c4e3458aaee9c3668812a843639bb8521af706e 100644 (file)
--- a/cypress/e2e/theming/admin-settings.cy.ts
+++ b/cypress/e2e/theming/admin-settings.cy.ts
@@ -41,7 +41,7 @@ describe('Admin theming settings visibility check', function() {
        })
 
        it('See the default settings', function() {
-               cy.get('[data-admin-theming-setting-primary-color-picker]').should('contain.text', defaultPrimary)
+               cy.get('[data-admin-theming-setting-primary-color-picker]').should('exist')
                cy.get('[data-admin-theming-setting-primary-color-reset]').should('not.exist')
                cy.get('[data-admin-theming-setting-file-reset]').should('not.exist')
                cy.get('[data-admin-theming-setting-file-remove]').should('be.visible')
@@ -66,8 +66,7 @@ describe('Change the primary color and reset it', function() {
        it('Change the primary color', function() {
                cy.intercept('*/apps/theming/ajax/updateStylesheet').as('setColor')
 
-               pickRandomColor('[data-admin-theming-setting-primary-color-picker]')
-                       .then(color => { selectedColor = color })
+               pickRandomColor().then(color => { selectedColor = color })
 
                cy.wait('@setColor')
                cy.waitUntil(() => validateBodyThemingCss(selectedColor, defaultBackground))
@@ -151,8 +150,7 @@ describe('Remove the default background with a custom primary color', function()
        it('Change the primary color', function() {
                cy.intercept('*/apps/theming/ajax/updateStylesheet').as('setColor')
 
-               pickRandomColor('[data-admin-theming-setting-primary-color-picker]')
-                       .then((color) => { selectedColor = color })
+               pickRandomColor().then(color => { selectedColor = color })
 
                cy.wait('@setColor')
                cy.waitUntil(() => validateBodyThemingCss(selectedColor, defaultBackground))
@@ -372,8 +370,7 @@ describe('The user default background settings reflect the admin theming setting
        it('Change the primary color', function() {
                cy.intercept('*/apps/theming/ajax/updateStylesheet').as('setColor')
 
-               pickRandomColor('[data-admin-theming-setting-primary-color-picker]')
-                       .then(color => { selectedColor = color })
+               pickRandomColor().then(color => { selectedColor = color })
 
                cy.wait('@setColor')
                cy.waitUntil(() => cy.window().then(($window) => {

diff --git a/cypress/e2e/theming/themingUtils.ts b/cypress/e2e/theming/themingUtils.ts
index 1cbab439012ec6b387dafb886515cba05c7a534b..7b570a8cb55b39f7c32b33e3572ec4c7e4d9bede 100644 (file)
--- a/cypress/e2e/theming/themingUtils.ts
+++ b/cypress/e2e/theming/themingUtils.ts
@@ -75,12 +75,14 @@ export const pickRandomColor = function(): Cypress.Chainable<string> {
        // Pick one of the first 8 options
        const randColour = Math.floor(Math.random() * 8)
 
+       const colorPreviewSelector = '[data-user-theming-background-color],[data-admin-theming-setting-primary-color]'
+
        // Open picker
-       cy.get('button').contains('Change color').click()
+       cy.contains('button', 'Change color').click()
+
+       // Click on random color
+       cy.get('.color-picker__simple-color-circle').eq(randColour).click()
 
-       // Return selected colour
-       return cy.get('.color-picker__simple-color-circle').eq(randColour).then(($el) => {
-               $el.trigger('click')
-               return $el.css('background-color')
-       })
+       // Get the selected color from the color preview block
+       return cy.get(colorPreviewSelector).then(($el) => $el.css('background-color'))
 }

diff --git a/cypress/e2e/theming/user-background.cy.ts b/cypress/e2e/theming/user-background.cy.ts
index ce8a50821ef4f14dc503099ba480a5ab6c112bc7..e024ea4b5e9fe9a803d57b7ec709fffa40a53a42 100644 (file)
--- a/cypress/e2e/theming/user-background.cy.ts
+++ b/cypress/e2e/theming/user-background.cy.ts
@@ -168,7 +168,7 @@ describe('User select a bright custom color and remove background', function() {
                cy.intercept('*/apps/theming/background/color').as('setColor')
 
                // Pick one of the bright color preset
-               cy.get('button').contains('Change color').click()
+               cy.contains('button', 'Change color').click()
                cy.get('.color-picker__simple-color-circle:eq(4)').click()
 
                // Validate custom colour change
@@ -286,7 +286,7 @@ describe('User changes settings and reload the page', function() {
        it('Select a custom color', function() {
                cy.intercept('*/apps/theming/background/color').as('setColor')
 
-               cy.get('button').contains('Change color').click()
+               cy.contains('button', 'Change color').click()
                cy.get('.color-picker__simple-color-circle:eq(5)').click()
 
                // Validate clear background