docs(material/tabs): add harness example for tabs (#21404)

Author: annieyw

src/components-examples/material/tabs/BUILD.bazel

@@ -11,13 +11,19 @@ ng_module(
     ]),
     module_name = "@angular/components-examples/material/tabs",
     deps = [
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
         "//src/material/button",
         "//src/material/button-toggle",
         "//src/material/checkbox",
         "//src/material/icon",
         "//src/material/input",
         "//src/material/tabs",
+        "//src/material/tabs/testing",
         "@npm//@angular/forms",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@types/jasmine",
     ],
 )
 

src/components-examples/material/tabs/index.ts

@@ -15,6 +15,7 @@ import {TabGroupCustomLabelExample} from './tab-group-custom-label/tab-group-cus
 import {
   TabGroupDynamicHeightExample
 } from './tab-group-dynamic-height/tab-group-dynamic-height-example';
+import {TabGroupHarnessExample} from './tab-group-harness/tab-group-harness-example';
 import {TabGroupDynamicExample} from './tab-group-dynamic/tab-group-dynamic-example';
 import {TabGroupHeaderBelowExample} from './tab-group-header-below/tab-group-header-below-example';
 import {TabGroupLazyLoadedExample} from './tab-group-lazy-loaded/tab-group-lazy-loaded-example';
@@ -30,6 +31,7 @@ export {
   TabGroupCustomLabelExample,
   TabGroupDynamicExample,
   TabGroupDynamicHeightExample,
+  TabGroupHarnessExample,
   TabGroupHeaderBelowExample,
   TabGroupLazyLoadedExample,
   TabGroupStretchedExample,
@@ -45,6 +47,7 @@ const EXAMPLES = [
   TabGroupCustomLabelExample,
   TabGroupDynamicExample,
   TabGroupDynamicHeightExample,
+  TabGroupHarnessExample,
   TabGroupHeaderBelowExample,
   TabGroupLazyLoadedExample,
   TabGroupStretchedExample,

src/components-examples/material/tabs/tab-group-harness/tab-group-harness-example.html

@@ -0,0 +1,11 @@
+<mat-tab-group>
+  <mat-tab label="Profile" aria-label="Profile tab">
+    <span class="test-tab-content">Your personal information</span>
+  </mat-tab>
+  <mat-tab label="Settings" aria-label="Settings tab">
+    <span class="test-tab-content">Privacy settings</span>
+  </mat-tab>
+  <mat-tab label="FAQ" aria-label="FAQ tab">
+    <span class="test-tab-content">How to update profile picture</span>
+  </mat-tab>
+</mat-tab-group>

src/components-examples/material/tabs/tab-group-harness/tab-group-harness-example.spec.ts

@@ -0,0 +1,55 @@
+import {TestBed, ComponentFixture, waitForAsync} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatTabGroupHarness} from '@angular/material/tabs/testing';
+import {HarnessLoader} from '@angular/cdk/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
+  from '@angular/platform-browser-dynamic/testing';
+import {MatTabsModule} from '@angular/material/tabs';
+import {TabGroupHarnessExample} from './tab-group-harness-example';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+
+describe('TabGroupHarnessExample', () => {
+  let fixture: ComponentFixture<TabGroupHarnessExample>;
+  let loader: HarnessLoader;
+
+  beforeAll(() => {
+    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+  });
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [MatTabsModule, NoopAnimationsModule],
+        declarations: [TabGroupHarnessExample]
+      }).compileComponents();
+      fixture = TestBed.createComponent(TabGroupHarnessExample);
+      fixture.detectChanges();
+      loader = TestbedHarnessEnvironment.loader(fixture);
+    })
+  );
+
+  it('should load harness for tab-group', async () => {
+    const tabGroups = await loader.getAllHarnesses(MatTabGroupHarness);
+    expect(tabGroups.length).toBe(1);
+  });
+
+  it('should load harness for tab-group with selected tab label', async () => {
+    const tabGroups = await loader.getAllHarnesses(MatTabGroupHarness.with({
+      selectedTabLabel: 'Profile',
+    }));
+    expect(tabGroups.length).toBe(1);
+  });
+
+  it('should be able to get tabs of tab-group', async () => {
+    const tabGroup = await loader.getHarness(MatTabGroupHarness);
+    const tabs = await tabGroup.getTabs();
+    expect(tabs.length).toBe(3);
+  });
+
+  it('should be able to select tab from tab-group', async () => {
+    const tabGroup = await loader.getHarness(MatTabGroupHarness);
+    expect(await (await tabGroup.getSelectedTab()).getLabel()).toBe('Profile');
+    await tabGroup.selectTab({label: 'FAQ'});
+    expect(await (await tabGroup.getSelectedTab()).getLabel()).toBe('FAQ');
+  });
+});

src/components-examples/material/tabs/tab-group-harness/tab-group-harness-example.ts

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Testing with MatTabGroupHarness
+ */
+@Component({
+  selector: 'tab-group-harness-example',
+  templateUrl: 'tab-group-harness-example.html'
+})
+export class TabGroupHarnessExample {}