fix: display an product unavailable image on product detail page if t…

…here are no product images
intershop · Apr 15, 2021 · 736bb7d · 736bb7d · github-actions · Apr 15, 2021
1 parent 3c01d7d
commit 736bb7d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/src/app/pages/product/product-images/product-images.component.html b/src/app/pages/product/product-images/product-images.component.html
@@ -19,6 +19,12 @@
             <ish-product-image imageType="L" [imageView]="imageView"></ish-product-image>
           </ng-template>
         </ng-container>
+        <!-- no image available-->
+        <ng-container *ngIf="!largeImages.length">
+          <ng-template swiperSlide>
+            <ish-product-image imageType="L"></ish-product-image>
+          </ng-template>
+        </ng-container>
       </swiper>
       <ish-product-label></ish-product-label>
     </div>

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(1);
+  });
 });