diff options
Diffstat (limited to 'cypress/e2e/theming/admin-settings.cy.ts')
| -rw-r--r-- | cypress/e2e/theming/admin-settings.cy.ts | 170 |
1 files changed, 92 insertions, 78 deletions
diff --git a/cypress/e2e/theming/admin-settings.cy.ts b/cypress/e2e/theming/admin-settings.cy.ts index 1c825ecd89e..23e7ab9858f 100644 --- a/cypress/e2e/theming/admin-settings.cy.ts +++ b/cypress/e2e/theming/admin-settings.cy.ts @@ -20,6 +20,9 @@ * */ import { User } from '@nextcloud/cypress' +import { colord } from 'colord' + +import { pickRandomColor, validateBodyThemingCss, validateUserThemingDefaultCss } from './themingUtils' const admin = new User('admin', 'admin') @@ -28,6 +31,8 @@ const defaultBackground = 'kamil-porembinski-clouds.jpg' describe('Admin theming settings', function() { before(function() { + // Just in case previous test failed + cy.resetTheming() cy.login(admin) }) @@ -39,13 +44,16 @@ describe('Admin theming settings', function() { it('See the default settings', function() { cy.get('[data-admin-theming-setting-primary-color-picker]').should('contain.text', defaultPrimary) cy.get('[data-admin-theming-setting-primary-color-reset]').should('not.exist') - cy.get('[data-admin-theming-setting-background-reset]').should('not.exist') - cy.get('[data-admin-theming-setting-background-remove]').should('be.visible') + cy.get('[data-admin-theming-setting-file-reset]').should('not.exist') + cy.get('[data-admin-theming-setting-file-remove]').should('be.visible') }) }) -describe('Change the primary colour', function() { +describe('Change the primary colour and reset it', function() { + let selectedColor = '' before(function() { + // Just in case previous test failed + cy.resetTheming() cy.login(admin) }) @@ -57,14 +65,11 @@ describe('Change the primary colour', function() { it('Change the primary colour', function() { cy.intercept('*/apps/theming/ajax/updateStylesheet').as('setColor') - cy.get('[data-admin-theming-setting-primary-color-picker]').click() - cy.get('.color-picker__simple-color-circle:eq(3)').click() + pickRandomColor('[data-admin-theming-setting-primary-color-picker]') + .then(color => selectedColor = color) cy.wait('@setColor') - cy.waitUntil(() => cy.window().then((win) => { - const primary = getComputedStyle(win.document.body).getPropertyValue('--color-primary-default') - return primary !== defaultPrimary - })) + cy.waitUntil(() => validateBodyThemingCss(selectedColor, defaultBackground)) }) it('Screenshot the login page', function() { @@ -73,32 +78,21 @@ describe('Change the primary colour', function() { cy.screenshot() }) - it('Login again and go to the admin theming section', function() { - cy.login(admin) - cy.visit('/settings/admin/theming') - }) - - it('Reset the primary colour', function() { - cy.intercept('*/apps/theming/ajax/undoChanges').as('undoChanges') - - cy.get('[data-admin-theming-setting-primary-color-reset]').click() - - cy.wait('@undoChanges') - cy.waitUntil(() => cy.window().then((win) => { - const primary = getComputedStyle(win.document.body).getPropertyValue('--color-primary-default') - return primary === defaultPrimary - })) + it('Undo theming settings', function() { + cy.resetTheming() }) it('Screenshot the login page', function() { - cy.logout() cy.visit('/') + cy.waitUntil(validateBodyThemingCss) cy.screenshot() }) }) -describe('Remove the default background', function() { +describe('Remove the default background and restore it', function() { before(function() { + // Just in case previous test failed + cy.resetTheming() cy.login(admin) }) @@ -110,13 +104,13 @@ describe('Remove the default background', function() { it('Remove the default background', function() { cy.intercept('*/apps/theming/ajax/updateStylesheet').as('removeBackground') - cy.get('[data-admin-theming-setting-background-remove]').click() + cy.get('[data-admin-theming-setting-file-remove]').click() cy.wait('@removeBackground') cy.waitUntil(() => cy.window().then((win) => { - const backgroundDefault = getComputedStyle(win.document.body).getPropertyValue('--image-background-default') + const currentBackgroundDefault = getComputedStyle(win.document.body).getPropertyValue('--image-background-default') const backgroundPlain = getComputedStyle(win.document.body).getPropertyValue('--image-background-plain') - return !backgroundDefault.includes(defaultBackground) + return !currentBackgroundDefault.includes(defaultBackground) && backgroundPlain !== '' })) }) @@ -127,38 +121,25 @@ describe('Remove the default background', function() { cy.screenshot() }) - it('Login again and go to the admin theming section', function() { - cy.login(admin) - cy.visit('/settings/admin/theming') - }) - - it('Restore the default background', function() { - cy.intercept('*/apps/theming/ajax/undoChanges').as('undoChanges') - - cy.get('[data-admin-theming-setting-background-reset]').click() - - cy.wait('@undoChanges') - cy.waitUntil(() => cy.window().then((win) => { - const backgroundDefault = getComputedStyle(win.document.body).getPropertyValue('--image-background-default') - const backgroundPlain = getComputedStyle(win.document.body).getPropertyValue('--image-background-plain') - return backgroundDefault.includes(defaultBackground) - && backgroundPlain === '' - })) + it('Undo theming settings', function() { + cy.resetTheming() }) it('Screenshot the login page', function() { - cy.logout() cy.visit('/') + cy.waitUntil(validateBodyThemingCss) cy.screenshot() }) }) -describe('Change the login fields', function() { +describe('Change the login fields then reset them', function() { const name = 'ABCdef123' const url = 'https://example.com' const slogan = 'Testing is fun' before(function() { + // Just in case previous test failed + cy.resetTheming() cy.login(admin) }) @@ -214,29 +195,11 @@ describe('Change the login fields', function() { cy.get('footer p').should('contain.text', `– ${slogan}`) }) - it('Login again and go to the admin theming section', function() { - cy.login(admin) - cy.visit('/settings/admin/theming') - }) - - it('Undo changes', function() { - cy.intercept('*/apps/theming/ajax/undoChanges').as('undoChanges') - - cy.get('[data-admin-theming-setting-field="name"] .input-field__clear-button') - .scrollIntoView().click() - cy.wait('@undoChanges') - - cy.get('[data-admin-theming-setting-field="url"] .input-field__clear-button') - .scrollIntoView().click() - cy.wait('@undoChanges') - - cy.get('[data-admin-theming-setting-field="slogan"] .input-field__clear-button') - .scrollIntoView().click() - cy.wait('@undoChanges') + it('Undo theming settings', function() { + cy.resetTheming() }) it('Check login screen changes', function() { - cy.logout() cy.visit('/') cy.get('[data-login-form-headline]').should('not.contain.text', name) @@ -246,8 +209,10 @@ describe('Change the login fields', function() { }) }) -describe('Disable user theming', function() { +describe('Disable user theming and enable it back', function() { before(function() { + // Just in case previous test failed + cy.resetTheming() cy.login(admin) }) @@ -278,25 +243,74 @@ describe('Disable user theming', function() { cy.visit('/settings/user/theming') cy.get('[data-user-theming-background-disabled]').scrollIntoView().should('be.visible') }) +}) - it('Login back as admin', function() { - cy.logout() +describe('User default option matches admin theming', function() { + let selectedColor = '' + + before(function() { + // Just in case previous test failed + cy.resetTheming() cy.login(admin) }) + after(function() { + cy.resetTheming() + }) + it('See the admin theming section', function() { cy.visit('/settings/admin/theming') cy.get('[data-admin-theming-settings]').scrollIntoView().should('be.visible') }) - it('Enable back user theming', function() { - cy.intercept('*/apps/theming/ajax/updateStylesheet').as('enableUserTheming') + it('Change the primary colour', function() { + cy.intercept('*/apps/theming/ajax/updateStylesheet').as('setColor') - cy.get('[data-admin-theming-setting-disable-user-theming]') - .scrollIntoView().should('be.visible') - cy.get('[data-admin-theming-setting-disable-user-theming] input[type="checkbox"]').uncheck({ force: true }) - cy.get('[data-admin-theming-setting-disable-user-theming] input[type="checkbox"]').should('not.be.checked') + pickRandomColor('[data-admin-theming-setting-primary-color-picker]') + .then(color => selectedColor = color) + + cy.wait('@setColor') + cy.waitUntil(() => cy.window().then((win) => { + const primary = getComputedStyle(win.document.body).getPropertyValue('--color-primary-default') + return colord(primary).isEqual(selectedColor) + })) + }) + + it('Change the default background', function() { + cy.intercept('*/apps/theming/ajax/uploadImage').as('setBackground') + + cy.fixture('image.jpg', null).as('background') + cy.get('[data-admin-theming-setting-file="background"] input[type="file"]').selectFile('@background', { force: true }) + + cy.wait('@setBackground') + cy.waitUntil(() => cy.window().then((win) => { + const currentBackgroundDefault = getComputedStyle(win.document.body).getPropertyValue('--image-background-default') + return currentBackgroundDefault.includes('/apps/theming/image/background?v=') + })) + }) + + it('Logout and check changes', function() { + cy.logout() + cy.visit('/') + + cy.waitUntil(() => validateBodyThemingCss(selectedColor, '/apps/theming/image/background?v=')) + }) + + it('Login as user', function() { + cy.createRandomUser().then((user) => { + cy.login(user) + }) + }) + + it('See the user background settings', function() { + cy.visit('/settings/user/theming') + cy.get('[data-user-theming-background-settings]').scrollIntoView().should('be.visible') + }) + + it('See the default background option selected', function() { + cy.get('[data-user-theming-background-default]').should('be.visible') + cy.get('[data-user-theming-background-default]').should('have.class', 'background--active') - cy.wait('@enableUserTheming') + cy.waitUntil(() => validateUserThemingDefaultCss(selectedColor, '/apps/theming/image/background?v=')) }) }) |