From 3ebe066711afb1a4f3a1c0c2ad6e28b57be5d201 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Wed, 20 Dec 2017 20:17:10 +0100
Subject: [PATCH] build: safari focus trapping test failures

Fixes a couple of focus trapping tests failing on Safari due to a test case using links which aren't considered tabbable in iOS. These changes switch to using inputs and add a few missing `detectChanges` calls and a wrong selector.
---
 src/lib/sidenav/drawer.spec.ts | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/lib/sidenav/drawer.spec.ts b/src/lib/sidenav/drawer.spec.ts
index 0219941c64fb..70cf24896b79 100644
--- a/src/lib/sidenav/drawer.spec.ts
+++ b/src/lib/sidenav/drawer.spec.ts
@@ -411,15 +411,17 @@ describe('MatDrawer', () => {
 
     beforeEach(() => {
       fixture = TestBed.createComponent(DrawerWithFocusableElements);
+      fixture.detectChanges();
       testComponent = fixture.debugElement.componentInstance;
       drawer = fixture.debugElement.query(By.directive(MatDrawer)).componentInstance;
-      firstFocusableElement = fixture.debugElement.query(By.css('.link1')).nativeElement;
-      lastFocusableElement = fixture.debugElement.query(By.css('.link1')).nativeElement;
+      firstFocusableElement = fixture.debugElement.query(By.css('.input1')).nativeElement;
+      lastFocusableElement = fixture.debugElement.query(By.css('.input2')).nativeElement;
       lastFocusableElement.focus();
     });
 
     it('should trap focus when opened in "over" mode', fakeAsync(() => {
       testComponent.mode = 'over';
+      fixture.detectChanges();
       lastFocusableElement.focus();
 
       drawer.open();
@@ -431,6 +433,7 @@ describe('MatDrawer', () => {
 
     it('should trap focus when opened in "push" mode', fakeAsync(() => {
       testComponent.mode = 'push';
+      fixture.detectChanges();
       lastFocusableElement.focus();
 
       drawer.open();
@@ -442,6 +445,7 @@ describe('MatDrawer', () => {
 
     it('should not trap focus when opened in "side" mode', fakeAsync(() => {
       testComponent.mode = 'side';
+      fixture.detectChanges();
       lastFocusableElement.focus();
 
       drawer.open();
@@ -717,12 +721,14 @@ class DrawerDynamicPosition {
 }
 
 @Component({
+  // Note: we use inputs here, because they're guaranteed
+  // to be focusable across all platforms.
   template: `
     <mat-drawer-container>
       <mat-drawer position="start" [mode]="mode">
-        <a class="link1" href="#">link1</a>
+        <input type="text" class="input1"/>
       </mat-drawer>
-      <a class="link2" href="#">link2</a>
+      <input type="text" class="input2"/>
     </mat-drawer-container>`,
 })
 class DrawerWithFocusableElements {