diff --git a/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.html b/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.html index 844d45a436..39f606a33b 100644 --- a/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.html +++ b/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.html @@ -1,13 +1,13 @@
{{ data.type }} {{ data.name || data.id }}
-
- Name: - {{ data.name }} +
+ Name: + {{ data.name }}
-
- {{ property.name }}: - {{ property.value }} +
+ {{ property.name }}: + {{ property.value }}
diff --git a/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.scss b/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.scss index 0717a0f0c5..37c7d70f48 100644 --- a/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.scss +++ b/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; } } diff --git a/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.spec.ts b/ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.spec.ts new file mode 100644 index 0000000000..b54e6f4f16 --- /dev/null +++ b/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: ` +
Hover me
+ ` +}) +class TestHostComponent { + data = { + id: 'diagram-element-id' + }; +} + +describe('DiagramTooltip', () => { + + describe('Template', () => { + + let fixture: ComponentFixture; + 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; + 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(); + }); + }); +});