feat(material/*) Focus indicator unit tests (#18150)

* Add focus indicators to mat-chip. Use a dynamically added element as the ripple target

* _document should be an optional param to avoid breaking change.

* Added unit tests for focus indicator, improved focus indicator color on particular components.

* Some minor style changes.

* Cleaned up focus indicator unit tests.

* Some more minor unit test formatting changes, undo coloring changes for now.

* Fixed formatting.

* Fixed final linter error.

Author: zelliott

src/material/button-toggle/button-toggle.spec.ts

@@ -880,6 +880,14 @@ describe('MatButtonToggle without forms', () => {
     }).not.toThrow();
   });
 
+  it('should have a focus indicator', () => {
+    const fixture = TestBed.createComponent(ButtonTogglesInsideButtonToggleGroup);
+    const buttonNativeElements = [...fixture.debugElement.nativeElement.querySelectorAll('button')];
+
+    expect(buttonNativeElements.every(element => element.classList.contains('mat-focus-indicator')))
+        .toBe(true);
+  });
+
 });
 
 @Component({

src/material/button/button.spec.ts

@@ -270,6 +270,13 @@ describe('MatButton', () => {
       );
     });
   });
+
+  it('should have a focus indicator', () => {
+    const fixture = TestBed.createComponent(TestApp);
+    const buttonNativeElement = fixture.debugElement.nativeElement.querySelector('button');
+
+    expect(buttonNativeElement.classList.contains('mat-focus-indicator')).toBe(true);
+  });
 });
 
 /** Test component that contains an MatButton. */

src/material/checkbox/checkbox.spec.ts

@@ -673,6 +673,13 @@ describe('MatCheckbox', () => {
         expect(checkboxNativeElement.classList).toContain('mat-checkbox-indeterminate');
       }));
     });
+
+    it('should have a focus indicator', () => {
+      const checkboxRippleNativeElement =
+          checkboxNativeElement.querySelector('.mat-checkbox-ripple')!;
+
+      expect(checkboxRippleNativeElement.classList.contains('mat-focus-indicator')).toBe(true);
+    });
   });
 
   describe('with change event and no initial value', () => {

src/material/chips/chip.spec.ts

@@ -391,6 +391,10 @@ describe('MatChip', () => {
       });
 
     });
+
+    it('should have a focus indicator', () => {
+      expect(chipNativeElement.classList.contains('mat-focus-indicator')).toBe(true);
+    });
   });
 });
 

src/material/core/option/option.spec.ts

@@ -190,6 +190,13 @@ describe('MatOption component', () => {
 
   });
 
+  it('should have a focus indicator', () => {
+    const fixture = TestBed.createComponent(BasicOption);
+    const optionNativeElement = fixture.debugElement.query(By.directive(MatOption))!.nativeElement;
+
+    expect(optionNativeElement.classList.contains('mat-focus-indicator')).toBe(true);
+  });
+
 });
 
 @Component({

src/material/datepicker/calendar-body.spec.ts

@@ -106,6 +106,11 @@ describe('MatCalendarBody', () => {
       expect(cellEls[1].classList).toContain('even');
     });
 
+    it('should have a focus indicator', () => {
+      expect(cellEls.every(element => element.classList.contains('mat-focus-indicator')))
+          .toBe(true);
+    });
+
   });
 
 });

src/material/expansion/expansion.spec.ts

@@ -404,6 +404,14 @@ describe('MatExpansionPanel', () => {
     });
 
   });
+
+  it('should have a focus indicator', () => {
+    const fixture = TestBed.createComponent(PanelWithContent);
+    const headerNativeElement =
+        fixture.debugElement.query(By.directive(MatExpansionPanelHeader))!.nativeElement;
+
+    expect(headerNativeElement.classList.contains('mat-focus-indicator')).toBe(true);
+  });
 });
 
 

src/material/list/list.spec.ts

@@ -29,6 +29,8 @@ describe('MatList', () => {
     fixture.detectChanges();
     expect(listItem.nativeElement.classList.length).toBe(2);
     expect(listItem.nativeElement.classList).toContain('mat-list-item');
+
+    // This spec also ensures the focus indicator is present.
     expect(listItem.nativeElement.classList).toContain('mat-focus-indicator');
   });
 

src/material/list/selection-list.spec.ts

@@ -650,6 +650,13 @@ describe('MatSelectionList without forms', () => {
       expect(option.classList).toContain('mat-2-line');
     });
 
