[ADF-1001] Fix styling issues with tooltip and increase code coverage (#2047)

* Adding tests for diagram tooltips

* Style fixes

ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.html

@@ -1,13 +1,13 @@
 <div #tooltipContent class="{{adf}}-diagram-tooltip">
     <div class="{{adf}}-diagram-tooltip-header">{{ data.type }} {{ data.name || data.id }}</div>
     <div class="{{adf}}-diagram-tooltip-body">
-        <div *ngIf="data.name">
+        <div *ngIf="data.name" class="{{adf}}-diagram-name-property">
-            <span class="{{adf}}-propertyName">Name:</span>
+            <span class="{{adf}}-diagram-propertyName">Name:</span>
-            <span class="{{adf}}-propertyValue">{{ data.name }}</span>
+            <span class="{{adf}}-diagram-propertyValue">{{ data.name }}</span>
         </div>
-        <div *ngFor="let property of data.properties">
+        <div *ngFor="let property of data.properties" class="{{adf}}-diagram-general-property">
-            <span class="{{adf}}-propertyName">{{ property.name }}:</span>
+            <span class="{{adf}}-diagram-propertyName">{{ property.name }}:</span>
-            <span class="{{adf}}-propertyValue">{{ property.value }}</span>
+            <span class="{{adf}}-diagram-propertyValue">{{ property.value }}</span>
         </div>
     </div>
 </div>

ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.scss

@@ -16,6 +16,7 @@
         text-align: left;
         will-change: unset;
         border: 1px solid #c5c5c5;
+        word-wrap: break-word;
     }
 
     &-diagram-tooltip.is-active {
@@ -23,7 +24,7 @@
     }
 
     &-diagram-tooltip-header {
-        background-color: rgba(43, 65, 79, 0.9);
+        background-color: rgba(43, 65, 79, 0.95);
         color: #FFF;
         padding: 8px;
         font-weight: bold;
@@ -33,7 +34,7 @@
 
     &-diagram-tooltip-body {
         color: #4a4a4a;
-        background-color: rgba(255, 255, 255, 0.9);
+        background-color: rgba(255, 255, 255, 0.95);
     }
 
     &-diagram-tooltip-body > div {
@@ -48,12 +49,12 @@
         padding-bottom: 8px;
     }
 
-    &-propertyName {
+    &-diagram-propertyName {
         font-weight: bold;
         margin-right: 5px;
     }
 
-    &-propertyValue {
+    &-diagram-propertyValue {
         font-style: italic;
     }
 }

ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.spec.ts

@@ -0,0 +1,186 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { DiagramTooltip } from './diagram-tooltip.component';
+import { By } from '@angular/platform-browser';
+
+@Component({
+    template: `
+        <div id="diagram-element-id">Hover me</div>
+        <diagram-tooltip [data]="data"></diagram-tooltip>`
+})
+class TestHostComponent {
+    data = {
+        id: 'diagram-element-id'
+    };
+}
+
+describe('DiagramTooltip', () => {
+
+    describe('Template', () => {
+
+        let fixture: ComponentFixture<DiagramTooltip>;
+        let component: DiagramTooltip;
+        let data;
+
+        beforeEach(async(() => {
+            TestBed.configureTestingModule({
+                declarations: [ DiagramTooltip ],
+                providers: []
+            }).compileComponents();
+        }));
+
+        beforeEach(() => {
+            fixture = TestBed.createComponent(DiagramTooltip);
+            component = fixture.componentInstance;
+            data = {
+                type: 'awesome-diagram-element',
+                name: 'diagram-element-name',
+                id: 'diagram-element-id',
+                properties: []
+            };
+            component.data = data;
+            fixture.detectChanges();
+        });
+
+        it('should render with type and name if name is defined', () => {
+            let tooltipHeader = fixture.debugElement.query(By.css('.adf-diagram-tooltip-header'));
+
+            expect(tooltipHeader.nativeElement.innerText).toBe('awesome-diagram-element diagram-element-name');
+        });
+
+        it('should render with type and id if name is NOT defined', () => {
+            data.name = '';
+            fixture.detectChanges();
+
+            let tooltipHeader = fixture.debugElement.query(By.css('.adf-diagram-tooltip-header'));
+
+            expect(tooltipHeader.nativeElement.innerText).toBe('awesome-diagram-element diagram-element-id');
+        });
+
+        it('should render the name if name is defined in the tooltip body', () => {
+            let nameProperty = fixture.debugElement.query(By.css('.adf-diagram-name-property'));
+
+            expect(nameProperty).not.toBeNull();
+            expect(nameProperty.nativeElement.innerText).toBe('Name: diagram-element-name');
+        });
+
+        it('should NOT render the name if name is NOT defined in the tooltip body', () => {
+            data.name = '';
+            fixture.detectChanges();
+
+            let nameProperty = fixture.debugElement.query(By.css('.adf-diagram-name-property'));
+
+            expect(nameProperty).toBeNull();
+        });
+
+        it('should render the properties, if there is any', () => {
+            data.properties = [
+                { name: 'property-1-name', value: 'property-1-value' },
+                { name: 'property-2-name', value: 'property-2-value' }
+            ];
+            fixture.detectChanges();
+
+            let propertyNames = fixture.debugElement.queryAll(By.css('.adf-diagram-general-property > .adf-diagram-propertyName')),
+                propertyValues = fixture.debugElement.queryAll(By.css('.adf-diagram-general-property > .adf-diagram-propertyValue'));
+
+            expect(propertyNames.length).toBe(2);
+            expect(propertyValues.length).toBe(2);
+            expect(propertyNames[0].nativeElement.innerText).toBe('property-1-name:');
+            expect(propertyNames[1].nativeElement.innerText).toBe('property-2-name:');
+            expect(propertyValues[0].nativeElement.innerText).toBe('property-1-value');
+            expect(propertyValues[1].nativeElement.innerText).toBe('property-2-value');
+        });
+    });
+
+    describe('Tooltip functionality', () => {
+
+        let fixture: ComponentFixture<TestHostComponent>;
+        let component: TestHostComponent;
+        let event: MouseEvent;
+
+        beforeEach(async(() => {
+            TestBed.configureTestingModule({
+                declarations: [ DiagramTooltip, TestHostComponent ]
+            }).compileComponents();
+        }));
+
+        beforeEach(() => {
+            fixture  = TestBed.createComponent(TestHostComponent);
+            component = fixture.componentInstance;
+            event = new MouseEvent('mouseenter');
+
+            fixture.detectChanges();
+        });
+
+        it('should NOT show the tooltip by default', () => {
+            const tooltip = fixture.debugElement.query(By.css('.adf-diagram-tooltip.is-active'));
+
+            expect(tooltip).toBeNull();
+        });
+
+        it('should show the tooltip on hovering the target element', () => {
+            const tooltipTarget = fixture.debugElement.query(By.css('#diagram-element-id'));
+
+            tooltipTarget.nativeElement.dispatchEvent(new MouseEvent('mouseenter'));
+
+            let tooltip = fixture.debugElement.query(By.css('.adf-diagram-tooltip.is-active'));
+            expect(tooltip).not.toBeNull();
+        });
+
+        it('should show the tooltip on touchend the target element', () => {
+            const tooltipTarget = fixture.debugElement.query(By.css('#diagram-element-id'));
+
+            tooltipTarget.nativeElement.dispatchEvent(new MouseEvent('touchend'));
+
+            let tooltip = fixture.debugElement.query(By.css('.adf-diagram-tooltip.is-active'));
+            expect(tooltip).not.toBeNull();
+        });
+
+        it('should hide the tooltip on leaving the target element', () => {
+            const tooltipTarget = fixture.debugElement.query(By.css('#diagram-element-id'));
+
+            tooltipTarget.nativeElement.dispatchEvent(new MouseEvent('mouseenter'));
+            tooltipTarget.nativeElement.dispatchEvent(new MouseEvent('mouseleave'));
+
+            let tooltip = fixture.debugElement.query(By.css('.adf-diagram-tooltip.is-active'));
+            expect(tooltip).toBeNull();
+        });
+
+        it('should hide the tooltip on windows\'s scroll element', () => {
+            const tooltipTarget = fixture.debugElement.query(By.css('#diagram-element-id'));
+
+            tooltipTarget.nativeElement.dispatchEvent(new MouseEvent('mouseenter'));
+            window.dispatchEvent(new CustomEvent('scroll'));
+
+            let tooltip = fixture.debugElement.query(By.css('.adf-diagram-tooltip.is-active'));
+            expect(tooltip).toBeNull();
+        });
+
+        it('should hide the tooltip on windows\'s touchstart element', () => {
+            const tooltipTarget = fixture.debugElement.query(By.css('#diagram-element-id'));
+
+            tooltipTarget.nativeElement.dispatchEvent(new MouseEvent('touchend'));
+            window.dispatchEvent(new CustomEvent('touchstart'));
+
+            let tooltip = fixture.debugElement.query(By.css('.adf-diagram-tooltip.is-active'));
+            expect(tooltip).toBeNull();
+        });
+    });
+});