themingUtils.ts 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  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. /**
  24. * Validate the current page body css variables
  25. *
  26. * @param {string} expectedColor the expected color
  27. * @param {string} expectedBackground the expected background
  28. */
  29. export const validateBodyThemingCss = function(expectedColor = '#0082c9', expectedBackground = 'kamil-porembinski-clouds.jpg') {
  30. return cy.window().then((win) => {
  31. const guestBackgroundColor = getComputedStyle(win.document.body).backgroundColor
  32. const guestBackgroundImage = getComputedStyle(win.document.body).backgroundImage
  33. return colord(guestBackgroundColor).isEqual(expectedColor)
  34. && guestBackgroundImage.includes(expectedBackground)
  35. })
  36. }
  37. /**
  38. * Validate the user theming default select option css
  39. *
  40. * @param {string} expectedColor the expected color
  41. * @param {string} expectedBackground the expected background
  42. */
  43. export const validateUserThemingDefaultCss = function(expectedColor = '#0082c9', expectedBackground = 'kamil-porembinski-clouds.jpg') {
  44. return cy.window().then((win) => {
  45. const defaultSelectButton = win.document.querySelector('[data-user-theming-background-default]')
  46. const customColorSelectButton = win.document.querySelector('[data-user-theming-background-color]')
  47. if (!defaultSelectButton || !customColorSelectButton) {
  48. return false
  49. }
  50. const defaultOptionBackground = getComputedStyle(defaultSelectButton).backgroundImage
  51. const defaultOptionBorderColor = getComputedStyle(defaultSelectButton).borderColor
  52. const colorPickerOptionColor = getComputedStyle(customColorSelectButton).backgroundColor
  53. return defaultOptionBackground.includes(expectedBackground)
  54. && colord(defaultOptionBorderColor).isEqual(expectedColor)
  55. && colord(colorPickerOptionColor).isEqual(expectedColor)
  56. })
  57. }
  58. export const pickRandomColor = function(pickerSelector: string): Cypress.Chainable<string> {
  59. // Pick one of the first 8 options
  60. const randColour = Math.floor(Math.random() * 8)
  61. // Open picker
  62. cy.get(pickerSelector).click()
  63. // Return selected colour
  64. return cy.get(pickerSelector).get('.color-picker__simple-color-circle').eq(randColour)
  65. .click().then(colorElement => {
  66. const selectedColor = colorElement.css('background-color')
  67. return selectedColor
  68. })
  69. }