feat: make recently viewed products display lazy (#1654)

intershop · May 10, 2024 · 0a27c17 · 0a27c17
1 parent dd219e3
commit 0a27c17
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 10 deletions.
diff --git a/src/app/extensions/recently/shared/recently-viewed/recently-viewed.component.html b/src/app/extensions/recently/shared/recently-viewed/recently-viewed.component.html
@@ -1,11 +1,13 @@
-<ng-container *ngIf="recentlyProducts$ | async as products">
-  <div *ngIf="products.length" class="product-list-container" data-testing-id="recently-viewed">
-    <h2>{{ 'recentlyViewed.component.heading' | translate }}</h2>
+<ng-container *ishBrowserLazyView>
+  <ng-container *ngIf="recentlyProducts$ | async as products">
+    <div *ngIf="products.length" class="product-list-container" data-testing-id="recently-viewed">
+      <h2>{{ 'recentlyViewed.component.heading' | translate }}</h2>
 
-    <ish-products-list [productSKUs]="products" listStyle="carousel" listItemStyle="tile" />
+      <ish-products-list [productSKUs]="products" listStyle="carousel" listItemStyle="tile" />
 
-    <a [routerLink]="['/recently']" class="view-all" data-testing-id="view-all">{{
-      'common.view_all.link' | translate
-    }}</a>
-  </div>
+      <a [routerLink]="['/recently']" class="view-all" data-testing-id="view-all">{{
+        'common.view_all.link' | translate
+      }}</a>
+    </div>
+  </ng-container>
 </ng-container>
diff --git a/src/app/extensions/recently/shared/recently-viewed/recently-viewed.component.spec.ts b/src/app/extensions/recently/shared/recently-viewed/recently-viewed.component.spec.ts
@@ -2,10 +2,11 @@ import { Location } from '@angular/common';
 import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslatePipe } from '@ngx-translate/core';
-import { MockComponent, MockPipe } from 'ng-mocks';
+import { MockComponent, MockDirective, MockPipe, ngMocks } from 'ng-mocks';
 import { of } from 'rxjs';
 import { anything, instance, mock, when } from 'ts-mockito';
 
+import { BrowserLazyViewDirective } from 'ish-core/directives/browser-lazy-view.directive';
 import { ShoppingFacade } from 'ish-core/facades/shopping.facade';
 import { findAllDataTestingIDs } from 'ish-core/utils/dev/html-query-utils';
 import { ProductsListComponent } from 'ish-shared/components/product/products-list/products-list.component';
@@ -28,7 +29,12 @@ describe('Recently Viewed Component', () => {
 
     await TestBed.configureTestingModule({
       imports: [RouterTestingModule.withRoutes([{ path: 'recently', component: RecentlyViewedComponent }])],
-      declarations: [MockComponent(ProductsListComponent), MockPipe(TranslatePipe), RecentlyViewedComponent],
+      declarations: [
+        MockComponent(ProductsListComponent),
+        MockDirective(BrowserLazyViewDirective),
+        MockPipe(TranslatePipe),
+        RecentlyViewedComponent,
+      ],
       providers: [
         { provide: RecentlyFacade, useFactory: () => instance(recentlyFacade) },
         { provide: ShoppingFacade, useFactory: () => instance(shoppingFacade) },
@@ -42,6 +48,9 @@ describe('Recently Viewed Component', () => {
     element = fixture.nativeElement;
 
     location = TestBed.inject(Location);
+
+    const directive = ngMocks.findInstance(BrowserLazyViewDirective);
+    ngMocks.render(directive, directive);
   });
 
   it('should be created', () => {