build: fix test failures and add missing tests (#21850)

Fixes some CI issues which were caused by older PRs being merged. The PRs were opened,
before we had the extra checks for MDC.

Author: crisbeto

src/material-experimental/mdc-select/select.spec.ts

@@ -3742,6 +3742,32 @@ describe('MDC-based MatSelect', () => {
       }).not.toThrow();
     }));
 
+    it('should be able to programmatically set an array with duplicate values', fakeAsync(() => {
+      testInstance.foods = [
+        { value: 'steak-0', viewValue: 'Steak' },
+        { value: 'pizza-1', viewValue: 'Pizza' },
+        { value: 'pizza-1', viewValue: 'Pizza' },
+        { value: 'pizza-1', viewValue: 'Pizza' },
+        { value: 'pizza-1', viewValue: 'Pizza' },
+        { value: 'pizza-1', viewValue: 'Pizza' },
+      ];
+      fixture.detectChanges();
+      testInstance.control.setValue(['steak-0', 'pizza-1', 'pizza-1', 'pizza-1']);
+      fixture.detectChanges();
+
+      trigger.click();
+      fixture.detectChanges();
+
+      const optionNodes = Array.from(overlayContainerElement.querySelectorAll('mat-option'));
+      const optionInstances = testInstance.options.toArray();
+
+      expect(optionNodes.map(node => node.classList.contains('mdc-list-item--selected')))
+        .toEqual([true, true, true, true, false, false]);
+
+      expect(optionInstances.map(instance => instance.selected))
+        .toEqual([true, true, true, true, false, false]);
+    }));
+
   });
 
   it('should be able to provide default values through an injection token', fakeAsync(() => {

src/material-experimental/mdc-tabs/tab-body.html

@@ -4,6 +4,7 @@
         params: {animationDuration: animationDuration}
      }"
      (@translateTab.start)="_onTranslateTabStarted($event)"
-     (@translateTab.done)="_translateTabComplete.next($event)">
+     (@translateTab.done)="_translateTabComplete.next($event)"
+     cdkScrollable>
   <ng-template matTabBodyHost></ng-template>
 </div>

src/material-experimental/mdc-tabs/tab-body.spec.ts

@@ -5,7 +5,9 @@ import {AfterContentInit, Component, TemplateRef, ViewChild, ViewContainerRef} f
 import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing';
 import {MatRippleModule} from '@angular/material-experimental/mdc-core';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {CdkScrollable, ScrollingModule} from '@angular/cdk/scrolling';
 import {MatTabBody, MatTabBodyPortal} from './tab-body';
+import {By} from '@angular/platform-browser';
 import {Subject} from 'rxjs';
 
 
@@ -178,6 +180,33 @@ describe('MDC-based MatTabBody', () => {
 
     expect(fixture.componentInstance.tabBody._position).toBe('left');
   });
+
+  it('should mark the tab body content as a scrollable container', () => {
+    TestBed
+      .resetTestingModule()
+      .configureTestingModule({
+        imports: [
+          CommonModule,
+          PortalModule,
+          MatRippleModule,
+          NoopAnimationsModule,
+          ScrollingModule
+        ],
+        declarations: [
+          MatTabBody,
+          MatTabBodyPortal,
+          SimpleTabBodyApp,
+        ]
+      })
+      .compileComponents();
+
+    const fixture = TestBed.createComponent(SimpleTabBodyApp);
+    const tabBodyContent = fixture.nativeElement.querySelector('.mat-mdc-tab-body-content');
+    const scrollable = fixture.debugElement.query(By.directive(CdkScrollable));
+
+    expect(scrollable).toBeTruthy();
+    expect(scrollable.nativeElement).toBe(tabBodyContent);
+  });
 });
 
 

src/material-experimental/mdc-tabs/tab-group.html

@@ -21,7 +21,8 @@
        [class.mdc-tab--active]="selectedIndex == i"
        [disabled]="tab.disabled"
        [fitInkBarToContent]="fitInkBarToContent"
-       (click)="_handleClick(tab, tabHeader, i)">
+       (click)="_handleClick(tab, tabHeader, i)"
+       (cdkFocusChange)="_tabFocusChanged($event, i)">
     <span class="mdc-tab__ripple"></span>
 
     <!-- Needs to be a separate element, because we can't put

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

@@ -1,7 +1,14 @@
 import {LEFT_ARROW} from '@angular/cdk/keycodes';
 import {dispatchFakeEvent, dispatchKeyboardEvent} from '@angular/cdk/testing/private';
 import {Component, OnInit, QueryList, ViewChild, ViewChildren} from '@angular/core';
-import {waitForAsync, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
+import {
+  waitForAsync,
+  ComponentFixture,
+  fakeAsync,
+  TestBed,
+  tick,
+  flush,
+} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {CommonModule} from '@angular/common';
@@ -300,6 +307,26 @@ describe('MDC-based MatTabGroup', () => {
         .toBe(true);
     });
 
+    it('should emit focusChange when a tab receives focus', fakeAsync(() => {
+      spyOn(fixture.componentInstance, 'handleFocus');
+      fixture.detectChanges();
+
+      const tabLabels = fixture.debugElement.queryAll(By.css('.mat-mdc-tab'));
+
+      expect(fixture.componentInstance.handleFocus).toHaveBeenCalledTimes(0);
+
+      // In order to verify that the `focusChange` event also fires with the correct
+      // index, we focus the second tab before testing the keyboard navigation.
+      dispatchFakeEvent(tabLabels[2].nativeElement, 'focus');
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.handleFocus).toHaveBeenCalledTimes(1);
+      expect(fixture.componentInstance.handleFocus)
+        .toHaveBeenCalledWith(jasmine.objectContaining({index: 2}));
+    }));
+
   });
 
   describe('aria labelling', () => {

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

@@ -1,7 +1,14 @@
 import {LEFT_ARROW} from '@angular/cdk/keycodes';
 import {dispatchFakeEvent, dispatchKeyboardEvent} from '@angular/cdk/testing/private';
 import {Component, OnInit, QueryList, ViewChild, ViewChildren} from '@angular/core';
-import {waitForAsync, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
+import {
+  waitForAsync,
+  ComponentFixture,
+  fakeAsync,
+  TestBed,
+  tick,
+  flush,
+} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {CommonModule} from '@angular/common';
@@ -299,7 +306,7 @@ describe('MatTabGroup', () => {
         .toBe(true);
     });
 
-    it('should emit focusChange when a tab receives focus', () => {
+    it('should emit focusChange when a tab receives focus', fakeAsync(() => {
       spyOn(fixture.componentInstance, 'handleFocus');
       fixture.detectChanges();
 
@@ -309,13 +316,15 @@ describe('MatTabGroup', () => {
 
       // In order to verify that the `focusChange` event also fires with the correct
       // index, we focus the second tab before testing the keyboard navigation.
-      dispatchFakeEvent(tabLabels[1].nativeElement, 'focus');
+      dispatchFakeEvent(tabLabels[2].nativeElement, 'focus');
+      fixture.detectChanges();
+      flush();
       fixture.detectChanges();
 
       expect(fixture.componentInstance.handleFocus).toHaveBeenCalledTimes(1);
       expect(fixture.componentInstance.handleFocus)
-        .toHaveBeenCalledWith(jasmine.objectContaining({index: 1}));
-    });
+        .toHaveBeenCalledWith(jasmine.objectContaining({index: 2}));
+    }));
 
   });