From be45130fa94bea0f5b353427919975142cc97a47 Mon Sep 17 00:00:00 2001
From: nereboss <niklas.kneissl@gmail.com>
Date: Thu, 28 Mar 2024 11:56:58 +0100
Subject: [PATCH 1/3] Refactor the way the metric sum is hidden from Typescript
 to CSS #3532

---
 .../metricChooser.component.html              | 58 +++++++++----------
 .../metricChooser.component.scss              |  4 ++
 .../metricChooser.component.spec.ts           | 36 ++++++++++++
 .../metricChooser/metricChooser.component.ts  | 14 +----
 4 files changed, 71 insertions(+), 41 deletions(-)

diff --git a/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.html b/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.html
index d28161e171..c4fbe9c1d9 100644
--- a/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.html
+++ b/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.html
@@ -1,30 +1,28 @@
-<div (mouseenter)="onMouseEnter()" (mouseleave)="onMouseLeave()">
-	<mat-select
-		[panelClass]="'cc-metric-chooser'"
-		[value]="selectedMetricName"
-		(selectionChange)="handleMetricChanged($event.value)"
-		(openedChange)="handleOpenedChanged($event)"
-		[disabled]="isDisabled"
-		*ngIf="attributeDescriptors$ | async as attributeDescriptors"
-	>
-		<mat-select-trigger>{{ selectedMetricName }}</mat-select-trigger>
-		<mat-form-field class="cc-metric-chooser-search-field">
-			<i matPrefix class="fa fa-search search-icon"></i>
-			<input #searchTermInput matInput type="text" [placeholder]="searchPlaceholder" [(ngModel)]="searchTerm" />
-		</mat-form-field>
-		<div class="cc-metric-chooser-option-container">
-			<mat-option
-				*ngFor="let option of metricData$ | async | filterMetricDataBySearchTerm : searchTerm"
-				[value]="option.name"
-				[title]="attributeDescriptors[option.name] | attributeDescriptorTooltip : option.name"
-			>
-				{{ option.name }}
-				<span class="metric-max-value">({{ option.maxValue }})</span><br />
-				<span class="metric-subtitle" *ngIf="attributeDescriptors[option.name]?.description as descriptorSubtitle">
-					{{ descriptorSubtitle }}
-				</span>
-			</mat-option>
-		</div>
-	</mat-select>
-	<ng-content select="[hoveredInformation]" *ngIf="!isHovered"></ng-content>
-</div>
+<mat-select
+	[panelClass]="'cc-metric-chooser'"
+	[value]="selectedMetricName"
+	(selectionChange)="handleMetricChanged($event.value)"
+	(openedChange)="handleOpenedChanged($event)"
+	[disabled]="isDisabled"
+	*ngIf="attributeDescriptors$ | async as attributeDescriptors"
+>
+	<mat-select-trigger>{{ selectedMetricName }}</mat-select-trigger>
+	<mat-form-field class="cc-metric-chooser-search-field">
+		<i matPrefix class="fa fa-search search-icon"></i>
+		<input #searchTermInput matInput type="text" [placeholder]="searchPlaceholder" [(ngModel)]="searchTerm" />
+	</mat-form-field>
+	<div class="cc-metric-chooser-option-container">
+		<mat-option
+			*ngFor="let option of metricData$ | async | filterMetricDataBySearchTerm : searchTerm"
+			[value]="option.name"
+			[title]="attributeDescriptors[option.name] | attributeDescriptorTooltip : option.name"
+		>
+			{{ option.name }}
+			<span class="metric-max-value">({{ option.maxValue }})</span><br />
+			<span class="metric-subtitle" *ngIf="attributeDescriptors[option.name]?.description as descriptorSubtitle">
+				{{ descriptorSubtitle }}
+			</span>
+		</mat-option>
+	</div>
+</mat-select>
+<ng-content select="[hoveredInformation]" *ngIf="!hideMetricSum"></ng-content>
diff --git a/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.scss b/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.scss
index d1068a5b94..70aba61ff1 100644
--- a/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.scss
+++ b/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.scss
@@ -26,6 +26,10 @@ cc-metric-chooser {
 	}
 }
 
