diff --git a/alfa-client/libs/design-component/src/lib/button-with-spinner/button-with-spinner.component.spec.ts b/alfa-client/libs/design-component/src/lib/button-with-spinner/button-with-spinner.component.spec.ts index b7512e257e7c2dc8c6cb8f5bec481b05460082e2..54f8e2524c3659292a7943ee9069ab3c3d8540f5 100644 --- a/alfa-client/libs/design-component/src/lib/button-with-spinner/button-with-spinner.component.spec.ts +++ b/alfa-client/libs/design-component/src/lib/button-with-spinner/button-with-spinner.component.spec.ts @@ -1,5 +1,9 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { createCommandResource } from 'libs/command-shared/test/command'; +import { + createCommandErrorStateResource, + createCommandResource, +} from 'libs/command-shared/test/command'; +import { createApiError } from 'libs/tech-shared/test/error'; import { ButtonWithSpinnerComponent } from './button-with-spinner.component'; import * as ResourceUtils from 'libs/tech-shared/src/lib/resource/resource.util'; @@ -79,4 +83,30 @@ describe('ButtonWithSpinnerComponent', () => { expect(isLoading).toBeTruthy(); }); }); + + describe('isError', () => { + it('should return false if error is not set', () => { + component.stateResource.error = null; + + const isError: boolean = component.isError; + + expect(isError).toBeFalsy(); + }); + + it('should return false if error is set and error is ApiError', () => { + component.stateResource.error = createApiError(); + + const isError: boolean = component.isError; + + expect(isError).toBeFalsy(); + }); + + it('should return true if error is set and error is not ApiError', () => { + component.stateResource = createCommandErrorStateResource(); + + const isError: boolean = component.isError; + + expect(isError).toBeTruthy(); + }); + }); }); diff --git a/alfa-client/libs/design-component/src/lib/button-with-spinner/button-with-spinner.component.ts b/alfa-client/libs/design-component/src/lib/button-with-spinner/button-with-spinner.component.ts index 626d2ffd37bfbcc2f574a291a8b038395ab23156..e8388104a49fcb510c88b01ba98e4ea57fa2135f 100644 --- a/alfa-client/libs/design-component/src/lib/button-with-spinner/button-with-spinner.component.ts +++ b/alfa-client/libs/design-component/src/lib/button-with-spinner/button-with-spinner.component.ts @@ -13,14 +13,21 @@ type ButtonVariants = VariantProps<typeof buttonVariants>; standalone: true, imports: [CommonModule, ButtonComponent, ErrorMessageComponent], styles: [':host {@apply flex flex-col w-fit}'], - template: `<ods-button - [text]="text" - [variant]="variant" - [size]="size" - [dataTestId]="dataTestId" - [isLoading]="isLoading" - (click)="clickEmitter.emit()" - />`, + template: ` <ods-error-message + *ngIf="isError" + text="Ein Fehler ist aufgetreten." + subText="Versuchen Sie es noch einmal." + > + </ods-error-message> + <ods-button + [text]="text" + [variant]="variant" + [size]="size" + [dataTestId]="dataTestId" + [isLoading]="isLoading" + (click)="clickEmitter.emit()" + > + </ods-button>`, }) export class ButtonWithSpinnerComponent implements OnInit { @Input() text: string = ''; @@ -44,6 +51,8 @@ export class ButtonWithSpinnerComponent implements OnInit { } get isError(): boolean { - return isLoaded(this.stateResource) && hasCommandError(<CommandResource>this.stateResource.resource); + return ( + isLoaded(this.stateResource) && hasCommandError(<CommandResource>this.stateResource.resource) + ); } }