From 95506eb94825be5f9e6e2d5ca1fce91e2a5d307f Mon Sep 17 00:00:00 2001
From: Uday Vunnam <20707504+udayvunnam@users.noreply.github.com>
Date: Mon, 15 Nov 2021 09:19:07 +0530
Subject: [PATCH] fix: change autogenerated to false on dynamically setting a
 label (#101)

---
 .../src/integration/app.spec.ts               | 24 ++++++++++++++++---
 apps/simple-demo/src/app/app.component.html   | 12 ++++++++--
 apps/simple-demo/src/app/app.component.ts     |  7 +++++-
 .../simple-demo/src/app/app.routing.module.ts |  7 ++++--
 .../src/lib/breadcrumb.service.ts             |  5 ++++
 5 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/apps/simple-demo-e2e/src/integration/app.spec.ts b/apps/simple-demo-e2e/src/integration/app.spec.ts
index 489faf3..75c4fb9 100644
--- a/apps/simple-demo-e2e/src/integration/app.spec.ts
+++ b/apps/simple-demo-e2e/src/integration/app.spec.ts
@@ -1,17 +1,35 @@
 describe('simple-demo', () => {
-  it('should contain breadcrumbs for books', () => {
+  it('should show breadcrumbs within ngIf', () => {
     cy.visit('/');
     // initially within ngIf and not shown
     cy.get('xng-breadcrumb').should('not.exist');
     cy.get('button').contains('Toggle Breadcrumb Visibility').click();
     cy.get('xng-breadcrumb').contains('Dashboard');
+  });
 
+  it("shouldn't have default seperator if Home breadcrumb is not defined", () => {
     // shouldn't have default seperator if Home breadcrumb is not defined
     cy.get('.xng-breadcrumb-list').contains('/').should('not.exist');
-    cy.get('a').contains('Order Details').click();
+  });
 
-    // Should show breadcrumbs when routeReuseStrategy is false
+  it('should show breadcrumbs when routeReuseStrategy is false', () => {
+    // Dashboard and Order Details use same component and routeReuseStrategy false still should get data
+    cy.get('a').contains('Order Details').click();
     cy.get('.xng-breadcrumb-list').contains('Order Details').should('exist');
     cy.get('.xng-breadcrumb-list').contains('Company Name').should('exist');
   });
+
+  it('should show breadcrumbs if dynamically set with autoGenerate false', () => {
+    cy.get('a').contains('Order Items').click();
+    cy.get('.auto-generated-true .xng-breadcrumb-list')
+      .contains('items')
+      .should('exist');
+    cy.get('.auto-generated-false .xng-breadcrumb-list')
+      .contains('items')
+      .should('not.exist');
+    cy.get('button').contains('Set Order Items Label').click();
+    cy.get('.auto-generated-false .xng-breadcrumb-list')
+      .contains('My Order Items')
+      .should('exist');
+  });
 });
diff --git a/apps/simple-demo/src/app/app.component.html b/apps/simple-demo/src/app/app.component.html
index cd08879..5183b89 100644
--- a/apps/simple-demo/src/app/app.component.html
+++ b/apps/simple-demo/src/app/app.component.html
@@ -1,8 +1,14 @@
-<h2>xng-breadcrumb</h2>
+<h1>xng-breadcrumb</h1>
 <h2>Angular version {{ name }}</h2>
 
 <div *ngIf="showBreadcrumbs">
-  <xng-breadcrumb></xng-breadcrumb>
+  <xng-breadcrumb class="auto-generated-true"></xng-breadcrumb>
+
+  <h3>Auto generated: false</h3>
+  <xng-breadcrumb
+    [autoGenerate]="false"
+    class="auto-generated-false"
+  ></xng-breadcrumb>
 </div>
 
 <router-outlet></router-outlet>
@@ -10,3 +16,5 @@ <h2>Angular version {{ name }}</h2>
 <button (click)="toggleBreadcrumbVisibility()">
   Toggle Breadcrumb Visibility
 </button>
+
+<button (click)="setOrderItemsLabel()">Set Order Items Label</button>
diff --git a/apps/simple-demo/src/app/app.component.ts b/apps/simple-demo/src/app/app.component.ts
index 87c949c..2ccfd9e 100644
--- a/apps/simple-demo/src/app/app.component.ts
+++ b/apps/simple-demo/src/app/app.component.ts
@@ -1,3 +1,4 @@
+import { BreadcrumbService } from '@xng/xng-breadcrumb';
 import { Component, VERSION } from '@angular/core';
 import { Router } from '@angular/router';
 
@@ -9,7 +10,7 @@ import { Router } from '@angular/router';
 export class AppComponent {
   showBreadcrumbs = false;
 
-  constructor(router: Router) {
+  constructor(router: Router, private breadcrumbService: BreadcrumbService) {
     router.routeReuseStrategy.shouldReuseRoute = () => false;
   }
 
@@ -17,5 +18,9 @@ export class AppComponent {
     this.showBreadcrumbs = !this.showBreadcrumbs;
   }
 
+  setOrderItemsLabel() {
+    this.breadcrumbService.set('@orderItems', { label: 'My Order Items' });
+  }
+
   name = 'Angular ' + VERSION.major;
 }
diff --git a/apps/simple-demo/src/app/app.routing.module.ts b/apps/simple-demo/src/app/app.routing.module.ts
index 894f301..e7e67ee 100644
--- a/apps/simple-demo/src/app/app.routing.module.ts
+++ b/apps/simple-demo/src/app/app.routing.module.ts
@@ -1,4 +1,3 @@
-import { AppComponent } from './app.component';
 import { PageComponent } from './page.component';
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
@@ -39,7 +38,11 @@ export const appRoutes: Routes = [
                   {
                     path: 'items',
                     component: PageComponent,
-                    data: { breadcrumb: 'Items' },
+                    data: {
+                      breadcrumb: {
+                        alias: 'orderItems',
+                      },
+                    },
                   },
                   {
                     path: 'payment',
diff --git a/libs/xng-breadcrumb/src/lib/breadcrumb.service.ts b/libs/xng-breadcrumb/src/lib/breadcrumb.service.ts
index 9ebef67..8fb8506 100644
--- a/libs/xng-breadcrumb/src/lib/breadcrumb.service.ts
+++ b/libs/xng-breadcrumb/src/lib/breadcrumb.service.ts
@@ -322,6 +322,11 @@ export class BreadcrumbService {
         { ...breadcrumbObject, routeLink: this.ensureLeadingSlash(key) },
       ];
     }
+
+    // For this route if previously a breadcrumb is not defined that sets isAutoGeneratedLabel: true
+    // change it to false since this is user supplied value
+    updateArgs[1].isAutoGeneratedLabel = false;
+
     this.updateStore(...updateArgs);
     this.updateCurrentBreadcrumbs(...updateArgs);
   }