OZG-2966 OZG-3096 dont show <span> if text is missing; cleanup; format

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>()
 }

goofy-client/libs/ui/src/lib/ui/button-with-spinner/button-with-spinner.component.html

-<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>

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