feat(material-experimental/mdc-chips): add harness skeleton (#16737)

Author: andrewseguin

src/material-experimental/mdc-chips/BUILD.bazel

@@ -1,13 +1,16 @@
 package(default_visibility = ["//visibility:public"])
 
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary", "sass_library")
-load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite", "ts_library")
 
 ng_module(
     name = "mdc-chips",
     srcs = glob(
         ["**/*.ts"],
-        exclude = ["**/*.spec.ts"],
+        exclude = [
+            "**/*.spec.ts",
+            "harness/**",
+        ],
     ),
     assets = [":chips_scss"] + glob(["**/*.html"]),
     module_name = "@angular/material-experimental/mdc-chips",
@@ -23,6 +26,17 @@ ng_module(
     ],
 )
 
+ts_library(
+    name = "harness",
+    srcs = glob(
+        ["harness/**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    deps = [
+        "//src/cdk-experimental/testing",
+    ],
+)
+
 sass_library(
     name = "mdc_chips_scss_lib",
     srcs = glob(["**/_*.scss"]),
@@ -52,7 +66,10 @@ ng_test_library(
         exclude = ["**/*.e2e.spec.ts"],
     ),
     deps = [
+        ":harness",
         ":mdc-chips",
+        "//src/cdk-experimental/testing",
+        "//src/cdk-experimental/testing/testbed",
         "//src/cdk/a11y",
         "//src/cdk/bidi",
         "//src/cdk/keycodes",

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

@@ -0,0 +1,52 @@
+import {HarnessLoader} from '@angular/cdk-experimental/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk-experimental/testing/testbed';
+import {Component} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatChipsModule} from '../index';
+import {MatChipGridHarness} from './chip-grid-harness';
+
+let fixture: ComponentFixture<ChipGridHarnessTest>;
+let loader: HarnessLoader;
+
+describe('MatChipGridHarness', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MatChipsModule],
+      declarations: [ChipGridHarnessTest],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ChipGridHarnessTest);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.loader(fixture);
+  });
+
+  it('should get correct number of grid harnesses', async () => {
+    const harnesses = await loader.getAllHarnesses(MatChipGridHarness);
+    expect(harnesses.length).toBe(1);
+  });
+
+  it('should get correct number of rows', async () => {
+    const harnesses = await loader.getAllHarnesses(MatChipGridHarness);
+    const rows = await harnesses[0].getRows();
+    expect(rows.length).toBe(3);
+  });
+
+  it('should get the chip input harness', async () => {
+    const harnesses = await loader.getAllHarnesses(MatChipGridHarness);
+    const input = await harnesses[0].getTextInput();
+    expect(await input).not.toBe(null);
+  });
+});
+
+@Component({
+  template: `
+    <mat-chip-grid #grid>
+      <mat-chip-row> Chip A </mat-chip-row>
+      <mat-chip-row> Chip B </mat-chip-row>
+      <mat-chip-row> Chip C </mat-chip-row>
+      <input [matChipInputFor]="grid" />
+    </mat-chip-grid>
+  `
+})
+class ChipGridHarnessTest {}
+

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

@@ -0,0 +1,32 @@
+/**
+ * @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} from '@angular/cdk-experimental/testing';
+import {MatChipRowHarness} from './chip-row-harness';
+import {MatChipInputHarness} from './chip-input';
+
+/**
+ * Harness for interacting with a mat-chip-grid in tests.
+ * @dynamic
+ */
+export class MatChipGridHarness extends ComponentHarness {
+  static hostSelector = 'mat-chip-grid';
+
+  private _rows = this.locatorForAll(MatChipRowHarness);
+  private _input = this.locatorFor(MatChipInputHarness);
+
+  /** Gets promise of the harnesses for the chip rows. */
+  async getRows(): Promise<MatChipRowHarness[]> {
+    return await this._rows();
+  }
+
+  /** Gets promise of the chip text input harness. */
+  async getTextInput(): Promise<MatChipInputHarness|null> {
+    return await this._input();
+  }
+}

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

@@ -0,0 +1,44 @@
+import {HarnessLoader} from '@angular/cdk-experimental/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk-experimental/testing/testbed';
+import {Component} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatChipsModule} from '../index';
+import {MatChipHarness} from './chip-harness';
+
+let fixture: ComponentFixture<ChipHarnessTest>;
+let loader: HarnessLoader;
+
+describe('MatChipHarness', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MatChipsModule],
+      declarations: [ChipHarnessTest],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ChipHarnessTest);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.loader(fixture);
+  });
+
+  it('should get correct number of chip harnesses', async () => {
+    const harnesses = await loader.getAllHarnesses(MatChipHarness);
+    expect(harnesses.length).toBe(3);
+  });
+
+  it('should get the chip text content', async () => {
+    const harnesses = await loader.getAllHarnesses(MatChipHarness);
+    expect(await harnesses[0].getText()).toBe('Basic Chip');
+    expect(await harnesses[1].getText()).toBe('Chip');
+    expect(await harnesses[2].getText()).toBe('Disabled Chip');
+  });
+});
+
+@Component({
+  template: `
+    <mat-basic-chip> Basic Chip </mat-basic-chip>
+    <mat-chip> Chip </mat-chip>
+    <mat-chip disabled> Disabled Chip </mat-chip>
+  `
+})
+class ChipHarnessTest {}
+

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

