Skip to content

Commit 7aed3fc

Browse files
jelbournjelbourn
authored
chore(list): remove TestComponentBuilder (#1006)
1 parent ff18edd commit 7aed3fc

File tree

1 file changed

+170
-169
lines changed

1 file changed

+170
-169
lines changed

‎src/components/list/list.spec.ts

Lines changed: 170 additions & 169 deletions
Original file line numberDiff line numberDiff line change
@@ -1,191 +1,192 @@
1-
import {
2-
inject,
3-
async,
4-
TestComponentBuilder,
5-
TestBed,
6-
} from '@angular/core/testing';
1+
import {async, TestBed} from '@angular/core/testing';
72
import {Component} from '@angular/core';
83
import {By} from '@angular/platform-browser';
94
import {MdListItem, MdListModule} from './list';
105

6+
117
describe('MdList', () => {
12-
let builder: TestComponentBuilder;
138

149
beforeEach(async(() => {
1510
TestBed.configureTestingModule({
1611
imports: [MdListModule],
17-
declarations: [TestList],
12+
declarations: [
13+
ListWithOneAnchorItem,
14+
ListWithOneItem,
15+
ListWithTwoLineItem,
16+
ListWithThreeLineItem,
17+
ListWithAvatar,
18+
ListWithItemWithCssClass,
19+
ListWithDynamicNumberOfLines,
20+
ListWithMultipleItems,
21+
],
1822
});
1923

2024
TestBed.compileComponents();
2125
}));
2226

23-
beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
24-
builder = tcb;
25-
}));
26-
27-
it('should add and remove focus class on focus/blur', async(() => {
28-
var template = `
29-
<md-list>
30-
<a md-list-item>
31-
Paprika
32-
</a>
33-
</md-list>`;
34-
35-
builder.overrideTemplate(TestList, template).createAsync(TestList).then(fixture => {
36-
let listItem = fixture.debugElement.query(By.directive(MdListItem));
37-
let listItemDiv = fixture.debugElement.query(By.css('.md-list-item'));
38-
fixture.detectChanges();
39-
expect(listItemDiv.nativeElement.classList).not.toContain('md-list-item-focus');
40-
41-
listItem.componentInstance._handleFocus();
42-
fixture.detectChanges();
43-
expect(listItemDiv.nativeElement.classList).toContain('md-list-item-focus');
44-
45-
listItem.componentInstance._handleBlur();
46-
fixture.detectChanges();
47-
expect(listItemDiv.nativeElement.classList).not.toContain('md-list-item-focus');
48-
});
49-
}));
50-
51-
it('should not apply any class to a list without lines', async(() => {
52-
var template = `
53-
<md-list>
54-
<md-list-item>
55-
Paprika
56-
</md-list-item>
57-
</md-list>`;
58-
59-
builder.overrideTemplate(TestList, template).createAsync(TestList).then(fixture => {
60-
let listItem = fixture.debugElement.query(By.css('md-list-item'));
61-
fixture.detectChanges();
62-
expect(listItem.nativeElement.className).toBe('');
63-
});
64-
}));
65-
66-
it('should apply md-2-line class to lists with two lines', async(() => {
67-
var template = `
68-
<md-list>
69-
<md-list-item *ngFor="let item of items">
70-
<img src="">
71-
<h3 md-line>{{item.name}}</h3>
72-
<p md-line>{{item.description}}</p>
73-
</md-list-item>
74-
</md-list>`;
75-
76-
return builder.overrideTemplate(TestList, template).createAsync(TestList).then(fixture => {
77-
fixture.detectChanges();
78-
let listItems = fixture.debugElement.children[0].queryAll(By.css('md-list-item'));
79-
expect(listItems[0].nativeElement.className).toBe('md-2-line');
80-
expect(listItems[1].nativeElement.className).toBe('md-2-line');
81-
});
82-
}));
83-
84-
it('should apply md-3-line class to lists with three lines', async(() => {
85-
var template = `
86-
<md-list>
87-
<md-list-item *ngFor="let item of items">
88-
<h3 md-line>{{item.name}}</h3>
89-
<p md-line>{{item.description}}</p>
90-
<p md-line>Some other text</p>
91-
</md-list-item>
92-
</md-list>`;
93-
94-
return builder.overrideTemplate(TestList, template).createAsync(TestList).then(fixture => {
95-
fixture.detectChanges();
96-
let listItems = fixture.debugElement.children[0].queryAll(By.css('md-list-item'));
97-
expect(listItems[0].nativeElement.className).toBe('md-3-line');
98-
expect(listItems[1].nativeElement.className).toBe('md-3-line');
99-
});
100-
}));
101-
102-
it('should apply md-list-avatar class to list items with avatars', async(() => {
103-
var template = `
104-
<md-list>
105-
<md-list-item>
106-
<img src="" md-list-avatar>
107-
Paprika
108-
</md-list-item>
109-
<md-list-item>
110-
Pepper
111-
</md-list-item>
112-
</md-list>`;
113-
114-
return builder.overrideTemplate(TestList, template).createAsync(TestList).then(fixture => {
115-
fixture.detectChanges();
116-
let listItems = fixture.debugElement.children[0].queryAll(By.css('md-list-item'));
117-
expect(listItems[0].nativeElement.className).toBe('md-list-avatar');
118-
expect(listItems[1].nativeElement.className).toBe('');
119-
});
120-
}));
121-
122-
it('should not clear custom classes provided by user', async(() => {
123-
var template = `
124-
<md-list>
125-
<md-list-item class="test-class" *ngFor="let item of items">
126-
<h3 md-line>{{item.name}}</h3>
127-
<p md-line>{{item.description}}</p>
128-
</md-list-item>
129-
</md-list>`;
130-
131-
return builder.overrideTemplate(TestList, template).createAsync(TestList).then(fixture => {
132-
fixture.detectChanges();
133-
let listItems = fixture.debugElement.children[0].queryAll(By.css('md-list-item'));
134-
expect(listItems[0].nativeElement.classList.contains('test-class')).toBe(true);
135-
});
136-
}));
137-
138-
it('should update classes if number of lines change', async(() => {
139-
var template = `
140-
<md-list>
141-
<md-list-item *ngFor="let item of items">
142-
<h3 md-line>{{item.name}}</h3>
143-
<p md-line>{{item.description}}</p>
144-
<p md-line *ngIf="showThirdLine">Some other text</p>
145-
</md-list-item>
146-
</md-list>`;
147-
148-
return builder.overrideTemplate(TestList, template).createAsync(TestList).then(fixture => {
149-
fixture.debugElement.componentInstance.showThirdLine = false;
150-
fixture.detectChanges();
151-
let listItem = fixture.debugElement.children[0].query(By.css('md-list-item'));
152-
expect(listItem.nativeElement.className).toBe('md-2-line');
153-
154-
fixture.debugElement.componentInstance.showThirdLine = true;
155-
fixture.detectChanges();
156-
fixture.whenStable().then(() => {
157-
expect(listItem.nativeElement.className).toBe('md-3-line');
158-
});
159-
});
160-
}));
161-
162-
it('should add aria roles properly', async(() => {
163-
var template = `
164-
<md-list>
165-
<md-list-item *ngFor="let item of items">
166-
{{item.name}}
167-
</md-list-item>
168-
</md-list>`;
169-
170-
return builder.overrideTemplate(TestList, template).createAsync(TestList).then(fixture => {
171-
fixture.detectChanges();
172-
let list = fixture.debugElement.children[0];
173-
let listItem = fixture.debugElement.children[0].query(By.css('md-list-item'));
174-
expect(list.nativeElement.getAttribute('role')).toBe('list');
175-
expect(listItem.nativeElement.getAttribute('role')).toBe('listitem');
176-
});
177-
}));
178-
27+
it('should add and remove focus class on focus/blur', () => {
28+
let fixture = TestBed.createComponent(ListWithOneAnchorItem);
29+
let listItem = fixture.debugElement.query(By.directive(MdListItem));
30+
let listItemDiv = fixture.debugElement.query(By.css('.md-list-item'));
31+
fixture.detectChanges();
32+
expect(listItemDiv.nativeElement.classList).not.toContain('md-list-item-focus');
33+
34+
listItem.componentInstance._handleFocus();
35+
fixture.detectChanges();
36+
expect(listItemDiv.nativeElement.classList).toContain('md-list-item-focus');
37+
38+
listItem.componentInstance._handleBlur();
39+
fixture.detectChanges();
40+
expect(listItemDiv.nativeElement.classList).not.toContain('md-list-item-focus');
41+
});
42+
43+
it('should not apply any class to a list without lines', () => {
44+
let fixture = TestBed.createComponent(ListWithOneItem);
45+
let listItem = fixture.debugElement.query(By.css('md-list-item'));
46+
fixture.detectChanges();
47+
expect(listItem.nativeElement.className).toBe('');
48+
});
49+
50+
it('should apply md-2-line class to lists with two lines', () => {
51+
let fixture = TestBed.createComponent(ListWithTwoLineItem);
52+
fixture.detectChanges();
53+
54+
let listItems = fixture.debugElement.children[0].queryAll(By.css('md-list-item'));
55+
expect(listItems[0].nativeElement.className).toBe('md-2-line');
56+
expect(listItems[1].nativeElement.className).toBe('md-2-line');
57+
});
58+
59+
it('should apply md-3-line class to lists with three lines', () => {
60+
let fixture = TestBed.createComponent(ListWithThreeLineItem);
61+
fixture.detectChanges();
62+
63+
let listItems = fixture.debugElement.children[0].queryAll(By.css('md-list-item'));
64+
expect(listItems[0].nativeElement.className).toBe('md-3-line');
65+
expect(listItems[1].nativeElement.className).toBe('md-3-line');
66+
});
67+
68+
it('should apply md-list-avatar class to list items with avatars', () => {
69+
let fixture = TestBed.createComponent(ListWithAvatar);
70+
fixture.detectChanges();
71+
72+
let listItems = fixture.debugElement.children[0].queryAll(By.css('md-list-item'));
73+
expect(listItems[0].nativeElement.className).toBe('md-list-avatar');
74+
expect(listItems[1].nativeElement.className).toBe('');
75+
});
76+
77+
it('should not clear custom classes provided by user', () => {
78+
let fixture = TestBed.createComponent(ListWithItemWithCssClass);
79+
fixture.detectChanges();
80+
81+
let listItems = fixture.debugElement.children[0].queryAll(By.css('md-list-item'));
82+
expect(listItems[0].nativeElement.classList.contains('test-class')).toBe(true);
83+
});
84+
85+
it('should update classes if number of lines change', () => {
86+
let fixture = TestBed.createComponent(ListWithDynamicNumberOfLines);
87+
fixture.debugElement.componentInstance.showThirdLine = false;
88+
fixture.detectChanges();
89+
90+
let listItem = fixture.debugElement.children[0].query(By.css('md-list-item'));
91+
expect(listItem.nativeElement.className).toBe('md-2-line');
92+
93+
fixture.debugElement.componentInstance.showThirdLine = true;
94+
fixture.detectChanges();
95+
expect(listItem.nativeElement.className).toBe('md-3-line');
96+
});
97+
98+
it('should add aria roles properly', () => {
99+
let fixture = TestBed.createComponent(ListWithMultipleItems);
100+
fixture.detectChanges();
101+
102+
let list = fixture.debugElement.children[0];
103+
let listItem = fixture.debugElement.children[0].query(By.css('md-list-item'));
104+
expect(list.nativeElement.getAttribute('role')).toBe('list');
105+
expect(listItem.nativeElement.getAttribute('role')).toBe('listitem');
106+
});
179107
});
180108

