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

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

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) => {

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'))
 }

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