Add additional no-background and custom colour test

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

cypress/e2e/theming/admin-settings.cy.ts

@@ -30,7 +30,7 @@ const admin = new User('admin', 'admin')
 const defaultPrimary = '#0082c9'
 const defaultBackground = 'kamil-porembinski-clouds.jpg'
 
-describe('Admin theming settings', function() {
+describe('Admin theming settings visibility check', function() {
 	before(function() {
 		// Just in case previous test failed
 		cy.resetAdminTheming()
@@ -50,8 +50,9 @@ describe('Admin theming settings', function() {
 	})
 })
 
-describe('Change the primary colour and reset it', function() {
+describe('Change the primary color and reset it', function() {
 	let selectedColor = ''
+
 	before(function() {
 		// Just in case previous test failed
 		cy.resetAdminTheming()
@@ -63,7 +64,7 @@ describe('Change the primary colour and reset it', function() {
 		cy.get('[data-admin-theming-settings]').scrollIntoView().should('be.visible')
 	})
 
-	it('Change the primary colour', function() {
+	it('Change the primary color', function() {
 		cy.intercept('*/apps/theming/ajax/updateStylesheet').as('setColor')
 
 		pickRandomColor('[data-admin-theming-setting-primary-color-picker]')
@@ -73,18 +74,18 @@ describe('Change the primary colour and reset it', function() {
 		cy.waitUntil(() => validateBodyThemingCss(selectedColor, defaultBackground))
 	})
 
-	it('Screenshot the login page', function() {
+	it('Screenshot the login page and validate login page', function() {
 		cy.logout()
 		cy.visit('/')
+
+		cy.waitUntil(() => validateBodyThemingCss(selectedColor, defaultBackground))
 		cy.screenshot()
 	})
 
-	it('Undo theming settings', function() {
+	it('Undo theming settings and validate login page again', function() {
 		cy.resetAdminTheming()
-	})
-
-	it('Screenshot the login page', function() {
 		cy.visit('/')
+
 		cy.waitUntil(validateBodyThemingCss)
 		cy.screenshot()
 	})
@@ -116,18 +117,67 @@ describe('Remove the default background and restore it', function() {
 		}))
 	})
 
-	it('Screenshot the login page', function() {
+	it('Screenshot the login page and validate login page', function() {
 		cy.logout()
 		cy.visit('/')
+
+		cy.waitUntil(() => validateBodyThemingCss(defaultPrimary, ''))
 		cy.screenshot()
 	})
 
-	it('Undo theming settings', function() {
+	it('Undo theming settings and validate login page again', function() {
+		cy.resetAdminTheming()
+		cy.visit('/')
+
+		cy.waitUntil(validateBodyThemingCss)
+		cy.screenshot()
+	})
+})
+
+describe('Remove the default background with a custom primary color', function() {
+	let selectedColor = ''
+
+	before(function() {
+		// Just in case previous test failed
 		cy.resetAdminTheming()
+		cy.login(admin)
 	})
 
-	it('Screenshot the login page', function() {
+	it('See the admin theming section', function() {
+		cy.visit('/settings/admin/theming')
+		cy.get('[data-admin-theming-settings]').scrollIntoView().should('be.visible')
+	})
+
+	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)
+
+		cy.wait('@setColor')
+		cy.waitUntil(() => validateBodyThemingCss(selectedColor, defaultBackground))
+	})
+
+	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')
+	})
+
+	it('Screenshot the login page and validate login page', function() {
+		cy.logout()
+		cy.visit('/')
+
+		cy.waitUntil(() => validateBodyThemingCss(selectedColor, ''))
+		cy.screenshot()
+	})
+
+	it('Undo theming settings and validate login page again', function() {
+		cy.resetAdminTheming()
 		cy.visit('/')
+
 		cy.waitUntil(validateBodyThemingCss)
 		cy.screenshot()
 	})
@@ -154,7 +204,7 @@ describe('Remove the default background with a bright color', function() {
 		cy.wait('@removeBackground')
 	})
 
-	it('Change the primary colour', function() {
+	it('Change the primary color', function() {
 		cy.intercept('*/apps/theming/ajax/updateStylesheet').as('setColor')
 
 		// Pick one of the bright color preset
@@ -229,7 +279,7 @@ describe('Change the login fields then reset them', function() {
 			.scrollIntoView().should('be.visible')
 	})
 
-	it('Check login screen changes', function() {
+	it('Validate login screen changes', function() {
 		cy.logout()
 		cy.visit('/')
 
@@ -243,7 +293,7 @@ describe('Change the login fields then reset them', function() {
 		cy.resetAdminTheming()
 	})
 
-	it('Check login screen changes', function() {
+	it('Validate login screen changes again', function() {
 		cy.visit('/')
 
 		cy.get('[data-login-form-headline]').should('not.contain.text', name)
@@ -265,7 +315,7 @@ describe('Disable user theming and enable it back', function() {
 		cy.get('[data-admin-theming-settings]').scrollIntoView().should('be.visible')
 	})
 
-	it('Disable user theming', function() {
+	it('Disable user background theming', function() {
 		cy.intercept('*/apps/theming/ajax/updateStylesheet').as('disableUserTheming')
 
 		cy.get('[data-admin-theming-setting-disable-user-theming]')
@@ -283,13 +333,13 @@ describe('Disable user theming and enable it back', function() {
 		})
 	})
 
-	it('See the user disabled background settings', function() {
+	it('User cannot not change background settings', function() {
 		cy.visit('/settings/user/theming')
 		cy.get('[data-user-theming-background-disabled]').scrollIntoView().should('be.visible')
 	})
 })
 
-describe('User default option matches admin theming', function() {
+describe('The user default background settings reflect the admin theming settings', function() {
 	let selectedColor = ''
 
 	before(function() {
@@ -307,7 +357,7 @@ describe('User default option matches admin theming', function() {
 		cy.get('[data-admin-theming-settings]').scrollIntoView().should('be.visible')
 	})
 
-	it('Change the primary colour', function() {
+	it('Change the primary color', function() {
 		cy.intercept('*/apps/theming/ajax/updateStylesheet').as('setColor')
 
 		pickRandomColor('[data-admin-theming-setting-primary-color-picker]')
@@ -333,7 +383,7 @@ describe('User default option matches admin theming', function() {
 		}))
 	})
 
-	it('Logout and check changes', function() {
+	it('Login page should match admin theming settings', function() {
 		cy.logout()
 		cy.visit('/')
 
@@ -351,7 +401,7 @@ describe('User default option matches admin theming', function() {
 		cy.get('[data-user-theming-background-settings]').scrollIntoView().should('be.visible')
 	})
 
-	it('See the default background option selected', function() {
+	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')