fix: display a product unavailable image on product detail page if th…

…ere are no product images (#653)
intershop · Apr 16, 2021 · 0d1be10 · 0d1be10
1 parent 6f0200d
commit 0d1be10
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/src/app/pages/product/product-images/product-images.component.spec.ts b/src/app/pages/product/product-images/product-images.component.spec.ts
@@ -16,9 +16,10 @@ describe('Product Images Component', () => {
   let component: ProductImagesComponent;
   let fixture: ComponentFixture<ProductImagesComponent>;
   let element: HTMLElement;
+  let context: ProductContextFacade;
 
   beforeEach(async () => {
-    const context = mock(ProductContextFacade);
+    context = mock(ProductContextFacade);
     when(context.select('product')).thenReturn(
       of({
         sku: 'sku',
@@ -117,4 +118,17 @@ describe('Product Images Component', () => {
     fixture.detectChanges();
     expect(element.getElementsByTagName('ish-product-image')).toBeTruthy();
   });
+
+  it('should render product image unavailable on component', () => {
+    when(context.select('product')).thenReturn(
+      of({
+        sku: 'sku',
+        name: 'Lenco',
+        images: [],
+      } as ProductView)
+    );
+
+    fixture.detectChanges();
+    expect(element.getElementsByTagName('ish-product-image')).toHaveLength(2);
+  });
 });
diff --git a/src/app/pages/product/product-images/product-images.component.ts b/src/app/pages/product/product-images/product-images.component.ts
@@ -37,8 +37,11 @@ export class ProductImagesComponent implements OnInit {
     this.product$ = this.context.select('product');
   }
 
-  getImageViewIDs$(imageType: string) {
-    return this.product$.pipe(map(p => ProductHelper.getImageViewIDs(p, imageType)));
+  getImageViewIDs$(imageType: string): Observable<string[]> {
+    return this.product$.pipe(
+      map(p => ProductHelper.getImageViewIDs(p, imageType)),
+      map(ids => (ids?.length ? ids : ['default']))
+    );
   }
 
   /**