Merge pull request #3527 from mhenkens/feature/ui-stark-app-menu

feat(stark-ui): keep highlight the menu when go to child state

packages/stark-ui/src/modules/app-menu/components/app-menu-item.component.spec.ts

@@ -61,12 +61,15 @@ describe("AppMenuItemComponent", () => {
 	 * Synchronous beforeEach
 	 */
 	beforeEach(() => {
+		mockRoutingService.addTransitionHook.calls.reset();
 		hostFixture = TestBed.createComponent(TestHostComponent);
 		hostComponent = hostFixture.componentInstance;
 		hostComponent.level = 1;
 		hostFixture.detectChanges();
 		component = hostComponent.starkAppMenuItem;
 		mockRoutingService.navigateTo.calls.reset();
+		mockRoutingService.isCurrentUiStateIncludedIn.calls.reset();
+		mockRoutingService.isCurrentUiState.calls.reset();
 	});
 
 	describe("simple menu item", () => {
@@ -135,10 +138,20 @@ describe("AppMenuItemComponent", () => {
 		it("should dispatch 'deactivated' event when 'isActive' is false", () => {
 			spyOn(component.deactivated, "emit");
 			component.isActive = false;
-			hostFixture.detectChanges();
 
 			expect(component.deactivated.emit).toHaveBeenCalledTimes(1);
 		});
+
+		it("should activate when child state is selected and do not have child menu", () => {
+			hostFixture.detectChanges();
+			// `stateChange` is attached to `routingTransitionSuccessCallback` in `StarkAppMenuItemComponent`
+			const stateChange = <() => void>mockRoutingService.addTransitionHook.calls.first().args[2];
+			mockRoutingService.isCurrentUiStateIncludedIn.withArgs("test").and.returnValue(true);
+			stateChange();
+			expect(component.isActive).toBeTrue();
+			expect(mockRoutingService.isCurrentUiStateIncludedIn).toHaveBeenCalledWith("test");
+			expect(mockRoutingService.isCurrentUiState).not.toHaveBeenCalledWith("test");
+		});
 	});
 
 	describe("menu item with children", () => {
@@ -166,5 +179,16 @@ describe("AppMenuItemComponent", () => {
 			const expansionPanel: HTMLElement = hostFixture.nativeElement.querySelector(".mat-expansion-panel");
 			expect(expansionPanel).toBeDefined();
 		});
+
+		it("should not activate when child state is selected and do not have child menu", () => {
+			hostFixture.detectChanges();
+			// `stateChange` is attached to `routingTransitionSuccessCallback` in `StarkAppMenuItemComponent`
+			const stateChange = <() => void>mockRoutingService.addTransitionHook.calls.first().args[2];
+			mockRoutingService.isCurrentUiState.withArgs("test").and.returnValue(false);
+			stateChange();
+			expect(component.isActive).toBeFalse();
+			expect(mockRoutingService.isCurrentUiStateIncludedIn).not.toHaveBeenCalledWith("test");
+			expect(mockRoutingService.isCurrentUiState).toHaveBeenCalledWith("test");
+		});
 	});
 });

packages/stark-ui/src/modules/app-menu/components/app-menu-item.component.ts

@@ -203,6 +203,9 @@ export class StarkAppMenuItemComponent extends AbstractStarkUiComponent implemen
 	 * Utility function to check if the component targetState is the current state
 	 */
 	public isCurrentState(): boolean {
+		if(!this.menuGroup.entries) {
+			return this.menuGroup.targetState ? this.routingService.isCurrentUiStateIncludedIn(this.menuGroup.targetState): false;
+		}
 		return this.menuGroup.targetState ? this.routingService.isCurrentUiState(this.menuGroup.targetState) : false;
 	}