fix: api icon is displayed if image url is not present
The icon is shown as well if the image could not be loaded from the backend
Closes: 45
MODIFY
cypress/integration/home.spec.ts
cypress/integration/home.spec.ts
+/*
+ * Copyright 2022 Scheer PAS Schweiz AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * imitations under the License.
+ */
+
/// <reference types="cypress" />
import { IApimanData } from '../../src/app/interfaces/ICommunication';
@@ -37,7 +53,7 @@ describe('Testing the home page', () => {
cy.get('mat-card.api-card').should('have.length', 2);
// Checking first api-card
// api-card-header
- cy.get('#api-card_TestApi1 > .api-card-header #icon')
+ cy.get('#api-card_TestApi1 > .api-card-header .api-icon')
.should('exist')
.and('have.text', 'developer_board');
cy.get('#api-card_TestApi1 > .api-card-header #img').should('not.exist');
@@ -51,7 +67,9 @@ describe('Testing the home page', () => {
// Checking second api-card
// api-card-header
- cy.get('#api-card_TestApi2 > .api-card-header #icon').should('not.exist');
+ cy.get('#api-card_TestApi2 > .api-card-header .api-icon').should(
+ 'not.exist'
+ );
cy.get('#api-card_TestApi2 > .api-card-header #img').should('exist');
// api-card-content
cy.get('#api-card_TestApi2 .content-text').should('not.exist');

MODIFY
src/app/components/img-or-icon-selector/img-or-icon-selector.component.html
src/app/components/img-or-icon-selector/img-or-icon-selector.component.html
<!--
- ~ Copyright 2021 Scheer PAS Schweiz AG
+ ~ Copyright 2022 Scheer PAS Schweiz AG
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
<!-- Show img source if available -->
<img
- *ngIf="imgUrl; else withIcon"
+ *ngIf="isImage; else icon"
id="img"
class="api-img"
alt="api logo"
- [src]="this.configService.getEndpoint() + '/' + imgUrl" />
+ [src]="this.configService.getEndpoint() + '/' + imgUrl"
+ (error)="showFallbackIcon()" />
<!-- OR show icon if img not available -->
-<ng-template #withIcon>
- <div class="icon-wrapper">
- <mat-icon color="primary" id="icon" class="api-icon"
- >developer_board</mat-icon
- >
- </div>
+<ng-template #icon>
+ <mat-icon color="primary" class="api-icon">developer_board</mat-icon>
</ng-template>

MODIFY
src/app/components/img-or-icon-selector/img-or-icon-selector.component.ts
src/app/components/img-or-icon-selector/img-or-icon-selector.component.ts
/*
- * Copyright 2021 Scheer PAS Schweiz AG
+ * Copyright 2022 Scheer PAS Schweiz AG
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@@ -32,6 +32,7 @@ import { ConfigService } from '../../services/config/config.service';
export class ImgOrIconSelectorComponent implements AfterViewInit, OnChanges {
@Input() imgUrl: string | undefined = '';
@Input() dimension = '';
+ isImage = false;
constructor(
public configService: ConfigService,
@@ -40,6 +41,7 @@ export class ImgOrIconSelectorComponent implements AfterViewInit, OnChanges {
ngOnChanges(changes: SimpleChanges): void {
this.imgUrl = changes.imgUrl ? (changes.imgUrl.currentValue as string) : '';
+ this.isImage = this.imgUrl !== undefined || this.imgUrl !== '';
this.cdr.detectChanges();
this.resize();
}
@@ -73,4 +75,8 @@ export class ImgOrIconSelectorComponent implements AfterViewInit, OnChanges {
});
}
}
+
+ showFallbackIcon() {
+ this.isImage = false;
+ }
}

fix: api icon is displayed if image url is not present

The icon is shown as well if the image could not be loaded from the backend

Closes: 45