Fix background removal check

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

3 files changed, 21 insertions, 11 deletions

diff --git a/cypress/e2e/theming/admin-settings.cy.ts b/cypress/e2e/theming/admin-settings.cy.ts
index 750fa5c230e..567bed94c0a 100644
--- a/cypress/e2e/theming/admin-settings.cy.ts
+++ b/cypress/e2e/theming/admin-settings.cy.ts
@@ -91,7 +91,7 @@ describe('Change the primary color and reset it', function() {
 	})
 })
 
-describe('Remove the default background and restore it', function() {
+describe.only('Remove the default background and restore it', function() {
 	before(function() {
 		// Just in case previous test failed
 		cy.resetAdminTheming()
@@ -121,7 +121,7 @@ describe('Remove the default background and restore it', function() {
 		cy.logout()
 		cy.visit('/')
 
-		cy.waitUntil(() => validateBodyThemingCss(defaultPrimary, ''))
+		cy.waitUntil(() => validateBodyThemingCss(defaultPrimary, null))
 		cy.screenshot()
 	})
 
@@ -170,7 +170,7 @@ describe('Remove the default background with a custom primary color', function()
 		cy.logout()
 		cy.visit('/')
 
-		cy.waitUntil(() => validateBodyThemingCss(selectedColor, ''))
+		cy.waitUntil(() => validateBodyThemingCss(selectedColor, null))
 		cy.screenshot()
 	})
 
@@ -212,7 +212,7 @@ describe('Remove the default background with a bright color', function() {
 		cy.get('.color-picker__simple-color-circle:eq(4)').click()
 
 		cy.wait('@setColor')
-		cy.waitUntil(() => validateBodyThemingCss('#ddcb55', ''))
+		cy.waitUntil(() => validateBodyThemingCss('#ddcb55', null))
 	})
 
 	it('See the header being inverted', function() {
diff --git a/cypress/e2e/theming/themingUtils.ts b/cypress/e2e/theming/themingUtils.ts
index f3e9d96bd05..f9f4a9b0fd2 100644
--- a/cypress/e2e/theming/themingUtils.ts
+++ b/cypress/e2e/theming/themingUtils.ts
@@ -25,14 +25,19 @@ import { colord } from 'colord'
  * Validate the current page body css variables
  *
  * @param {string} expectedColor the expected color
- * @param {string} expectedBackground the expected background
+ * @param {string|null} expectedBackground the expected background
  */
-export const validateBodyThemingCss = function(expectedColor = '#0082c9', expectedBackground = 'kamil-porembinski-clouds.jpg') {
+export const validateBodyThemingCss = function(expectedColor = '#0082c9', expectedBackground: string|null = 'kamil-porembinski-clouds.jpg') {
 	return cy.window().then((win) => {
 		const guestBackgroundColor = getComputedStyle(win.document.body).backgroundColor
 		const guestBackgroundImage = getComputedStyle(win.document.body).backgroundImage
+		
+		const isValidBackgroundImage = expectedBackground === null
+			? guestBackgroundImage === 'none'
+			: guestBackgroundImage.includes(expectedBackground)
+
 		return colord(guestBackgroundColor).isEqual(expectedColor)
-			&& guestBackgroundImage.includes(expectedBackground)
+			&& isValidBackgroundImage
 	})
 }
 
@@ -42,7 +47,7 @@ export const validateBodyThemingCss = function(expectedColor = '#0082c9', expect
  * @param {string} expectedColor the expected color
  * @param {string} expectedBackground the expected background
  */
-export const validateUserThemingDefaultCss = function(expectedColor = '#0082c9', expectedBackground = 'kamil-porembinski-clouds.jpg') {
+export const validateUserThemingDefaultCss = function(expectedColor = '#0082c9', expectedBackground: string|null = 'kamil-porembinski-clouds.jpg') {
 	return cy.window().then((win) => {
 		const defaultSelectButton = win.document.querySelector('[data-user-theming-background-default]')
 		const customColorSelectButton = win.document.querySelector('[data-user-theming-background-color]')
@@ -53,7 +58,12 @@ export const validateUserThemingDefaultCss = function(expectedColor = '#0082c9',
 		const defaultOptionBackground = getComputedStyle(defaultSelectButton).backgroundImage
 		const defaultOptionBorderColor = getComputedStyle(defaultSelectButton).borderColor
 		const colorPickerOptionColor = getComputedStyle(customColorSelectButton).backgroundColor
-		return defaultOptionBackground.includes(expectedBackground)
+
+		const isValidBackgroundImage = expectedBackground === null
+			? defaultOptionBackground === 'none'
+			: defaultOptionBackground.includes(expectedBackground)
+
+		return isValidBackgroundImage
 			&& colord(defaultOptionBorderColor).isEqual(expectedColor)
 			&& colord(colorPickerOptionColor).isEqual(expectedColor)
 	})
diff --git a/cypress/e2e/theming/user-background.cy.ts b/cypress/e2e/theming/user-background.cy.ts
index 78ff552210b..e324d115034 100644
--- a/cypress/e2e/theming/user-background.cy.ts
+++ b/cypress/e2e/theming/user-background.cy.ts
@@ -111,7 +111,7 @@ describe('User select shipped backgrounds and remove background', function() {
 
 		// Validate clear background
 		cy.wait('@clearBackground')
-		cy.waitUntil(() => validateBodyThemingCss('#56633d', ''))
+		cy.waitUntil(() => validateBodyThemingCss('#56633d', null))
 	})
 })
 
@@ -163,7 +163,7 @@ describe('User select a bright custom color and remove background', function() {
 
 		// Validate clear background
 		cy.wait('@clearBackground')
-		cy.waitUntil(() => validateBodyThemingCss(undefined, ''))
+		cy.waitUntil(() => validateBodyThemingCss(undefined, null))
 	})
 
 	it('Select a custom color', function() {