@@ -0,0 +1,22 @@
+/**
+ * @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} from '@angular/cdk-experimental/testing';
+
+/**
+ * Harness for interacting with a mat-chip in tests.
+ * @dynamic
+ */
+export class MatChipHarness extends ComponentHarness {
+  static hostSelector = 'mat-basic-chip, mat-chip';
+
+  /** Gets a promise for the text content the option. */
+  async getText(): Promise<string> {
+    return (await this.host()).text();
+  }
+}

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

@@ -0,0 +1,47 @@
+import {HarnessLoader} from '@angular/cdk-experimental/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk-experimental/testing/testbed';
+import {Component} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatChipsModule} from '../index';
+import {MatChipInputHarness} from './chip-input';
+
+let fixture: ComponentFixture<ChipInputHarnessTest>;
+let loader: HarnessLoader;
+
+describe('MatChipInputHarness', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MatChipsModule],
+      declarations: [ChipInputHarnessTest],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ChipInputHarnessTest);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.loader(fixture);
+  });
+
+  it('should get correct number of chip input harnesses', async () => {
+    const harnesses = await loader.getAllHarnesses(MatChipInputHarness);
+    expect(harnesses.length).toBe(2);
+  });
+
+  it('should get the disabled state', async () => {
+    const harnesses = await loader.getAllHarnesses(MatChipInputHarness);
+    expect(await harnesses[0].isDisabled()).toBe(false);
+    expect(await harnesses[1].isDisabled()).toBe(true);
+  });
+});
+
+@Component({
+  template: `
+    <mat-chip-grid #grid1>
+      <input [matChipInputFor]="grid1" />
+    </mat-chip-grid>
+
+    <mat-chip-grid #grid2>
+      <input [matChipInputFor]="grid2" disabled />
+    </mat-chip-grid>
+  `
+})
+class ChipInputHarnessTest {}
+

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

@@ -0,0 +1,27 @@
+/**
+ * @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} from '@angular/cdk-experimental/testing';
+
+/**
+ * Harness for interacting with a grid's chip input in tests.
+ * @dynamic
+ */
+export class MatChipInputHarness extends ComponentHarness {
+  static hostSelector = '.mat-mdc-chip-input';
+
+  /** Gets a promise for the disabled state. */
+  async isDisabled(): Promise<boolean> {
+    return await ((await this.host()).getAttribute('disabled')) === 'true';
+  }
+
+  /** Gets a promise for the placeholder text. */
+  async getPlaceholder(): Promise<string|null> {
+    return (await this.host()).getAttribute('placeholder');
+  }
+}

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

@@ -0,0 +1,88 @@
+import {HarnessLoader} from '@angular/cdk-experimental/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk-experimental/testing/testbed';
+import {Component} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatChipsModule} from '../index';
+import {MatChipListboxHarness} from './chip-listbox-harness';
+
+let fixture: ComponentFixture<ChipListboxHarnessTest>;
+let loader: HarnessLoader;
+
+describe('MatChipListboxHarness', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MatChipsModule],
+      declarations: [ChipListboxHarnessTest],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ChipListboxHarnessTest);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.loader(fixture);
+  });
+
+  it('should get correct number of listbox harnesses', async () => {
+    const harnesses = await loader.getAllHarnesses(MatChipListboxHarness);
+    expect(harnesses.length).toBe(1);
+  });
+
+  it('should get the number of options', async () => {
+    const harnesses = await loader.getAllHarnesses(MatChipListboxHarness);
+    expect ((await harnesses[0].getOptions()).length).toBe(4);
+  });
+
+  describe('should get selection', async () => {
+    it('with no selected options', async () => {
+      const harnesses = await loader.getAllHarnesses(MatChipListboxHarness);
+      const selectedOption = await harnesses[0].getSelected();
+      expect(await selectedOption.length).toBe(0);
+    });
+
+    it('with a single selected option', async () => {
+      fixture.componentInstance.options[0].selected = true;
+      fixture.detectChanges();
+
+      const harnesses = await loader.getAllHarnesses(MatChipListboxHarness);
+      const selectedOption = await harnesses[0].getSelected();
+      expect(await selectedOption.length).toBe(1);
+      expect(await selectedOption[0].getText()).toContain('Blue');
+    });
+
+    it('with multiple selected options', async () => {
+      fixture.componentInstance.enableMultipleSelection = true;
+      fixture.componentInstance.options[0].selected = true;
+      fixture.componentInstance.options[1].selected = true;
+      fixture.detectChanges();
+
+      const harnesses = (await loader.getAllHarnesses(MatChipListboxHarness));
+      const selectedOption = await harnesses[0].getSelected();
+      expect(await selectedOption.length).toBe(2);
+      expect(await selectedOption[0].getText()).toContain('Blue');
+      expect(await selectedOption[1].getText()).toContain('Green');
+    });
+  });
+});
+
+interface ExampleOption {
+  selected: boolean;
+  text: string;
+}
+
+@Component({
+  template: `
+    <mat-chip-listbox [multiple]="enableMultipleSelection">
+      <mat-chip-option *ngFor="let option of options" [selected]="option.selected">
+        {{option.text}}
+      </mat-chip-option>
+    </mat-chip-listbox>
+  `
+})
+class ChipListboxHarnessTest {
+  enableMultipleSelection = false;
+  options: ExampleOption[] = [
+    {text: 'Blue', selected: false},
+    {text: 'Green', selected: false},
+    {text: 'Red', selected: false},
+    {text: 'Yellow', selected: false},
+  ];
+}
+