inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

[AAE-17551] added backgroundImage property for header (#9058)

Browse Source 
* [AAE-17551] added backgroundImage property for header

* [AAE-17551] added test for background image

* [AAE-17551] removed some material selectors

* [AAE-17551] rebasing

* [AAE-17551] fixed unit test
This commit is contained in:
Wojciech Duda 2023-11-04 15:06:11 +01:00 committed by GitHub
parent 94fb61541c
commit a29f63cd9b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/core/src/lib/layout/components/header/header.component.html
View File

@ -1,6 +1,6 @@
<mat-toolbar <mat-toolbar
[color]="color" [color]="color"
[style.background-color]="color"> [style.background-image]="'url(' + backgroundImage + ')'">
<button <button
*ngIf="showSidenavToggle && position === 'start'" *ngIf="showSidenavToggle && position === 'start'"
id="adf-sidebar-toggle-start" id="adf-sidebar-toggle-start"

27
lib/core/src/lib/layout/components/header/header.component.spec.ts
View File

@ -35,11 +35,14 @@ describe('HeaderLayoutComponent', () => {
describe('Input parameters', () => { describe('Input parameters', () => {
beforeEach(() => { beforeEach(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
imports: [TranslateModule.forRoot(), CoreTestingModule] imports: [
TranslateModule.forRoot(),
CoreTestingModule
]
}); });
fixture = TestBed.createComponent(HeaderLayoutComponent); fixture = TestBed.createComponent(HeaderLayoutComponent);
component = fixture.componentInstance;
loader = TestbedHarnessEnvironment.loader(fixture); loader = TestbedHarnessEnvironment.loader(fixture);
component = fixture.componentInstance;
}); });
afterEach(() => { afterEach(() => {
@ -69,6 +72,15 @@ describe('HeaderLayoutComponent', () => {
expect(await host.getAttribute('ng-reflect-color')).toBe('primary'); expect(await host.getAttribute('ng-reflect-color')).toBe('primary');
}); });
it('should change background image when provided', async () => {
component.backgroundImage = '/assets/someImage.png';
fixture.detectChanges();
const toolbarHarness = await loader.getHarness(MatToolbarHarness);
const toolbar = await toolbarHarness.host();
expect(await toolbar.getCssValue('background-image')).toContain('/assets/someImage.png');
});
it('should display the img element with the expected src if a logo path is set', () => { it('should display the img element with the expected src if a logo path is set', () => {
component.logo = 'logo.png'; component.logo = 'logo.png';
fixture.detectChanges(); fixture.detectChanges();
@ -78,7 +90,7 @@ describe('HeaderLayoutComponent', () => {
expect(src).toEqual('logo.png'); expect(src).toEqual('logo.png');
}); });
it('should have custom url link set on logo when the redirectUrl is set', () => { it('should have custom url link set on logo when the redirectUrl is set', async () => {
component.redirectUrl = '/customHomePage'; component.redirectUrl = '/customHomePage';
fixture.detectChanges(); fixture.detectChanges();
@ -218,10 +230,11 @@ describe('HeaderLayoutComponent', () => {
describe('Template transclusion', () => { describe('Template transclusion', () => {
@Component({ @Component({
selector: 'adf-test-layout-header', selector: 'adf-test-layout-header',
template: `<adf-layout-header title="test" color="primary" template: `
><p>Test text</p> <adf-layout-header title="test" color="primary">
<p></p <p>Test text</p>
></adf-layout-header>` <p></p>
</adf-layout-header>`
}) })
class HeaderLayoutTesterComponent {} class HeaderLayoutTesterComponent {}

3
lib/core/src/lib/layout/components/header/header.component.ts
View File

@ -48,6 +48,9 @@ export class HeaderLayoutComponent implements OnInit {
*/ */
@Input() color: ThemePalette; @Input() color: ThemePalette;
/** Path to a background image for the header. */
@Input() backgroundImage: string;
/** /**
* Toggles whether the sidenav button will be displayed in the header * Toggles whether the sidenav button will be displayed in the header
* or not. * or not.