feat(material/tabs): Added unit tests for new behavior

Author: zelliott

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

@@ -1,11 +1,16 @@
+import {SPACE} from '@angular/cdk/keycodes';
 import {waitForAsync, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
 import {Component, QueryList, ViewChild, ViewChildren} from '@angular/core';
 import {
   MAT_RIPPLE_GLOBAL_OPTIONS,
   RippleGlobalOptions,
 } from '@angular/material-experimental/mdc-core';
 import {By} from '@angular/platform-browser';
-import {dispatchFakeEvent, dispatchMouseEvent} from '../../../cdk/testing/private';
+import {
+  dispatchFakeEvent,
+  dispatchKeyboardEvent,
+  dispatchMouseEvent,
+} from '../../../cdk/testing/private';
 import {Direction, Directionality} from '@angular/cdk/bidi';
 import {Subject} from 'rxjs';
 import {MatTabsModule} from '../module';
@@ -30,6 +35,7 @@ describe('MDC-based MatTabNavBar', () => {
           TabLinkWithTabIndexBinding,
           TabLinkWithNativeTabindexAttr,
           TabBarWithInactiveTabsOnInit,
+          TabBarWithPanel,
         ],
         providers: [
           {provide: MAT_RIPPLE_GLOBAL_OPTIONS, useFactory: () => globalRippleOptions},
@@ -309,6 +315,123 @@ describe('MDC-based MatTabNavBar', () => {
     expect(instance.tabNavBar.selectedIndex).toBe(1);
   });
 
+  describe('without panel', () => {
+    let fixture: ComponentFixture<SimpleTabNavBarTestApp>;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(SimpleTabNavBarTestApp);
+      fixture.detectChanges();
+    });
+
+    it('should have no explicit roles', () => {
+      const tabBar = fixture.nativeElement.querySelector('.mat-mdc-tab-nav-bar')!;
+      expect(tabBar.getAttribute('role')).toBe(null);
+
+      const tabLinks = fixture.nativeElement.querySelectorAll('.mat-mdc-tab-link');
+      expect(tabLinks[0].getAttribute('role')).toBe(null);
+      expect(tabLinks[1].getAttribute('role')).toBe(null);
+      expect(tabLinks[2].getAttribute('role')).toBe(null);
+    });
+
+    it('should not setup aria-controls', () => {
+      const tabLinks = fixture.nativeElement.querySelectorAll('.mat-mdc-tab-link');
+      expect(tabLinks[0].getAttribute('aria-controls')).toBe(null);
+      expect(tabLinks[1].getAttribute('aria-controls')).toBe(null);
+      expect(tabLinks[2].getAttribute('aria-controls')).toBe(null);
+    });
+
+    it('should not manage aria-selected', () => {
+      const tabLinks = fixture.nativeElement.querySelectorAll('.mat-mdc-tab-link');
+      expect(tabLinks[0].getAttribute('aria-selected')).toBe(null);
+      expect(tabLinks[1].getAttribute('aria-selected')).toBe(null);
+      expect(tabLinks[2].getAttribute('aria-selected')).toBe(null);
+    });
+
+    it('should not activate a link when space is pressed', () => {
+      const tabLinks = fixture.nativeElement.querySelectorAll('.mat-mdc-tab-link');
+      expect(tabLinks[1].classList.contains('mdc-tab--active')).toBe(false);
+
+      dispatchKeyboardEvent(tabLinks[1], 'keydown', SPACE);
+      fixture.detectChanges();
+
+      expect(tabLinks[1].classList.contains('mdc-tab--active')).toBe(false);
+    });
+  });
+
+  describe('with panel', () => {
+    let fixture: ComponentFixture<TabBarWithPanel>;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(TabBarWithPanel);
+      fixture.detectChanges();
+    });
+
+    it('should have the proper roles', () => {
+      const tabBar = fixture.nativeElement.querySelector('.mat-mdc-tab-nav-bar')!;
+      expect(tabBar.getAttribute('role')).toBe('tablist');
+
+      const tabLinks = fixture.nativeElement.querySelectorAll('.mat-mdc-tab-link');
+      expect(tabLinks[0].getAttribute('role')).toBe('tab');
+      expect(tabLinks[1].getAttribute('role')).toBe('tab');
+      expect(tabLinks[2].getAttribute('role')).toBe('tab');
+
+      const tabPanel = fixture.nativeElement.querySelector('.mat-mdc-tab-nav-panel')!;
+      expect(tabPanel.getAttribute('role')).toBe('tabpanel');
+    });
+
+    it('should manage tabindex properly', () => {
+      const tabLinks = fixture.nativeElement.querySelectorAll('.mat-mdc-tab-link');
+      expect(tabLinks[0].tabIndex).toBe(0);
+      expect(tabLinks[1].tabIndex).toBe(-1);
+      expect(tabLinks[2].tabIndex).toBe(-1);
+
+      tabLinks[1].click();
+      fixture.detectChanges();
+
+      expect(tabLinks[0].tabIndex).toBe(-1);
+      expect(tabLinks[1].tabIndex).toBe(0);
+      expect(tabLinks[2].tabIndex).toBe(-1);
+    });
+
+    it('should setup aria-controls properly', () => {
+      const tabLinks = fixture.nativeElement.querySelectorAll('.mat-mdc-tab-link');
+      expect(tabLinks[0].getAttribute('aria-controls')).toBe('tab-panel');
+      expect(tabLinks[1].getAttribute('aria-controls')).toBe('tab-panel');
+      expect(tabLinks[2].getAttribute('aria-controls')).toBe('tab-panel');
+    });
+
+    it('should not manage aria-current', () => {
+      const tabLinks = fixture.nativeElement.querySelectorAll('.mat-mdc-tab-link');
+      expect(tabLinks[0].getAttribute('aria-current')).toBe(null);
+      expect(tabLinks[1].getAttribute('aria-current')).toBe(null);
+      expect(tabLinks[2].getAttribute('aria-current')).toBe(null);
+    });
+
+    it('should manage aria-selected properly', () => {
+      const tabLinks = fixture.nativeElement.querySelectorAll('.mat-mdc-tab-link');
+      expect(tabLinks[0].getAttribute('aria-selected')).toBe('true');
+      expect(tabLinks[1].getAttribute('aria-selected')).toBe('false');
+      expect(tabLinks[2].getAttribute('aria-selected')).toBe('false');
+
+      tabLinks[1].click();
+      fixture.detectChanges();
+
+      expect(tabLinks[0].getAttribute('aria-selected')).toBe('false');
+      expect(tabLinks[1].getAttribute('aria-selected')).toBe('true');
+      expect(tabLinks[2].getAttribute('aria-selected')).toBe('false');
+    });
+
+    it('should activate a link when space is pressed', () => {
+      const tabLinks = fixture.nativeElement.querySelectorAll('.mat-mdc-tab-link');
+      expect(tabLinks[1].classList.contains('mdc-tab--active')).toBe(false);
+
+      dispatchKeyboardEvent(tabLinks[1], 'keydown', SPACE);
+      fixture.detectChanges();
+
+      expect(tabLinks[1].classList.contains('mdc-tab--active')).toBe(true);
+    });
+  });
+
   describe('ripples', () => {
     let fixture: ComponentFixture<SimpleTabNavBarTestApp>;
 
@@ -532,3 +655,21 @@ class TabLinkWithNativeTabindexAttr {}
 class TabBarWithInactiveTabsOnInit {
   tabs = [0, 1, 2];
 }
+
+@Component({
+  template: `
+    <nav mat-tab-nav-bar [tabPanel]="tabPanel">
+      <a mat-tab-link
+         *ngFor="let tab of tabs; let index = index"
+         [active]="index === activeIndex"
+         (click)="activeIndex = index">
+         Tab link
+      </a>
+    </nav>
+    <mat-tab-nav-panel #tabPanel id="tab-panel">Tab panel</mat-tab-nav-panel>
+  `,
+})
+class TabBarWithPanel {
+  tabs = [0, 1, 2];
+  activeIndex = 0;
+}

src/material-experimental/mdc-tabs/tab-nav-bar/tab-nav-bar.ts

@@ -142,6 +142,9 @@ export class MatTabNav extends _MatTabNavBase implements AfterContentInit {
   },
 })
 export class MatTabLink extends _MatTabLinkBase implements MatInkBarItem, OnInit, OnDestroy {
+  /** Unique id for the tab. */
+  @Input() override id = `mat-mdc-tab-link-${nextUniqueId++}`;
+
   _foundation = new MatInkBarFoundation(this.elementRef.nativeElement, this._document);
 
   private readonly _destroyed = new Subject<void>();
@@ -187,14 +190,15 @@ let nextUniqueId = 0;
   host: {
     '[attr.aria-labelledby]': '_activeTabId',
     '[attr.id]': 'id',
+    'class': 'mat-mdc-tab-nav-panel',
     'role': 'tabpanel',
   },
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatTabNavPanel {
   /** Unique id for the tab panel. */
-  @Input() id = `mat-tab-nav-panel-${nextUniqueId++}`;
+  @Input() id = `mat-mdc-tab-nav-panel-${nextUniqueId++}`;
 
   /** Id of the active tab in the nav bar. */
   _activeTabId?: string;

src/material-experimental/mdc-tabs/testing/tab-harness-filters.ts

@@ -27,3 +27,6 @@ export interface TabLinkHarnessFilters extends BaseHarnessFilters {
 
 /** A set of criteria that can be used to filter a list of `MatTabNavBarHarness` instances. */
 export interface TabNavBarHarnessFilters extends BaseHarnessFilters {}
+
+/** A set of criteria that can be used to filter a list of `MatTabNavBarHarness` instances. */
+export interface TabNavPanelHarnessFilters extends BaseHarnessFilters {}

src/material-experimental/mdc-tabs/testing/tab-link-harness.ts

@@ -33,6 +33,12 @@ export class MatTabLinkHarness extends ComponentHarness {
     return (await this.host()).text();
   }
 
+  /** Gets the value of the `aria-controls` attribute. */
+  async getAriaControls(): Promise<string | null> {
+    const host = await this.host();
+    return host.getAttribute('aria-controls');
+  }
+
   /** Whether the link is active. */
   async isActive(): Promise<boolean> {
     const host = await this.host();

src/material-experimental/mdc-tabs/testing/tab-nav-bar-harness.ts

@@ -7,8 +7,13 @@
  */
 
 import {ComponentHarness, HarnessPredicate, parallel} from '@angular/cdk/testing';
-import {TabNavBarHarnessFilters, TabLinkHarnessFilters} from './tab-harness-filters';
+import {
+  TabNavBarHarnessFilters,
+  TabNavPanelHarnessFilters,
+  TabLinkHarnessFilters,
+} from './tab-harness-filters';
 import {MatTabLinkHarness} from './tab-link-harness';
+import {MatTabNavPanelHarness} from './tab-nav-panel-harness';
 
 /** Harness for interacting with an MDC-based mat-tab-nav-bar in tests. */
 export class MatTabNavBarHarness extends ComponentHarness {
@@ -57,4 +62,16 @@ export class MatTabNavBarHarness extends ComponentHarness {
     }
     await tabs[0].click();
   }
+
+  /** Gets the panel associated with the nav bar. */
+  async getPanel(): Promise<MatTabNavPanelHarness> {
+    const link = await this.getActiveLink();
+    const panelId = await link.getAriaControls();
+    if (!panelId) {
+      throw Error('No panel is controlled by the nav bar.');
+    }
+
+    const filter: TabNavPanelHarnessFilters = {selector: `#${panelId}`};
+    return await this.documentRootLocatorFactory().locatorFor(MatTabNavPanelHarness.with(filter))();
+  }
 }

src/material-experimental/mdc-tabs/testing/tab-nav-panel-harness.ts

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {ComponentHarness, HarnessPredicate} from '@angular/cdk/testing';
+import {TabNavPanelHarnessFilters} from './tab-harness-filters';
+
+/** Harness for interacting with a standard mat-tab-nav-panel in tests. */
+export class MatTabNavPanelHarness extends ComponentHarness {
+  /** The selector for the host element of a `MatTabNavPanel` instance. */
+  static hostSelector = '.mat-mdc-tab-nav-panel';
+
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a `MatTabNavPanel` that meets
+   * certain criteria.
+   * @param options Options for filtering which tab nav panel instances are considered a match.
+   * @return a `HarnessPredicate` configured with the given options.
+   */
+  static with(options: TabNavPanelHarnessFilters = {}): HarnessPredicate<MatTabNavPanelHarness> {
+    return new HarnessPredicate(MatTabNavPanelHarness, options);
+  }
+
+  /** Gets the tab panel text content. */
+  async getTextContent(): Promise<string> {
+    return (await this.host()).text();
+  }
+}