Mirrors
/
nextcloud-server
mirror of https://github.com/nextcloud/server
3
0
Fork 0
Code Releases Activity
Browse Source

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

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
pull/41115/head
Ferdinand Thiessen 3 years ago
parent
107bafd864
commit
4e8c690dc7
2 changed files with 74 additions and 62 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 75
      cypress/e2e/theming/admin-settings.cy.ts
  2. 61
      cypress/e2e/theming/themingUtils.ts

75
cypress/e2e/theming/admin-settings.cy.ts
View File

@ -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() {

61
cypress/e2e/theming/themingUtils.ts
View File

@ -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')
})
}
Write Preview
Loading…
Cancel
Save