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', () => {