Skip to content

Commit

Permalink
Fix: Wrong backgroundColor for profile initials (#4148)
Browse files Browse the repository at this point in the history
  • Loading branch information
@JohannesDoberer
JohannesDoberer authored Feb 18, 2025
1 parent 7e8ab26 commit b266459
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 68 deletions.
2 changes: 1 addition & 1 deletion core/src/navigation/TopNav.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -600,7 +600,7 @@
/>
{:else}
<button
class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail"
class="fd-avatar fd-avatar--xs fd-avatar--circle fd-shellbar__avatar--circle"
aria-expanded="true"
aria-haspopup="true"
title={userInfo.name ? userInfo.name : undefined}
Expand Down
155 changes: 88 additions & 67 deletions test/e2e-test-application/cypress/e2e/tests/0-js-test-app/js-test-app-theming.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,8 @@ describe('JS-TEST-APP 2', () => {
it('Client get and set theme', () => {
cy.visitTestApp('/theming', newConfig);

cy.getIframeBody().then($body => {
cy.wrap($body)
.find('h2')
.contains('light');
cy.getIframeBody().then(($body) => {
cy.wrap($body).find('h2').contains('light');
});
});

Expand All @@ -49,7 +47,7 @@ describe('JS-TEST-APP 2', () => {
};
cy.visitTestApp('/', newConfig);

cy.get('iframe').should(ifr => {
cy.get('iframe').should((ifr) => {
const url = new URL(ifr.attr('src'));
expect(`${url.pathname}${url.search}${url.hash}`).to.equal(
'/examples/microfrontends/multipurpose.html?sap-theme=light'
Expand All @@ -61,14 +59,14 @@ describe('JS-TEST-APP 2', () => {
newConfig.settings.theming.nodeViewURLDecorator = {
queryStringParameter: {
keyName: 'sap-theme',
value: themeId => {
value: (themeId) => {
return themeId + 'LUIGI';
}
}
};
cy.visitTestApp('/', newConfig);

cy.get('iframe').should(ifr => {
cy.get('iframe').should((ifr) => {
const url = new URL(ifr.attr('src'));
expect(`${url.pathname}${url.search}${url.hash}`).to.equal(
'/examples/microfrontends/multipurpose.html?sap-theme=lightLUIGI'
Expand Down Expand Up @@ -123,15 +121,15 @@ describe('JS-TEST-APP 2', () => {
cy.get('[data-testid="semiCollapsibleLeftNav"]').should('have.class', 'fd-side-nav--condensed');

cy.reload();
cy.window().then(win => {
cy.window().then((win) => {
win.Luigi.setConfig(newConfig);
});
cy.get('[data-testid="semiCollapsibleLeftNav"]').should('have.class', 'fd-side-nav--condensed');
});

it('should execute Core API function collapseLeftSideNav() and open the nav', () => {
cy.visitTestApp('/', newConfig);
cy.window().then(win => {
cy.window().then((win) => {
win.Luigi.ux().collapseLeftSideNav(false);
});
cy.reload();
Expand All @@ -146,7 +144,7 @@ describe('JS-TEST-APP 2', () => {
newConfig = structuredClone(defaultLuigiConfig);
newConfig.settings.responsiveNavigation = 'Fiori3';
cy.visitTestApp('/', newConfig);
cy.window().then(win => {
cy.window().then((win) => {
win.Luigi.configChanged('settings');
});
});
Expand All @@ -162,19 +160,19 @@ describe('JS-TEST-APP 2', () => {
cy.get('[data-testid="semiCollapsibleLeftNav"]').should('have.class', 'fd-side-nav--condensed');

cy.reload();
cy.window().then(win => {
cy.window().then((win) => {
win.Luigi.setConfig(newConfig);
});
cy.get('[data-testid="semiCollapsibleLeftNav"]').should('have.class', 'fd-side-nav--condensed');
});

it('should execute Core API function collapseLeftSideNav() and open the nav in Fiori3 settings', () => {
cy.visitTestApp('/', newConfig);
cy.window().then(win => {
cy.window().then((win) => {
win.Luigi.ux().collapseLeftSideNav(false);
});
cy.reload();
cy.window().then(win => {
cy.window().then((win) => {
win.Luigi.setConfig(newConfig);
});
cy.get('[data-testid="semiCollapsibleLeftNav"]').should('not.have.class', 'fd-side-nav--condensed');
Expand Down Expand Up @@ -248,35 +246,25 @@ describe('JS-TEST-APP 2', () => {
it('User settings dialog', () => {
cy.visitTestApp('/', newConfig);
cy.get('#app[configversion="user-settings-dialog"]');
cy.window().then(win => {
cy.window().then((win) => {
win.Luigi.ux().openUserSettings();
});
cy.get('.lui-usersettings-dialog').should('be.visible');

cy.get('.lui-usersettings-left-nav .lui-us-navlist__item')
.eq(1)
.should('contain', 'Language & Region');
cy.get('.lui-usersettings-left-nav .lui-us-navlist__item')
.eq(1)
.click();
cy.get('.lui-usersettings-left-nav .lui-us-navlist__item').eq(1).should('contain', 'Language & Region');
cy.get('.lui-usersettings-left-nav .lui-us-navlist__item').eq(1).click();

cy.get('[data-testid="lui-us-enum-0"]')
.eq(0)
.click();
cy.get('[data-testid="lui-us-enum-0"]').eq(0).click();
cy.get('[data-testid="lui-us-option0_0"]').click();
cy.get('[data-testid="lui-us-input0"]').should('contain', 'Deutsch');

cy.get('[data-testid="lui-us-input0"]').click();
cy.get('[data-testid="lui-us-option0_1"]').click();
cy.get('[data-testid="lui-us-input0"]').should('contain', 'English');

cy.get('[data-testid="lui-us-enum-0"]')
.eq(0)
.click();
cy.get('[data-testid="lui-us-enum-0"]').eq(0).click();
cy.get('[data-testid="lui-us-enum-0"]').should('be.visible');
cy.get('[data-testid="lui-us-enum-0"]')
.eq(0)
.click();
cy.get('[data-testid="lui-us-enum-0"]').eq(0).click();
cy.get('[data-testid="lui-us-option0_0"]').should('not.be.visible');

cy.get('[data-testid="lui-us-dismissBtn"]').click();
Expand All @@ -286,18 +274,14 @@ describe('JS-TEST-APP 2', () => {
it('Check if external mf is loaded in custom user settings editor', () => {
cy.visitTestApp('/', newConfig);
cy.get('#app[configversion="user-settings-dialog"]');
cy.window().then(win => {
cy.window().then((win) => {
win.Luigi.ux().openUserSettings();
});

cy.get('.lui-usersettings-left-nav .lui-us-navlist__item')
.eq(2)
.should('contain', 'Theme');
cy.get('.lui-usersettings-left-nav .lui-us-navlist__item')
.eq(2)
.click();
cy.get('.lui-usersettings-left-nav .lui-us-navlist__item').eq(2).should('contain', 'Theme');
cy.get('.lui-usersettings-left-nav .lui-us-navlist__item').eq(2).click();

cy.get('.iframeUserSettingsCtn iframe').should(ifr => {
cy.get('.iframeUserSettingsCtn iframe').should((ifr) => {
expect(ifr[0].src).to.equal('http://localhost:4500/examples/microfrontends/customUserSettingsMf.html');
});
});
Expand All @@ -318,10 +302,8 @@ describe('JS-TEST-APP 2', () => {

cy.visitTestApp('/home', newConfig);
cy.get('#app[configversion="bookmarkable-mf-1"]');
cy.window().then(win => {
win.Luigi.navigation()
.withParams({ mp: 'one' })
.openAsModal('/home/one');
cy.window().then((win) => {
win.Luigi.navigation().withParams({ mp: 'one' }).openAsModal('/home/one');
});

cy.expectPathToBe('/home?mymodal=' + encodeURIComponent('/home/one?~mp=one'));
Expand All @@ -335,14 +317,12 @@ describe('JS-TEST-APP 2', () => {

cy.visitTestApp('/home', newConfig);
cy.get('#app[configversion="bookmarkable-mf-2"]');
cy.window().then(win => {
win.Luigi.navigation()
.withParams({ mp: 'one' })
.openAsModal('/home/one');
cy.window().then((win) => {
win.Luigi.navigation().withParams({ mp: 'one' }).openAsModal('/home/one');
});

cy.expectPathToBe('/home');
cy.location().should(location => {
cy.location().should((location) => {
expect(location.search).to.eq('?mymodal=' + encodeURIComponent('/home/one?~mp=one'));
});
});
Expand Down Expand Up @@ -414,7 +394,7 @@ describe('JS-TEST-APP 2', () => {
breadcrumbs.appendChild(itemCmp);
}
});
breadcrumbs.addEventListener('click', event => {
breadcrumbs.addEventListener('click', (event) => {
clickHandler(event.detail.item._item);
});
el.appendChild(breadcrumbs);
Expand Down Expand Up @@ -617,26 +597,67 @@ describe('JS-TEST-APP 2', () => {
cy.visitTestApp('/home/one', newConfig);
cy.get('#app[configversion="transferThemeVars"]');

cy.getIframeBody().then($body => {
cy.wrap($body)
.contains('ApplyCSS')
.should('have.css', 'color')
.and('eq', 'rgb(0, 0, 0)');
cy.wrap($body)
.contains('ApplyCSS')
.should('have.css', 'color')
.and('not.equal', 'rgb(255, 0, 0)');
cy.wrap($body)
.contains('ApplyCSS')
.click();
cy.wrap($body)
.contains('ApplyCSS')
.should('have.css', 'color')
.and('not.equal', 'rgb(0, 0, 0)');
cy.wrap($body)
.contains('ApplyCSS')
.should('have.css', 'color')
.and('eq', 'rgb(255, 0, 0)');
cy.getIframeBody().then(($body) => {
cy.wrap($body).contains('ApplyCSS').should('have.css', 'color').and('eq', 'rgb(0, 0, 0)');
cy.wrap($body).contains('ApplyCSS').should('have.css', 'color').and('not.equal', 'rgb(255, 0, 0)');
cy.wrap($body).contains('ApplyCSS').click();
cy.wrap($body).contains('ApplyCSS').should('have.css', 'color').and('not.equal', 'rgb(0, 0, 0)');
cy.wrap($body).contains('ApplyCSS').should('have.css', 'color').and('eq', 'rgb(255, 0, 0)');
});
});
});

describe('SAP Horizon', () => {
let newConfig;

beforeEach(() => {
newConfig = structuredClone(defaultLuigiConfig);
newConfig.tag = 'sapHorizon';
(newConfig.settings.responsiveNavigation = 'Fiori3'),
(newConfig.settings.profileType = 'Fiori3'),
(newConfig.settings.experimental = {
profileMenuFiori3: true
});
newConfig.navigation.profile = {
logout: {
label: 'Sign Out',
icon: 'sys-cancel'
},
staticUserInfoFn: () => {
return new Promise((resolve) => {
resolve({
name: 'Static User',
initials: 'LU',
email: 'other.luigi.user@example.com',
description: 'Luigi Developer'
});
});
}
};
});
it('Initials background color with sap horizon and Fiori3 with profileType Fiori3', () => {
cy.visitTestApp('/home/one', newConfig);
cy.get('#app[configversion="sapHorizon"]');
cy.get('[data-testid="luigi-topnav-profile-initials"]').then(($el) => {
const bgColor = getComputedStyle($el[0]).getPropertyValue('background-color').trim();
expect(bgColor).to.equal('rgb(40, 110, 180)');
});
cy.get('link[href="/node_modules/@luigi-project/core/luigi.css"]').then(($link) => {
if ($link.length) {
$link.remove();
}
});
cy.document().then((doc) => {
const link = doc.createElement('link');
link.rel = 'stylesheet';
link.href = '/node_modules/@luigi-project/core/luigi_horizon.css';
doc.head.appendChild(link);
});
cy.wait(500);

cy.get('[data-testid="luigi-topnav-profile-initials"]').then(($el) => {
const bgColor = getComputedStyle($el[0]).getPropertyValue('background-color').trim();
expect(bgColor).to.equal('rgb(209, 239, 255)');
});
});
});
Expand Down

0 comments on commit b266459

Please sign in to comment.