fix(cypress): Fix linter errors on Cypress chains and refactor `wait-until` checker functions

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

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

@@ -36,7 +36,8 @@ describe('Admin theming settings visibility check', function() {
 
 	it('See the admin theming section', function() {
 		cy.visit('/settings/admin/theming')
-		cy.get('[data-admin-theming-settings]').scrollIntoView().should('be.visible')
+		cy.get('[data-admin-theming-settings]').should('exist').scrollIntoView()
+		cy.get('[data-admin-theming-settings]').should('be.visible')
 	})
 
 	it('See the default settings', function() {
@@ -58,7 +59,8 @@ describe('Change the primary color and reset it', function() {
 
 	it('See the admin theming section', function() {
 		cy.visit('/settings/admin/theming')
-		cy.get('[data-admin-theming-settings]').scrollIntoView().should('be.visible')
+		cy.get('[data-admin-theming-settings]').should('exist').scrollIntoView()
+		cy.get('[data-admin-theming-settings]').should('be.visible')
 	})
 
 	it('Change the primary color', function() {
@@ -97,7 +99,8 @@ describe('Remove the default background and restore it', function() {
 
 	it('See the admin theming section', function() {
 		cy.visit('/settings/admin/theming')
-		cy.get('[data-admin-theming-settings]').scrollIntoView().should('be.visible')
+		cy.get('[data-admin-theming-settings]').should('exist').scrollIntoView()
+		cy.get('[data-admin-theming-settings]').should('be.visible')
 	})
 
 	it('Remove the default background', function() {
@@ -141,14 +144,15 @@ describe('Remove the default background with a custom primary color', function()
 
 	it('See the admin theming section', function() {
 		cy.visit('/settings/admin/theming')
-		cy.get('[data-admin-theming-settings]').scrollIntoView().should('be.visible')
+		cy.get('[data-admin-theming-settings]').should('exist').scrollIntoView()
+		cy.get('[data-admin-theming-settings]').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)
+			.then((color) => { selectedColor = color })
 
 		cy.wait('@setColor')
 		cy.waitUntil(() => validateBodyThemingCss(selectedColor, defaultBackground))
@@ -189,7 +193,8 @@ describe('Remove the default background with a bright color', function() {
 
 	it('See the admin theming section', function() {
 		cy.visit('/settings/admin/theming')
-		cy.get('[data-admin-theming-settings]').scrollIntoView().should('be.visible')
+		cy.get('[data-admin-theming-settings]').should('exist').scrollIntoView()
+		cy.get('[data-admin-theming-settings]').should('be.visible')
 	})
 
 	it('Remove the default background', function() {
@@ -235,7 +240,8 @@ describe('Change the login fields then reset them', function() {
 
 	it('See the admin theming section', function() {
 		cy.visit('/settings/admin/theming')
-		cy.get('[data-admin-theming-settings]').scrollIntoView().should('be.visible')
+		cy.get('[data-admin-theming-settings]').should('exist').scrollIntoView()
+		cy.get('[data-admin-theming-settings]').should('be.visible')
 	})
 
 	it('Change the name field', function() {
@@ -244,35 +250,40 @@ describe('Change the login fields then reset them', function() {
 		// Name
 		cy.get('[data-admin-theming-setting-field="name"] input[type="text"]')
 			.scrollIntoView()
-			.type('{selectall}')
-			.type(name)
-			.type('{enter}')
+		cy.get('[data-admin-theming-setting-field="name"] input[type="text"]')
+			.type(`{selectall}${name}{enter}`)
 		cy.wait('@updateFields')
 
 		// Url
 		cy.get('[data-admin-theming-setting-field="url"] input[type="url"]')
 			.scrollIntoView()
-			.type('{selectall}')
-			.type(url)
-			.type('{enter}')
+		cy.get('[data-admin-theming-setting-field="url"] input[type="url"]')
+			.type(`{selectall}${url}{enter}`)
 		cy.wait('@updateFields')
 
 		// Slogan
 		cy.get('[data-admin-theming-setting-field="slogan"] input[type="text"]')
 			.scrollIntoView()
-			.type('{selectall}')
-			.type(slogan)
-			.type('{enter}')
+		cy.get('[data-admin-theming-setting-field="slogan"] input[type="text"]')
+			.type(`{selectall}${slogan}{enter}`)
 		cy.wait('@updateFields')
 	})
 
 	it('Ensure undo button presence', function() {
 		cy.get('[data-admin-theming-setting-field="name"] .input-field__clear-button')
-			.scrollIntoView().should('be.visible')
+			.scrollIntoView()
+		cy.get('[data-admin-theming-setting-field="name"] .input-field__clear-button')
+			.should('be.visible')
+
+		cy.get('[data-admin-theming-setting-field="url"] .input-field__clear-button')
+			.scrollIntoView()
 		cy.get('[data-admin-theming-setting-field="url"] .input-field__clear-button')
-			.scrollIntoView().should('be.visible')
+			.should('be.visible')
+
+		cy.get('[data-admin-theming-setting-field="slogan"] .input-field__clear-button')
+			.scrollIntoView()
 		cy.get('[data-admin-theming-setting-field="slogan"] .input-field__clear-button')
-			.scrollIntoView().should('be.visible')
+			.should('be.visible')
 	})
 
 	it('Validate login screen changes', function() {
@@ -308,14 +319,17 @@ describe('Disable user theming and enable it back', function() {
 
 	it('See the admin theming section', function() {
 		cy.visit('/settings/admin/theming')
-		cy.get('[data-admin-theming-settings]').scrollIntoView().should('be.visible')
+		cy.get('[data-admin-theming-settings]').should('exist').scrollIntoView()
+		cy.get('[data-admin-theming-settings]').should('be.visible')
 	})
 
 	it('Disable user background theming', function() {
 		cy.intercept('*/apps/theming/ajax/updateStylesheet').as('disableUserTheming')
 
 		cy.get('[data-admin-theming-setting-disable-user-theming]')
-			.scrollIntoView().should('be.visible')
+			.scrollIntoView()
+		cy.get('[data-admin-theming-setting-disable-user-theming]')
+			.should('be.visible')
 		cy.get('[data-admin-theming-setting-disable-user-theming] input[type="checkbox"]').check({ force: true })
 		cy.get('[data-admin-theming-setting-disable-user-theming] input[type="checkbox"]').should('be.checked')
 
@@ -331,7 +345,8 @@ describe('Disable user theming and enable it back', 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')
+		cy.get('[data-user-theming-background-disabled]').scrollIntoView()
+		cy.get('[data-user-theming-background-disabled]').should('be.visible')
 	})
 })
 
@@ -350,7 +365,8 @@ describe('The user default background settings reflect the admin theming setting
 
 	it('See the admin theming section', function() {
 		cy.visit('/settings/admin/theming')
-		cy.get('[data-admin-theming-settings]').scrollIntoView().should('be.visible')
+		cy.get('[data-admin-theming-settings]').should('exist').scrollIntoView()
+		cy.get('[data-admin-theming-settings]').should('be.visible')
 	})
 
 	it('Change the primary color', function() {
@@ -360,8 +376,8 @@ describe('The user default background settings reflect the admin theming setting
 			.then(color => { selectedColor = color })
 
 		cy.wait('@setColor')
-		cy.waitUntil(() => cy.window().then((win) => {
-			const primary = getComputedStyle(win.document.body).getPropertyValue('--color-primary-default')
+		cy.waitUntil(() => cy.window().then(($window) => {
+			const primary = $window.getComputedStyle($window.document.body).getPropertyValue('--color-primary-default')
 			return colord(primary).isEqual(selectedColor)
 		}))
 	})
@@ -394,7 +410,8 @@ describe('The user default background settings reflect the admin theming setting
 
 	it('See the user background settings', function() {
 		cy.visit('/settings/user/theming')
-		cy.get('[data-user-theming-background-settings]').scrollIntoView().should('be.visible')
+		cy.get('[data-user-theming-background-settings]').scrollIntoView()
+		cy.get('[data-user-theming-background-settings]').should('be.visible')
 	})
 
 	it('Default user background settings should match admin theming settings', function() {
@@ -418,7 +435,8 @@ describe('The user default background settings reflect the admin theming setting
 
 	it('See the admin theming section', function() {
 		cy.visit('/settings/admin/theming')
-		cy.get('[data-admin-theming-settings]').scrollIntoView().should('be.visible')
+		cy.get('[data-admin-theming-settings]').should('exist').scrollIntoView()
+		cy.get('[data-admin-theming-settings]').should('be.visible')
 	})
 
 	it('Remove the default background', function() {
@@ -445,7 +463,8 @@ describe('The user default background settings reflect the admin theming setting
 
 	it('See the user background settings', function() {
 		cy.visit('/settings/user/theming')
-		cy.get('[data-user-theming-background-settings]').scrollIntoView().should('be.visible')
+		cy.get('[data-user-theming-background-settings]').scrollIntoView()
+		cy.get('[data-user-theming-background-settings]').should('be.visible')
 	})
 
 	it('Default user background settings should match admin theming settings', function() {

cypress/e2e/theming/themingUtils.ts

@@ -32,19 +32,18 @@ export const defaultBackground = 'kamil-porembinski-clouds.jpg'
  * @param {string|null} expectedBackground the expected background
  */
 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 isValidBackgroundColor = colord(guestBackgroundColor).isEqual(expectedColor)
-		const isValidBackgroundImage = !expectedBackground
-			? guestBackgroundImage === 'none'
-			: guestBackgroundImage.includes(expectedBackground)
+	// We must use `Cypress.$` here as any assertions (get is an assertion) is not allowed in wait-until's check function, see documentation
+	const guestBackgroundColor = Cypress.$('body').css('background-color')
+	const guestBackgroundImage = Cypress.$('body').css('background-image')
 
-		console.debug({ guestBackgroundColor: colord(guestBackgroundColor).toHex(), guestBackgroundImage, expectedColor, expectedBackground, isValidBackgroundColor, isValidBackgroundImage })
+	const isValidBackgroundColor = colord(guestBackgroundColor).isEqual(expectedColor)
+	const isValidBackgroundImage = !expectedBackground
+		? guestBackgroundImage === 'none'
+		: guestBackgroundImage.includes(expectedBackground)
 
-		return isValidBackgroundColor && isValidBackgroundImage
-	})
+	console.debug({ guestBackgroundColor: colord(guestBackgroundColor).toHex(), guestBackgroundImage, expectedColor, expectedBackground, isValidBackgroundColor, isValidBackgroundImage })
+
+	return isValidBackgroundColor && isValidBackgroundImage
 }
 
 /**
@@ -54,27 +53,22 @@ export const validateBodyThemingCss = function(expectedColor = defaultPrimary, e
  * @param {string} expectedBackground the expected background
  */
 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]')
-		if (!defaultSelectButton || !customColorSelectButton) {
-			return false
-		}
+	const defaultSelectButton = Cypress.$('[data-user-theming-background-default]')
+	const customColorSelectButton = Cypress.$('[data-user-theming-background-color]')
+	if (defaultSelectButton.length === 0 || customColorSelectButton.length === 0) {
+		return false
+	}
 
-		const defaultOptionBackground = getComputedStyle(defaultSelectButton).backgroundImage
-		const defaultOptionBorderColor = getComputedStyle(defaultSelectButton).borderColor
-		const colorPickerOptionColor = getComputedStyle(customColorSelectButton).backgroundColor
+	const defaultOptionBackground = defaultSelectButton.css('background-image')
+	const colorPickerOptionColor = customColorSelectButton.css('background-color')
 
-		const isValidBackgroundImage = !expectedBackground
-			? defaultOptionBackground === 'none'
-			: defaultOptionBackground.includes(expectedBackground)
-		
-		console.debug(colord(defaultOptionBorderColor).toHex(), colord(colorPickerOptionColor).toHex(), expectedColor, isValidBackgroundImage)
+	const isValidBackgroundImage = !expectedBackground
+		? defaultOptionBackground === 'none'
+		: defaultOptionBackground.includes(expectedBackground)
 
-		return isValidBackgroundImage
-			&& colord(defaultOptionBorderColor).isEqual(expectedColor)
-			&& colord(colorPickerOptionColor).isEqual(expectedColor)
-	})
+	console.debug({ colorPickerOptionColor: colord(colorPickerOptionColor).toHex(), expectedColor, isValidBackgroundImage })
+
+	return isValidBackgroundImage && colord(colorPickerOptionColor).isEqual(expectedColor)
 }
 
 export const pickRandomColor = function(pickerSelector: string): Cypress.Chainable<string> {
@@ -85,9 +79,8 @@ export const pickRandomColor = function(pickerSelector: string): Cypress.Chainab
 	cy.get(pickerSelector).click()
 
 	// Return selected colour
-	return cy.get(pickerSelector).get('.color-picker__simple-color-circle').eq(randColour)
-		.click().then(colorElement => {
-			const selectedColor = colorElement.css('background-color')
-			return selectedColor
-		})
+	return cy.get(pickerSelector).get('.color-picker__simple-color-circle').eq(randColour).then(($el) => {
+		$el.trigger('click')
+		return $el.css('background-color')
+	})
 }