diff options
Diffstat (limited to 'cypress')
| -rw-r--r-- | cypress/e2e/theming/admin-settings.cy.ts | 75 | ||||
| -rw-r--r-- | cypress/e2e/theming/themingUtils.ts | 61 |
2 files changed, 74 insertions, 62 deletions
diff --git a/cypress/e2e/theming/admin-settings.cy.ts b/cypress/e2e/theming/admin-settings.cy.ts index 03797c35b51..70ede0e08af 100644 --- a/cypress/e2e/theming/admin-settings.cy.ts +++ b/cypress/e2e/theming/admin-settings.cy.ts @@ -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() { diff --git a/cypress/e2e/theming/themingUtils.ts b/cypress/e2e/theming/themingUtils.ts index c0140293c22..2cf92c47e6a 100644 --- a/cypress/e2e/theming/themingUtils.ts +++ b/cypress/e2e/theming/themingUtils.ts @@ -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') + }) } |