fix: static page component needs to load the content page tree for th…

…e breadcrumb even if the navigation is not shown (#1215)

src/app/shared/cms/components/cms-static-page/cms-static-page.component.html

@@ -5,10 +5,12 @@
     >
       <div class="page-navigation col-md-3">
         <div *ngIf="pagelet.booleanParam('ShowNavigation')" class="page-navigation-contents">
-          <ish-content-navigation
-            [root]="pagelet.stringParam('NavigationRoot')"
-            [depth]="pagelet.numberParam('NavigationDepth')"
-          ></ish-content-navigation>
+          <ng-container *ngIf="contentPageTree$ | async as contentPageTree">
+            <ish-content-navigation
+              [contentPageTree]="contentPageTree"
+              [depth]="pagelet.numberParam('NavigationDepth')"
+            ></ish-content-navigation>
+          </ng-container>
         </div>
         <div class="marketing-area">
           <ish-content-slot

src/app/shared/cms/components/cms-static-page/cms-static-page.component.spec.ts

@@ -1,7 +1,11 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { MockComponent } from 'ng-mocks';
+import { of } from 'rxjs';
+import { anyNumber, anyString, instance, mock, when } from 'ts-mockito';
 
+import { CMSFacade } from 'ish-core/facades/cms.facade';
+import { ContentPageTreeView } from 'ish-core/models/content-page-tree-view/content-page-tree-view.model';
 import { ContentPagelet } from 'ish-core/models/content-pagelet/content-pagelet.model';
 import { ContentPageletView, createContentPageletView } from 'ish-core/models/content-view/content-view.model';
 import { findAllCustomElements } from 'ish-core/utils/dev/html-query-utils';
@@ -17,15 +21,19 @@ describe('Cms Static Page Component', () => {
   let element: HTMLElement;
   let pageletView: ContentPageletView;
   let pagelet: ContentPagelet;
+  let cmsFacade: CMSFacade;
 
   beforeEach(async () => {
+    cmsFacade = mock(CMSFacade);
+
     await TestBed.configureTestingModule({
       declarations: [
         CMSStaticPageComponent,
         MockComponent(BreadcrumbComponent),
         MockComponent(ContentNavigationComponent),
         MockComponent(ContentSlotComponent),
       ],
+      providers: [{ provide: CMSFacade, useFactory: () => instance(cmsFacade) }],
     }).compileComponents();
   });
 
@@ -57,6 +65,15 @@ describe('Cms Static Page Component', () => {
         configurationParameters: { ShowNavigation: 'true', NavigationRoot: 'page-1', NavigationDepth: '2' },
       });
 
+      when(cmsFacade.contentPageTree$(anyString(), anyNumber())).thenReturn(
+        of({
+          contentPageId: 'page-1',
+          name: 'page',
+          path: ['page-1'],
+        } as ContentPageTreeView)
+      );
+
+      component.ngOnChanges();
       fixture.detectChanges();
     });
 
@@ -70,7 +87,6 @@ describe('Cms Static Page Component', () => {
       const navigation = fixture.debugElement.query(By.css('ish-content-navigation'))
         .componentInstance as ContentNavigationComponent;
 
-      expect(navigation.root).toEqual('page-1');
       expect(navigation.depth).toEqual(2);
     });
 

src/app/shared/cms/components/cms-static-page/cms-static-page.component.ts

@@ -1,5 +1,8 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
+import { Observable } from 'rxjs';
 
+import { CMSFacade } from 'ish-core/facades/cms.facade';
+import { ContentPageTreeView } from 'ish-core/models/content-page-tree-view/content-page-tree-view.model';
 import { ContentPageletView } from 'ish-core/models/content-view/content-view.model';
 import { CMSComponent } from 'ish-shared/cms/models/cms-component/cms-component.model';
 
@@ -12,6 +15,19 @@ import { CMSComponent } from 'ish-shared/cms/models/cms-component/cms-component.
   templateUrl: './cms-static-page.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CMSStaticPageComponent implements CMSComponent {
+export class CMSStaticPageComponent implements CMSComponent, OnChanges {
   @Input() pagelet: ContentPageletView;
+
+  contentPageTree$: Observable<ContentPageTreeView>;
+
+  constructor(private cmsFacade: CMSFacade) {}
+
+  ngOnChanges() {
+    if (this.pagelet?.stringParam('NavigationRoot')) {
+      this.contentPageTree$ = this.cmsFacade.contentPageTree$(
+        this.pagelet.stringParam('NavigationRoot'),
+        this.pagelet.numberParam('NavigationDepth')
+      );
+    }
+  }
 }

src/app/shared/cms/components/content-navigation/content-navigation.component.html

@@ -1,29 +1,27 @@
-<ng-container *ngIf="contentPageTree$ | async as contentPageTree">
-  <ng-container *ngIf="currentContentPage$ | async as currentContentPage">
-    <ul>
-      <ng-container
-        [ngTemplateOutlet]="pageTreeNode"
-        [ngTemplateOutletContext]="{ treeNodes: [contentPageTree], counter: 0 }"
-      ></ng-container>
-    </ul>
+<ng-container *ngIf="currentContentPage$ | async as currentContentPage">
+  <ul>
+    <ng-container
+      [ngTemplateOutlet]="pageTreeNode"
+      [ngTemplateOutletContext]="{ treeNodes: [contentPageTree], counter: 0 }"
+    ></ng-container>
+  </ul>
 
-    <!-- the recursively used template to render the tree nodes -->
-    <ng-template #pageTreeNode let-treeNodes="treeNodes" let-counter="counter">
-      <li
-        *ngFor="let treeNode of treeNodes"
-        [ngClass]="{ 'page-navigation-active': treeNode.contentPageId === currentContentPage.id }"
+  <!-- the recursively used template to render the tree nodes -->
+  <ng-template #pageTreeNode let-treeNodes="treeNodes" let-counter="counter">
+    <li
+      *ngFor="let treeNode of treeNodes"
+      [ngClass]="{ 'page-navigation-active': treeNode.contentPageId === currentContentPage.id }"
+    >
+      <a [routerLink]="treeNode | ishContentPageRoute" [title]="treeNode.name">{{ treeNode.name }}</a>
+      <ul
+        *ngIf="treeNode.children.length > 0 && ((!depth && depth !== 0) || depth >= counter)"
+        [ngClass]="'page-navigation-' + counter"
       >
-        <a [routerLink]="treeNode | ishContentPageRoute" [title]="treeNode.name">{{ treeNode.name }}</a>
-        <ul
-          *ngIf="treeNode.children.length > 0 && ((!depth && depth !== 0) || depth >= counter)"
-          [ngClass]="'page-navigation-' + counter"
-        >
-          <ng-container
-            [ngTemplateOutlet]="pageTreeNode"
-            [ngTemplateOutletContext]="{ treeNodes: treeNode.children, counter: counter + 1 }"
-          ></ng-container>
-        </ul>
-      </li>
-    </ng-template>
-  </ng-container>
+        <ng-container
+          [ngTemplateOutlet]="pageTreeNode"
+          [ngTemplateOutletContext]="{ treeNodes: treeNode.children, counter: counter + 1 }"
+        ></ng-container>
+      </ul>
+    </li>
+  </ng-template>
 </ng-container>

src/app/shared/cms/components/content-navigation/content-navigation.component.spec.ts

@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { of } from 'rxjs';
-import { anyNumber, instance, mock, when } from 'ts-mockito';
+import { instance, mock, when } from 'ts-mockito';
 
 import { CMSFacade } from 'ish-core/facades/cms.facade';
 import { ContentPageTreeView } from 'ish-core/models/content-page-tree-view/content-page-tree-view.model';
@@ -27,10 +27,6 @@ describe('Content Navigation Component', () => {
     }).compileComponents();
   });
 
