From 92ef53a0245d853dfb78816e72130d29a432b006 Mon Sep 17 00:00:00 2001
From: Xiao Gui <xgui3783@gmail.com>
Date: Wed, 7 Oct 2020 14:26:45 +0200
Subject: [PATCH] bugfix: landmarkUnit color fix & unit tests
---
.../landmarkUnit.component.spec.ts | 121 ++++++++++++++++++
.../landmarkUnit/landmarkUnit.component.ts | 34 +++--
2 files changed, 136 insertions(+), 19 deletions(-)
create mode 100644 src/ui/nehubaContainer/landmarkUnit/landmarkUnit.component.spec.ts
diff --git a/src/ui/nehubaContainer/landmarkUnit/landmarkUnit.component.spec.ts b/src/ui/nehubaContainer/landmarkUnit/landmarkUnit.component.spec.ts
new file mode 100644
index 000000000..219da54f6
--- /dev/null
+++ b/src/ui/nehubaContainer/landmarkUnit/landmarkUnit.component.spec.ts
@@ -0,0 +1,121 @@
+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
diff --git a/src/ui/nehubaContainer/landmarkUnit/landmarkUnit.component.ts b/src/ui/nehubaContainer/landmarkUnit/landmarkUnit.component.ts
index abb797086..5a9880a06 100644
--- a/src/ui/nehubaContainer/landmarkUnit/landmarkUnit.component.ts
+++ b/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]
--
GitLab