themingUtils.ts 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. /**
  2. * @copyright Copyright (c) 2022 John Molakvoæ <skjnldsv@protonmail.com>
  3. *
  4. * @author John Molakvoæ <skjnldsv@protonmail.com>
  5. *
  6. * @license AGPL-3.0-or-later
  7. *
  8. * This program is free software: you can redistribute it and/or modify
  9. * it under the terms of the GNU Affero General Public License as
  10. * published by the Free Software Foundation, either version 3 of the
  11. * License, or (at your option) any later version.
  12. *
  13. * This program is distributed in the hope that it will be useful,
  14. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  15. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  16. * GNU Affero General Public License for more details.
  17. *
  18. * You should have received a copy of the GNU Affero General Public License
  19. * along with this program. If not, see <http://www.gnu.org/licenses/>.
  20. *
  21. */
  22. import { colord } from 'colord'
  23. export const defaultPrimary = '#0082c9'
  24. export const defaultAccessiblePrimary = '#006aa3'
  25. export const defaultBackground = 'kamil-porembinski-clouds.jpg'
  26. /**
  27. * Validate the current page body css variables
  28. *
  29. * @param {string} expectedColor the expected color
  30. * @param {string|null} expectedBackground the expected background
  31. */
  32. export const validateBodyThemingCss = function(expectedColor = defaultPrimary, expectedBackground: string|null = defaultBackground) {
  33. return cy.window().then((win) => {
  34. const guestBackgroundColor = getComputedStyle(win.document.body).backgroundColor
  35. const guestBackgroundImage = getComputedStyle(win.document.body).backgroundImage
  36. const isValidBackgroundColor = colord(guestBackgroundColor).isEqual(expectedColor)
  37. const isValidBackgroundImage = !expectedBackground
  38. ? guestBackgroundImage === 'none'
  39. : guestBackgroundImage.includes(expectedBackground)
  40. console.debug({ guestBackgroundColor: colord(guestBackgroundColor).toHex(), guestBackgroundImage, expectedColor, expectedBackground, isValidBackgroundColor, isValidBackgroundImage })
  41. return isValidBackgroundColor && isValidBackgroundImage
  42. })
  43. }
  44. /**
  45. * Validate the user theming default select option css
  46. *
  47. * @param {string} expectedColor the expected color
  48. * @param {string} expectedBackground the expected background
  49. */
  50. export const validateUserThemingDefaultCss = function(expectedColor = defaultPrimary, expectedBackground: string|null = defaultBackground) {
  51. return cy.window().then((win) => {
  52. const defaultSelectButton = win.document.querySelector('[data-user-theming-background-default]')
  53. const customColorSelectButton = win.document.querySelector('[data-user-theming-background-color]')
  54. if (!defaultSelectButton || !customColorSelectButton) {
  55. return false
  56. }
  57. const defaultOptionBackground = getComputedStyle(defaultSelectButton).backgroundImage
  58. const defaultOptionBorderColor = getComputedStyle(defaultSelectButton).borderColor
  59. const colorPickerOptionColor = getComputedStyle(customColorSelectButton).backgroundColor
  60. const isValidBackgroundImage = !expectedBackground
  61. ? defaultOptionBackground === 'none'
  62. : defaultOptionBackground.includes(expectedBackground)
  63. console.debug(colord(defaultOptionBorderColor).toHex(), colord(colorPickerOptionColor).toHex(), expectedColor, isValidBackgroundImage)
  64. return isValidBackgroundImage
  65. && colord(defaultOptionBorderColor).isEqual(expectedColor)
  66. && colord(colorPickerOptionColor).isEqual(expectedColor)
  67. })
  68. }
  69. export const pickRandomColor = function(pickerSelector: string): Cypress.Chainable<string> {
  70. // Pick one of the first 8 options
  71. const randColour = Math.floor(Math.random() * 8)
  72. // Open picker
  73. cy.get(pickerSelector).click()
  74. // Return selected colour
  75. return cy.get(pickerSelector).get('.color-picker__simple-color-circle').eq(randColour)
  76. .click().then(colorElement => {
  77. const selectedColor = colorElement.css('background-color')
  78. return selectedColor
  79. })
  80. }