diff options
Diffstat (limited to 'cypress/e2e/theming/themingUtils.ts')
| -rw-r--r-- | cypress/e2e/theming/themingUtils.ts | 93 |
1 files changed, 51 insertions, 42 deletions
diff --git a/cypress/e2e/theming/themingUtils.ts b/cypress/e2e/theming/themingUtils.ts index 2965886c656..b4740beda1c 100644 --- a/cypress/e2e/theming/themingUtils.ts +++ b/cypress/e2e/theming/themingUtils.ts @@ -1,49 +1,57 @@ /** - * @copyright Copyright (c) 2022 John Molakvoæ <skjnldsv@protonmail.com> - * - * @author John Molakvoæ <skjnldsv@protonmail.com> - * - * @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 <http://www.gnu.org/licenses/>. - * + * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later */ import { colord } from 'colord' -const defaultNextcloudBlue = '#0082c9' export const defaultPrimary = '#00679e' -export const defaultBackground = 'kamil-porembinski-clouds.jpg' +export const defaultBackground = 'jenna-kim-the-globe.webp' + +/** + * Check if a CSS variable is set to a specific color + * @param variable Variable to check + * @param expectedColor Color that is expected + */ +export function validateCSSVariable(variable: string, expectedColor: string) { + const value = window.getComputedStyle(Cypress.$('body').get(0)).getPropertyValue(variable) + console.debug(`${variable}, is: ${colord(value).toHex()} expected: ${expectedColor}`) + return colord(value).isEqual(expectedColor) +} /** * Validate the current page body css variables * - * @param {string} expectedColor the expected color + * @param {string} expectedColor the expected primary color * @param {string|null} expectedBackground the expected background + * @param {string|null} expectedBackgroundColor the expected background color (null to ignore) */ -export const validateBodyThemingCss = function(expectedColor = defaultPrimary, expectedBackground: string|null = defaultBackground) { +export function validateBodyThemingCss(expectedColor = defaultPrimary, expectedBackground: string|null = defaultBackground, expectedBackgroundColor: string|null = defaultPrimary) { // 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') - const isValidBackgroundColor = colord(guestBackgroundColor).isEqual(expectedColor) + const isValidBackgroundColor = expectedBackgroundColor === null || colord(guestBackgroundColor).isEqual(expectedBackgroundColor) const isValidBackgroundImage = !expectedBackground ? guestBackgroundImage === 'none' : guestBackgroundImage.includes(expectedBackground) - console.debug({ guestBackgroundColor: colord(guestBackgroundColor).toHex(), guestBackgroundImage, expectedColor, expectedBackground, isValidBackgroundColor, isValidBackgroundImage }) + console.debug({ + isValidBackgroundColor, + isValidBackgroundImage, + guestBackgroundColor: colord(guestBackgroundColor).toHex(), + guestBackgroundImage, + }) - return isValidBackgroundColor && isValidBackgroundImage + return isValidBackgroundColor && isValidBackgroundImage && validateCSSVariable('--color-primary', expectedColor) +} + +/** + * Check background color of element + * @param element JQuery element to check + * @param color expected color + */ +export function expectBackgroundColor(element: JQuery<HTMLElement>, color: string) { + expect(colord(element.css('background-color')).toHex()).equal(colord(color).toHex()) } /** @@ -58,28 +66,28 @@ export const validateUserThemingDefaultCss = function(expectedColor = defaultPri return false } - const defaultOptionBackground = defaultSelectButton.css('background-image') - const colorPickerOptionColor = defaultSelectButton.css('background-color') - const isNextcloudBlue = colord(colorPickerOptionColor).isEqual('#0082c9') + const backgroundImage = defaultSelectButton.css('background-image') + const backgroundColor = defaultSelectButton.css('background-color') const isValidBackgroundImage = !expectedBackground - ? defaultOptionBackground === 'none' - : defaultOptionBackground.includes(expectedBackground) - - console.debug({ colorPickerOptionColor: colord(colorPickerOptionColor).toHex(), expectedColor, isValidBackgroundImage, isNextcloudBlue }) + ? (backgroundImage === 'none' || Cypress.$('body').css('background-image') === 'none') + : backgroundImage.includes(expectedBackground) + + console.debug({ + colorPickerOptionColor: colord(backgroundColor).toHex(), + expectedColor, + isValidBackgroundImage, + backgroundImage, + }) - return isValidBackgroundImage && ( - colord(colorPickerOptionColor).isEqual(expectedColor) - // we replace nextcloud blue with the the default rpimary (apps/theming/lib/Themes/DefaultTheme.php line 76) - || (isNextcloudBlue && colord(expectedColor).isEqual(defaultPrimary)) - ) + return isValidBackgroundImage && colord(backgroundColor).isEqual(expectedColor) } -export const pickRandomColor = function(): Cypress.Chainable<string> { +export const pickRandomColor = function(context: string, index?: number): Cypress.Chainable<string> { // Pick one of the first 8 options - const randColour = Math.floor(Math.random() * 8) + const randColour = index ?? Math.floor(Math.random() * 8) - const colorPreviewSelector = '[data-user-theming-background-color],[data-admin-theming-setting-primary-color]' + const colorPreviewSelector = `${context} [data-admin-theming-setting-color]` let oldColor = '' cy.get(colorPreviewSelector).then(($el) => { @@ -87,7 +95,8 @@ export const pickRandomColor = function(): Cypress.Chainable<string> { }) // Open picker - cy.contains('button', 'Change color').click() + cy.get(`${context} [data-admin-theming-setting-color-picker]`).scrollIntoView() + cy.get(`${context} [data-admin-theming-setting-color-picker]`).click({ force: true }) // Click on random color cy.get('.color-picker__simple-color-circle').eq(randColour).click() |