fix: use ProductsListComponent for wishlist widget component (#1408)

* by using the generic Products List component failed products are no longer rendered

src/app/extensions/wishlists/shared/wishlist-widget/wishlist-widget.component.html

@@ -1,23 +1,21 @@
 <div class="section">
   <h3>{{ 'account.wishlists.widget.heading' | translate }}</h3>
-  <ng-container *ngIf="allWishlistsItemsSkus$ | async as itemSku">
-    <ng-container *ngIf="itemSku.length > 0; else noItems" class="section">
-      <div class="product-list">
-        <swiper [config]="swiperConfig">
-          <ng-template *ngFor="let sku of itemSku" swiperSlide>
-            <ish-product-item
-              displayType="tile"
-              ishProductContext
-              [sku]="sku"
-              [configuration]="tileConfiguration"
-            ></ish-product-item>
-          </ng-template>
-        </swiper>
+  <ng-container *ngIf="allWishlistsItemsSkus$ | async as wishlistsItemsSkus">
+    <ng-container *ngIf="wishlistsItemsSkus.length > 0; else noItems" class="section">
+      <div class="product-list" data-testing-id="wishlistProductsList">
+        <ish-products-list
+          [productSKUs]="wishlistsItemsSkus"
+          listStyle="carousel"
+          listItemStyle="tile"
+          [listItemConfiguration]="tileConfiguration"
+        ></ish-products-list>
       </div>
     </ng-container>
     <ng-template #noItems>
       <p>{{ 'account.wishlists.no_items' | translate }}</p>
     </ng-template>
   </ng-container>
-  <a routerLink="/account/wishlists">{{ 'account.overview.wishlist.view_all' | translate }}</a>
+  <a routerLink="/account/wishlists" data-testing-id="emptyWishlistProductsList">{{
+    'account.overview.wishlist.view_all' | translate
+  }}</a>
 </div>

src/app/extensions/wishlists/shared/wishlist-widget/wishlist-widget.component.spec.ts

@@ -1,8 +1,11 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule } from '@ngx-translate/core';
-import { EMPTY } from 'rxjs';
+import { MockComponent } from 'ng-mocks';
+import { EMPTY, of } from 'rxjs';
 import { instance, mock, when } from 'ts-mockito';
 
+import { ProductsListComponent } from 'ish-shared/components/product/products-list/products-list.component';
+
 import { WishlistsFacade } from '../../facades/wishlists.facade';
 
 import { WishlistWidgetComponent } from './wishlist-widget.component';
@@ -12,12 +15,14 @@ describe('Wishlist Widget Component', () => {
   let fixture: ComponentFixture<WishlistWidgetComponent>;
   let element: HTMLElement;
 
+  let wishlistFacadeMock: WishlistsFacade;
+
   beforeEach(async () => {
-    const wishlistFacadeMock = mock(WishlistsFacade);
+    wishlistFacadeMock = mock(WishlistsFacade);
     when(wishlistFacadeMock.allWishlistsItemsSkus$).thenReturn(EMPTY);
 
     await TestBed.configureTestingModule({
-      declarations: [WishlistWidgetComponent],
+      declarations: [MockComponent(ProductsListComponent), WishlistWidgetComponent],
       imports: [TranslateModule.forRoot()],
       providers: [{ provide: WishlistsFacade, useFactory: () => instance(wishlistFacadeMock) }],
     }).compileComponents();
@@ -34,4 +39,16 @@ describe('Wishlist Widget Component', () => {
     expect(element).toBeTruthy();
     expect(() => fixture.detectChanges()).not.toThrow();
   });
+
+  it('should display empty list text if there are no wishlist products', () => {
+    when(wishlistFacadeMock.allWishlistsItemsSkus$).thenReturn(of());
+    fixture.detectChanges();
+    expect(element.querySelector('[data-testing-id=emptyWishlistProductsList]')).toBeTruthy();
+  });
+
+  it('should display product list if there are wishlist products', () => {
+    when(wishlistFacadeMock.allWishlistsItemsSkus$).thenReturn(of(['sku1', 'sku2']));
+    fixture.detectChanges();
+    expect(element.querySelector('[data-testing-id=wishlistProductsList]')).toBeTruthy();
+  });
 });

src/app/extensions/wishlists/shared/wishlist-widget/wishlist-widget.component.ts

@@ -1,16 +1,11 @@
-import { ChangeDetectionStrategy, Component, Inject, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
-import SwiperCore, { Navigation, Pagination, SwiperOptions } from 'swiper';
 
-import { LARGE_BREAKPOINT_WIDTH, MEDIUM_BREAKPOINT_WIDTH } from 'ish-core/configurations/injection-keys';
 import { ProductContextDisplayProperties } from 'ish-core/facades/product-context.facade';
-import { InjectSingle } from 'ish-core/utils/injection';
 import { GenerateLazyComponent } from 'ish-core/utils/module-loader/generate-lazy-component.decorator';
 
 import { WishlistsFacade } from '../../facades/wishlists.facade';
 
-SwiperCore.use([Navigation, Pagination]);
-
 /**
  * The Wishlist Widget Component displays all unique items from all wish lists.
  */
@@ -22,48 +17,15 @@ SwiperCore.use([Navigation, Pagination]);
 @GenerateLazyComponent()
 export class WishlistWidgetComponent implements OnInit {
   allWishlistsItemsSkus$: Observable<string[]>;
-  itemsPerSlide = 4;
   tileConfiguration: Partial<ProductContextDisplayProperties>;
 
-  /**
-   * configuration of swiper carousel
-   * find possible parameters here: http://idangero.us/swiper/api/#parameters
-   */
-  swiperConfig: SwiperOptions;
-
-  constructor(
-    private wishlistsFacade: WishlistsFacade,
-    @Inject(LARGE_BREAKPOINT_WIDTH) largeBreakpointWidth: InjectSingle<typeof LARGE_BREAKPOINT_WIDTH>,
-    @Inject(MEDIUM_BREAKPOINT_WIDTH) mediumBreakpointWidth: InjectSingle<typeof MEDIUM_BREAKPOINT_WIDTH>
-  ) {
+  constructor(private wishlistsFacade: WishlistsFacade) {
     this.tileConfiguration = {
       addToWishlist: false,
       addToOrderTemplate: false,
       addToCompare: false,
       addToQuote: false,
     };
-
-    this.swiperConfig = {
-      direction: 'horizontal',
-      navigation: true,
-      pagination: {
-        clickable: true,
-      },
-      breakpoints: {
-        0: {
-          slidesPerView: 2,
-          slidesPerGroup: 2,
-        },
-        [mediumBreakpointWidth]: {
-          slidesPerView: 3,
-          slidesPerGroup: 3,
-        },
-        [largeBreakpointWidth]: {
-          slidesPerView: 4,
-          slidesPerGroup: 4,
-        },
-      },
-    };
   }
 
   ngOnInit() {