skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: add selection list to prerender check; autocomplete test stability improvements (#7371)

Browse Source 
* Adds the selection list component to the kitchen sink.
* Piggy-backing off of the smaller fix, this is something I've meant to do for a while, but it's so minor that it doesn't make sense to open a separate PR. Currently there are a few unit tests that will cause Karma to hang until it times out, if they fail. This seems to be because Karma fails to stringify the `activeOption`. These changes switch the tests to cast the expected result to a boolean first.
This commit is contained in:
Kristiyan Kostadinov
2017-09-29 22:23:05 +02:00
committed by Andrew Seguin
parent c8ddd396a7
commit d60e3cba50
2 changed files with 32 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/autocomplete/autocomplete.spec.ts
+24 -23
View File
@@ -677,85 +677,86 @@ describe('MatAutocomplete', () => {
it('should set the active item to the first option when DOWN key is pressed', fakeAsync(() => {
tick();
const componentInstance = fixture.componentInstance;
const optionEls =
overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
tick();
fixture.detectChanges();
expect(fixture.componentInstance.trigger.panelOpen)
expect(componentInstance.trigger.panelOpen)
.toBe(true, 'Expected first down press to open the pane.');
fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
tick();
fixture.detectChanges();
expect(fixture.componentInstance.trigger.activeOption)
.toBe(fixture.componentInstance.options.first, 'Expected first option to be active.');
expect(componentInstance.trigger.activeOption === componentInstance.options.first)
.toBe(true, 'Expected first option to be active.');
expect(optionEls[0].classList).toContain('mat-active');
expect(optionEls[1].classList).not.toContain('mat-active');
fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
tick();
fixture.detectChanges();
expect(fixture.componentInstance.trigger.activeOption)
.toBe(fixture.componentInstance.options.toArray()[1],
'Expected second option to be active.');
expect(componentInstance.trigger.activeOption === componentInstance.options.toArray()[1])
.toBe(true, 'Expected second option to be active.');
expect(optionEls[0].classList).not.toContain('mat-active');
expect(optionEls[1].classList).toContain('mat-active');
}));
it('should set the active item to the last option when UP key is pressed', fakeAsync(() => {
tick();
const componentInstance = fixture.componentInstance;
const optionEls =
overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
fixture.componentInstance.trigger._handleKeydown(UP_ARROW_EVENT);
componentInstance.trigger._handleKeydown(UP_ARROW_EVENT);
tick();
fixture.detectChanges();
expect(fixture.componentInstance.trigger.panelOpen)
expect(componentInstance.trigger.panelOpen)
.toBe(true, 'Expected first up press to open the pane.');
fixture.componentInstance.trigger._handleKeydown(UP_ARROW_EVENT);
componentInstance.trigger._handleKeydown(UP_ARROW_EVENT);
tick();
fixture.detectChanges();
expect(fixture.componentInstance.trigger.activeOption)
.toBe(fixture.componentInstance.options.last, 'Expected last option to be active.');
expect(componentInstance.trigger.activeOption === componentInstance.options.last)
.toBe(true, 'Expected last option to be active.');
expect(optionEls[10].classList).toContain('mat-active');
expect(optionEls[0].classList).not.toContain('mat-active');
fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
tick();
fixture.detectChanges();
expect(fixture.componentInstance.trigger.activeOption)
.toBe(fixture.componentInstance.options.first,
'Expected first option to be active.');
expect(componentInstance.trigger.activeOption === componentInstance.options.first)
.toBe(true, 'Expected first option to be active.');
expect(optionEls[0].classList).toContain('mat-active');
}));
it('should set the active item properly after filtering', fakeAsync(() => {
fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
const componentInstance = fixture.componentInstance;
componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
tick();
fixture.detectChanges();
typeInElement('o', input);
fixture.detectChanges();
fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
tick();
fixture.detectChanges();
const optionEls =
overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
expect(fixture.componentInstance.trigger.activeOption)
.toBe(fixture.componentInstance.options.first,
'Expected first option to be active.');
expect(componentInstance.trigger.activeOption === componentInstance.options.first)
.toBe(true, 'Expected first option to be active.');
expect(optionEls[0].classList).toContain('mat-active');
expect(optionEls[1].classList).not.toContain('mat-active');
}));
src/universal-app/kitchen-sink/kitchen-sink.html
+8
View File
@@ -273,3 +273,11 @@
<mat-header-row *cdkHeaderRowDef="tableColumns"></mat-header-row>
<mat-row *cdkRowDef="let row; columns: tableColumns;"></mat-row>
</mat-table>
<h2>Selection list</h2>
<mat-selection-list>
<h3 mat-subheader>Groceries</h3>
<mat-list-option value="apples">Apples</mat-list-option>
<mat-list-option value="bananas">Bananas</mat-list-option>
<mat-list-option value="oranges">Oranges</mat-list-option>
</mat-selection-list>