fix(material-experimental/mdc-chips): add missing functionality and a…

…lign tests (#20814)

* Adds support for the `MAT_RIPPLE_GLOBAL_OPTIONS` injection token in the MDC-based chips.
* Aligns the tests between the standard and MDC versions so that it's easier to lint them.

src/material-experimental/mdc-chips/chip-input.spec.ts

@@ -89,7 +89,7 @@ describe('MDC-based MatChipInput', () => {
       expect(label.textContent).toContain('or don\'t');
     });
 
-    it('should become disabled if the chip grid is disabled', () => {
+    it('should become disabled if the list is disabled', () => {
       expect(inputNativeElement.hasAttribute('disabled')).toBe(false);
       expect(chipInputDirective.disabled).toBe(false);
 
@@ -100,7 +100,7 @@ describe('MDC-based MatChipInput', () => {
       expect(chipInputDirective.disabled).toBe(true);
     });
 
-    it('should be aria-required if the chip grid is required', () => {
+    it('should be aria-required if the list is required', () => {
       expect(inputNativeElement.hasAttribute('aria-required')).toBe(false);
 
       fixture.componentInstance.required = true;

src/material-experimental/mdc-chips/chip-option.spec.ts

@@ -3,6 +3,10 @@ import {SPACE} from '@angular/cdk/keycodes';
 import {createKeyboardEvent, dispatchFakeEvent} from '@angular/cdk/testing/private';
 import {Component, DebugElement, ViewChild} from '@angular/core';
 import {waitForAsync, ComponentFixture, fakeAsync, flush, TestBed} from '@angular/core/testing';
+import {
+  MAT_RIPPLE_GLOBAL_OPTIONS,
+  RippleGlobalOptions,
+} from '@angular/material-experimental/mdc-core';
 import {By} from '@angular/platform-browser';
 import {chipCssClasses} from '@material/chips';
 import {Subject} from 'rxjs';
@@ -20,14 +24,16 @@ describe('MDC-based Option Chips', () => {
   let chipDebugElement: DebugElement;
   let chipNativeElement: HTMLElement;
   let chipInstance: MatChipOption;
-
+  let globalRippleOptions: RippleGlobalOptions;
   let dir = 'ltr';
 
   beforeEach(waitForAsync(() => {
+    globalRippleOptions = {};
     TestBed.configureTestingModule({
       imports: [MatChipsModule],
       declarations: [SingleChip],
       providers: [
+        {provide: MAT_RIPPLE_GLOBAL_OPTIONS, useFactory: () => globalRippleOptions},
         {provide: Directionality, useFactory: () => ({
           value: dir,
           change: new Subject()
@@ -167,6 +173,17 @@ describe('MDC-based Option Chips', () => {
         expect(spy).not.toHaveBeenCalled();
         subscription.unsubscribe();
       });
+
+      it('should be able to disable ripples through ripple global options at runtime', () => {
+        expect(chipInstance._isRippleDisabled())
+            .toBe(false, 'Expected chip ripples to be enabled.');
+
+        globalRippleOptions.disabled = true;
+
+        expect(chipInstance._isRippleDisabled())
+            .toBe(true, 'Expected chip ripples to be disabled.');
+      });
+
     });
 
     describe('keyboard behavior', () => {

src/material-experimental/mdc-chips/chip-remove.spec.ts

@@ -37,7 +37,7 @@ describe('MDC-based Chip Remove', () => {
   }));
 
   describe('basic behavior', () => {
-    it('should apply the `mat-mdc-chip-remove` CSS class', () => {
+    it('should apply a CSS class to the remove icon', () => {
       let buttonElement = chipNativeElement.querySelector('button')!;
 
       expect(buttonElement.classList).toContain('mat-mdc-chip-remove');
@@ -67,7 +67,7 @@ describe('MDC-based Chip Remove', () => {
       expect(chipNativeElement.classList.contains('mdc-chip--exit')).toBe(true);
     });
 
-    it ('should emit (removed) event when exit animation is complete', () => {
+    it('should emit (removed) event when exit animation is complete', () => {
       let buttonElement = chipNativeElement.querySelector('button')!;
 
       testChip.removable = true;

src/material-experimental/mdc-chips/chip-row.ts

@@ -28,6 +28,10 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 import {DOCUMENT} from '@angular/common';
+import {
+  MAT_RIPPLE_GLOBAL_OPTIONS,
+  RippleGlobalOptions,
+} from '@angular/material-experimental/mdc-core';
 import {MatChip, MatChipEvent} from './chip';
 import {MatChipEditInput} from './chip-edit-input';
 import {GridKeyManagerRow} from './grid-key-manager';
@@ -100,8 +104,10 @@ export class MatChipRow extends MatChip implements AfterContentInit, AfterViewIn
     changeDetectorRef: ChangeDetectorRef,
     elementRef: ElementRef, ngZone: NgZone,
     @Optional() dir: Directionality,
-    @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
-    super(changeDetectorRef, elementRef, ngZone, dir, animationMode);
+    @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string,
+    @Optional() @Inject(MAT_RIPPLE_GLOBAL_OPTIONS)
+        globalRippleOptions?: RippleGlobalOptions) {
+    super(changeDetectorRef, elementRef, ngZone, dir, animationMode, globalRippleOptions);
   }
 
   ngAfterContentInit() {

src/material-experimental/mdc-chips/chip.spec.ts

@@ -39,7 +39,7 @@ describe('MDC-based MatChip', () => {
   }));
 
   describe('MatBasicChip', () => {
-    it('adds the `mat-mdc-basic-chip` class', () => {
+    it('adds a class to indicate that it is a basic chip', () => {
       fixture = TestBed.createComponent(BasicChip);
       fixture.detectChanges();
 
@@ -180,7 +180,7 @@ describe('MDC-based MatChip', () => {
       expect(chipNativeElement.getAttribute('aria-disabled')).toBe('true');
     });
 
-    it('should not be focusable', () => {
+    it('should make disabled chips non-focusable', () => {
       expect(chipNativeElement.getAttribute('tabindex')).toBeFalsy();
     });
 

src/material-experimental/mdc-chips/chip.ts

@@ -37,10 +37,12 @@ import {
   HasTabIndex,
   HasTabIndexCtor,
   MatRipple,
+  MAT_RIPPLE_GLOBAL_OPTIONS,
   mixinColor,
   mixinDisableRipple,
   mixinTabIndex,
   RippleAnimationConfig,
+  RippleGlobalOptions,
 } from '@angular/material-experimental/mdc-core';
 import {MDCChipAdapter, MDCChipFoundation} from '@material/chips';
 import {numbers} from '@material/ripple';
@@ -352,7 +354,9 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
       public _changeDetectorRef: ChangeDetectorRef,
       readonly _elementRef: ElementRef, protected _ngZone: NgZone,
       @Optional() private _dir: Directionality,
-      @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
+      @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string,
+      @Optional() @Inject(MAT_RIPPLE_GLOBAL_OPTIONS)
+        private _globalRippleOptions?: RippleGlobalOptions) {
     super(_elementRef);
     this._chipFoundation = new MDCChipFoundation(this._chipAdapter);
     this._animationsDisabled = animationMode === 'NoopAnimations';
@@ -463,7 +467,8 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
 
   /** Whether or not the ripple should be disabled. */
   _isRippleDisabled(): boolean {
-    return this.disabled || this.disableRipple || this._animationsDisabled || this._isBasicChip;
+    return this.disabled || this.disableRipple || this._animationsDisabled ||
+           this._isBasicChip || !!this._globalRippleOptions?.disabled;
   }
 
   _notifyInteraction() {

src/material/chips/chip-input.spec.ts

@@ -85,7 +85,7 @@ describe('MatChipInput', () => {
       expect(label.textContent).toContain('or don\'t');
     });
 
-    it('should become disabled if the chip list is disabled', () => {
+    it('should become disabled if the list is disabled', () => {
       expect(inputNativeElement.hasAttribute('disabled')).toBe(false);
       expect(chipInputDirective.disabled).toBe(false);
 
@@ -130,7 +130,7 @@ describe('MatChipInput', () => {
       expect(listElement.getAttribute('tabindex')).toBe('0', 'Expected tabindex to remain 0');
     }));
 
-    it('should be aria-required if the chip list is required', () => {
+    it('should be aria-required if the list is required', () => {
       expect(inputNativeElement.hasAttribute('aria-required')).toBe(false);
 
       fixture.componentInstance.required = true;

src/material/chips/chip-remove.spec.ts

@@ -30,7 +30,7 @@ describe('Chip Remove', () => {
   }));
 
   describe('basic behavior', () => {
-    it('should apply the `mat-chip-remove` CSS class', () => {
+    it('should apply a CSS class to the remove icon', () => {
       let buttonElement = chipNativeElement.querySelector('button')!;
 
       expect(buttonElement.classList).toContain('mat-chip-remove');
@@ -48,7 +48,7 @@ describe('Chip Remove', () => {
       expect(buttonElement.hasAttribute('type')).toBe(false);
     });
 
-    it('should emits (removed) on click', () => {
+    it('should emit (removed) on click', () => {
       let buttonElement = chipNativeElement.querySelector('button')!;
 
       testChip.removable = true;

src/material/chips/chip.spec.ts

@@ -40,7 +40,7 @@ describe('MatChip', () => {
   }));
 
   describe('MatBasicChip', () => {
-    it('adds the `mat-basic-chip` class', () => {
+    it('adds a class to indicate that it is a basic chip', () => {
       fixture = TestBed.createComponent(BasicChip);
       fixture.detectChanges();