forked from angular/angular
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathbutton_spec.ts
More file actions
132 lines (106 loc) · 4.46 KB
/
Copy pathbutton_spec.ts
File metadata and controls
132 lines (106 loc) · 4.46 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
import {
AsyncTestCompleter,
TestComponentBuilder,
beforeEach,
beforeEachBindings,
ddescribe,
describe,
el,
expect,
iit,
inject,
it,
xit,
} from 'angular2/testing_internal';
import {DebugElement} from 'angular2/src/core/debug/debug_element';
import {Component, View, ViewMetadata, UrlResolver, bind, provide} from 'angular2/core';
import {MdButton, MdAnchor} from 'angular2_material/src/components/button/button';
import {TestUrlResolver} from './test_url_resolver';
export function main() {
describe('MdButton', () => {
let builder: TestComponentBuilder;
beforeEachBindings(() => [
// Need a custom URL resolver for ng-material template files in order for them to work
// with both JS and Dart output.
bind(UrlResolver)
.toValue(new TestUrlResolver()),
]);
beforeEach(inject([TestComponentBuilder], (tcb) => { builder = tcb; }));
describe('button[md-button]', () => {
it('should handle a click on the button', inject([AsyncTestCompleter], (async) => {
builder.createAsync(TestApp).then(rootTestComponent => {
let testComponent = rootTestComponent.debugElement.componentInstance;
let buttonDebugElement =
getChildDebugElement(rootTestComponent.debugElement, 'button');
buttonDebugElement.nativeElement.click();
expect(testComponent.clickCount).toBe(1);
async.done();
});
}), 1000);
it('should disable the button', inject([AsyncTestCompleter], (async) => {
builder.createAsync(TestApp).then(rootTestComponent => {
let testAppComponent = rootTestComponent.debugElement.componentInstance;
let buttonDebugElement =
getChildDebugElement(rootTestComponent.debugElement, 'button');
let buttonElement = buttonDebugElement.nativeElement;
// The button should initially be enabled.
expect(buttonElement.disabled).toBe(false);
// After the disabled binding has been changed.
testAppComponent.isDisabled = true;
rootTestComponent.detectChanges();
// The button should should now be disabled.
expect(buttonElement.disabled).toBe(true);
// Clicking the button should not invoke the handler.
buttonElement.click();
expect(testAppComponent.clickCount).toBe(0);
async.done();
});
}), 1000);
});
describe('a[md-button]', () => {
const anchorTemplate = `<a md-button href="http://google.com" [disabled]="isDisabled">Go</a>`;
beforeEach(() => {
builder = builder.overrideView(
TestApp, new ViewMetadata({template: anchorTemplate, directives: [MdAnchor]}));
});
it('should remove disabled anchors from tab order', inject([AsyncTestCompleter], (async) => {
builder.createAsync(TestApp).then(rootTestComponent => {
let testAppComponent = rootTestComponent.debugElement.componentInstance;
let anchorDebugElement = getChildDebugElement(rootTestComponent.debugElement, 'a');
let anchorElement = anchorDebugElement.nativeElement;
// The anchor should initially be in the tab order.
expect(anchorElement.tabIndex).toBe(0);
// After the disabled binding has been changed.
testAppComponent.isDisabled = true;
rootTestComponent.detectChanges();
// The anchor should now be out of the tab order.
expect(anchorElement.tabIndex).toBe(-1);
async.done();
});
it('should preventDefault for disabled anchor clicks',
inject([AsyncTestCompleter], (async) => {
// No clear way to test this; see https://github.com/angular/angular/issues/3782
async.done();
}));
}), 1000);
});
});
}
/** Gets a child DebugElement by tag name. */
function getChildDebugElement(parent: DebugElement, tagName: string): DebugElement {
return parent.query(debugEl => debugEl.nativeElement.tagName.toLowerCase() == tagName);
}
/** Test component that contains an MdButton. */
@Component({selector: 'test-app'})
@View({
directives: [MdButton],
template:
`<button md-button type="button" (click)="increment()" [disabled]="isDisabled">Go</button>`
})
class TestApp {
clickCount: number = 0;
isDisabled: boolean = false;
increment() {
this.clickCount++;
}
}