+cc-metric-chooser:hover .metric-value {
+	display: none;
+}
+
 .mat-mdc-select-panel.cc-metric-chooser {
 	margin-top: 16px;
 	overflow: hidden;
diff --git a/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.spec.ts b/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.spec.ts
index 56557923ed..5dfbfa629a 100644
--- a/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.spec.ts
+++ b/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.spec.ts
@@ -130,4 +130,40 @@ describe("metricChooserComponent", () => {
 
 		expect(container.lastChild.textContent).toBe("projected hovered information")
 	})
+
+	it("should hide metric sum field when options menu is opened", async () => {
+		//setup
+		// let selectedMetricName = "aMetric"
+		// const { rerender, detectChanges } = await render(MetricChooserComponent, {
+		// 	excludeComponentDeclaration: true,
+		// 	componentProperties: {
+		// 		searchPlaceholder: "search metric (max value)",
+		// 		selectedMetricName,
+		// 		handleMetricChanged: (value: string) => (selectedMetricName = value)
+		// 	}
+		// })
+		// console.log(rerender)
+		// console.log(detectChanges)
+		//
+		// //check if its open at the start
+		// // do with query zeug (wahrschenlich queryByRole oder querySelector?) und dann expect not to be null
+		// // find by class (?) with ng-reflect-metric-for areaMetric
+		// let test = await screen.findAllByText(" Σ ")
+		// console.log(test)
+		//
+		// //open the menu
+		//
+		// await userEvent.click(await screen.findByText("aMetric"))
+		// const options = screen.queryAllByRole("option")
+		//
+		// //check that its not open
+		//
+		//
+		// console.log(rerender)
+		// console.log(detectChanges)
+		//
+		// //close menu
+		// await userEvent.click(options[1])
+		//check if its open
+	})
 })
