bugfix: landmarkUnit color fix & unit tests

src/ui/nehubaContainer/landmarkUnit/landmarkUnit.component.spec.ts

+import { Component, ViewChild } from "@angular/core"
+import { async, TestBed } from "@angular/core/testing"
+import { By } from "@angular/platform-browser"
+import { SafeStylePipe } from "src/util/pipes/safeStyle.pipe"
+import { HOVER_COLOR, LandmarkUnit, NORMAL_COLOR } from "./landmarkUnit.component"
+
+
+/**
+ * need to use a dummy component for input/ngOnChanges life cycle hook to be called properly
+ * see https://github.com/angular/angular/issues/35614
+ */
+@Component({
+  template: `
+  <nehuba-2dlandmark-unit
+    [positionX]="positionX"
+    [positionY]="positionY"
+    [positionZ]="positionZ"
+    [color]="color"
+    [highlight]="highlight"
+    [flatProjection]="flatProjection"
+    [fasClass]="fasClass" 
+    >
+  </nehuba-2dlandmark-unit>
+  `
+})
+class DummyCmp{
+  @ViewChild(LandmarkUnit) public landmarkUnit: LandmarkUnit
+
+  public positionX: number = 0
+  public positionY: number = 0
+  public positionZ: number = 0
+  public color: [number, number, number] // = NORMAL_COLOR as [number, number, number]
+  public highlight: boolean = false
+  public flatProjection: boolean = false
+  public fasClass: string = 'fa-map-marker'
+}
+
+describe('> landmarkUnit.component.ts', () => {
+  describe('> LandmarkUnit', () => {
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        declarations: [
+          DummyCmp,
+          LandmarkUnit,
+          SafeStylePipe
+        ]
+      }).compileComponents()
+    }))
+
+    it('> should be able to be created', () => {
+      const fixture = TestBed.createComponent(DummyCmp)
+      fixture.detectChanges()
+      const el = fixture.debugElement.componentInstance
+      expect(el.landmarkUnit).toBeTruthy()
+    })
+
+    describe('> color', () => {
+
+      describe('> without any color inputs', () => {
+
+        it('> at rest, NORMAL_COLOR will be used', () => {
+          const fixture = TestBed.createComponent(DummyCmp)
+          const el = fixture.debugElement.componentInstance
+          fixture.detectChanges()
+          const lmUnit = el.landmarkUnit
+          fixture.detectChanges()
+          expect(lmUnit.nodeStyle).toEqual({
+            color: `rgb(${NORMAL_COLOR.join(',')})`,
+            'z-index': 0
+          })
+        })
+  
+        it('> if highlight is set to true, HOVER_COLOR will be used', () => {
+          
+          const fixture = TestBed.createComponent(DummyCmp)
+          const el = fixture.debugElement.componentInstance
+          fixture.detectChanges()
+          const lmUnit = el.landmarkUnit
+          el.highlight = true
+          fixture.detectChanges()
+          expect(lmUnit.nodeStyle).toEqual({
+            color: `rgb(${HOVER_COLOR.join(',')})`,
+            'z-index': 0
+          })
+        })
+      })
+
+      describe('> color input is defined', () => {
+        const INPUT_COLOR = [123,233, 100]
+
+        it('> at rest, INPUT_COLOR will be used', () => {
+          const fixture = TestBed.createComponent(DummyCmp)
+          const el = fixture.debugElement.componentInstance
+          fixture.detectChanges()
+          el.color = INPUT_COLOR
+          const lmUnit = el.landmarkUnit
+          fixture.detectChanges()
+          expect(lmUnit.nodeStyle).toEqual({
+            color: `rgb(${INPUT_COLOR.join(',')})`,
+            'z-index': 0
+          })
+        })
+  
+        it('> if highlight is set to true, HOVER_COLOR will be used', () => {
+          
+          const fixture = TestBed.createComponent(DummyCmp)
+          const el = fixture.debugElement.componentInstance
+          fixture.detectChanges()
+          el.color = INPUT_COLOR
+          const lmUnit = el.landmarkUnit
+          el.highlight = true
+          fixture.detectChanges()
+          expect(lmUnit.nodeStyle).toEqual({
+            color: `rgb(${HOVER_COLOR.join(',')})`,
+            'z-index': 0
+          })
+        })
+      })
+    })
+  })
+})
\ No newline at end of file

src/ui/nehubaContainer/landmarkUnit/landmarkUnit.component.ts

@@ -75,20 +75,17 @@ export class LandmarkUnit implements OnChanges {
     if (positionX || positionY) {
       this.transform = `translate(${positionX?.currentValue || this.positionX}px, ${positionY?.currentValue || this.positionY}px)`
     }
-
     if (color || positionZ || highlight) {
-      const zIndex = (positionZ.currentValue || this.positionZ) >= 0 ? 0 : -2
-      const nColor = color?.currentValue
-        || this.color
-        || (highlight?.currentValue || this.highlight)
-        ? this.color || HOVER_COLOR : NORMAL_COLOR
+      const zIndex = (positionZ?.currentValue || this.positionZ) >= 0 ? 0 : -2
+      const nColor = (highlight?.currentValue || this.highlight) === true
+        ? HOVER_COLOR
+        : color?.currentValue || this.color || NORMAL_COLOR
 
       this.nodeStyle = {
         color: `rgb(${nColor.join(',')})`,
         'z-index': zIndex
       }
 
-
       const shadowStyleBackground = `radial-gradient(
         circle at center,
         rgba(${nColor.join(',')},0.3) 10%,
@@ -107,17 +104,17 @@ export class LandmarkUnit implements OnChanges {
 
     if (flatProjection || highlight || positionZ) {
 
-      const flatProjectionVal = typeof flatProjection === 'undefined'
-        ? this.flatProjection
-        : flatProjection.currentValue
+      const flatProjectionVal = flatProjection
+        ? flatProjection.currentValue
+        : this.flatProjection
 
-      const highlightVal = typeof highlight === 'undefined'
-        ? this.highlight
-        : flatProjection.currentValue
+      const highlightVal = highlight
+        ? highlight.currentValue
+        : this.highlight
 
-      const positionZVal = typeof positionZ === 'undefined'
-        ? this.positionZ
-        : positionZ.currentValue
+      const positionZVal = positionZ
+        ? positionZ.currentValue
+        : this.positionZ
 
       this.opacity = flatProjectionVal
         ? highlightVal
@@ -134,7 +131,6 @@ export class LandmarkUnit implements OnChanges {
     }
 
     if (highlight) {
-      console.log('highlight change')
       this.beamDashedColor = {
         'border-left-color' : `rgba(${highlight.currentValue ? HOVER_COLOR.join(',') : NORMAL_COLOR.join(',')}, 0.8)`,
       }
@@ -142,5 +138,5 @@ export class LandmarkUnit implements OnChanges {
   }
 }
 
-const NORMAL_COLOR: number[] = [201,54,38]
-const HOVER_COLOR: number[] = [250,150,80]
+export const NORMAL_COLOR: number[] = [201,54,38]
+export const HOVER_COLOR: number[] = [250,150,80]