refactor: use product context access directive in account wishlist fe…

…ature
intershop · Mar 8, 2021 · 782590e · 782590e · github-actions · Mar 8, 2021
1 parent a290cfc
commit 782590e
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 26 deletions.
diff --git a/...detail/account-wishlist-detail-line-item/account-wishlist-detail-line-item.component.html b/...detail/account-wishlist-detail-line-item/account-wishlist-detail-line-item.component.html
@@ -1,4 +1,4 @@
-<ng-container *ngIf="product$ | async as product">
+<ng-container *ishProductContextAccess="let product = product">
   <div class="row" data-testing-id="wishlist-product">
     <div class="col-3 col-md-2 list-item">
       <ish-product-image imageType="S" [link]="true"></ish-product-image>

diff --git a/...ail/account-wishlist-detail-line-item/account-wishlist-detail-line-item.component.spec.ts b/...ail/account-wishlist-detail-line-item/account-wishlist-detail-line-item.component.spec.ts
@@ -4,7 +4,6 @@ import { TranslateModule } from '@ngx-translate/core';
 import { MockComponent, MockPipe } from 'ng-mocks';
 import { instance, mock } from 'ts-mockito';
 
-import { ProductContextFacade } from 'ish-core/facades/product-context.facade';
 import { DatePipe } from 'ish-core/pipes/date.pipe';
 import { ProductAddToBasketComponent } from 'ish-shared/components/product/product-add-to-basket/product-add-to-basket.component';
 import { ProductBundleDisplayComponent } from 'ish-shared/components/product/product-bundle-display/product-bundle-display.component';
@@ -43,11 +42,7 @@ describe('Account Wishlist Detail Line Item Component', () => {
       ],
       imports: [TranslateModule.forRoot()],
       providers: [{ provide: WishlistsFacade, useFactory: () => instance(mock(WishlistsFacade)) }],
-    })
-      .overrideComponent(AccountWishlistDetailLineItemComponent, {
-        set: { providers: [{ provide: ProductContextFacade, useFactory: () => instance(mock(ProductContextFacade)) }] },
-      })
-      .compileComponents();
+    }).compileComponents();
   });
 
   beforeEach(() => {

diff --git a/...t-detail/account-wishlist-detail-line-item/account-wishlist-detail-line-item.component.ts b/...t-detail/account-wishlist-detail-line-item/account-wishlist-detail-line-item.component.ts
@@ -1,8 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
-
-import { ProductContextFacade } from 'ish-core/facades/product-context.facade';
-import { ProductView } from 'ish-core/models/product-view/product-view.model';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 
 import { WishlistsFacade } from '../../../facades/wishlists.facade';
 import { Wishlist, WishlistItem } from '../../../models/wishlist/wishlist.model';
@@ -14,24 +10,13 @@ import { Wishlist, WishlistItem } from '../../../models/wishlist/wishlist.model'
   selector: 'ish-account-wishlist-detail-line-item',
   templateUrl: './account-wishlist-detail-line-item.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [ProductContextFacade],
 })
-export class AccountWishlistDetailLineItemComponent implements OnChanges, OnInit {
-  constructor(private wishlistsFacade: WishlistsFacade, private context: ProductContextFacade) {}
+export class AccountWishlistDetailLineItemComponent {
+  constructor(private wishlistsFacade: WishlistsFacade) {}
 
   @Input() wishlistItemData: WishlistItem;
   @Input() currentWishlist: Wishlist;
 
-  product$: Observable<ProductView>;
-
-  ngOnInit() {
-    this.product$ = this.context.select('product');
-  }
-
-  ngOnChanges() {
-    this.context.set('sku', () => this.wishlistItemData.sku);
-  }
-
   moveItemToOtherWishlist(sku: string, wishlistMoveData: { id: string; title: string }) {
     if (wishlistMoveData.id) {
       this.wishlistsFacade.moveItemToWishlist(this.currentWishlist.id, wishlistMoveData.id, sku);

diff --git a/...sions/wishlists/pages/account-wishlist-detail/account-wishlist-detail-page.component.html b/...sions/wishlists/pages/account-wishlist-detail/account-wishlist-detail-page.component.html
@@ -40,6 +40,8 @@ <h1>{{ wishlist?.title }}</h1>
         <ng-container *ngFor="let item of wishlist.items">
           <div class="list-item-row">
             <ish-account-wishlist-detail-line-item
+              ishProductContext
+              [sku]="item.sku"
               [wishlistItemData]="item"
               [currentWishlist]="wishlist"
             ></ish-account-wishlist-detail-line-item>

diff --git a/...ns/wishlists/pages/account-wishlist-detail/account-wishlist-detail-page.component.spec.ts b/...ns/wishlists/pages/account-wishlist-detail/account-wishlist-detail-page.component.spec.ts
@@ -2,9 +2,10 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
-import { MockComponent } from 'ng-mocks';
+import { MockComponent, MockDirective } from 'ng-mocks';
 import { instance, mock } from 'ts-mockito';
 
+import { ProductContextDirective } from 'ish-core/directives/product-context.directive';
 import { ErrorMessageComponent } from 'ish-shared/components/common/error-message/error-message.component';
 import { LoadingComponent } from 'ish-shared/components/common/loading/loading.component';
 
@@ -29,6 +30,7 @@ describe('Account Wishlist Detail Page Component', () => {
         MockComponent(FaIconComponent),
         MockComponent(LoadingComponent),
         MockComponent(WishlistPreferencesDialogComponent),
+        MockDirective(ProductContextDirective),
       ],
       providers: [{ provide: WishlistsFacade, useFactory: () => instance(mock(WishlistsFacade)) }],
     }).compileComponents();