Fix background removal not applying to user default theming

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

3 files changed, 73 insertions, 20 deletions

diff --git a/cypress/e2e/theming/admin-settings.cy.ts b/cypress/e2e/theming/admin-settings.cy.ts
index 567bed94c0a..03797c35b51 100644
--- a/cypress/e2e/theming/admin-settings.cy.ts
+++ b/cypress/e2e/theming/admin-settings.cy.ts
@@ -23,13 +23,10 @@
 import { User } from '@nextcloud/cypress'
 import { colord } from 'colord'
 
-import { pickRandomColor, validateBodyThemingCss, validateUserThemingDefaultCss } from './themingUtils'
+import { defaultPrimary, defaultBackground, pickRandomColor, validateBodyThemingCss, validateUserThemingDefaultCss } from './themingUtils'
 
 const admin = new User('admin', 'admin')
 
-const defaultPrimary = '#0082c9'
-const defaultBackground = 'kamil-porembinski-clouds.jpg'
-
 describe('Admin theming settings visibility check', function() {
 	before(function() {
 		// Just in case previous test failed
@@ -91,7 +88,7 @@ describe('Change the primary color and reset it', function() {
 	})
 })
 
-describe.only('Remove the default background and restore it', function() {
+describe('Remove the default background and restore it', function() {
 	before(function() {
 		// Just in case previous test failed
 		cy.resetAdminTheming()
@@ -109,11 +106,10 @@ describe.only('Remove the default background and restore it', function() {
 		cy.get('[data-admin-theming-setting-file-remove]').click()
 
 		cy.wait('@removeBackground')
+		cy.waitUntil(() => validateBodyThemingCss(defaultPrimary, null))
 		cy.waitUntil(() => cy.window().then((win) => {
-			const currentBackgroundDefault = getComputedStyle(win.document.body).getPropertyValue('--image-background-default')
 			const backgroundPlain = getComputedStyle(win.document.body).getPropertyValue('--image-background-plain')
-			return !currentBackgroundDefault.includes(defaultBackground)
-				&& backgroundPlain !== ''
+			return backgroundPlain !== ''
 		}))
 	})
 
@@ -408,3 +404,54 @@ describe('The user default background settings reflect the admin theming setting
 		cy.waitUntil(() => validateUserThemingDefaultCss(selectedColor, '/apps/theming/image/background?v='))
 	})
 })
+
+describe('The user default background settings reflect the admin theming settings with background removed', function() {
+	before(function() {
+		// Just in case previous test failed
+		cy.resetAdminTheming()
+		cy.login(admin)
+	})
+
+	after(function() {
+		cy.resetAdminTheming()
+	})
+
+	it('See the admin theming section', function() {
+		cy.visit('/settings/admin/theming')
+		cy.get('[data-admin-theming-settings]').scrollIntoView().should('be.visible')
+	})
+
+	it('Remove the default background', function() {
+		cy.intercept('*/apps/theming/ajax/updateStylesheet').as('removeBackground')
+
+		cy.get('[data-admin-theming-setting-file-remove]').click()
+
+		cy.wait('@removeBackground')
+		cy.waitUntil(() => validateBodyThemingCss(defaultPrimary, null))
+	})
+
+	it('Login page should match admin theming settings', function() {
+		cy.logout()
+		cy.visit('/')
+
+		cy.waitUntil(() => validateBodyThemingCss(defaultPrimary, null))
+	})
+
+	it('Login as user', function() {
+		cy.createRandomUser().then((user) => {
+			cy.login(user)
+		})
+	})
+
+	it('See the user background settings', function() {
+		cy.visit('/settings/user/theming')
+		cy.get('[data-user-theming-background-settings]').scrollIntoView().should('be.visible')
+	})
+
+	it('Default user background settings should match admin theming settings', function() {
+		cy.get('[data-user-theming-background-default]').should('be.visible')
+		cy.get('[data-user-theming-background-default]').should('have.class', 'background--active')
+
+		cy.waitUntil(() => validateUserThemingDefaultCss(defaultPrimary, null))
+	})
+})
diff --git a/cypress/e2e/theming/themingUtils.ts b/cypress/e2e/theming/themingUtils.ts
index f9f4a9b0fd2..c0140293c22 100644
--- a/cypress/e2e/theming/themingUtils.ts
+++ b/cypress/e2e/theming/themingUtils.ts
@@ -21,23 +21,29 @@
  */
 import { colord } from 'colord'
 
+export const defaultPrimary = '#0082c9'
+export const defaultAccessiblePrimary = '#006aa3'
+export const defaultBackground = 'kamil-porembinski-clouds.jpg'
+
 /**
  * Validate the current page body css variables
  *
  * @param {string} expectedColor the expected color
  * @param {string|null} expectedBackground the expected background
  */
-export const validateBodyThemingCss = function(expectedColor = '#0082c9', expectedBackground: string|null = 'kamil-porembinski-clouds.jpg') {
+export const validateBodyThemingCss = function(expectedColor = defaultPrimary, expectedBackground: string|null = defaultBackground) {
 	return cy.window().then((win) => {
 		const guestBackgroundColor = getComputedStyle(win.document.body).backgroundColor
 		const guestBackgroundImage = getComputedStyle(win.document.body).backgroundImage
 		
-		const isValidBackgroundImage = expectedBackground === null
+		const isValidBackgroundColor = colord(guestBackgroundColor).isEqual(expectedColor)
+		const isValidBackgroundImage = !expectedBackground
 			? guestBackgroundImage === 'none'
 			: guestBackgroundImage.includes(expectedBackground)
 
-		return colord(guestBackgroundColor).isEqual(expectedColor)
-			&& isValidBackgroundImage
+		console.debug({ guestBackgroundColor: colord(guestBackgroundColor).toHex(), guestBackgroundImage, expectedColor, expectedBackground, isValidBackgroundColor, isValidBackgroundImage })
+
+		return isValidBackgroundColor && isValidBackgroundImage
 	})
 }
 
@@ -47,7 +53,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: string|null = 'kamil-porembinski-clouds.jpg') {
+export const validateUserThemingDefaultCss = function(expectedColor = defaultPrimary, expectedBackground: string|null = defaultBackground) {
 	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]')
@@ -59,9 +65,11 @@ export const validateUserThemingDefaultCss = function(expectedColor = '#0082c9',
 		const defaultOptionBorderColor = getComputedStyle(defaultSelectButton).borderColor
 		const colorPickerOptionColor = getComputedStyle(customColorSelectButton).backgroundColor
 
-		const isValidBackgroundImage = expectedBackground === null
+		const isValidBackgroundImage = !expectedBackground
 			? defaultOptionBackground === 'none'
 			: defaultOptionBackground.includes(expectedBackground)
+		
+		console.debug(colord(defaultOptionBorderColor).toHex(), colord(colorPickerOptionColor).toHex(), expectedColor, isValidBackgroundImage)
 
 		return isValidBackgroundImage
 			&& colord(defaultOptionBorderColor).isEqual(expectedColor)
diff --git a/cypress/e2e/theming/user-background.cy.ts b/cypress/e2e/theming/user-background.cy.ts
index e324d115034..7597047895e 100644
--- a/cypress/e2e/theming/user-background.cy.ts
+++ b/cypress/e2e/theming/user-background.cy.ts
@@ -21,10 +21,8 @@
  */
 import { User } from '@nextcloud/cypress'
 
-import { pickRandomColor, validateBodyThemingCss } from './themingUtils'
+import { defaultPrimary, defaultBackground, pickRandomColor, validateBodyThemingCss } from './themingUtils'
 
-const defaultPrimary = '#006aa3'
-const defaultBackground = 'kamil-porembinski-clouds.jpg'
 const admin = new User('admin', 'admin')
 
 describe('User default background settings', function() {
@@ -137,7 +135,7 @@ describe('User select a custom color', function() {
 		cy.wait('@setColor')
 		cy.waitUntil(() => cy.window().then((win) => {
 			const primary = getComputedStyle(win.document.body).getPropertyValue('--color-primary')
-			return primary !== defaultPrimary
+			return primary !== defaultPrimary && primary !== defaultPrimary
 		}))
 	})
 })
@@ -187,7 +185,7 @@ describe('User select a bright custom color and remove background', function() {
 		}))
 	})
 
-	it('Select a shipped background', function() {
+	it('Select another but non-bright shipped background', function() {
 		const background = 'anatoly-mikhaltsov-butterfly-wing-scale.jpg'
 		cy.intercept('*/apps/theming/background/shipped').as('setBackground')
 
@@ -199,7 +197,7 @@ describe('User select a bright custom color and remove background', function() {
 		cy.waitUntil(() => validateBodyThemingCss('#a53c17', background))
 	})
 
-	it('See the header NOT being inverted', function() {
+	it('See the header NOT being inverted this time', function() {
 		cy.waitUntil(() => cy.window().then((win) => {
 			const firstEntry = win.document.querySelector('.app-menu-main li')
 			if (!firstEntry) {