+    it('should have a focus indicator', () => {
+      const optionNativeElements = listOptions.map(option => option.nativeElement);
+
+      expect(optionNativeElements
+          .every(element => element.classList.contains('mat-focus-indicator'))).toBe(true);
+      });
+
   });
 
   describe('with list option selected', () => {

src/material/menu/menu.spec.ts

@@ -2116,6 +2116,17 @@ describe('MatMenu', () => {
 
   });
 
+  it('should have a focus indicator', () => {
+    const fixture = createComponent(SimpleMenu, [], [FakeIcon]);
+    fixture.detectChanges();
+    fixture.componentInstance.trigger.openMenu();
+    fixture.detectChanges();
+    const menuItemNativeElements =
+        Array.from(overlayContainerElement.querySelectorAll('.mat-menu-item'));
+
+    expect(menuItemNativeElements
+        .every(element => element.classList.contains('mat-focus-indicator'))).toBe(true);
+  });
 });
 
 describe('MatMenu default overrides', () => {

src/material/radio/radio.spec.ts

@@ -387,6 +387,14 @@ describe('MatRadio', () => {
       expect(radioNativeElements[2].classList).toContain('mat-warn');
     });
 
+    it('should have a focus indicator', () => {
+      const radioRippleNativeElements =
+          radioNativeElements.map(element => element.querySelector('.mat-radio-ripple')!);
+
+      expect(radioRippleNativeElements
+          .every(element => element.classList.contains('mat-focus-indicator'))).toBe(true);
+    });
+
   });
 
   describe('group with ngModel', () => {

src/material/slide-toggle/slide-toggle.spec.ts

@@ -342,6 +342,13 @@ describe('MatSlideToggle without forms', () => {
 
       expect(slideToggleElement.querySelectorAll(rippleSelector).length).toBe(0);
     });
+
+    it('should have a focus indicator', () => {
+      const slideToggleRippleNativeElement =
+          slideToggleElement.querySelector('.mat-slide-toggle-ripple')!;
+
+      expect(slideToggleRippleNativeElement.classList.contains('mat-focus-indicator')).toBe(true);
+    });
   });
 
   describe('custom template', () => {

src/material/slider/slider.spec.ts

@@ -216,6 +216,10 @@ describe('MatSlider', () => {
       expect(event.defaultPrevented).toBe(true);
     });
 
+    it('should have a focus indicator', () => {
+      expect(sliderNativeElement.classList.contains('mat-focus-indicator')).toBe(true);
+    });
+
   });
 
   describe('disabled slider', () => {

src/material/sort/sort.spec.ts

@@ -409,6 +409,14 @@ describe('MatSort', () => {
     expect(sortHeaderElement.querySelector('.mat-sort-header-arrow')).toBeTruthy();
   }));
 
+  it('should have a focus indicator', () => {
+    const headerNativeElement =
+        fixture.debugElement.query(By.directive(MatSortHeader))!.nativeElement;
+    const buttonNativeElement = headerNativeElement.querySelector('.mat-sort-header-button');
+
+    expect(buttonNativeElement.classList.contains('mat-focus-indicator')).toBe(true);
+  });
+
 });
 
 /**

src/material/stepper/stepper.spec.ts

@@ -394,6 +394,14 @@ describe('MatStepper', () => {
       expect(secondStepContentEl.getAttribute('tabindex')).toBe('0');
     });
 
+    it('should have a focus indicator', () => {
+      const stepHeaderNativeElements =
+          [...fixture.debugElement.nativeElement.querySelectorAll('.mat-vertical-stepper-header')];
+
+      expect(stepHeaderNativeElements
+          .every(element => element.classList.contains('mat-focus-indicator'))).toBe(true);
+    });
+
   });
 
   describe('basic stepper when attempting to set the selected step too early', () => {

src/material/tabs/tab-group.spec.ts

@@ -291,6 +291,13 @@ describe('MatTabGroup', () => {
       subscription.unsubscribe();
     });
 
+    it('should have a focus indicator', () => {
+      const tabLabelNativeElements =
+          [...fixture.debugElement.nativeElement.querySelectorAll('.mat-tab-label')];
+
+      expect(tabLabelNativeElements.every(el => el.classList.contains('mat-focus-indicator')))
+        .toBe(true);
+    });
   });
 
   describe('aria labelling', () => {

src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts

@@ -333,6 +333,14 @@ describe('MatTabNavBar', () => {
       expect(fixture.componentInstance.tabLinks.toArray().every(tabLink => tabLink.rippleDisabled))
         .toBe(true, 'Expected every tab link to have ripples disabled');
     });
+
+    it('should have a focus indicator', () => {
+      const tabLinkNativeElements =
+          [...fixture.debugElement.nativeElement.querySelectorAll('.mat-tab-link')];
+
+      expect(tabLinkNativeElements
+          .every(element => element.classList.contains('mat-focus-indicator'))).toBe(true);
+    });
   });
 });
 

src/material/tree/tree.scss

@@ -9,7 +9,6 @@ $mat-node-height: 48px;
   align-items: center;
   min-height: $mat-node-height;
   flex: 1;
-  overflow: hidden;
   word-wrap: break-word;
 }