From 7dd613307ac8fd7731f7d288f7b0d379283dfdb7 Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Wed, 24 Jan 2024 17:34:52 +0100 Subject: [PATCH] fix(cypress): Wait for color change in `pickRandomColor` Signed-off-by: Ferdinand Thiessen [skip ci] --- cypress/e2e/theming/themingUtils.ts | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/cypress/e2e/theming/themingUtils.ts b/cypress/e2e/theming/themingUtils.ts index 7b570a8cb55b3..de0c5acd9735d 100644 --- a/cypress/e2e/theming/themingUtils.ts +++ b/cypress/e2e/theming/themingUtils.ts @@ -54,13 +54,12 @@ export const validateBodyThemingCss = function(expectedColor = defaultPrimary, e */ export const validateUserThemingDefaultCss = function(expectedColor = defaultPrimary, expectedBackground: string|null = defaultBackground) { const defaultSelectButton = Cypress.$('[data-user-theming-background-default]') - const customColor = Cypress.$('[data-user-theming-background-color]') - if (defaultSelectButton.length === 0 || customColor.length === 0) { + if (defaultSelectButton.length === 0) { return false } const defaultOptionBackground = defaultSelectButton.css('background-image') - const colorPickerOptionColor = customColor.css('background-color') + const colorPickerOptionColor = defaultSelectButton.css('background-color') const isValidBackgroundImage = !expectedBackground ? defaultOptionBackground === 'none' @@ -77,12 +76,20 @@ export const pickRandomColor = function(): Cypress.Chainable { const colorPreviewSelector = '[data-user-theming-background-color],[data-admin-theming-setting-primary-color]' + let oldColor = '' + cy.get(colorPreviewSelector).then(($el) => { + oldColor = $el.css('background-color') + }) + // Open picker cy.contains('button', 'Change color').click() // Click on random color cy.get('.color-picker__simple-color-circle').eq(randColour).click() + // Wait for color change + cy.waitUntil(() => Cypress.$(colorPreviewSelector).css('background-color') !== oldColor) + // Get the selected color from the color preview block return cy.get(colorPreviewSelector).then(($el) => $el.css('background-color')) }