-  beforeEach(() => {
-    when(cmsFacade.contentPage$).thenReturn(of({ id: 'page-1' } as ContentPageletEntryPointView));
-  });
-
   beforeEach(() => {
     fixture = TestBed.createComponent(ContentNavigationComponent);
     component = fixture.componentInstance;
@@ -45,7 +41,6 @@ describe('Content Navigation Component', () => {
 
   describe('Page Tree Links', () => {
     beforeEach(() => {
-      component.root = '1';
       component.depth = 10;
 
       const pageTreeElement1: ContentPageTreeElement = {
@@ -78,44 +73,43 @@ describe('Content Navigation Component', () => {
         path: [],
       };
 
-      when(cmsFacade.contentPageTree$('1', anyNumber())).thenReturn(
-        of({
-          ...pageTreeElement1,
-          parent: undefined,
-          children: [
-            {
-              ...pageTreeElement1a,
-              parent: '1',
-              children: [
-                {
-                  ...pageTreeElement1aa,
-                  parent: '1.A',
-                  children: [],
-                  pathElements: [pageTreeElement1, pageTreeElement1a, pageTreeElement1aa],
-                },
-                {
-                  ...pageTreeElement1ab,
-                  parent: '1.A',
-                  children: [],
-                  pathElements: [pageTreeElement1, pageTreeElement1a, pageTreeElement1ab],
-                },
-              ],
-              pathElements: [pageTreeElement1, pageTreeElement1a],
-            },
-            {
-              ...pageTreeElement1b,
-              parent: '1',
-              children: [],
-              pathElements: [pageTreeElement1, pageTreeElement1b],
-            },
-          ],
-          pathElements: [pageTreeElement1],
-        } as ContentPageTreeView)
-      );
+      component.contentPageTree = {
+        ...pageTreeElement1,
+        parent: undefined,
+        children: [
+          {
+            ...pageTreeElement1a,
+            parent: '1',
+            children: [
+              {
+                ...pageTreeElement1aa,
+                parent: '1.A',
+                children: [],
+                pathElements: [pageTreeElement1, pageTreeElement1a, pageTreeElement1aa],
+              },
+              {
+                ...pageTreeElement1ab,
+                parent: '1.A',
+                children: [],
+                pathElements: [pageTreeElement1, pageTreeElement1a, pageTreeElement1ab],
+              },
+            ],
+            pathElements: [pageTreeElement1, pageTreeElement1a],
+          },
+          {
+            ...pageTreeElement1b,
+            parent: '1',
+            children: [],
+            pathElements: [pageTreeElement1, pageTreeElement1b],
+          },
+        ],
+        pathElements: [pageTreeElement1],
+      } as ContentPageTreeView;
+
+      when(cmsFacade.contentPage$).thenReturn(of({ id: 'page-1' } as ContentPageletEntryPointView));
     });
 
     it('should get whole page tree, when maxDepth is greater than depth of actual page tree', () => {
-      component.ngOnChanges();
       fixture.detectChanges();
 
       expect(element.querySelectorAll('a')).toMatchInlineSnapshot(`
@@ -145,8 +139,6 @@ describe('Content Navigation Component', () => {
 
     it('should split page tree, when given maxDepth is smaller than page tree depth', () => {
       component.depth = 0;
-
-      component.ngOnChanges();
       fixture.detectChanges();
 
       expect(element.querySelectorAll('a')).toMatchInlineSnapshot(`
@@ -165,17 +157,13 @@ describe('Content Navigation Component', () => {
     describe('filter-selected', () => {
       it('should set no filter-selected class if no contentPageId equals the currentContentPageId', () => {
         when(cmsFacade.contentPage$).thenReturn(of({ id: 'xxx' } as ContentPageletEntryPointView));
-
-        component.ngOnChanges();
         fixture.detectChanges();
 
         expect(element.querySelectorAll('.page-navigation-active')).toHaveLength(0);
       });
 
       it('should set filter-selected class just for root element', () => {
         when(cmsFacade.contentPage$).thenReturn(of({ id: '1.A' } as ContentPageletEntryPointView));
-
-        component.ngOnChanges();
         fixture.detectChanges();
 
         expect(element.querySelectorAll('.page-navigation-active')).toMatchInlineSnapshot(`
@@ -210,7 +198,6 @@ describe('Content Navigation Component', () => {
 
     describe('navigation-depth', () => {
       beforeEach(() => {
-        component.ngOnChanges();
         fixture.detectChanges();
       });
 

src/app/shared/cms/components/content-navigation/content-navigation.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 
 import { CMSFacade } from 'ish-core/facades/cms.facade';
@@ -13,28 +13,21 @@ import { ContentPageletEntryPointView } from 'ish-core/models/content-view/conte
   templateUrl: './content-navigation.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ContentNavigationComponent implements OnInit, OnChanges {
+export class ContentNavigationComponent implements OnInit {
   /**
-   * Id of page tree root
+   * Content Page Tree to be rendered
    */
-  @Input() root: string;
+  @Input() contentPageTree: ContentPageTreeView;
   /**
    * Max Depth of page tree
    */
   @Input() depth: number;
 
-  contentPageTree$: Observable<ContentPageTreeView>;
   currentContentPage$: Observable<ContentPageletEntryPointView>;
 
   constructor(private cmsFacade: CMSFacade) {}
 
   ngOnInit() {
     this.currentContentPage$ = this.cmsFacade.contentPage$;
   }
-
-  ngOnChanges() {
-    if (this.root) {
-      this.contentPageTree$ = this.cmsFacade.contentPageTree$(this.root, this.depth);
-    }
-  }
 }