fix: use ProductsListComponent for recently viewed items on PDP and r…

…ecently viewed page (#1408)

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

src/app/extensions/recently/pages/recently/recently-page.component.html

@@ -9,11 +9,11 @@
       <div class="col-md-9">
         <ish-breadcrumb></ish-breadcrumb>
         <h1>{{ 'application.recentlyViewed.product.heading' | translate }}</h1>
-        <div class="product-list row">
-          <div *ngFor="let productSku of products" class="col-6 col-lg-4 product-list-item grid-view">
-            <ish-product-item ishProductContext [sku]="productSku" displayType="tile"></ish-product-item>
-          </div>
-        </div>
+        <ish-products-list
+          [productSKUs]="products"
+          listItemCSSClass="col-6 col-lg-4"
+          listItemStyle="tile"
+        ></ish-products-list>
       </div>
     </ng-container>
 

src/app/extensions/recently/pages/recently/recently-page.component.spec.ts

@@ -1,12 +1,12 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateModule } from '@ngx-translate/core';
-import { MockComponent, MockDirective } from 'ng-mocks';
+import { MockComponent } from 'ng-mocks';
 import { of } from 'rxjs';
 import { instance, mock, verify, when } from 'ts-mockito';
 
-import { ProductContextDirective } from 'ish-core/directives/product-context.directive';
 import { BreadcrumbComponent } from 'ish-shared/components/common/breadcrumb/breadcrumb.component';
+import { ProductsListComponent } from 'ish-shared/components/product/products-list/products-list.component';
 
 import { RecentlyFacade } from '../../facades/recently.facade';
 
@@ -24,7 +24,7 @@ describe('Recently Page Component', () => {
 
     await TestBed.configureTestingModule({
       imports: [RouterTestingModule, TranslateModule.forRoot()],
-      declarations: [MockComponent(BreadcrumbComponent), MockDirective(ProductContextDirective), RecentlyPageComponent],
+      declarations: [MockComponent(BreadcrumbComponent), MockComponent(ProductsListComponent), RecentlyPageComponent],
       providers: [{ provide: RecentlyFacade, useFactory: () => instance(recentlyFacade) }],
     }).compileComponents();
   });
@@ -41,11 +41,6 @@ describe('Recently Page Component', () => {
     expect(() => fixture.detectChanges()).not.toThrow();
   });
 
