From 763bc95f81baed302212e7ab27218805570cc9cb Mon Sep 17 00:00:00 2001 From: Alexandre Alves Date: Fri, 12 Apr 2024 16:05:51 +0100 Subject: [PATCH 1/3] update branding mixin to handle login scenario for branding application of primary color and link color + add e2e tests --- cypress/e2e/po/components/password.po.ts | 9 ++ cypress/e2e/po/pages/login-page.po.ts | 2 +- .../pages/global-settings/branding.spec.ts | 24 ++++ shell/mixins/brand.js | 113 +++++++++++------- 4 files changed, 101 insertions(+), 47 deletions(-) diff --git a/cypress/e2e/po/components/password.po.ts b/cypress/e2e/po/components/password.po.ts index 3832d65a75b..7e784ef5202 100644 --- a/cypress/e2e/po/components/password.po.ts +++ b/cypress/e2e/po/components/password.po.ts @@ -20,4 +20,13 @@ export default class PasswordPo extends ComponentPo { return this.self() .find('input'); } + + /** + * Return the SHOW anchor element + * @returns HTML Element + */ + showBtn(): Cypress.Chainable { + return this.self() + .find('.addon a'); + } } diff --git a/cypress/e2e/po/pages/login-page.po.ts b/cypress/e2e/po/pages/login-page.po.ts index 6d9ce32a2ca..b0d6644095e 100644 --- a/cypress/e2e/po/pages/login-page.po.ts +++ b/cypress/e2e/po/pages/login-page.po.ts @@ -44,7 +44,7 @@ export class LoginPagePo extends PagePo { }); } - private submitButton(): AsyncButtonPo { + submitButton(): AsyncButtonPo { return new AsyncButtonPo('[data-testid="login-submit"]', this.self()); } diff --git a/cypress/e2e/tests/pages/global-settings/branding.spec.ts b/cypress/e2e/tests/pages/global-settings/branding.spec.ts index 74e893501a5..44a30f86a49 100644 --- a/cypress/e2e/tests/pages/global-settings/branding.spec.ts +++ b/cypress/e2e/tests/pages/global-settings/branding.spec.ts @@ -369,6 +369,18 @@ describe('Branding', { testIsolation: 'off' }, () => { expect(background).to.satisfy((b) => b.startsWith(settings.primaryColor.newRGB)); }); + // check that login page has new styles applied + // https://github.com/rancher/dashboard/issues/10788 + loginPage.goTo(); + + loginPage.submitButton().self().should('have.css', 'background').should((background: string) => { + expect(background).to.satisfy((b) => b.startsWith(settings.primaryColor.newRGB)); + }); + + cy.login(); + HomePagePo.goToAndWaitForGet(); + BrandingPagePo.navTo(); + // Reset brandingPage.primaryColorPicker().set(settings.primaryColor.original); brandingPage.primaryColorCheckbox().set(); @@ -395,6 +407,18 @@ describe('Branding', { testIsolation: 'off' }, () => { brandingPage.linkColorPicker().value().should('eq', settings.linkColor.new); brandingPage.linkColorPicker().previewColor().should('eq', settings.linkColor.newRGB); + // check that login page has new styles applied + // https://github.com/rancher/dashboard/issues/10788 + loginPage.goTo(); + + loginPage.password().showBtn().should('have.css', 'color').should((color: string) => { + expect(color).to.satisfy((b) => b.startsWith(settings.linkColor.newRGB)); + }); + + cy.login(); + HomePagePo.goToAndWaitForGet(); + BrandingPagePo.navTo(); + // Reset brandingPage.linkColorPicker().set(settings.linkColor.original); brandingPage.linkColorCheckbox().set(); diff --git a/shell/mixins/brand.js b/shell/mixins/brand.js index 021f1e4cd7d..2ef18660ee7 100644 --- a/shell/mixins/brand.js +++ b/shell/mixins/brand.js @@ -22,7 +22,7 @@ export default { // Ensure we read the settings even when we are not authenticated try { - this.globalSettings = await fetchInitialSettings(this.$store); + await fetchInitialSettings(this.$store); } catch (e) {} // Setting this up front will remove `computed` churn, and we only care that we've initialised them @@ -30,14 +30,20 @@ export default { }, data() { - return { - apps: null, globalSettings: null, haveAppsAndSettings: null - }; + return { apps: null, haveAppsAndSettings: null }; }, computed: { ...mapGetters({ loggedIn: 'auth/loggedIn' }), + // added to fix https://github.com/rancher/dashboard/issues/10788 + // because on logout the brand mixin is mounted, but then a management store reset happens + // since login view get loaded, another fetchInitialSettings get's done + // which in turn will populate again globalSettings + globalSettings() { + return this.$store.getters['management/all'](MANAGEMENT.SETTING); + }, + brand() { const setting = this.globalSettings?.find((gs) => gs.id === SETTING.BRAND); @@ -89,57 +95,72 @@ export default { }, watch: { - color(neu) { - if (neu) { - this.setCustomColor(neu); - } else { - this.removeCustomColor(); - } + color: { + handler(neu) { + if (neu) { + this.setCustomColor(neu); + } else { + this.removeCustomColor(); + } + }, + immediate: true }, - linkColor(neu) { - if (neu) { - this.setCustomColor(neu, 'link'); - } else { - this.removeCustomColor('link'); - } + linkColor: { + handler(neu) { + if (neu) { + this.setCustomColor(neu, 'link'); + } else { + this.removeCustomColor('link'); + } + }, + immediate: true }, - theme() { - if (this.color) { - this.setCustomColor(this.color); - } - if (this.linkColor) { - this.setCustomColor(this.linkColor, 'link'); - } - this.setBodyClass(); + theme: { + handler() { + if (this.color) { + this.setCustomColor(this.color); + } + if (this.linkColor) { + this.setCustomColor(this.linkColor, 'link'); + } + this.setBodyClass(); + }, + immediate: true }, - cspAdapter(neu) { - if (!this.canCalcCspAdapter) { - return; - } - - // The brand setting will only get updated if... - if (neu && !this.brand) { - // 1) There should be a brand... but there's no brand setting - const brandSetting = this.globalSettings?.find((gs) => gs.id === SETTING.BRAND); + cspAdapter: { + handler(neu) { + if (!this.canCalcCspAdapter) { + return; + } - if (brandSetting) { - brandSetting.value = 'csp'; - brandSetting.save(); - } else { - const schema = this.$store.getters['management/schemaFor'](MANAGEMENT.SETTING); - const url = schema?.linkFor('collection'); + // The brand setting will only get updated if... + if (neu && !this.brand) { + // 1) There should be a brand... but there's no brand setting + const brandSetting = this.globalSettings?.find((gs) => gs.id === SETTING.BRAND); - if (url) { - this.$store.dispatch('management/create', { - type: MANAGEMENT.SETTING, metadata: { name: SETTING.BRAND }, value: 'csp', default: '' - }).then((setting) => setting.save()); + if (brandSetting) { + brandSetting.value = 'csp'; + brandSetting.save(); + } else { + const schema = this.$store.getters['management/schemaFor'](MANAGEMENT.SETTING); + const url = schema?.linkFor('collection'); + + if (url) { + this.$store.dispatch('management/create', { + type: MANAGEMENT.SETTING, metadata: { name: SETTING.BRAND }, value: 'csp', default: '' + }).then((setting) => setting.save()); + } } } - } + }, + immediate: true }, - brand() { - this.setBodyClass(); + brand: { + handler() { + this.setBodyClass(); + }, + immediate: true } }, From 7c1abd7cb4b46bdb63d40de5e7de5fde87957f69 Mon Sep 17 00:00:00 2001 From: Alexandre Alves Date: Mon, 15 Apr 2024 14:47:14 +0100 Subject: [PATCH 2/3] extend e2e test to cover login reload scenario --- .../pages/global-settings/branding.spec.ts | 630 +++++++++--------- 1 file changed, 322 insertions(+), 308 deletions(-) diff --git a/cypress/e2e/tests/pages/global-settings/branding.spec.ts b/cypress/e2e/tests/pages/global-settings/branding.spec.ts index 44a30f86a49..19755dd3662 100644 --- a/cypress/e2e/tests/pages/global-settings/branding.spec.ts +++ b/cypress/e2e/tests/pages/global-settings/branding.spec.ts @@ -34,314 +34,314 @@ describe('Branding', { testIsolation: 'off' }, () => { homePage.goTo(); }); - it('Can navigate to Branding Page', { tags: ['@globalSettings', '@adminUser', '@standardUser'] }, () => { - const productMenu = new ProductNavPo(); + // it('Can navigate to Branding Page', { tags: ['@globalSettings', '@adminUser', '@standardUser'] }, () => { + // const productMenu = new ProductNavPo(); - BurgerMenuPo.toggle(); + // BurgerMenuPo.toggle(); - const globalSettingsNavItem = burgerMenu.links().contains(`Global Settings`); + // const globalSettingsNavItem = burgerMenu.links().contains(`Global Settings`); - globalSettingsNavItem.should('exist'); - globalSettingsNavItem.click(); - const settingsPage = new SettingsPagePo('_'); + // globalSettingsNavItem.should('exist'); + // globalSettingsNavItem.click(); + // const settingsPage = new SettingsPagePo('_'); - settingsPage.waitForPageWithClusterId(); + // settingsPage.waitForPageWithClusterId(); - // check if burguer menu nav is highlighted correctly for Global Settings - BurgerMenuPo.checkIfMenuItemLinkIsHighlighted('Global Settings'); + // // check if burguer menu nav is highlighted correctly for Global Settings + // BurgerMenuPo.checkIfMenuItemLinkIsHighlighted('Global Settings'); - const brandingNavItem = productMenu.visibleNavTypes().contains('Branding'); + // const brandingNavItem = productMenu.visibleNavTypes().contains('Branding'); - brandingNavItem.should('exist'); - brandingNavItem.click(); + // brandingNavItem.should('exist'); + // brandingNavItem.click(); - brandingPage.waitForPageWithClusterId(); - }); - - it('Private Label', { tags: ['@globalSettings', '@adminUser'] }, () => { - const brandingPage = new BrandingPagePo(); - - BrandingPagePo.navTo(); - - // Set - cy.title().should('not.eq', settings.privateLabel.new); - brandingPage.privateLabel().set(settings.privateLabel.new); - brandingPage.applyAndWait('**/ui-pl', 200); - - // Visit the Home Page - BurgerMenuPo.toggle(); - const burgerMenuPo = new BurgerMenuPo(); - - burgerMenuPo.home().click(); - - homePage.title().should('eq', `Welcome to ${ settings.privateLabel.new }`); - - // Check in session - cy.title().should('eq', settings.privateLabel.new); - - // Check over reload - cy.reload(); - cy.title().should('eq', settings.privateLabel.new); - - BrandingPagePo.navTo(); - - // Reset - brandingPage.privateLabel().set(settings.privateLabel.original); - brandingPage.applyAndWait('**/ui-pl', 200); - BurgerMenuPo.toggle(); - burgerMenuPo.home().click(); - cy.title().should('eq', settings.privateLabel.original); - }); - - it('Logo', { tags: ['@globalSettings', '@adminUser'] }, () => { - const prefPage = new PreferencesPagePo(); - - BrandingPagePo.navTo(); - brandingPage.customLogoCheckbox().set(); - // to check custom box element width and height in order to prevent regression - // https://github.com/rancher/dashboard/issues/10000 - brandingPage.customLogoCheckbox().hasAppropriateWidth(); - brandingPage.customLogoCheckbox().hasAppropriateHeight(); - - // Upload Light Logo - brandingPage.uploadButton('Upload Light Logo') - .selectFile('cypress/e2e/blueprints/branding/logos/rancher-color.svg', { force: true }); - - // Upload Dark Logo - brandingPage.uploadButton('Upload Dark Logo') - .selectFile('cypress/e2e/blueprints/branding/logos/rancher-white.svg', { force: true }); - - // Apply - brandingPage.applyAndWait('/v1/management.cattle.io.settings/ui-logo-light', 200); - - // Logo Preview - brandingPage.logoPreview('dark').scrollIntoView().should('be.visible'); - brandingPage.logoPreview('light').scrollIntoView().should('be.visible'); - - // Set dashboard theme to Dark and check top-level navigation header for updated logo in dark mode - PreferencesPagePo.navTo(); - prefPage.themeButtons().checkVisible(); - cy.intercept('PUT', 'v1/userpreferences/*').as('prefUpdateDark'); - prefPage.themeButtons().set('Dark'); - cy.wait('@prefUpdateDark').then(({ request, response }) => { - expect(response?.statusCode).to.eq(200); - expect(request.body.data).to.have.property('theme', '"ui-dark"'); - expect(response?.body.data).to.have.property('theme', '"ui-dark"'); - }); - - cy.fixture('branding/logos/rancher-white.svg', 'base64').then((expectedBase64) => { - burgerMenu.headerBrandLogoImage().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); - - BurgerMenuPo.toggle(); - burgerMenu.brandLogoImage().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); - BurgerMenuPo.toggle(); - }); - // Set dashboard theme to Light and check top-level navigation header for updated logo in light mode - PreferencesPagePo.navTo(); - prefPage.themeButtons().checkVisible(); - cy.intercept('PUT', 'v1/userpreferences/*').as('prefUpdateLight'); - prefPage.themeButtons().set('Light'); - cy.wait('@prefUpdateLight').then(({ request, response }) => { - expect(response?.statusCode).to.eq(200); - expect(request.body.data).to.have.property('theme', '"ui-light"'); - expect(response?.body.data).to.have.property('theme', '"ui-light"'); - }); - - cy.fixture('branding/logos/rancher-color.svg', 'base64').then((expectedBase64) => { - burgerMenu.headerBrandLogoImage().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); - - BurgerMenuPo.toggle(); - burgerMenu.brandLogoImage().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); - }); - - // Reset - BrandingPagePo.navTo(); - brandingPage.customLogoCheckbox().set(); - brandingPage.applyAndWait('/v1/management.cattle.io.settings/ui-logo-light', 200); - - HomePagePo.navTo(); - burgerMenu.headerBrandLogoImage().should('be.visible').then((el) => { - expect(el).to.have.attr('src').includes('/img/rancher-logo.66cf5910.svg'); - }); - - BurgerMenuPo.toggle(); - burgerMenu.brandLogoImage().should('be.visible').then((el) => { - expect(el).to.have.attr('src').includes('/img/rancher-logo.66cf5910.svg'); - }); - }); - - it('Banner', { tags: ['@globalSettings', '@adminUser'] }, () => { - const prefPage = new PreferencesPagePo(); - - BrandingPagePo.navTo(); - brandingPage.customBannerCheckbox().set(); - brandingPage.customBannerCheckbox().hasAppropriateWidth(); - brandingPage.customBannerCheckbox().hasAppropriateHeight(); - - // Upload Light Banner - brandingPage.uploadButton('Upload Light Banner') - .selectFile('cypress/e2e/blueprints/branding/banners/banner-light.svg', { force: true }); - - // Upload Dark Banner - brandingPage.uploadButton('Upload Dark Banner') - .selectFile('cypress/e2e/blueprints/branding/banners/banner-dark.svg', { force: true }); - - // Apply - brandingPage.applyAndWait('/v1/management.cattle.io.settings/ui-banner-light', 200); - - // Banner Preview - brandingPage.bannerPreview('dark').scrollIntoView().should('be.visible'); - brandingPage.bannerPreview('light').scrollIntoView().should('be.visible'); - - // Set dashboard theme to Light and check homepage for updated banner in dark mode - PreferencesPagePo.navTo(); - prefPage.themeButtons().checkVisible(); - cy.intercept('PUT', 'v1/userpreferences/*').as('prefUpdateDark'); - prefPage.themeButtons().set('Dark'); - cy.wait('@prefUpdateDark').then(({ request, response }) => { - expect(response?.statusCode).to.eq(200); - expect(request.body.data).to.have.property('theme', '"ui-dark"'); - expect(response?.body.data).to.have.property('theme', '"ui-dark"'); - }); - - cy.fixture('branding/banners/banner-dark.svg', 'base64').then((expectedBase64) => { - homePage.goTo(); - homePage.getBrandBannerImage().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); - }); - - // Set dashboard theme to Light and check homepage for updated banner in light mode - PreferencesPagePo.navTo(); - prefPage.themeButtons().checkVisible(); - cy.intercept('PUT', 'v1/userpreferences/*').as('prefUpdateLight'); - prefPage.themeButtons().set('Light'); - cy.wait('@prefUpdateLight').then(({ request, response }) => { - expect(response?.statusCode).to.eq(200); - expect(request.body.data).to.have.property('theme', '"ui-light"'); - expect(response?.body.data).to.have.property('theme', '"ui-light"'); - }); - - cy.fixture('branding/banners/banner-light.svg', 'base64').then((expectedBase64) => { - homePage.goTo(); - homePage.getBrandBannerImage().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); - }); - - // Reset - BrandingPagePo.navTo(); - brandingPage.customBannerCheckbox().set(); - brandingPage.applyAndWait('/v1/management.cattle.io.settings/ui-banner-light', 200); - - homePage.goTo(); - homePage.getBrandBannerImage().should('be.visible').then((el) => { - expect(el).to.have.attr('src').includes('/img/banner.b321f7eb.svg'); - }); - }); - - it('Login Background', { tags: ['@globalSettings', '@adminUser'] }, () => { - const prefPage = new PreferencesPagePo(); - - BrandingPagePo.navTo(); - - brandingPage.customLoginBackgroundCheckbox().set(); - brandingPage.customLoginBackgroundCheckbox().hasAppropriateWidth(); - brandingPage.customLoginBackgroundCheckbox().hasAppropriateHeight(); - - // Upload Light Background - brandingPage.uploadButton('Upload Light Background') - .selectFile('cypress/e2e/blueprints/branding/backgrounds/login-landscape-light.svg', { force: true }); - - // Upload Dark Background - brandingPage.uploadButton('Upload Dark Background') - .selectFile('cypress/e2e/blueprints/branding/backgrounds/login-landscape-dark.svg', { force: true }); - - // Apply - brandingPage.applyAndWait('/v1/management.cattle.io.settings/ui-login-background-light', 200); - - // Banner Preview - brandingPage.loginBackgroundPreview('dark').scrollIntoView().should('be.visible'); - brandingPage.loginBackgroundPreview('light').scrollIntoView().should('be.visible'); - - // Set dashboard theme to Dark and check login page for updated background in dark mode - PreferencesPagePo.navTo(); - prefPage.themeButtons().checkVisible(); - cy.intercept('PUT', 'v1/userpreferences/*').as('prefUpdateDark'); - prefPage.themeButtons().set('Dark'); - cy.wait('@prefUpdateDark').then(({ request, response }) => { - expect(response?.statusCode).to.eq(200); - expect(request.body.data).to.have.property('theme', '"ui-dark"'); - expect(response?.body.data).to.have.property('theme', '"ui-dark"'); - }); + // brandingPage.waitForPageWithClusterId(); + // }); + + // it('Private Label', { tags: ['@globalSettings', '@adminUser'] }, () => { + // const brandingPage = new BrandingPagePo(); - cy.fixture('branding/backgrounds/login-landscape-dark.svg', 'base64').then((expectedBase64) => { - loginPage.goTo(); - loginPage.loginBackgroundImage().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); - }); + // BrandingPagePo.navTo(); + + // // Set + // cy.title().should('not.eq', settings.privateLabel.new); + // brandingPage.privateLabel().set(settings.privateLabel.new); + // brandingPage.applyAndWait('**/ui-pl', 200); + + // // Visit the Home Page + // BurgerMenuPo.toggle(); + // const burgerMenuPo = new BurgerMenuPo(); + + // burgerMenuPo.home().click(); + + // homePage.title().should('eq', `Welcome to ${ settings.privateLabel.new }`); + + // // Check in session + // cy.title().should('eq', settings.privateLabel.new); + + // // Check over reload + // cy.reload(); + // cy.title().should('eq', settings.privateLabel.new); + + // BrandingPagePo.navTo(); + + // // Reset + // brandingPage.privateLabel().set(settings.privateLabel.original); + // brandingPage.applyAndWait('**/ui-pl', 200); + // BurgerMenuPo.toggle(); + // burgerMenuPo.home().click(); + // cy.title().should('eq', settings.privateLabel.original); + // }); - cy.login(); - HomePagePo.goToAndWaitForGet(); - - // Set dashboard theme to Dark and check login page for updated background in light mode - PreferencesPagePo.navTo(); - prefPage.themeButtons().checkVisible(); - cy.intercept('PUT', 'v1/userpreferences/*').as('prefUpdateLight'); - prefPage.themeButtons().set('Light'); - cy.wait('@prefUpdateLight').then(({ request, response }) => { - expect(response?.statusCode).to.eq(200); - expect(request.body.data).to.have.property('theme', '"ui-light"'); - expect(response?.body.data).to.have.property('theme', '"ui-light"'); - }); - - cy.fixture('branding/backgrounds/login-landscape-light.svg', 'base64').then((expectedBase64) => { - loginPage.goTo(); - loginPage.loginBackgroundImage().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); - }); - - cy.login(); - HomePagePo.goToAndWaitForGet(); - - // Reset - BrandingPagePo.navTo(); - brandingPage.customLoginBackgroundCheckbox().set(); - brandingPage.applyAndWait('/v1/management.cattle.io.settings/ui-login-background-light', 200); - - loginPage.goTo(); - loginPage.loginBackgroundImage().should('be.visible').then((el) => { - expect(el).to.have.attr('src').includes('/img/login-landscape.911b980e.svg'); - }); - - cy.login(); - HomePagePo.goToAndWaitForGet(); - }); - - it('Favicon', { tags: ['@globalSettings', '@adminUser'] }, () => { - BrandingPagePo.navTo(); - brandingPage.customFaviconCheckbox().set(); - - // Upload Favicon - brandingPage.uploadButton('Upload Favicon') - .selectFile('cypress/e2e/blueprints/global/favicons/custom-favicon.svg', { force: true }); - - // Apply - cy.fixture('global/favicons/custom-favicon.svg', 'base64').then((expectedBase64) => { - brandingPage.applyAndWait('/v1/management.cattle.io.settings/ui-favicon').then(({ response, request }) => { - expect(response?.statusCode).to.eq(200); - expect(request.body).to.have.property('value', `data:image/svg+xml;base64,${ expectedBase64 }`); - expect(response?.body).to.have.property('value', `data:image/svg+xml;base64,${ expectedBase64 }`); - }); - - // Favicon Preview - brandingPage.faviconPreview().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); - - // Favicon in header - cy.get('head link[rel="shortcut icon"]').should('have.attr', 'href', `data:image/svg+xml;base64,${ expectedBase64 }`); - }); - - // Reset - brandingPage.customFaviconCheckbox().set(); - brandingPage.applyAndWait('/v1/management.cattle.io.settings/ui-favicon', 200); - cy.get('head link[rel="shortcut icon"]').then((el) => { - expect(el).attr('href').to.include('/favicon.png'); - }); - }); + // it('Logo', { tags: ['@globalSettings', '@adminUser'] }, () => { + // const prefPage = new PreferencesPagePo(); + + // BrandingPagePo.navTo(); + // brandingPage.customLogoCheckbox().set(); + // // to check custom box element width and height in order to prevent regression + // // https://github.com/rancher/dashboard/issues/10000 + // brandingPage.customLogoCheckbox().hasAppropriateWidth(); + // brandingPage.customLogoCheckbox().hasAppropriateHeight(); + + // // Upload Light Logo + // brandingPage.uploadButton('Upload Light Logo') + // .selectFile('cypress/e2e/blueprints/branding/logos/rancher-color.svg', { force: true }); + + // // Upload Dark Logo + // brandingPage.uploadButton('Upload Dark Logo') + // .selectFile('cypress/e2e/blueprints/branding/logos/rancher-white.svg', { force: true }); + + // // Apply + // brandingPage.applyAndWait('/v1/management.cattle.io.settings/ui-logo-light', 200); + + // // Logo Preview + // brandingPage.logoPreview('dark').scrollIntoView().should('be.visible'); + // brandingPage.logoPreview('light').scrollIntoView().should('be.visible'); + + // // Set dashboard theme to Dark and check top-level navigation header for updated logo in dark mode + // PreferencesPagePo.navTo(); + // prefPage.themeButtons().checkVisible(); + // cy.intercept('PUT', 'v1/userpreferences/*').as('prefUpdateDark'); + // prefPage.themeButtons().set('Dark'); + // cy.wait('@prefUpdateDark').then(({ request, response }) => { + // expect(response?.statusCode).to.eq(200); + // expect(request.body.data).to.have.property('theme', '"ui-dark"'); + // expect(response?.body.data).to.have.property('theme', '"ui-dark"'); + // }); + + // cy.fixture('branding/logos/rancher-white.svg', 'base64').then((expectedBase64) => { + // burgerMenu.headerBrandLogoImage().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); + + // BurgerMenuPo.toggle(); + // burgerMenu.brandLogoImage().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); + // BurgerMenuPo.toggle(); + // }); + // // Set dashboard theme to Light and check top-level navigation header for updated logo in light mode + // PreferencesPagePo.navTo(); + // prefPage.themeButtons().checkVisible(); + // cy.intercept('PUT', 'v1/userpreferences/*').as('prefUpdateLight'); + // prefPage.themeButtons().set('Light'); + // cy.wait('@prefUpdateLight').then(({ request, response }) => { + // expect(response?.statusCode).to.eq(200); + // expect(request.body.data).to.have.property('theme', '"ui-light"'); + // expect(response?.body.data).to.have.property('theme', '"ui-light"'); + // }); + + // cy.fixture('branding/logos/rancher-color.svg', 'base64').then((expectedBase64) => { + // burgerMenu.headerBrandLogoImage().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); + + // BurgerMenuPo.toggle(); + // burgerMenu.brandLogoImage().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); + // }); + + // // Reset + // BrandingPagePo.navTo(); + // brandingPage.customLogoCheckbox().set(); + // brandingPage.applyAndWait('/v1/management.cattle.io.settings/ui-logo-light', 200); + + // HomePagePo.navTo(); + // burgerMenu.headerBrandLogoImage().should('be.visible').then((el) => { + // expect(el).to.have.attr('src').includes('/img/rancher-logo.66cf5910.svg'); + // }); + + // BurgerMenuPo.toggle(); + // burgerMenu.brandLogoImage().should('be.visible').then((el) => { + // expect(el).to.have.attr('src').includes('/img/rancher-logo.66cf5910.svg'); + // }); + // }); + + // it('Banner', { tags: ['@globalSettings', '@adminUser'] }, () => { + // const prefPage = new PreferencesPagePo(); + + // BrandingPagePo.navTo(); + // brandingPage.customBannerCheckbox().set(); + // brandingPage.customBannerCheckbox().hasAppropriateWidth(); + // brandingPage.customBannerCheckbox().hasAppropriateHeight(); + + // // Upload Light Banner + // brandingPage.uploadButton('Upload Light Banner') + // .selectFile('cypress/e2e/blueprints/branding/banners/banner-light.svg', { force: true }); + + // // Upload Dark Banner + // brandingPage.uploadButton('Upload Dark Banner') + // .selectFile('cypress/e2e/blueprints/branding/banners/banner-dark.svg', { force: true }); + + // // Apply + // brandingPage.applyAndWait('/v1/management.cattle.io.settings/ui-banner-light', 200); + + // // Banner Preview + // brandingPage.bannerPreview('dark').scrollIntoView().should('be.visible'); + // brandingPage.bannerPreview('light').scrollIntoView().should('be.visible'); + + // // Set dashboard theme to Light and check homepage for updated banner in dark mode + // PreferencesPagePo.navTo(); + // prefPage.themeButtons().checkVisible(); + // cy.intercept('PUT', 'v1/userpreferences/*').as('prefUpdateDark'); + // prefPage.themeButtons().set('Dark'); + // cy.wait('@prefUpdateDark').then(({ request, response }) => { + // expect(response?.statusCode).to.eq(200); + // expect(request.body.data).to.have.property('theme', '"ui-dark"'); + // expect(response?.body.data).to.have.property('theme', '"ui-dark"'); + // }); + + // cy.fixture('branding/banners/banner-dark.svg', 'base64').then((expectedBase64) => { + // homePage.goTo(); + // homePage.getBrandBannerImage().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); + // }); + + // // Set dashboard theme to Light and check homepage for updated banner in light mode + // PreferencesPagePo.navTo(); + // prefPage.themeButtons().checkVisible(); + // cy.intercept('PUT', 'v1/userpreferences/*').as('prefUpdateLight'); + // prefPage.themeButtons().set('Light'); + // cy.wait('@prefUpdateLight').then(({ request, response }) => { + // expect(response?.statusCode).to.eq(200); + // expect(request.body.data).to.have.property('theme', '"ui-light"'); + // expect(response?.body.data).to.have.property('theme', '"ui-light"'); + // }); + + // cy.fixture('branding/banners/banner-light.svg', 'base64').then((expectedBase64) => { + // homePage.goTo(); + // homePage.getBrandBannerImage().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); + // }); + + // // Reset + // BrandingPagePo.navTo(); + // brandingPage.customBannerCheckbox().set(); + // brandingPage.applyAndWait('/v1/management.cattle.io.settings/ui-banner-light', 200); + + // homePage.goTo(); + // homePage.getBrandBannerImage().should('be.visible').then((el) => { + // expect(el).to.have.attr('src').includes('/img/banner.b321f7eb.svg'); + // }); + // }); + + // it('Login Background', { tags: ['@globalSettings', '@adminUser'] }, () => { + // const prefPage = new PreferencesPagePo(); + + // BrandingPagePo.navTo(); + + // brandingPage.customLoginBackgroundCheckbox().set(); + // brandingPage.customLoginBackgroundCheckbox().hasAppropriateWidth(); + // brandingPage.customLoginBackgroundCheckbox().hasAppropriateHeight(); + + // // Upload Light Background + // brandingPage.uploadButton('Upload Light Background') + // .selectFile('cypress/e2e/blueprints/branding/backgrounds/login-landscape-light.svg', { force: true }); + + // // Upload Dark Background + // brandingPage.uploadButton('Upload Dark Background') + // .selectFile('cypress/e2e/blueprints/branding/backgrounds/login-landscape-dark.svg', { force: true }); + + // // Apply + // brandingPage.applyAndWait('/v1/management.cattle.io.settings/ui-login-background-light', 200); + + // // Banner Preview + // brandingPage.loginBackgroundPreview('dark').scrollIntoView().should('be.visible'); + // brandingPage.loginBackgroundPreview('light').scrollIntoView().should('be.visible'); + + // // Set dashboard theme to Dark and check login page for updated background in dark mode + // PreferencesPagePo.navTo(); + // prefPage.themeButtons().checkVisible(); + // cy.intercept('PUT', 'v1/userpreferences/*').as('prefUpdateDark'); + // prefPage.themeButtons().set('Dark'); + // cy.wait('@prefUpdateDark').then(({ request, response }) => { + // expect(response?.statusCode).to.eq(200); + // expect(request.body.data).to.have.property('theme', '"ui-dark"'); + // expect(response?.body.data).to.have.property('theme', '"ui-dark"'); + // }); + + // cy.fixture('branding/backgrounds/login-landscape-dark.svg', 'base64').then((expectedBase64) => { + // loginPage.goTo(); + // loginPage.loginBackgroundImage().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); + // }); + + // cy.login(); + // HomePagePo.goToAndWaitForGet(); + + // // Set dashboard theme to Dark and check login page for updated background in light mode + // PreferencesPagePo.navTo(); + // prefPage.themeButtons().checkVisible(); + // cy.intercept('PUT', 'v1/userpreferences/*').as('prefUpdateLight'); + // prefPage.themeButtons().set('Light'); + // cy.wait('@prefUpdateLight').then(({ request, response }) => { + // expect(response?.statusCode).to.eq(200); + // expect(request.body.data).to.have.property('theme', '"ui-light"'); + // expect(response?.body.data).to.have.property('theme', '"ui-light"'); + // }); + + // cy.fixture('branding/backgrounds/login-landscape-light.svg', 'base64').then((expectedBase64) => { + // loginPage.goTo(); + // loginPage.loginBackgroundImage().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); + // }); + + // cy.login(); + // HomePagePo.goToAndWaitForGet(); + + // // Reset + // BrandingPagePo.navTo(); + // brandingPage.customLoginBackgroundCheckbox().set(); + // brandingPage.applyAndWait('/v1/management.cattle.io.settings/ui-login-background-light', 200); + + // loginPage.goTo(); + // loginPage.loginBackgroundImage().should('be.visible').then((el) => { + // expect(el).to.have.attr('src').includes('/img/login-landscape.911b980e.svg'); + // }); + + // cy.login(); + // HomePagePo.goToAndWaitForGet(); + // }); + + // it('Favicon', { tags: ['@globalSettings', '@adminUser'] }, () => { + // BrandingPagePo.navTo(); + // brandingPage.customFaviconCheckbox().set(); + + // // Upload Favicon + // brandingPage.uploadButton('Upload Favicon') + // .selectFile('cypress/e2e/blueprints/global/favicons/custom-favicon.svg', { force: true }); + + // // Apply + // cy.fixture('global/favicons/custom-favicon.svg', 'base64').then((expectedBase64) => { + // brandingPage.applyAndWait('/v1/management.cattle.io.settings/ui-favicon').then(({ response, request }) => { + // expect(response?.statusCode).to.eq(200); + // expect(request.body).to.have.property('value', `data:image/svg+xml;base64,${ expectedBase64 }`); + // expect(response?.body).to.have.property('value', `data:image/svg+xml;base64,${ expectedBase64 }`); + // }); + + // // Favicon Preview + // brandingPage.faviconPreview().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); + + // // Favicon in header + // cy.get('head link[rel="shortcut icon"]').should('have.attr', 'href', `data:image/svg+xml;base64,${ expectedBase64 }`); + // }); + + // // Reset + // brandingPage.customFaviconCheckbox().set(); + // brandingPage.applyAndWait('/v1/management.cattle.io.settings/ui-favicon', 200); + // cy.get('head link[rel="shortcut icon"]').then((el) => { + // expect(el).attr('href').to.include('/favicon.png'); + // }); + // }); it('Primary Color', { tags: ['@globalSettings', '@adminUser'] }, () => { const brandingPage = new BrandingPagePo(); @@ -377,6 +377,13 @@ describe('Branding', { testIsolation: 'off' }, () => { expect(background).to.satisfy((b) => b.startsWith(settings.primaryColor.newRGB)); }); + cy.reload(); + + loginPage.submitButton().self().should('have.css', 'background').should((background: string) => { + expect(background).to.satisfy((b) => b.startsWith(settings.primaryColor.newRGB)); + }); + // EO test https://github.com/rancher/dashboard/issues/10788 + cy.login(); HomePagePo.goToAndWaitForGet(); BrandingPagePo.navTo(); @@ -415,6 +422,13 @@ describe('Branding', { testIsolation: 'off' }, () => { expect(color).to.satisfy((b) => b.startsWith(settings.linkColor.newRGB)); }); + cy.reload(); + + loginPage.password().showBtn().should('have.css', 'color').should((color: string) => { + expect(color).to.satisfy((b) => b.startsWith(settings.linkColor.newRGB)); + }); + // EO test https://github.com/rancher/dashboard/issues/10788 + cy.login(); HomePagePo.goToAndWaitForGet(); BrandingPagePo.navTo(); @@ -425,14 +439,14 @@ describe('Branding', { testIsolation: 'off' }, () => { brandingPage.applyAndWait('**/ui-link-color', 200); }); - it('standard user has only read access to Branding page', { tags: ['@globalSettings', '@standardUser'] }, () => { - // verify action buttons/checkboxes etc. are disabled/hidden for standard user - BrandingPagePo.navTo(); - brandingPage.privateLabel().self().should('be.disabled'); - brandingPage.customLogoCheckbox().isDisabled(); - brandingPage.customFaviconCheckbox().isDisabled(); - brandingPage.primaryColorCheckbox().isDisabled(); - brandingPage.linkColorCheckbox().isDisabled(); - brandingPage.applyButton().checkNotExists(); - }); + // it('standard user has only read access to Branding page', { tags: ['@globalSettings', '@standardUser'] }, () => { + // // verify action buttons/checkboxes etc. are disabled/hidden for standard user + // BrandingPagePo.navTo(); + // brandingPage.privateLabel().self().should('be.disabled'); + // brandingPage.customLogoCheckbox().isDisabled(); + // brandingPage.customFaviconCheckbox().isDisabled(); + // brandingPage.primaryColorCheckbox().isDisabled(); + // brandingPage.linkColorCheckbox().isDisabled(); + // brandingPage.applyButton().checkNotExists(); + // }); }); From 7473c2bfccb4cc92954f986b4a072ad28d0bfe59 Mon Sep 17 00:00:00 2001 From: Alexandre Alves Date: Mon, 15 Apr 2024 15:09:34 +0100 Subject: [PATCH 3/3] uncomment tests --- .../pages/global-settings/branding.spec.ts | 616 +++++++++--------- 1 file changed, 308 insertions(+), 308 deletions(-) diff --git a/cypress/e2e/tests/pages/global-settings/branding.spec.ts b/cypress/e2e/tests/pages/global-settings/branding.spec.ts index 19755dd3662..fd4b9b97ea7 100644 --- a/cypress/e2e/tests/pages/global-settings/branding.spec.ts +++ b/cypress/e2e/tests/pages/global-settings/branding.spec.ts @@ -34,314 +34,314 @@ describe('Branding', { testIsolation: 'off' }, () => { homePage.goTo(); }); - // it('Can navigate to Branding Page', { tags: ['@globalSettings', '@adminUser', '@standardUser'] }, () => { - // const productMenu = new ProductNavPo(); + it('Can navigate to Branding Page', { tags: ['@globalSettings', '@adminUser', '@standardUser'] }, () => { + const productMenu = new ProductNavPo(); - // BurgerMenuPo.toggle(); + BurgerMenuPo.toggle(); - // const globalSettingsNavItem = burgerMenu.links().contains(`Global Settings`); + const globalSettingsNavItem = burgerMenu.links().contains(`Global Settings`); - // globalSettingsNavItem.should('exist'); - // globalSettingsNavItem.click(); - // const settingsPage = new SettingsPagePo('_'); + globalSettingsNavItem.should('exist'); + globalSettingsNavItem.click(); + const settingsPage = new SettingsPagePo('_'); - // settingsPage.waitForPageWithClusterId(); + settingsPage.waitForPageWithClusterId(); - // // check if burguer menu nav is highlighted correctly for Global Settings - // BurgerMenuPo.checkIfMenuItemLinkIsHighlighted('Global Settings'); + // check if burguer menu nav is highlighted correctly for Global Settings + BurgerMenuPo.checkIfMenuItemLinkIsHighlighted('Global Settings'); - // const brandingNavItem = productMenu.visibleNavTypes().contains('Branding'); + const brandingNavItem = productMenu.visibleNavTypes().contains('Branding'); - // brandingNavItem.should('exist'); - // brandingNavItem.click(); + brandingNavItem.should('exist'); + brandingNavItem.click(); - // brandingPage.waitForPageWithClusterId(); - // }); - - // it('Private Label', { tags: ['@globalSettings', '@adminUser'] }, () => { - // const brandingPage = new BrandingPagePo(); + brandingPage.waitForPageWithClusterId(); + }); + + it('Private Label', { tags: ['@globalSettings', '@adminUser'] }, () => { + const brandingPage = new BrandingPagePo(); + + BrandingPagePo.navTo(); + + // Set + cy.title().should('not.eq', settings.privateLabel.new); + brandingPage.privateLabel().set(settings.privateLabel.new); + brandingPage.applyAndWait('**/ui-pl', 200); + + // Visit the Home Page + BurgerMenuPo.toggle(); + const burgerMenuPo = new BurgerMenuPo(); + + burgerMenuPo.home().click(); + + homePage.title().should('eq', `Welcome to ${ settings.privateLabel.new }`); + + // Check in session + cy.title().should('eq', settings.privateLabel.new); + + // Check over reload + cy.reload(); + cy.title().should('eq', settings.privateLabel.new); + + BrandingPagePo.navTo(); + + // Reset + brandingPage.privateLabel().set(settings.privateLabel.original); + brandingPage.applyAndWait('**/ui-pl', 200); + BurgerMenuPo.toggle(); + burgerMenuPo.home().click(); + cy.title().should('eq', settings.privateLabel.original); + }); + + it('Logo', { tags: ['@globalSettings', '@adminUser'] }, () => { + const prefPage = new PreferencesPagePo(); + + BrandingPagePo.navTo(); + brandingPage.customLogoCheckbox().set(); + // to check custom box element width and height in order to prevent regression + // https://github.com/rancher/dashboard/issues/10000 + brandingPage.customLogoCheckbox().hasAppropriateWidth(); + brandingPage.customLogoCheckbox().hasAppropriateHeight(); + + // Upload Light Logo + brandingPage.uploadButton('Upload Light Logo') + .selectFile('cypress/e2e/blueprints/branding/logos/rancher-color.svg', { force: true }); + + // Upload Dark Logo + brandingPage.uploadButton('Upload Dark Logo') + .selectFile('cypress/e2e/blueprints/branding/logos/rancher-white.svg', { force: true }); + + // Apply + brandingPage.applyAndWait('/v1/management.cattle.io.settings/ui-logo-light', 200); + + // Logo Preview + brandingPage.logoPreview('dark').scrollIntoView().should('be.visible'); + brandingPage.logoPreview('light').scrollIntoView().should('be.visible'); + + // Set dashboard theme to Dark and check top-level navigation header for updated logo in dark mode + PreferencesPagePo.navTo(); + prefPage.themeButtons().checkVisible(); + cy.intercept('PUT', 'v1/userpreferences/*').as('prefUpdateDark'); + prefPage.themeButtons().set('Dark'); + cy.wait('@prefUpdateDark').then(({ request, response }) => { + expect(response?.statusCode).to.eq(200); + expect(request.body.data).to.have.property('theme', '"ui-dark"'); + expect(response?.body.data).to.have.property('theme', '"ui-dark"'); + }); + + cy.fixture('branding/logos/rancher-white.svg', 'base64').then((expectedBase64) => { + burgerMenu.headerBrandLogoImage().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); + + BurgerMenuPo.toggle(); + burgerMenu.brandLogoImage().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); + BurgerMenuPo.toggle(); + }); + // Set dashboard theme to Light and check top-level navigation header for updated logo in light mode + PreferencesPagePo.navTo(); + prefPage.themeButtons().checkVisible(); + cy.intercept('PUT', 'v1/userpreferences/*').as('prefUpdateLight'); + prefPage.themeButtons().set('Light'); + cy.wait('@prefUpdateLight').then(({ request, response }) => { + expect(response?.statusCode).to.eq(200); + expect(request.body.data).to.have.property('theme', '"ui-light"'); + expect(response?.body.data).to.have.property('theme', '"ui-light"'); + }); + + cy.fixture('branding/logos/rancher-color.svg', 'base64').then((expectedBase64) => { + burgerMenu.headerBrandLogoImage().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); + + BurgerMenuPo.toggle(); + burgerMenu.brandLogoImage().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); + }); + + // Reset + BrandingPagePo.navTo(); + brandingPage.customLogoCheckbox().set(); + brandingPage.applyAndWait('/v1/management.cattle.io.settings/ui-logo-light', 200); + + HomePagePo.navTo(); + burgerMenu.headerBrandLogoImage().should('be.visible').then((el) => { + expect(el).to.have.attr('src').includes('/img/rancher-logo.66cf5910.svg'); + }); + + BurgerMenuPo.toggle(); + burgerMenu.brandLogoImage().should('be.visible').then((el) => { + expect(el).to.have.attr('src').includes('/img/rancher-logo.66cf5910.svg'); + }); + }); + + it('Banner', { tags: ['@globalSettings', '@adminUser'] }, () => { + const prefPage = new PreferencesPagePo(); + + BrandingPagePo.navTo(); + brandingPage.customBannerCheckbox().set(); + brandingPage.customBannerCheckbox().hasAppropriateWidth(); + brandingPage.customBannerCheckbox().hasAppropriateHeight(); + + // Upload Light Banner + brandingPage.uploadButton('Upload Light Banner') + .selectFile('cypress/e2e/blueprints/branding/banners/banner-light.svg', { force: true }); + + // Upload Dark Banner + brandingPage.uploadButton('Upload Dark Banner') + .selectFile('cypress/e2e/blueprints/branding/banners/banner-dark.svg', { force: true }); + + // Apply + brandingPage.applyAndWait('/v1/management.cattle.io.settings/ui-banner-light', 200); + + // Banner Preview + brandingPage.bannerPreview('dark').scrollIntoView().should('be.visible'); + brandingPage.bannerPreview('light').scrollIntoView().should('be.visible'); + + // Set dashboard theme to Light and check homepage for updated banner in dark mode + PreferencesPagePo.navTo(); + prefPage.themeButtons().checkVisible(); + cy.intercept('PUT', 'v1/userpreferences/*').as('prefUpdateDark'); + prefPage.themeButtons().set('Dark'); + cy.wait('@prefUpdateDark').then(({ request, response }) => { + expect(response?.statusCode).to.eq(200); + expect(request.body.data).to.have.property('theme', '"ui-dark"'); + expect(response?.body.data).to.have.property('theme', '"ui-dark"'); + }); + + cy.fixture('branding/banners/banner-dark.svg', 'base64').then((expectedBase64) => { + homePage.goTo(); + homePage.getBrandBannerImage().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); + }); + + // Set dashboard theme to Light and check homepage for updated banner in light mode + PreferencesPagePo.navTo(); + prefPage.themeButtons().checkVisible(); + cy.intercept('PUT', 'v1/userpreferences/*').as('prefUpdateLight'); + prefPage.themeButtons().set('Light'); + cy.wait('@prefUpdateLight').then(({ request, response }) => { + expect(response?.statusCode).to.eq(200); + expect(request.body.data).to.have.property('theme', '"ui-light"'); + expect(response?.body.data).to.have.property('theme', '"ui-light"'); + }); - // BrandingPagePo.navTo(); - - // // Set - // cy.title().should('not.eq', settings.privateLabel.new); - // brandingPage.privateLabel().set(settings.privateLabel.new); - // brandingPage.applyAndWait('**/ui-pl', 200); - - // // Visit the Home Page - // BurgerMenuPo.toggle(); - // const burgerMenuPo = new BurgerMenuPo(); - - // burgerMenuPo.home().click(); - - // homePage.title().should('eq', `Welcome to ${ settings.privateLabel.new }`); - - // // Check in session - // cy.title().should('eq', settings.privateLabel.new); - - // // Check over reload - // cy.reload(); - // cy.title().should('eq', settings.privateLabel.new); - - // BrandingPagePo.navTo(); - - // // Reset - // brandingPage.privateLabel().set(settings.privateLabel.original); - // brandingPage.applyAndWait('**/ui-pl', 200); - // BurgerMenuPo.toggle(); - // burgerMenuPo.home().click(); - // cy.title().should('eq', settings.privateLabel.original); - // }); + cy.fixture('branding/banners/banner-light.svg', 'base64').then((expectedBase64) => { + homePage.goTo(); + homePage.getBrandBannerImage().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); + }); + + // Reset + BrandingPagePo.navTo(); + brandingPage.customBannerCheckbox().set(); + brandingPage.applyAndWait('/v1/management.cattle.io.settings/ui-banner-light', 200); + + homePage.goTo(); + homePage.getBrandBannerImage().should('be.visible').then((el) => { + expect(el).to.have.attr('src').includes('/img/banner.b321f7eb.svg'); + }); + }); + + it('Login Background', { tags: ['@globalSettings', '@adminUser'] }, () => { + const prefPage = new PreferencesPagePo(); + + BrandingPagePo.navTo(); + + brandingPage.customLoginBackgroundCheckbox().set(); + brandingPage.customLoginBackgroundCheckbox().hasAppropriateWidth(); + brandingPage.customLoginBackgroundCheckbox().hasAppropriateHeight(); + + // Upload Light Background + brandingPage.uploadButton('Upload Light Background') + .selectFile('cypress/e2e/blueprints/branding/backgrounds/login-landscape-light.svg', { force: true }); + + // Upload Dark Background + brandingPage.uploadButton('Upload Dark Background') + .selectFile('cypress/e2e/blueprints/branding/backgrounds/login-landscape-dark.svg', { force: true }); + + // Apply + brandingPage.applyAndWait('/v1/management.cattle.io.settings/ui-login-background-light', 200); + + // Banner Preview + brandingPage.loginBackgroundPreview('dark').scrollIntoView().should('be.visible'); + brandingPage.loginBackgroundPreview('light').scrollIntoView().should('be.visible'); + + // Set dashboard theme to Dark and check login page for updated background in dark mode + PreferencesPagePo.navTo(); + prefPage.themeButtons().checkVisible(); + cy.intercept('PUT', 'v1/userpreferences/*').as('prefUpdateDark'); + prefPage.themeButtons().set('Dark'); + cy.wait('@prefUpdateDark').then(({ request, response }) => { + expect(response?.statusCode).to.eq(200); + expect(request.body.data).to.have.property('theme', '"ui-dark"'); + expect(response?.body.data).to.have.property('theme', '"ui-dark"'); + }); + + cy.fixture('branding/backgrounds/login-landscape-dark.svg', 'base64').then((expectedBase64) => { + loginPage.goTo(); + loginPage.loginBackgroundImage().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); + }); + + cy.login(); + HomePagePo.goToAndWaitForGet(); - // it('Logo', { tags: ['@globalSettings', '@adminUser'] }, () => { - // const prefPage = new PreferencesPagePo(); - - // BrandingPagePo.navTo(); - // brandingPage.customLogoCheckbox().set(); - // // to check custom box element width and height in order to prevent regression - // // https://github.com/rancher/dashboard/issues/10000 - // brandingPage.customLogoCheckbox().hasAppropriateWidth(); - // brandingPage.customLogoCheckbox().hasAppropriateHeight(); - - // // Upload Light Logo - // brandingPage.uploadButton('Upload Light Logo') - // .selectFile('cypress/e2e/blueprints/branding/logos/rancher-color.svg', { force: true }); - - // // Upload Dark Logo - // brandingPage.uploadButton('Upload Dark Logo') - // .selectFile('cypress/e2e/blueprints/branding/logos/rancher-white.svg', { force: true }); - - // // Apply - // brandingPage.applyAndWait('/v1/management.cattle.io.settings/ui-logo-light', 200); - - // // Logo Preview - // brandingPage.logoPreview('dark').scrollIntoView().should('be.visible'); - // brandingPage.logoPreview('light').scrollIntoView().should('be.visible'); - - // // Set dashboard theme to Dark and check top-level navigation header for updated logo in dark mode - // PreferencesPagePo.navTo(); - // prefPage.themeButtons().checkVisible(); - // cy.intercept('PUT', 'v1/userpreferences/*').as('prefUpdateDark'); - // prefPage.themeButtons().set('Dark'); - // cy.wait('@prefUpdateDark').then(({ request, response }) => { - // expect(response?.statusCode).to.eq(200); - // expect(request.body.data).to.have.property('theme', '"ui-dark"'); - // expect(response?.body.data).to.have.property('theme', '"ui-dark"'); - // }); - - // cy.fixture('branding/logos/rancher-white.svg', 'base64').then((expectedBase64) => { - // burgerMenu.headerBrandLogoImage().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); - - // BurgerMenuPo.toggle(); - // burgerMenu.brandLogoImage().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); - // BurgerMenuPo.toggle(); - // }); - // // Set dashboard theme to Light and check top-level navigation header for updated logo in light mode - // PreferencesPagePo.navTo(); - // prefPage.themeButtons().checkVisible(); - // cy.intercept('PUT', 'v1/userpreferences/*').as('prefUpdateLight'); - // prefPage.themeButtons().set('Light'); - // cy.wait('@prefUpdateLight').then(({ request, response }) => { - // expect(response?.statusCode).to.eq(200); - // expect(request.body.data).to.have.property('theme', '"ui-light"'); - // expect(response?.body.data).to.have.property('theme', '"ui-light"'); - // }); - - // cy.fixture('branding/logos/rancher-color.svg', 'base64').then((expectedBase64) => { - // burgerMenu.headerBrandLogoImage().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); - - // BurgerMenuPo.toggle(); - // burgerMenu.brandLogoImage().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); - // }); - - // // Reset - // BrandingPagePo.navTo(); - // brandingPage.customLogoCheckbox().set(); - // brandingPage.applyAndWait('/v1/management.cattle.io.settings/ui-logo-light', 200); - - // HomePagePo.navTo(); - // burgerMenu.headerBrandLogoImage().should('be.visible').then((el) => { - // expect(el).to.have.attr('src').includes('/img/rancher-logo.66cf5910.svg'); - // }); - - // BurgerMenuPo.toggle(); - // burgerMenu.brandLogoImage().should('be.visible').then((el) => { - // expect(el).to.have.attr('src').includes('/img/rancher-logo.66cf5910.svg'); - // }); - // }); - - // it('Banner', { tags: ['@globalSettings', '@adminUser'] }, () => { - // const prefPage = new PreferencesPagePo(); - - // BrandingPagePo.navTo(); - // brandingPage.customBannerCheckbox().set(); - // brandingPage.customBannerCheckbox().hasAppropriateWidth(); - // brandingPage.customBannerCheckbox().hasAppropriateHeight(); - - // // Upload Light Banner - // brandingPage.uploadButton('Upload Light Banner') - // .selectFile('cypress/e2e/blueprints/branding/banners/banner-light.svg', { force: true }); - - // // Upload Dark Banner - // brandingPage.uploadButton('Upload Dark Banner') - // .selectFile('cypress/e2e/blueprints/branding/banners/banner-dark.svg', { force: true }); - - // // Apply - // brandingPage.applyAndWait('/v1/management.cattle.io.settings/ui-banner-light', 200); - - // // Banner Preview - // brandingPage.bannerPreview('dark').scrollIntoView().should('be.visible'); - // brandingPage.bannerPreview('light').scrollIntoView().should('be.visible'); - - // // Set dashboard theme to Light and check homepage for updated banner in dark mode - // PreferencesPagePo.navTo(); - // prefPage.themeButtons().checkVisible(); - // cy.intercept('PUT', 'v1/userpreferences/*').as('prefUpdateDark'); - // prefPage.themeButtons().set('Dark'); - // cy.wait('@prefUpdateDark').then(({ request, response }) => { - // expect(response?.statusCode).to.eq(200); - // expect(request.body.data).to.have.property('theme', '"ui-dark"'); - // expect(response?.body.data).to.have.property('theme', '"ui-dark"'); - // }); - - // cy.fixture('branding/banners/banner-dark.svg', 'base64').then((expectedBase64) => { - // homePage.goTo(); - // homePage.getBrandBannerImage().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); - // }); - - // // Set dashboard theme to Light and check homepage for updated banner in light mode - // PreferencesPagePo.navTo(); - // prefPage.themeButtons().checkVisible(); - // cy.intercept('PUT', 'v1/userpreferences/*').as('prefUpdateLight'); - // prefPage.themeButtons().set('Light'); - // cy.wait('@prefUpdateLight').then(({ request, response }) => { - // expect(response?.statusCode).to.eq(200); - // expect(request.body.data).to.have.property('theme', '"ui-light"'); - // expect(response?.body.data).to.have.property('theme', '"ui-light"'); - // }); - - // cy.fixture('branding/banners/banner-light.svg', 'base64').then((expectedBase64) => { - // homePage.goTo(); - // homePage.getBrandBannerImage().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); - // }); - - // // Reset - // BrandingPagePo.navTo(); - // brandingPage.customBannerCheckbox().set(); - // brandingPage.applyAndWait('/v1/management.cattle.io.settings/ui-banner-light', 200); - - // homePage.goTo(); - // homePage.getBrandBannerImage().should('be.visible').then((el) => { - // expect(el).to.have.attr('src').includes('/img/banner.b321f7eb.svg'); - // }); - // }); - - // it('Login Background', { tags: ['@globalSettings', '@adminUser'] }, () => { - // const prefPage = new PreferencesPagePo(); - - // BrandingPagePo.navTo(); - - // brandingPage.customLoginBackgroundCheckbox().set(); - // brandingPage.customLoginBackgroundCheckbox().hasAppropriateWidth(); - // brandingPage.customLoginBackgroundCheckbox().hasAppropriateHeight(); - - // // Upload Light Background - // brandingPage.uploadButton('Upload Light Background') - // .selectFile('cypress/e2e/blueprints/branding/backgrounds/login-landscape-light.svg', { force: true }); - - // // Upload Dark Background - // brandingPage.uploadButton('Upload Dark Background') - // .selectFile('cypress/e2e/blueprints/branding/backgrounds/login-landscape-dark.svg', { force: true }); - - // // Apply - // brandingPage.applyAndWait('/v1/management.cattle.io.settings/ui-login-background-light', 200); - - // // Banner Preview - // brandingPage.loginBackgroundPreview('dark').scrollIntoView().should('be.visible'); - // brandingPage.loginBackgroundPreview('light').scrollIntoView().should('be.visible'); - - // // Set dashboard theme to Dark and check login page for updated background in dark mode - // PreferencesPagePo.navTo(); - // prefPage.themeButtons().checkVisible(); - // cy.intercept('PUT', 'v1/userpreferences/*').as('prefUpdateDark'); - // prefPage.themeButtons().set('Dark'); - // cy.wait('@prefUpdateDark').then(({ request, response }) => { - // expect(response?.statusCode).to.eq(200); - // expect(request.body.data).to.have.property('theme', '"ui-dark"'); - // expect(response?.body.data).to.have.property('theme', '"ui-dark"'); - // }); - - // cy.fixture('branding/backgrounds/login-landscape-dark.svg', 'base64').then((expectedBase64) => { - // loginPage.goTo(); - // loginPage.loginBackgroundImage().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); - // }); - - // cy.login(); - // HomePagePo.goToAndWaitForGet(); - - // // Set dashboard theme to Dark and check login page for updated background in light mode - // PreferencesPagePo.navTo(); - // prefPage.themeButtons().checkVisible(); - // cy.intercept('PUT', 'v1/userpreferences/*').as('prefUpdateLight'); - // prefPage.themeButtons().set('Light'); - // cy.wait('@prefUpdateLight').then(({ request, response }) => { - // expect(response?.statusCode).to.eq(200); - // expect(request.body.data).to.have.property('theme', '"ui-light"'); - // expect(response?.body.data).to.have.property('theme', '"ui-light"'); - // }); - - // cy.fixture('branding/backgrounds/login-landscape-light.svg', 'base64').then((expectedBase64) => { - // loginPage.goTo(); - // loginPage.loginBackgroundImage().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); - // }); - - // cy.login(); - // HomePagePo.goToAndWaitForGet(); - - // // Reset - // BrandingPagePo.navTo(); - // brandingPage.customLoginBackgroundCheckbox().set(); - // brandingPage.applyAndWait('/v1/management.cattle.io.settings/ui-login-background-light', 200); - - // loginPage.goTo(); - // loginPage.loginBackgroundImage().should('be.visible').then((el) => { - // expect(el).to.have.attr('src').includes('/img/login-landscape.911b980e.svg'); - // }); - - // cy.login(); - // HomePagePo.goToAndWaitForGet(); - // }); - - // it('Favicon', { tags: ['@globalSettings', '@adminUser'] }, () => { - // BrandingPagePo.navTo(); - // brandingPage.customFaviconCheckbox().set(); - - // // Upload Favicon - // brandingPage.uploadButton('Upload Favicon') - // .selectFile('cypress/e2e/blueprints/global/favicons/custom-favicon.svg', { force: true }); - - // // Apply - // cy.fixture('global/favicons/custom-favicon.svg', 'base64').then((expectedBase64) => { - // brandingPage.applyAndWait('/v1/management.cattle.io.settings/ui-favicon').then(({ response, request }) => { - // expect(response?.statusCode).to.eq(200); - // expect(request.body).to.have.property('value', `data:image/svg+xml;base64,${ expectedBase64 }`); - // expect(response?.body).to.have.property('value', `data:image/svg+xml;base64,${ expectedBase64 }`); - // }); - - // // Favicon Preview - // brandingPage.faviconPreview().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); - - // // Favicon in header - // cy.get('head link[rel="shortcut icon"]').should('have.attr', 'href', `data:image/svg+xml;base64,${ expectedBase64 }`); - // }); - - // // Reset - // brandingPage.customFaviconCheckbox().set(); - // brandingPage.applyAndWait('/v1/management.cattle.io.settings/ui-favicon', 200); - // cy.get('head link[rel="shortcut icon"]').then((el) => { - // expect(el).attr('href').to.include('/favicon.png'); - // }); - // }); + // Set dashboard theme to Dark and check login page for updated background in light mode + PreferencesPagePo.navTo(); + prefPage.themeButtons().checkVisible(); + cy.intercept('PUT', 'v1/userpreferences/*').as('prefUpdateLight'); + prefPage.themeButtons().set('Light'); + cy.wait('@prefUpdateLight').then(({ request, response }) => { + expect(response?.statusCode).to.eq(200); + expect(request.body.data).to.have.property('theme', '"ui-light"'); + expect(response?.body.data).to.have.property('theme', '"ui-light"'); + }); + + cy.fixture('branding/backgrounds/login-landscape-light.svg', 'base64').then((expectedBase64) => { + loginPage.goTo(); + loginPage.loginBackgroundImage().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); + }); + + cy.login(); + HomePagePo.goToAndWaitForGet(); + + // Reset + BrandingPagePo.navTo(); + brandingPage.customLoginBackgroundCheckbox().set(); + brandingPage.applyAndWait('/v1/management.cattle.io.settings/ui-login-background-light', 200); + + loginPage.goTo(); + loginPage.loginBackgroundImage().should('be.visible').then((el) => { + expect(el).to.have.attr('src').includes('/img/login-landscape.911b980e.svg'); + }); + + cy.login(); + HomePagePo.goToAndWaitForGet(); + }); + + it('Favicon', { tags: ['@globalSettings', '@adminUser'] }, () => { + BrandingPagePo.navTo(); + brandingPage.customFaviconCheckbox().set(); + + // Upload Favicon + brandingPage.uploadButton('Upload Favicon') + .selectFile('cypress/e2e/blueprints/global/favicons/custom-favicon.svg', { force: true }); + + // Apply + cy.fixture('global/favicons/custom-favicon.svg', 'base64').then((expectedBase64) => { + brandingPage.applyAndWait('/v1/management.cattle.io.settings/ui-favicon').then(({ response, request }) => { + expect(response?.statusCode).to.eq(200); + expect(request.body).to.have.property('value', `data:image/svg+xml;base64,${ expectedBase64 }`); + expect(response?.body).to.have.property('value', `data:image/svg+xml;base64,${ expectedBase64 }`); + }); + + // Favicon Preview + brandingPage.faviconPreview().should('be.visible').and('have.attr', 'src', `data:image/svg+xml;base64,${ expectedBase64 }`); + + // Favicon in header + cy.get('head link[rel="shortcut icon"]').should('have.attr', 'href', `data:image/svg+xml;base64,${ expectedBase64 }`); + }); + + // Reset + brandingPage.customFaviconCheckbox().set(); + brandingPage.applyAndWait('/v1/management.cattle.io.settings/ui-favicon', 200); + cy.get('head link[rel="shortcut icon"]').then((el) => { + expect(el).attr('href').to.include('/favicon.png'); + }); + }); it('Primary Color', { tags: ['@globalSettings', '@adminUser'] }, () => { const brandingPage = new BrandingPagePo(); @@ -439,14 +439,14 @@ describe('Branding', { testIsolation: 'off' }, () => { brandingPage.applyAndWait('**/ui-link-color', 200); }); - // it('standard user has only read access to Branding page', { tags: ['@globalSettings', '@standardUser'] }, () => { - // // verify action buttons/checkboxes etc. are disabled/hidden for standard user - // BrandingPagePo.navTo(); - // brandingPage.privateLabel().self().should('be.disabled'); - // brandingPage.customLogoCheckbox().isDisabled(); - // brandingPage.customFaviconCheckbox().isDisabled(); - // brandingPage.primaryColorCheckbox().isDisabled(); - // brandingPage.linkColorCheckbox().isDisabled(); - // brandingPage.applyButton().checkNotExists(); - // }); + it('standard user has only read access to Branding page', { tags: ['@globalSettings', '@standardUser'] }, () => { + // verify action buttons/checkboxes etc. are disabled/hidden for standard user + BrandingPagePo.navTo(); + brandingPage.privateLabel().self().should('be.disabled'); + brandingPage.customLogoCheckbox().isDisabled(); + brandingPage.customFaviconCheckbox().isDisabled(); + brandingPage.primaryColorCheckbox().isDisabled(); + brandingPage.linkColorCheckbox().isDisabled(); + brandingPage.applyButton().checkNotExists(); + }); });