181-
@Component({
182-
selector: 'test-list',
183-
template: '',
184-
})
185-
class TestList {
109+
110+
class BaseTestList {
186111
items: any[] = [
187112
{'name': 'Paprika', 'description': 'A seasoning'},
188113
{'name': 'Pepper', 'description': 'Another seasoning'}
189114
];
115+
190116
showThirdLine: boolean = false;
191117
}
118+
119+
@Component({template: `
120+
<md-list>
121+
<a md-list-item>
122+
Paprika
123+
</a>
124+
</md-list>`})
125+
class ListWithOneAnchorItem extends BaseTestList { }
126+
127+
@Component({template: `
128+
<md-list>
129+
<md-list-item>
130+
Paprika
131+
</md-list-item>
132+
</md-list>`})
133+
class ListWithOneItem extends BaseTestList { }
134+
135+
@Component({template: `
136+
<md-list>
137+
<md-list-item *ngFor="let item of items">
138+
<img src="">
139+
<h3 md-line>{{item.name}}</h3>
140+
<p md-line>{{item.description}}</p>
141+
</md-list-item>
142+
</md-list>`})
143+
class ListWithTwoLineItem extends BaseTestList { }
144+
145+
@Component({template: `
146+
<md-list>
147+
<md-list-item *ngFor="let item of items">
148+
<h3 md-line>{{item.name}}</h3>
149+
<p md-line>{{item.description}}</p>
150+
<p md-line>Some other text</p>
151+
</md-list-item>
152+
</md-list>`})
153+
class ListWithThreeLineItem extends BaseTestList { }
154+
155+
@Component({template: `
156+
<md-list>
157+
<md-list-item>
158+
<img src="" md-list-avatar>
159+
Paprika
160+
</md-list-item>
161+
<md-list-item>
162+
Pepper
163+
</md-list-item>
164+
</md-list>`})
165+
class ListWithAvatar extends BaseTestList { }
166+
167+
@Component({template: `
168+
<md-list>
169+
<md-list-item class="test-class" *ngFor="let item of items">
170+
<h3 md-line>{{item.name}}</h3>
171+
<p md-line>{{item.description}}</p>
172+
</md-list-item>
173+
</md-list>`})
174+
class ListWithItemWithCssClass extends BaseTestList { }
175+
176+
@Component({template: `
177+
<md-list>
178+
<md-list-item *ngFor="let item of items">
179+
<h3 md-line>{{item.name}}</h3>
180+
<p md-line>{{item.description}}</p>
181+
<p md-line *ngIf="showThirdLine">Some other text</p>
182+
</md-list-item>
183+
</md-list>`})
184+
class ListWithDynamicNumberOfLines extends BaseTestList { }
185+
186+
@Component({template: `
187+
<md-list>
188+
<md-list-item *ngFor="let item of items">
189+
{{item.name}}
190+
</md-list-item>
191+
</md-list>`})
192+
class ListWithMultipleItems extends BaseTestList { }

0 commit comments

Comments
 (0)