diff --git a/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.ts b/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.ts
index 40dc106a4e..2cba91df5b 100644
--- a/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.ts
+++ b/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.ts
@@ -23,7 +23,7 @@ export class MetricChooserComponent implements OnInit {
 	searchTerm = ""
 	metricData$: Observable<NodeMetricData[] | EdgeMetricData[]>
 	attributeDescriptors$ = this.store.select(attributeDescriptorsSelector)
-	isHovered = false
+	hideMetricSum = false
 	isOpened = false
 
 	constructor(private store: Store<CcState>) {}
@@ -37,19 +37,11 @@ export class MetricChooserComponent implements OnInit {
 	handleOpenedChanged(opened: boolean) {
 		if (opened) {
 			this.searchTermInput.nativeElement.focus()
+			this.hideMetricSum = true
 		} else {
 			this.searchTerm = ""
+			this.hideMetricSum = false
 		}
 		this.isOpened = opened
 	}
-
-	onMouseEnter() {
-		this.isHovered = true
-	}
-
-	onMouseLeave() {
-		if (!this.isOpened) {
-			this.isHovered = false
-		}
-	}
 }

From 6559da9913e43501742d7073e6d6724806e3a2dc Mon Sep 17 00:00:00 2001
From: VictoriaG <victoria.gordeeva@maibornwolff.de>
Date: Thu, 28 Mar 2024 13:02:40 +0100
Subject: [PATCH 2/3] add unit tests to display and hover metric sum #3532

---
 .../metricChooser.component.spec.ts           | 42 +++++++++++++++++--
 1 file changed, 38 insertions(+), 4 deletions(-)

diff --git a/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.spec.ts b/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.spec.ts
index 5dfbfa629a..0b3795970c 100644
--- a/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.spec.ts
+++ b/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.spec.ts
@@ -1,5 +1,5 @@
 import { Component } from "@angular/core"
-import { TestBed } from "@angular/core/testing"
+import { ComponentFixture, TestBed } from "@angular/core/testing"
 import { expect } from "@jest/globals"
 import { render, screen } from "@testing-library/angular"
 import userEvent from "@testing-library/user-event"
@@ -11,8 +11,10 @@ import { attributeDescriptorsSelector } from "../../state/store/fileSettings/att
 import { TEST_ATTRIBUTE_DESCRIPTORS_FULL } from "../../util/dataMocks"
 
 describe("metricChooserComponent", () => {
-	beforeEach(() => {
-		TestBed.configureTestingModule({
+	let component: MetricChooserComponent
+	let fixture: ComponentFixture<MetricChooserComponent>
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
 			imports: [MetricChooserModule],
 			providers: [
 				provideMockStore({
@@ -33,7 +35,10 @@ describe("metricChooserComponent", () => {
 					]
 				})
 			]
-		})
+		}).compileComponents()
+		fixture = TestBed.createComponent(MetricChooserComponent)
+		component = fixture.componentInstance
+		fixture.detectChanges()
 	})
 
 	it("should be a select for metrics", async () => {
@@ -166,4 +171,33 @@ describe("metricChooserComponent", () => {
 		// await userEvent.click(options[1])
 		//check if its open
 	})
+
+	it("should display metric sum as ng-content when not hovered", () => {
+		component.hideMetricSum = false
+		fixture.detectChanges()
+		expect(component.hideMetricSum).toBe(false)
+	})
+
+	it("should hide metric sum as ng-content when hovered", () => {
+		component.handleOpenedChanged(true)
+		fixture.detectChanges()
+		expect(component.hideMetricSum).toBe(true)
+	})
+
+	//t('should toggle ng-content visibility on user click', async () => {
+	//	const { fixture, container } = await render(MetricChooserComponent, {
+	//		excludeComponentDeclaration: true,
+	//		componentProperties: {}
+	//	});
+	//	const toggleGroupExpansionSpy = jest.spyOn(fixture.componentInstance, "handleOpenedChanged");
+	//
+	//	const header = queryByRole(container as HTMLElement, "button");
+	//	await userEvent.click(header);
+	//
+	//	fixture.detectChanges();
+	//
+	//	expect(toggleGroupExpansionSpy).toBeCalledTimes(1);
+	//
+	//	expect(fixture.componentInstance.isOpened).toBe(true);
+	//});
 })

From 7e5cce02dfa1353cf0c8b82401db82ef3f7ca7a5 Mon Sep 17 00:00:00 2001
From: Ludwig Fritsch <ludwig.fritsch@maibornwolff.de>
Date: Tue, 2 Apr 2024 13:58:51 +0200
Subject: [PATCH 3/3] Implement test for opening metric options menu #3532

---
 .../metricChooser.component.spec.ts           | 116 +++++++-----------
 .../metricChooser/metricChooser.component.ts  |   2 -
 2 files changed, 41 insertions(+), 77 deletions(-)

diff --git a/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.spec.ts b/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.spec.ts
index 0b3795970c..66a6952a6e 100644
--- a/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.spec.ts
+++ b/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.spec.ts
@@ -1,21 +1,22 @@
-import { Component } from "@angular/core"
-import { ComponentFixture, TestBed } from "@angular/core/testing"
+import { Component, ViewChild } from "@angular/core"
+import { TestBed } from "@angular/core/testing"
+import { MatSelectModule } from "@angular/material/select"
 import { expect } from "@jest/globals"
-import { render, screen } from "@testing-library/angular"
-import userEvent from "@testing-library/user-event"
-import { MetricChooserComponent } from "./metricChooser.component"
-import { MetricChooserModule } from "./metricChooser.module"
 import { provideMockStore } from "@ngrx/store/testing"
+import { getByText, queryByText, render, screen, waitFor } from "@testing-library/angular"
+import userEvent from "@testing-library/user-event"
+import { MaterialModule } from "../../../material/material.module"
 import { metricDataSelector } from "../../state/selectors/accumulatedData/metricData/metricData.selector"
 import { attributeDescriptorsSelector } from "../../state/store/fileSettings/attributeDescriptors/attributeDescriptors.selector"
 import { TEST_ATTRIBUTE_DESCRIPTORS_FULL } from "../../util/dataMocks"
+import { MetricChooserComponent } from "./metricChooser.component"
+import { MetricChooserModule } from "./metricChooser.module"
 
 describe("metricChooserComponent", () => {
-	let component: MetricChooserComponent
-	let fixture: ComponentFixture<MetricChooserComponent>
-	beforeEach(async () => {
-		await TestBed.configureTestingModule({
-			imports: [MetricChooserModule],
+	beforeEach(() => {
+		TestBed.configureTestingModule({
+			declarations: [MetricChooserComponent],
+			imports: [MetricChooserModule, MatSelectModule, MaterialModule],
 			providers: [
 				provideMockStore({
 					selectors: [
@@ -35,10 +36,7 @@ describe("metricChooserComponent", () => {
 					]
 				})
 			]
-		}).compileComponents()
-		fixture = TestBed.createComponent(MetricChooserComponent)
-		component = fixture.componentInstance
-		fixture.detectChanges()
+		})
 	})
 
 	it("should be a select for metrics", async () => {
@@ -137,67 +135,35 @@ describe("metricChooserComponent", () => {
 	})
 
 	it("should hide metric sum field when options menu is opened", async () => {
-		//setup
-		// let selectedMetricName = "aMetric"
-		// const { rerender, detectChanges } = await render(MetricChooserComponent, {
-		// 	excludeComponentDeclaration: true,
-		// 	componentProperties: {
-		// 		searchPlaceholder: "search metric (max value)",
-		// 		selectedMetricName,
-		// 		handleMetricChanged: (value: string) => (selectedMetricName = value)
-		// 	}
-		// })
-		// console.log(rerender)
-		// console.log(detectChanges)
-		//
-		// //check if its open at the start
-		// // do with query zeug (wahrschenlich queryByRole oder querySelector?) und dann expect not to be null
-		// // find by class (?) with ng-reflect-metric-for areaMetric
-		// let test = await screen.findAllByText(" Σ ")
-		// console.log(test)
-		//
-		// //open the menu
-		//
-		// await userEvent.click(await screen.findByText("aMetric"))
-		// const options = screen.queryAllByRole("option")
-		//
-		// //check that its not open
-		//
-		//
-		// console.log(rerender)
-		// console.log(detectChanges)
-		//
-		// //close menu
-		// await userEvent.click(options[1])
-		//check if its open
-	})
+		const content = "Projected content"
+		const metricChooserTemplate = `
+			<cc-metric-chooser>
+				<div hoveredInformation class="metric-value">${content}</div>
+			</cc-metric-chooser>
+		`
 
-	it("should display metric sum as ng-content when not hovered", () => {
-		component.hideMetricSum = false
-		fixture.detectChanges()
-		expect(component.hideMetricSum).toBe(false)
-	})
+		@Component({
+			template: metricChooserTemplate
+		})
+		class WrapperComponent {
+			@ViewChild(MetricChooserComponent, { static: true }) metricChooserComponentRef: MetricChooserComponent
+		}
 
-	it("should hide metric sum as ng-content when hovered", () => {
-		component.handleOpenedChanged(true)
-		fixture.detectChanges()
-		expect(component.hideMetricSum).toBe(true)
-	})
+		const { container, fixture } = await render(WrapperComponent, {
+			declarations: [MetricChooserComponent, WrapperComponent]
+		})
+
+		const metricChooserComponent: MetricChooserComponent = fixture.debugElement.componentInstance.metricChooserComponentRef
 
-	//t('should toggle ng-content visibility on user click', async () => {
-	//	const { fixture, container } = await render(MetricChooserComponent, {
-	//		excludeComponentDeclaration: true,
-	//		componentProperties: {}
-	//	});
-	//	const toggleGroupExpansionSpy = jest.spyOn(fixture.componentInstance, "handleOpenedChanged");
-	//
-	//	const header = queryByRole(container as HTMLElement, "button");
-	//	await userEvent.click(header);
-	//
-	//	fixture.detectChanges();
-	//
-	//	expect(toggleGroupExpansionSpy).toBeCalledTimes(1);
-	//
-	//	expect(fixture.componentInstance.isOpened).toBe(true);
-	//});
+		expect(metricChooserComponent).not.toBeNull()
+		await waitFor(() => {
+			expect(getByText(container as HTMLElement, content)).not.toBeNull()
+		})
+
+		metricChooserComponent.handleOpenedChanged(true)
+
+		await waitFor(() => {
+			expect(queryByText(container as HTMLElement, content)).toBeNull()
+		})
+	})
 })
diff --git a/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.ts b/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.ts
index 2cba91df5b..6c2b554b5d 100644
--- a/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.ts
+++ b/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.ts
@@ -24,7 +24,6 @@ export class MetricChooserComponent implements OnInit {
 	metricData$: Observable<NodeMetricData[] | EdgeMetricData[]>
 	attributeDescriptors$ = this.store.select(attributeDescriptorsSelector)
 	hideMetricSum = false
-	isOpened = false
 
 	constructor(private store: Store<CcState>) {}
 
@@ -42,6 +41,5 @@ export class MetricChooserComponent implements OnInit {
 			this.searchTerm = ""
 			this.hideMetricSum = false
 		}
-		this.isOpened = opened
 	}
 }