From 8ff8d381cf8414cf24aea00252fd9750ce41e5b2 Mon Sep 17 00:00:00 2001 From: OZGCloud <ozgcloud@mgm-tp.com> Date: Fri, 16 Apr 2021 20:32:09 +0200 Subject: [PATCH] OZG-531 styling spinner, add test for loaded spinner --- .../src/lib/ui/spinner/spinner.component.scss | 4 ++ .../lib/ui/spinner/spinner.component.spec.ts | 46 ++++++++++++------- .../src/lib/ui/spinner/spinner.component.ts | 14 +++--- .../vorgang-redirect.component.html | 6 ++- .../vorgang-redirect.component.scss | 23 ++++------ 5 files changed, 54 insertions(+), 39 deletions(-) diff --git a/goofy-client/libs/ui/src/lib/ui/spinner/spinner.component.scss b/goofy-client/libs/ui/src/lib/ui/spinner/spinner.component.scss index 17a7465a2b..2b2b68f49b 100644 --- a/goofy-client/libs/ui/src/lib/ui/spinner/spinner.component.scss +++ b/goofy-client/libs/ui/src/lib/ui/spinner/spinner.component.scss @@ -1,3 +1,7 @@ mat-spinner { margin: auto; } + +p { + color: #999; +} diff --git a/goofy-client/libs/ui/src/lib/ui/spinner/spinner.component.spec.ts b/goofy-client/libs/ui/src/lib/ui/spinner/spinner.component.spec.ts index 28cef74951..b014925389 100644 --- a/goofy-client/libs/ui/src/lib/ui/spinner/spinner.component.spec.ts +++ b/goofy-client/libs/ui/src/lib/ui/spinner/spinner.component.spec.ts @@ -1,37 +1,28 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { MatIcon } from '@angular/material/icon'; import { MatSpinner } from '@angular/material/progress-spinner'; -import { createEmptyStateResource, StateResource } from '@goofy-client/tech-shared'; +import { createEmptyStateResource } from '@goofy-client/tech-shared'; import { SpinnerComponent } from './spinner.component'; -import { Component } from '@angular/core'; - -@Component({ - template: `<goofy-client-spinner [stateResource]="stateResource"></goofy-client-spinner>`, -}) -export class TestWrapperComponent { - stateResource: StateResource<any> = createEmptyStateResource(); -} describe('SpinnerComponent', () => { - let component: TestWrapperComponent; - let fixture: ComponentFixture<TestWrapperComponent>; + let component: SpinnerComponent; + let fixture: ComponentFixture<SpinnerComponent>; const spinnerSelector = '[data-test-class="spinner"]' beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [ SpinnerComponent, - TestWrapperComponent, MatIcon, MatSpinner - ] - }) - .compileComponents(); + ], + }).compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(TestWrapperComponent); + fixture = TestBed.createComponent(SpinnerComponent); component = fixture.componentInstance; + fixture.detectChanges(); }); @@ -58,4 +49,27 @@ describe('SpinnerComponent', () => { expect(spinner).toBeInstanceOf(HTMLElement); }); }); + + describe('loaded spinner', () => { + beforeEach(() => { + component.showWhileLoaded = true; + fixture.detectChanges(); + }) + + it('should NOT be visible if NOT loaded', () => { + const spinner = fixture.nativeElement.querySelector(spinnerSelector); + + expect(spinner).not.toBeInstanceOf(HTMLElement); + }) + + it('should be visible if loaded', () => { + component.showWhileLoaded = true; + component.stateResource = { ...createEmptyStateResource(), loaded: true }; + fixture.detectChanges(); + + const spinner = fixture.nativeElement.querySelector(spinnerSelector); + + expect(spinner).toBeInstanceOf(HTMLElement); + }); + }); }); diff --git a/goofy-client/libs/ui/src/lib/ui/spinner/spinner.component.ts b/goofy-client/libs/ui/src/lib/ui/spinner/spinner.component.ts index 3eac7ab37d..f3af5240da 100644 --- a/goofy-client/libs/ui/src/lib/ui/spinner/spinner.component.ts +++ b/goofy-client/libs/ui/src/lib/ui/spinner/spinner.component.ts @@ -6,7 +6,7 @@ import { createEmptyStateResource, StateResource } from '@goofy-client/tech-shar templateUrl: './spinner.component.html', styleUrls: ['./spinner.component.scss'] }) -export class SpinnerComponent implements OnChanges { +export class SpinnerComponent { @Input() stateResource: StateResource<any> = createEmptyStateResource(); @Input() diameter: number = 70; @@ -14,12 +14,10 @@ export class SpinnerComponent implements OnChanges { @Input() text: string; @Input() showWhileLoaded: boolean; - showSpinner: boolean; - - ngOnChanges(changes: SimpleChanges) { - if (changes.stateResource) { - if (this.showWhileLoaded) this.showSpinner = this.stateResource.loaded; - else this.showSpinner = this.stateResource.loading; - } + get showSpinner(): boolean { + console.log(this.showWhileLoaded) + if (this.showWhileLoaded) return this.stateResource.loaded && this.stateResource.resource; + return this.stateResource.loading; } } + diff --git a/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-redirect/vorgang-redirect.component.html b/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-redirect/vorgang-redirect.component.html index bec2b14d09..03407597d0 100644 --- a/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-redirect/vorgang-redirect.component.html +++ b/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-redirect/vorgang-redirect.component.html @@ -1,6 +1,10 @@ <ng-container *ngIf="redirectStateResource$ | async as redirectStateResource"> - <goofy-client-spinner [stateResource]="redirectStateResource" [showWhileLoaded]="true" text="Vorgang wird weitergeleitet"> + <goofy-client-spinner + [stateResource]="redirectStateResource" + [showWhileLoaded]="true" + padding="0" + text="Vorgang wird weitergeleitet"> <form class="form" [formGroup]="formService.form" (submit)="submit()"> <goofy-client-text-editor diff --git a/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-redirect/vorgang-redirect.component.scss b/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-redirect/vorgang-redirect.component.scss index 9a78a6e424..1e53852bad 100644 --- a/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-redirect/vorgang-redirect.component.scss +++ b/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-redirect/vorgang-redirect.component.scss @@ -1,9 +1,12 @@ +:host { + width: 100%; + max-width: 320px; + display: block; +} + .form { display: flex; flex-direction: column; - position: relative; - max-width: 320px; - width: 100%; ::ng-deep { mat-form-field { @@ -12,16 +15,8 @@ } } -.spinner { - display: inline-flex; - flex-direction: column; - align-items: center; - - .mat-spinner { - margin: 8px; - } - - p { - color: #999; +goofy-client-spinner { + ::ng-deep .spinner { + text-align: center; } } -- GitLab