Skip to content

Commit cf82a69

Browse files
committed
add testing
1 parent fd68bfe commit cf82a69

File tree

5 files changed

+203
-192
lines changed

5 files changed

+203
-192
lines changed
Lines changed: 21 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,16 @@
11
<div class="demo-tooltip">
22
<h1>Tooltip Demo</h1>
3+
34
<p class="centered">
4-
<button
5+
<button #tooltip="mdTooltip"
56
md-raised-button
67
color="primary"
7-
md-tooltip="to see a tooltip"
8+
[md-tooltip]="message"
89
[tooltip-position]="position">
9-
Mouse over this link
10-
</button>
11-
<button
12-
md-raised-button
13-
color="primary"
14-
md-tooltip="to see a tooltip"
15-
[tooltip-position]="position">
16-
Mouse over this link
17-
</button>
18-
<button
19-
md-raised-button
20-
color="primary"
21-
md-tooltip="to see a tooltip"
22-
[tooltip-position]="position">
23-
Mouse over this link
24-
</button>
25-
<button
26-
md-raised-button
27-
color="primary"
28-
md-tooltip="to see a tooltip"
29-
[tooltip-position]="position">
30-
Mouse over this link
31-
</button>
32-
<button
33-
md-raised-button
34-
color="primary"
35-
md-tooltip="to see a tooltip"
36-
[tooltip-position]="position">
37-
Mouse over this link
38-
</button>
39-
<button
40-
md-raised-button
41-
color="primary"
42-
md-tooltip="to see a tooltip"
43-
[tooltip-position]="position">
44-
Mouse over this link
10+
Mouse over to see the tooltip
4511
</button>
4612
</p>
13+
4714
<p>
4815
<md-radio-group [(ngModel)]="position">
4916
<md-radio-button value="below">Below</md-radio-button>
@@ -52,4 +19,20 @@ <h1>Tooltip Demo</h1>
5219
<md-radio-button value="after">After</md-radio-button>
5320
</md-radio-group>
5421
</p>
22+
23+
<p>
24+
<strong>Message: </strong>
25+
<md-input type="text" [(ngModel)]="message"></md-input>
26+
</p>
27+
28+
<strong>Mouse over to</strong>
29+
<button md-raised-button color="primary" (mouseenter)="tooltip.show()">
30+
Show tooltip
31+
</button>
32+
<button md-raised-button color="primary" (mouseenter)="tooltip.hide(0)">
33+
Hide tooltip
34+
</button>
35+
<button md-raised-button color="primary" (mouseenter)="tooltip.toggle()">
36+
Toggle tooltip
37+
</button>
5538
</div>

src/demo-app/tooltip/tooltip-demo.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,5 @@ import {TooltipPosition} from '@angular/material';
1010
})
1111
export class TooltipDemo {
1212
position: TooltipPosition = 'below';
13+
message: string = 'Here is the tooltip';
1314
}

src/lib/tooltip/tooltip.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="md-tooltip"
22
[style.transform-origin]="_transformOrigin"
33
[@state]="_visibility"
4-
(@state.done)="_visibilityAnimationComplete($event)">
4+
(@state.done)="this._afterVisibilityAnimation($event)">
55
{{message}}
66
</div>

src/lib/tooltip/tooltip.spec.ts

Lines changed: 54 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
1-
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
1+
import {async, ComponentFixture, TestBed, tick, fakeAsync} from '@angular/core/testing';
22
import {Component, DebugElement} from '@angular/core';
33
import {By} from '@angular/platform-browser';
4-
import {TooltipPosition, MdTooltip} from './tooltip';
4+
import {TooltipPosition, MdTooltip, MATERIAL_TOOLTIP_HIDE_DELAY} from './tooltip';
55
import {OverlayContainer} from '../core';
66
import {MdTooltipModule} from './tooltip';
77

8+
const initialTooltipMessage = 'initial tooltip message';
89

9-
describe('MdTooltip', () => {
10+
fdescribe('MdTooltip', () => {
1011
let overlayContainerElement: HTMLElement;
1112

13+
1214
beforeEach(async(() => {
1315
TestBed.configureTestingModule({
1416
imports: [MdTooltipModule.forRoot()],
@@ -38,28 +40,66 @@ describe('MdTooltip', () => {
3840
tooltipDirective = buttonDebugElement.injector.get(MdTooltip);
3941
});
4042

41-
it('should show/hide on mouse enter/leave', () => {
42-
expect(tooltipDirective.visible).toBeFalsy();
43+
it('should show and hide the tooltip', fakeAsync(() => {
44+
expect(tooltipDirective._tooltipRef).toBeUndefined();
4345

44-
tooltipDirective._handleMouseEnter(null);
45-
expect(tooltipDirective.visible).toBeTruthy();
46+
tooltipDirective.show();
47+
expect(tooltipDirective._isTooltipVisible()).toBe(true);
4648

4749
fixture.detectChanges();
48-
expect(overlayContainerElement.textContent).toBe('some message');
50+
expect(overlayContainerElement.textContent).toContain(initialTooltipMessage);
51+
52+
tooltipDirective.hide();
53+
expect(tooltipDirective._isTooltipVisible()).toBe(true);
54+
55+
// After hidden, expect that the tooltip is not visible.
56+
tick(MATERIAL_TOOLTIP_HIDE_DELAY);
57+
expect(tooltipDirective._isTooltipVisible()).toBe(false);
58+
}));
59+
60+
it('should remove the tooltip when changing position', () => {
61+
const initialPosition: TooltipPosition = 'below';
62+
const changedPosition: TooltipPosition = 'above';
63+
64+
expect(tooltipDirective._tooltipRef).toBeUndefined();
4965

50-
tooltipDirective._handleMouseLeave(null);
51-
expect(overlayContainerElement.textContent).toBe('');
66+
tooltipDirective.position = initialPosition;
67+
tooltipDirective.show();
68+
expect(tooltipDirective._tooltipRef).toBeDefined();
69+
70+
// Same position value should not remove the tooltip
71+
tooltipDirective.position = initialPosition;
72+
expect(tooltipDirective._tooltipRef).toBeDefined();
73+
74+
// Different position value should destroy the tooltip
75+
tooltipDirective.position = changedPosition;
76+
expect(tooltipDirective._tooltipRef).toBeNull();
77+
expect(tooltipDirective._overlayRef).toBeNull();
5278
});
53-
});
54-
});
5579

56-
// TODO(andrewjs): Write test to make sure the overlay is detached AND tooltipRef is set to null
80+
it('should be able to modify the tooltip message', () => {
81+
expect(tooltipDirective._tooltipRef).toBeUndefined();
5782

83+
tooltipDirective.show();
84+
expect(tooltipDirective._tooltipRef._visibility).toBe('visible');
85+
86+
fixture.detectChanges();
87+
expect(overlayContainerElement.textContent).toContain(initialTooltipMessage);
88+
89+
const newMessage = 'new tooltip message';
90+
tooltipDirective.message = newMessage;
91+
92+
fixture.detectChanges();
93+
expect(overlayContainerElement.textContent).toContain(newMessage);
94+
});
95+
});
96+
});
5897

5998
@Component({
6099
selector: 'app',
61-
template: `<button md-tooltip="some message" [tooltip-position]="position">Button</button>`
100+
template: `<button [md-tooltip]="message" [tooltip-position]="position">Button</button>`
62101
})
63102
class BasicTooltipDemo {
64103
position: TooltipPosition = 'below';
104+
message: string = initialTooltipMessage;
65105
}

0 commit comments

Comments
 (0)