-  it('should display product items for recently used products', () => {
-    fixture.detectChanges();
-    expect(element.querySelectorAll('ish-product-item')).toHaveLength(2);
-  });
-
   it('should trigger facade when clear button is clicked', () => {
     fixture.detectChanges();
     verify(recentlyFacade.clearRecentlyViewedProducts()).never();

src/app/extensions/recently/shared/recently-viewed/recently-viewed.component.html

@@ -2,11 +2,7 @@
   <div *ngIf="products.length" class="product-list-container" data-testing-id="recently-viewed">
     <h2>{{ 'recentlyViewed.component.heading' | translate }}</h2>
 
-    <div class="product-list row">
-      <div *ngFor="let productSku of products" class="col-6 col-lg-3 product-list-item">
-        <ish-product-item ishProductContext [sku]="productSku" displayType="tile"></ish-product-item>
-      </div>
-    </div>
+    <ish-products-list [productSKUs]="products" listStyle="carousel" listItemStyle="tile"></ish-products-list>
 
     <a [routerLink]="['/recently']" class="view-all" data-testing-id="view-all">{{
       'common.view_all.link' | translate

src/app/extensions/recently/shared/recently-viewed/recently-viewed.component.spec.ts

@@ -1,14 +1,13 @@
 import { Location } from '@angular/common';
 import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslatePipe } from '@ngx-translate/core';
-import { MockDirective, MockPipe } from 'ng-mocks';
+import { MockComponent, MockPipe } from 'ng-mocks';
 import { of } from 'rxjs';
 import { instance, mock, when } from 'ts-mockito';
 
-import { ProductContextDirective } from 'ish-core/directives/product-context.directive';
 import { findAllDataTestingIDs } from 'ish-core/utils/dev/html-query-utils';
+import { ProductsListComponent } from 'ish-shared/components/product/products-list/products-list.component';
 
 import { RecentlyFacade } from '../../facades/recently.facade';
 
@@ -26,7 +25,7 @@ describe('Recently Viewed Component', () => {
 
     await TestBed.configureTestingModule({
       imports: [RouterTestingModule.withRoutes([{ path: 'recently', component: RecentlyViewedComponent }])],
-      declarations: [MockDirective(ProductContextDirective), MockPipe(TranslatePipe), RecentlyViewedComponent],
+      declarations: [MockComponent(ProductsListComponent), MockPipe(TranslatePipe), RecentlyViewedComponent],
       providers: [{ provide: RecentlyFacade, useFactory: () => instance(recentlyFacade) }],
     }).compileComponents();
   });
@@ -50,48 +49,22 @@ describe('Recently Viewed Component', () => {
     expect(element).toMatchInlineSnapshot(`N/A`);
   });
 
-  describe('with items', () => {
-    beforeEach(() => {
-      when(recentlyFacade.mostRecentlyViewedProducts$).thenReturn(of(['P1', 'P2', 'P3']));
-
-      fixture.detectChanges();
-    });
-
-    it('should display product-item components for all products', () => {
-      expect(element.querySelectorAll('ish-product-item')).toHaveLength(3);
-    });
-
-    it('should display view all link on page', () => {
-      expect(findAllDataTestingIDs(fixture)).toContain('view-all');
-    });
-
-    it('should properly propagate inputs to product-tiles', () => {
-      expect(fixture.debugElement.queryAll(By.css('[ishProductContext]')).map(de => de.attributes['ng-reflect-sku']))
-        .toMatchInlineSnapshot(`
-        [
-          "P1",
-          "P2",
-          "P3",
-        ]
-      `);
-    });
+  it('should display view all link on page', () => {
+    when(recentlyFacade.mostRecentlyViewedProducts$).thenReturn(of(['P1', 'P2', 'P3']));
+    fixture.detectChanges();
+    expect(findAllDataTestingIDs(fixture)).toContain('view-all');
   });
 
-  describe('link to recently page', () => {
-    it('should navigate to recently page when view-all link is clicked', fakeAsync(() => {
-      when(recentlyFacade.mostRecentlyViewedProducts$).thenReturn(of(['P1']));
-
-      fixture.detectChanges();
-
-      expect(location.path()).toMatchInlineSnapshot(`""`);
-
-      const link = element.querySelector('[data-testing-id="view-all"]') as HTMLLinkElement;
+  it('should navigate to recently page when view-all link is clicked', fakeAsync(() => {
+    when(recentlyFacade.mostRecentlyViewedProducts$).thenReturn(of(['P1']));
+    fixture.detectChanges();
 
-      link.click();
+    expect(location.path()).toMatchInlineSnapshot(`""`);
 
-      tick(0);
+    const link = element.querySelector('[data-testing-id="view-all"]') as HTMLLinkElement;
+    link.click();
+    tick(0);
 
-      expect(location.path()).toMatchInlineSnapshot(`"/recently"`);
-    }));
-  });
+    expect(location.path()).toMatchInlineSnapshot(`"/recently"`);
+  }));
 });

src/app/extensions/recently/store/recently/recently.integration.spec.ts

@@ -41,7 +41,7 @@ describe('Recently Integration', () => {
 
   describe('after short shopping spree', () => {
     beforeEach(fakeAsync(() => {
-      ['A', 'B', 'C', 'D', 'E', 'F', 'G'].forEach(sku =>
+      ['A', 'B', 'C', 'D', 'E', 'F'].forEach(sku =>
         store$.dispatch(loadProductSuccess({ product: { sku } as Product }))
       );
       ['A', 'B', 'F', 'C', 'A', 'D', 'E', 'D', 'A', 'B', 'A'].forEach(sku => {
@@ -53,7 +53,7 @@ describe('Recently Integration', () => {
     it('should have collected data for display on pages', () => {
       const viewed = ['A', 'B', 'D', 'E', 'C', 'F'];
       expect(getRecentlyViewedProducts(store$.state)).toEqual(viewed);
-      const filtered = ['B', 'D', 'E', 'C'];
+      const filtered = ['B', 'D', 'E', 'C', 'F'];
       expect(getMostRecentlyViewedProducts(store$.state)).toEqual(filtered);
     });
 

src/app/extensions/recently/store/recently/recently.selectors.ts

@@ -27,5 +27,5 @@ export const getMostRecentlyViewedProducts = createSelector(
   getRecentlyViewedProducts,
   getSelectedProduct,
   (skus, selected): string[] =>
-    selected ? skus.filter(productSKU => productSKU && productSKU !== selected.sku).slice(0, 4) : skus.slice(0, 4)
+    selected ? skus.filter(productSKU => productSKU && productSKU !== selected.sku).slice(0, 12) : skus.slice(0, 12)
 );