diff --git a/goofy-client/libs/navigation/src/lib/header-container/header/user-profile-in-header-container/user-profile-in-header/user-profile-in-header.component.ts b/goofy-client/libs/navigation/src/lib/header-container/header/user-profile-in-header-container/user-profile-in-header/user-profile-in-header.component.ts index 8ca0e912642b6b0619fe65e46ac909b7d3701b09..3a953927a445c1f54a013cc9de00095225a93fb2 100644 --- a/goofy-client/libs/navigation/src/lib/header-container/header/user-profile-in-header-container/user-profile-in-header/user-profile-in-header.component.ts +++ b/goofy-client/libs/navigation/src/lib/header-container/header/user-profile-in-header-container/user-profile-in-header/user-profile-in-header.component.ts @@ -8,6 +8,8 @@ import { UserProfileResource } from '@goofy-client/user-profile-shared'; styleUrls: ['./user-profile-in-header.component.scss'], }) export class UserProfileInHeaderComponent { - @Output() public logoutEmitter: EventEmitter<void> = new EventEmitter<void>() + @Input() public currentUserResource: StateResource<UserProfileResource>; + + @Output() public logoutEmitter: EventEmitter<void> = new EventEmitter<void>() } diff --git a/goofy-client/libs/ui/src/lib/ui/button-with-spinner/button-with-spinner.component.html b/goofy-client/libs/ui/src/lib/ui/button-with-spinner/button-with-spinner.component.html index feaff33377b6c954b8026dac6669d621e47ccf26..6b5698ea89fcdd5cc841fb1e2d98d3eb28641a44 100644 --- a/goofy-client/libs/ui/src/lib/ui/button-with-spinner/button-with-spinner.component.html +++ b/goofy-client/libs/ui/src/lib/ui/button-with-spinner/button-with-spinner.component.html @@ -1,33 +1,22 @@ -<button mat-stroked-button - [color]="color" - [type]="type" - [disabled]="isDisabled" - [matTooltip]="toolTip" - (click)="clickEmitter.emit($event)" - [attr.data-test-id]="dataTestId" - data-test-class="icon-button"> +<button mat-stroked-button data-test-class="icon-button" [attr.data-test-id]="dataTestId" + [color]="color" [type]="type" [disabled]="isDisabled" [matTooltip]="toolTip" + (click)="clickEmitter.emit($event)"> - <mat-icon - *ngIf="icon" - [style.visibility]="isDisabled ? 'hidden' : 'visible'" - data-test-class="icon"> + <mat-icon *ngIf="icon" data-test-class="icon" + [style.visibility]="isDisabled ? 'hidden' : 'visible'"> {{ icon }} </mat-icon> - <mat-icon - *ngIf="svgIcon" + <mat-icon *ngIf="svgIcon" data-test-class="icon" [svgIcon]="svgIcon" - [style.visibility]="isDisabled ? 'hidden' : 'visible'" - data-test-class="icon"> + [style.visibility]="isDisabled ? 'hidden' : 'visible'"> </mat-icon> - <span>{{ text }}</span> + <span *ngIf="text" data-test-class="button-with-spinner-text">{{ text }}</span> <goofy-client-spinner - [diameter]="22" - padding="0" - [stateResource]="getStateResource()" - [show]="showSpinner"> + [diameter]="22" padding="0" + [stateResource]="getStateResource()" [show]="showSpinner"> </goofy-client-spinner> </button> diff --git a/goofy-client/libs/ui/src/lib/ui/button-with-spinner/button-with-spinner.component.spec.ts b/goofy-client/libs/ui/src/lib/ui/button-with-spinner/button-with-spinner.component.spec.ts index f224951857f4023548c4af701a53e6c5fe3ec2ea..03732826a223f4d5fd6f70ad1fc337facea3d9ee 100644 --- a/goofy-client/libs/ui/src/lib/ui/button-with-spinner/button-with-spinner.component.spec.ts +++ b/goofy-client/libs/ui/src/lib/ui/button-with-spinner/button-with-spinner.component.spec.ts @@ -4,6 +4,7 @@ import { MatRipple } from '@angular/material/core'; import { MatIcon } from '@angular/material/icon'; import { MatTooltipModule } from '@angular/material/tooltip'; import { createEmptyStateResource } from '@goofy-client/tech-shared'; +import { getDataTestClassOf } from 'libs/tech-shared/test/data-test'; import { MockComponent } from 'ng-mocks'; import { SpinnerComponent } from '../spinner/spinner.component'; import { ButtonWithSpinnerComponent } from './button-with-spinner.component'; @@ -12,8 +13,9 @@ describe('ButtonWithSpinnerComponent', () => { let component: ButtonWithSpinnerComponent; let fixture: ComponentFixture<ButtonWithSpinnerComponent>; - const buttonSelector = '[data-test-class="icon-button"]' - const iconSelector = '[data-test-class="icon"]' + const buttonSelector: string = getDataTestClassOf('icon-button'); + const iconSelector: string = getDataTestClassOf('icon'); + const text: string = getDataTestClassOf('button-with-spinner-text'); beforeEach(async () => { await TestBed.configureTestingModule({ @@ -33,7 +35,6 @@ describe('ButtonWithSpinnerComponent', () => { beforeEach(() => { fixture = TestBed.createComponent(ButtonWithSpinnerComponent); component = fixture.componentInstance; - component.icon = 'add'; fixture.detectChanges(); }); @@ -42,38 +43,70 @@ describe('ButtonWithSpinnerComponent', () => { }); describe('Button', () => { + it('should NOT disabled initial', () => { - const button = fixture.nativeElement.querySelector(buttonSelector); component.stateResource = createEmptyStateResource(); fixture.detectChanges(); + const button = fixture.nativeElement.querySelector(buttonSelector); + expect(button).not.toBeDisabled() }); it('should disabled if loading', () => { - const button = fixture.nativeElement.querySelector(buttonSelector); component.stateResource = createEmptyStateResource(true); fixture.detectChanges(); + const button = fixture.nativeElement.querySelector(buttonSelector); + expect(button).toBeDisabled(); }); }) describe('Icon', () => { + + beforeEach(() => { + component.icon = 'add'; + fixture.detectChanges(); + }) + it('should visible initial', () => { - const icon = fixture.nativeElement.querySelector(iconSelector); component.stateResource = createEmptyStateResource(); fixture.detectChanges(); + const icon = fixture.nativeElement.querySelector(iconSelector); + expect(icon).toBeVisible(); }); it('should not visible if loading', () => { - const icon = fixture.nativeElement.querySelector(iconSelector); component.stateResource = createEmptyStateResource(true); fixture.detectChanges(); + const icon = fixture.nativeElement.querySelector(iconSelector); + expect(icon).not.toBeVisible(); }); }) -}); + + describe('Text', () => { + + it('should visible if exist', () => { + component.text = 'Test text'; + fixture.detectChanges(); + + const textElement = fixture.nativeElement.querySelector(text); + + expect(textElement).toBeInTheDocument(); + }); + + it('should not visible if is null', () => { + component.text = null; + fixture.detectChanges(); + + const textElement = fixture.nativeElement.querySelector(text); + + expect(textElement).not.toBeInTheDocument(); + }); + }) +}); \ No newline at end of file