From f26ee9c69d98b9208f709e0c7aa284755708adbd Mon Sep 17 00:00:00 2001 From: John Molakvoæ Date: Wed, 30 Nov 2022 17:45:58 +0100 Subject: Faster theming tests, better colours comparison and properly follow admin theming changes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ --- cypress/e2e/theming/themingUtils.ts | 75 +++++++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 cypress/e2e/theming/themingUtils.ts (limited to 'cypress/e2e/theming/themingUtils.ts') diff --git a/cypress/e2e/theming/themingUtils.ts b/cypress/e2e/theming/themingUtils.ts new file mode 100644 index 00000000000..2cdbb07c000 --- /dev/null +++ b/cypress/e2e/theming/themingUtils.ts @@ -0,0 +1,75 @@ +/** + * @copyright Copyright (c) 2022 John Molakvoæ + * + * @author John Molakvoæ + * + * @license AGPL-3.0-or-later + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + */ +import { colord } from 'colord' + +/** + * Validate the current page body css variables + * + * @param {string} expectedColor the expected color + * @param {string} expectedBackground the expected background + */ +export const validateBodyThemingCss = function(expectedColor = '#0082c9', expectedBackground = 'kamil-porembinski-clouds.jpg') { + return cy.window().then((win) => { + const guestBackgroundColor = getComputedStyle(win.document.body).backgroundColor + const guestBackgroundImage = getComputedStyle(win.document.body).backgroundImage + return colord(guestBackgroundColor).isEqual(expectedColor) + && guestBackgroundImage.includes(expectedBackground) + }) +} + +/** + * Validate the user theming default select option css + * + * @param {string} expectedColor the expected color + * @param {string} expectedBackground the expected background + */ +export const validateUserThemingDefaultCss = function(expectedColor = '#0082c9', expectedBackground = '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]') + if (!defaultSelectButton || !customColorSelectButton) { + return false + } + + const defaultOptionBackground = getComputedStyle(defaultSelectButton).backgroundImage + const defaultOptionBorderColor = getComputedStyle(defaultSelectButton).borderColor + const colorPickerOptionColor = getComputedStyle(customColorSelectButton).backgroundColor + return defaultOptionBackground.includes(expectedBackground) + && colord(defaultOptionBorderColor).isEqual(expectedColor) + && colord(colorPickerOptionColor).isEqual(expectedColor) + }) +} + +export const pickRandomColor = function(pickerSelector: string): Cypress.Chainable { + // Pick one of the first 8 options + const randColour = Math.floor(Math.random() * 8) + + // Open picker + 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 + }) +} \ No newline at end of file -- cgit v1.2.3