From d60e3cba50079e31b5eabcd8d53535900dd9c3cc Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 29 Sep 2017 22:23:05 +0200
Subject: [PATCH] chore: add selection list to prerender check; autocomplete
 test stability improvements (#7371)

* 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.
---
 src/lib/autocomplete/autocomplete.spec.ts     | 47 ++++++++++---------
 .../kitchen-sink/kitchen-sink.html            |  8 ++++
 2 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts
index ed23ad7f38e..48d96e26a83 100644
--- a/src/lib/autocomplete/autocomplete.spec.ts
+++ b/src/lib/autocomplete/autocomplete.spec.ts
@@ -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');
     }));
diff --git a/src/universal-app/kitchen-sink/kitchen-sink.html b/src/universal-app/kitchen-sink/kitchen-sink.html
index 6d0d3a6b77f..1ba7f870ae9 100644
--- a/src/universal-app/kitchen-sink/kitchen-sink.html
+++ b/src/universal-app/kitchen-sink/kitchen-sink.html
@@ -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>