perf(stark-ui): set ChangeDetectionStrategy.OnPush to UI components to prevent Angular from running unnecessary change detection cycles

packages/stark-ui/src/modules/action-bar/components/action-bar.component.spec.ts

@@ -1,4 +1,5 @@
-import { NO_ERRORS_SCHEMA } from "@angular/core";
+/* tslint:disable:completed-docs max-inline-declarations */
+import { Component, NO_ERRORS_SCHEMA, ViewChild } from "@angular/core";
 import { async, ComponentFixture, TestBed } from "@angular/core/testing";
 import { MatButtonModule } from "@angular/material/button";
 import { MatMenuModule } from "@angular/material/menu";
@@ -8,18 +9,43 @@ import { STARK_LOGGING_SERVICE } from "@nationalbankbelgium/stark-core";
 import { MockStarkLoggingService } from "@nationalbankbelgium/stark-core/testing";
 import { TranslateModule, TranslateService } from "@ngx-translate/core";
 import { Subject } from "rxjs";
-import { StarkActionBarComponent } from "./action-bar.component";
+import { StarkActionBarComponent, StarkActionBarComponentMode } from "./action-bar.component";
 import { StarkAction } from "./action.intf";
+import { StarkActionBarConfig } from "./action-bar-config.intf";
 import createSpy = jasmine.createSpy;
 
 describe("ActionBarComponent", () => {
-	let fixture: ComponentFixture<StarkActionBarComponent>;
+	@Component({
+		selector: "host-component",
+		template: `
+			<stark-action-bar
+				[mode]="mode"
+				[actionBarId]="actionBarId"
+				[actionBarConfig]="actionBarConfig"
+				[alternativeActions]="alternativeActions"
+			></stark-action-bar>
+		`
+	})
+	class TestHostComponent {
+		@ViewChild(StarkActionBarComponent)
+		public starkActionBar!: StarkActionBarComponent;
+
+		public mode?: StarkActionBarComponentMode;
+		public actionBarId?: string;
+		public actionBarConfig: StarkActionBarConfig = { actions: [] };
+		public alternativeActions?: StarkAction[];
+	}
+
+	// IMPORTANT: The official way to test components using ChangeDetectionStrategy.OnPush is to wrap it with a test host component
+	// see https://github.com/angular/angular/issues/12313#issuecomment-444623173
+	let hostFixture: ComponentFixture<TestHostComponent>;
+	let hostComponent: TestHostComponent;
 	let component: StarkActionBarComponent;
 	const buttonToggleSelector = ".extend-action-bar";
 
 	beforeEach(async(() => {
 		return TestBed.configureTestingModule({
-			declarations: [StarkActionBarComponent],
+			declarations: [StarkActionBarComponent, TestHostComponent],
 			imports: [MatButtonModule, MatMenuModule, MatTooltipModule, TranslateModule.forRoot()],
 			providers: [
 				{ provide: STARK_LOGGING_SERVICE, useValue: new MockStarkLoggingService() },
@@ -35,8 +61,8 @@ describe("ActionBarComponent", () => {
 	}));
 
 	beforeEach(() => {
-		fixture = TestBed.createComponent(StarkActionBarComponent);
-		component = fixture.componentInstance;
+		hostFixture = TestBed.createComponent(TestHostComponent);
+		hostComponent = hostFixture.componentInstance;
 		const demoActions: StarkAction[] = [
 			{
 				id: "userDetailValidate",
@@ -56,78 +82,87 @@ describe("ActionBarComponent", () => {
 			}
 		];
 
-		component.actionBarConfig = {
+		hostComponent.actionBarConfig = {
 			actions: demoActions,
 			isPresent: true
 		};
-		fixture.detectChanges();
+		hostFixture.detectChanges();
+		component = hostComponent.starkActionBar;
 	});
 
 	describe("@Input() mode", () => {
 		it("should have the toggle action bar button visible in full mode", () => {
-			component.mode = "full";
-			fixture.detectChanges();
-			const buttonToggleExtend: HTMLElement = fixture.nativeElement.querySelector(buttonToggleSelector);
+			hostComponent.mode = "full";
+			hostFixture.detectChanges();
+
+			const buttonToggleExtend: HTMLElement = hostFixture.nativeElement.querySelector(buttonToggleSelector);
 			expect(buttonToggleExtend).toBeDefined();
 		});
 
 		it("should not have the toggle action bar button visible in compact mode", () => {
-			component.mode = "compact";
-			fixture.detectChanges();
-			const buttonToggleExtend: HTMLElement = fixture.nativeElement.querySelector(buttonToggleSelector);
+			hostComponent.mode = "compact";
+			hostFixture.detectChanges();
+
+			const buttonToggleExtend: HTMLElement = hostFixture.nativeElement.querySelector(buttonToggleSelector);
 			expect(buttonToggleExtend).toBeNull();
 		});
 	});
 
 	describe("@Input() actionBarId", () => {
 		it("should have set the id of the action bar", () => {
-			component.actionBarId = "action-bar-id";
-			fixture.detectChanges();
-			const actionBar: HTMLElement = fixture.nativeElement.querySelector("#" + component.actionBarId);
+			hostComponent.actionBarId = "action-bar-id";
+			hostFixture.detectChanges();
+
+			const actionBar: HTMLElement = hostFixture.nativeElement.querySelector("#" + hostComponent.actionBarId);
 			expect(actionBar).toBeDefined();
 		});
 	});
 
 	describe("@Input() actionBarConfig", () => {
 		it("should not call the defined action when disabled", () => {
-			const menuItem: HTMLElement = fixture.nativeElement.querySelector(
-				"#" + component.actionBarId + "-" + component.actionBarConfig.actions[0].id
+			const menuItem: HTMLElement = hostFixture.nativeElement.querySelector(
+				`#${hostComponent.actionBarId}-${hostComponent.actionBarConfig.actions[0].id}`
 			);
 			menuItem.click();
-			expect(component.actionBarConfig.actions[0].actionCall).not.toHaveBeenCalled();
+			expect(hostComponent.actionBarConfig.actions[0].actionCall).not.toHaveBeenCalled();
 		});
 
 		it("should call the defined action when enabled", () => {
-			const menuItem: HTMLElement = fixture.nativeElement.querySelector(
-				"#" + component.actionBarId + "-" + component.actionBarConfig.actions[1].id
+			const menuItem: HTMLElement = hostFixture.nativeElement.querySelector(
+				`#${hostComponent.actionBarId}-${hostComponent.actionBarConfig.actions[1].id}`
 			);
 			menuItem.click();
-			expect(component.actionBarConfig.actions[1].actionCall).toHaveBeenCalledTimes(1);
+			expect(hostComponent.actionBarConfig.actions[1].actionCall).toHaveBeenCalledTimes(1);
 		});
 	});
 
 	describe("@Input() alternativeActions", () => {
 		beforeEach(() => {
-			component.alternativeActions = component.actionBarConfig.actions;
-			fixture.detectChanges();
+			hostComponent.alternativeActions = hostComponent.actionBarConfig.actions;
+			hostFixture.detectChanges();
 		});
 
 		it("should display", () => {
-			const actionBar: HTMLElement = fixture.nativeElement.querySelector(".open-alt-actions");
+			const actionBar: HTMLElement = hostFixture.nativeElement.querySelector(".open-alt-actions");
 			expect(actionBar).toBeDefined();
 		});
 	});
 
 	describe("toggle extended action bar", () => {
 		it("should toggle the action bar extension", () => {
-			const buttonToggleExtend: HTMLElement = fixture.nativeElement.querySelector(buttonToggleSelector);
+			hostComponent.mode = "full";
+			hostFixture.detectChanges();
+
+			const buttonToggleExtend: HTMLElement = hostFixture.nativeElement.querySelector(buttonToggleSelector);
 			spyOn(component, "toggleExtendedActionBar").and.callThrough();
 			buttonToggleExtend.click();
-			fixture.detectChanges();
+			hostFixture.detectChanges();
+
 			expect(component.toggleExtendedActionBar).toHaveBeenCalledTimes(1);
 			expect(component.isExtended).toBe(true);
 			buttonToggleExtend.click();
-			fixture.detectChanges();
+
+			hostFixture.detectChanges();
 			expect(component.toggleExtendedActionBar).toHaveBeenCalledTimes(2);
 			expect(component.isExtended).toBe(false);
 		});

packages/stark-ui/src/modules/action-bar/components/action-bar.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, Inject, Input, OnInit, Renderer2, ViewEncapsulation } from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, Inject, Input, OnInit, Renderer2, ViewEncapsulation } from "@angular/core";
 import { StarkActionBarConfig } from "./action-bar-config.intf";
 import { StarkAction, StarkActionBarButtonColor } from "./action.intf";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
@@ -18,6 +18,7 @@ const componentName = "stark-action-bar";
 	selector: "stark-action-bar",
 	templateUrl: "./action-bar.component.html",
 	encapsulation: ViewEncapsulation.None,
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	// We need to use host instead of @HostBinding: https://github.com/NationalBankBelgium/stark/issues/664
 	host: {
 		class: componentName

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

@@ -1,4 +1,14 @@
-import { Component, ElementRef, Inject, Input, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from "@angular/core";
+import {
+	ChangeDetectionStrategy,
+	Component,
+	ElementRef,
+	Inject,
+	Input,
+	OnDestroy,
+	OnInit,
+	Renderer2,
+	ViewEncapsulation
+} from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
 import { StarkDOMUtil } from "../../../util/dom";
 import { AbstractStarkUiComponent } from "../../../common/classes/abstract-component";
@@ -20,6 +30,7 @@ export type StarkAppDataComponentMode = "dropdown" | "menu";
 	selector: "stark-app-data",
 	templateUrl: "./app-data.component.html",
 	encapsulation: ViewEncapsulation.None,
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		class: componentName
 	}

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

@@ -1,4 +1,4 @@
-import { Component, HostBinding, Inject, Input, OnInit } from "@angular/core";
+import { ChangeDetectionStrategy, Component, HostBinding, Inject, Input, OnInit } from "@angular/core";
 import { TranslateService } from "@ngx-translate/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
 
@@ -12,7 +12,8 @@ const componentName = "stark-app-footer";
  */
 @Component({
 	selector: "stark-app-footer",
-	templateUrl: "./app-footer.component.html"
+	templateUrl: "./app-footer.component.html",
+	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class StarkAppFooterComponent implements OnInit {
 	/**

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

@@ -1,4 +1,4 @@
-import { Component, ElementRef, Inject, Input, OnInit, Renderer2, ViewEncapsulation } from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, Inject, Input, OnInit, Renderer2, ViewEncapsulation } from "@angular/core";
 import { STARK_LOGGING_SERVICE, STARK_ROUTING_SERVICE, StarkLoggingService, StarkRoutingService } from "@nationalbankbelgium/stark-core";
 import { AbstractStarkUiComponent } from "../../../common/classes/abstract-component";
 
@@ -14,6 +14,7 @@ const componentName = "stark-app-logo";
 	selector: "stark-app-logo",
 	templateUrl: "./app-logo.component.html",
 	encapsulation: ViewEncapsulation.None,
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	// We need to use host instead of @HostBinding: https://github.com/NationalBankBelgium/stark/issues/664
 	host: {
 		class: componentName

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

@@ -1,4 +1,14 @@
-import { Component, ElementRef, Inject, Input, OnInit, Optional, Renderer2, ViewEncapsulation } from "@angular/core";
+import {
+	ChangeDetectionStrategy,
+	Component,
+	ElementRef,
+	Inject,
+	Input,
+	OnInit,
+	Optional,
+	Renderer2,
+	ViewEncapsulation
+} from "@angular/core";
 
 import {
 	STARK_LOGGING_SERVICE,
@@ -25,6 +35,7 @@ const componentName = "stark-app-logout";
 	selector: "stark-app-logout",
 	templateUrl: "./app-logout.component.html",
 	encapsulation: ViewEncapsulation.None,
+	changeDetection: ChangeDetectionStrategy.OnPush,
 	// We need to use host instead of @HostBinding: https://github.com/NationalBankBelgium/stark/issues/664
 	host: {
 		class: componentName