fix: don't display the review tab on product master variation page (#…

…1193)

(cherry picked from commit c70b0ff)

src/app/extensions/rating/shared/product-rating/product-rating.component.html

@@ -1,4 +1,6 @@
-<ng-container *ngFor="let fill of stars$ | async; let lastStar = last">
-  <ish-product-rating-star [filled]="fill" [lastStar]="lastStar"></ish-product-rating-star>
-  <span *ngIf="lastStar && !hideNumberOfReviews" class="product-info ml-1">({{ numberOfReviews$ | async }})</span>
+<ng-container *ngIf="(isVariationMaster$ | async) === false">
+  <ng-container *ngFor="let fill of stars$ | async; let lastStar = last">
+    <ish-product-rating-star [filled]="fill" [lastStar]="lastStar"></ish-product-rating-star>
+    <span *ngIf="lastStar && !hideNumberOfReviews" class="product-info ml-1">({{ numberOfReviews$ | async }})</span>
+  </ng-container>
 </ng-container>

src/app/extensions/rating/shared/product-rating/product-rating.component.spec.ts

@@ -19,6 +19,7 @@ describe('Product Rating Component', () => {
     const context = mock(ProductContextFacade);
     when(context.select('product', 'roundedAverageRating')).thenReturn(of(3.5));
     when(context.select('product', 'numberOfReviews')).thenReturn(of(2));
+    when(context.select('variationCount')).thenReturn(of(0));
 
     await TestBed.configureTestingModule({
       declarations: [MockComponent(ProductRatingStarComponent), ProductRatingComponent],

src/app/extensions/rating/shared/product-rating/product-rating.component.ts

@@ -7,7 +7,7 @@ import { ProductContextFacade } from 'ish-core/facades/product-context.facade';
 import { GenerateLazyComponent } from 'ish-core/utils/module-loader/generate-lazy-component.decorator';
 
 /**
- * The Product Rating Component renders rating stars for a product with rounded average rating as number.
+ * The Product Rating Component renders rating stars for a product (besides variation masters) with rounded average rating as number. *
  */
 @Component({
   selector: 'ish-product-rating',
@@ -21,6 +21,7 @@ export class ProductRatingComponent implements OnInit {
   stars$: Observable<('full' | 'half' | 'empty')[]>;
   rating$: Observable<number>;
   numberOfReviews$: Observable<number>;
+  isVariationMaster$: Observable<boolean>;
 
   constructor(private context: ProductContextFacade) {}
 
@@ -30,5 +31,6 @@ export class ProductRatingComponent implements OnInit {
       map(rate => range(1, 6).map(index => (index <= rate ? 'full' : index - 0.5 === rate ? 'half' : 'empty')))
     );
     this.numberOfReviews$ = this.context.select('product', 'numberOfReviews');
+    this.isVariationMaster$ = this.context.select('variationCount').pipe(map(variationCount => !!variationCount));
   }
 }

src/app/pages/product/product-detail-info/product-detail-info.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="product$ | async as product" class="section">
   <ul ngbNav #nav="ngbNav" class="nav-tabs w-100" [(activeId)]="active">
-    <li [ngbNavItem]="'DESCRIPTION'">
+    <li [ngbNavItem]="'DESCRIPTION'" data-testing-id="product-description-tab">
       <a ngbNavLink>{{ 'product.description.heading' | translate }}</a>
       <ng-template ngbNavContent>
         <div [innerHTML]="product.longDescription"></div>
@@ -21,12 +21,14 @@
       </ng-template>
     </li>
 
-    <li *ishFeature="'rating'" [ngbNavItem]="'REVIEWS'">
-      <a ngbNavLink>{{ 'product.reviews.heading' | translate }} ({{ product.numberOfReviews }})</a>
-      <ng-template ngbNavContent>
-        <ish-lazy-product-reviews></ish-lazy-product-reviews>
-      </ng-template>
-    </li>
+    <ng-container *ngIf="(isVariationMaster$ | async) === false">
+      <li *ishFeature="'rating'" [ngbNavItem]="'REVIEWS'">
+        <a ngbNavLink>{{ 'product.reviews.heading' | translate }} ({{ product.numberOfReviews }})</a>
+        <ng-template ngbNavContent>
+          <ish-lazy-product-reviews></ish-lazy-product-reviews>
+        </ng-template>
+      </li>
+    </ng-container>
   </ul>
 
   <div [ngbNavOutlet]="nav"></div>

src/app/pages/product/product-detail-info/product-detail-info.component.spec.ts

@@ -1,19 +1,30 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { instance, mock } from 'ts-mockito';
+import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateModule } from '@ngx-translate/core';
+import { of } from 'rxjs';
+import { instance, mock, when } from 'ts-mockito';
 
 import { ProductContextFacade } from 'ish-core/facades/product-context.facade';
+import { FeatureToggleModule } from 'ish-core/feature-toggle.module';
+import { ProductView } from 'ish-core/models/product-view/product-view.model';
 
 import { ProductDetailInfoComponent } from './product-detail-info.component';
 
 describe('Product Detail Info Component', () => {
   let component: ProductDetailInfoComponent;
   let fixture: ComponentFixture<ProductDetailInfoComponent>;
   let element: HTMLElement;
+  let context: ProductContextFacade;
 
   beforeEach(async () => {
+    context = mock(ProductContextFacade);
+    when(context.select('product')).thenReturn(of({ sku: '123' } as ProductView));
+    when(context.select('variationCount')).thenReturn(of(0));
+
     await TestBed.configureTestingModule({
+      imports: [FeatureToggleModule.forTesting('rating'), NgbNavModule, TranslateModule.forRoot()],
       declarations: [ProductDetailInfoComponent],
-      providers: [{ provide: ProductContextFacade, useFactory: () => instance(mock(ProductContextFacade)) }],
+      providers: [{ provide: ProductContextFacade, useFactory: () => instance(context) }],
     }).compileComponents();
   });
 
@@ -28,4 +39,19 @@ describe('Product Detail Info Component', () => {
     expect(element).toBeTruthy();
     expect(() => fixture.detectChanges()).not.toThrow();
   });
+
+  it('should display the product description tab with status active', () => {
+    fixture.detectChanges();
+
+    expect(element.querySelectorAll('ul.nav-tabs li')).toHaveLength(2);
+    expect(element.querySelector('ul.nav-tabs li[data-testing-id=product-description-tab] a.active')).toBeTruthy();
+  });
+
+  it('should not display the product rating tab for variation master', () => {
+    when(context.select('variationCount')).thenReturn(of(2));
+
+    fixture.detectChanges();
+
+    expect(element.querySelectorAll('ul.nav-tabs li')).toHaveLength(1);
+  });
 });

src/app/pages/product/product-detail-info/product-detail-info.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Observable, map } from 'rxjs';
 
 import { ProductContextDisplayProperties, ProductContextFacade } from 'ish-core/facades/product-context.facade';
 import { ProductView } from 'ish-core/models/product-view/product-view.model';
@@ -11,12 +11,14 @@ import { ProductView } from 'ish-core/models/product-view/product-view.model';
 })
 export class ProductDetailInfoComponent implements OnInit {
   product$: Observable<ProductView>;
+  isVariationMaster$: Observable<boolean>;
   active = 'DESCRIPTION';
 
   constructor(private context: ProductContextFacade) {}
 
   ngOnInit() {
     this.product$ = this.context.select('product');
+    this.isVariationMaster$ = this.context.select('variationCount').pipe(map(variationCount => !!variationCount));
   }
 
   configuration$(key: keyof ProductContextDisplayProperties) {