Fix/1592/slider not initialized correctly (#1897)

* Adds a forced render of the slider after document is ready #1592

* Adds testing for rendering the slider #1592

* Adds a comment and a reminder to the solution #1592

* Fixes prettier finds

#1592

* Fixes flaky test #1592

* Updates tests to ensure higher coverage #1592

Co-authored-by: ChristianE <christian.eberhard@maibornwolff.de>
Co-authored-by: RomanenkoVladimir <volodymyr.romanenko@icloud.com>

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 ### Fixed 🐞
 
 -   Only show labels for building included in the search
+-   Color slider not initialized correctly ([#1592](https://github.com/MaibornWolff/codecharta/issues/1592))
 
 ## [1.73.0] - 2021-05-10
 

visualization/app/codeCharta/ui/rangeSlider/rangeSlider.component.spec.ts

@@ -100,6 +100,24 @@ describe("RangeSliderController", () => {
 
 			expect(FilesService.subscribe).toHaveBeenCalledWith($rootScope, rangeSliderController)
 		})
+
+		it("should have called renderSliderOnInitialisation", () => {
+			const spy = spyOn(RangeSliderController.prototype, "renderSliderOnInitialisation")
+
+			rebuildController()
+
+			expect(spy).toHaveBeenCalled()
+		})
+
+		it("should have called broadcast with rzSliderForceRender", () => {
+			const spy = spyOn($rootScope, "$broadcast")
+
+			rebuildController()
+
+			setTimeout(() => {
+				expect(spy).toHaveBeenCalledWith("rzSliderForceRender")
+			})
+		})
 	})
 
 	describe("onBlacklistChanged", () => {

visualization/app/codeCharta/ui/rangeSlider/rangeSlider.component.ts

@@ -1,7 +1,7 @@
 import "./rangeSlider.component.scss"
 import $ from "jquery"
 import { ColorRange } from "../../codeCharta.model"
-import { IRootScopeService, ITimeoutService, RzSlider } from "angular"
+import angular, { IRootScopeService, ITimeoutService, RzSlider } from "angular"
 import { StoreService } from "../../state/store.service"
 import { setColorRange, SetColorRangeAction } from "../../state/store/dynamicSettings/colorRange/colorRange.actions"
 import debounce from "lodash.debounce"
@@ -64,7 +64,7 @@ export class RangeSliderController
 		FilesService.subscribe(this.$rootScope, this)
 		BlacklistService.subscribe(this.$rootScope, this)
 		MapColorsService.subscribe(this.$rootScope, this)
-
+		this.renderSliderOnInitialisation()
 		this.applyDebouncedColorRange = debounce((action: SetColorRangeAction) => {
 			this.storeService.dispatch(action)
 		}, RangeSliderController.DEBOUNCE_TIME)
@@ -74,6 +74,21 @@ export class RangeSliderController
 		this.updateSliderColors()
 	}
 
+	renderSliderOnInitialisation() {
+		// quick and dirty: Better solution would be to wait for the content to be loaded for the first render
+		// should be taken care of when switching to Angular
+
+		angular.element(() => {
+			this.$timeout(() => {
+				this.forceSliderRender()
+			})
+		})
+	}
+
+	forceSliderRender() {
+		this.$rootScope.$broadcast("rzSliderForceRender")
+	}
+
 	onBlacklistChanged() {
 		if (this.isMaxMetricValueChanged()) {
 			this.updateMaxMetricValue()