feat(material/grid-list): add test harness (#18001)

Author: devversion

src/material/grid-list/grid-list.ts

@@ -39,6 +39,9 @@ const MAT_FIT_MODE = 'fit';
   styleUrls: ['grid-list.css'],
   host: {
     'class': 'mat-grid-list',
+    // Ensures that the "cols" input value is reflected in the DOM. This is
+    // needed for the grid-list harness.
+    '[attr.cols]': 'cols',
   },
   providers: [{
     provide: MAT_GRID_LIST,

src/material/grid-list/grid-tile.ts

@@ -28,6 +28,10 @@ import {MAT_GRID_LIST, MatGridListBase} from './grid-list-base';
   exportAs: 'matGridTile',
   host: {
     'class': 'mat-grid-tile',
+    // Ensures that the "rowspan" and "colspan" input value is reflected in
+    // the DOM. This is needed for the grid-tile harness.
+    '[attr.rowspan]': 'rowspan',
+    '[attr.colspan]': 'colspan'
   },
   templateUrl: 'grid-tile.html',
   styleUrls: ['grid-list.css'],

src/material/grid-list/public-api.ts

@@ -10,3 +10,5 @@ export * from './grid-list-module';
 export * from './grid-list';
 export * from './grid-tile';
 
+// Privately exported for the grid-list harness.
+export {TileCoordinator as ɵTileCoordinator} from './tile-coordinator';

src/material/grid-list/testing/BUILD.bazel

@@ -0,0 +1,52 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_test_library", "ng_web_test_suite", "ts_library")
+
+ts_library(
+    name = "testing",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    module_name = "@angular/material/grid-list/testing",
+    deps = [
+        "//src/cdk/testing",
+        "//src/material/grid-list",
+    ],
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob(["**/*.ts"]),
+)
+
+ng_test_library(
+    name = "harness_tests_lib",
+    srcs = ["shared.spec.ts"],
+    deps = [
+        ":testing",
+        "//src/cdk/testing",
+        "//src/cdk/testing/private",
+        "//src/cdk/testing/testbed",
+        "//src/material/grid-list",
+        "@npm//@angular/platform-browser",
+    ],
+)
+
+ng_test_library(
+    name = "unit_tests_lib",
+    srcs = glob(
+        ["**/*.spec.ts"],
+        exclude = ["shared.spec.ts"],
+    ),
+    deps = [
+        ":harness_tests_lib",
+        ":testing",
+        "//src/material/grid-list",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [":unit_tests_lib"],
+)

src/material/grid-list/testing/grid-list-harness-filters.ts

@@ -0,0 +1,20 @@
+/**
+ * @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 {BaseHarnessFilters} from '@angular/cdk/testing';
+
+/** A set of criteria that can be used to filter a list of `MatGridListHarness` instances. */
+export interface GridListHarnessFilters extends BaseHarnessFilters {}
+
+/** A set of criteria that can be used to filter a list of `MatTileHarness` instances. */
+export interface GridTileHarnessFilters extends BaseHarnessFilters {
+  /** Text the grid-tile header should match. */
+  headerText?: string|RegExp;
+  /** Text the grid-tile footer should match. */
+  footerText?: string|RegExp;
+}

src/material/grid-list/testing/grid-list-harness.spec.ts

@@ -0,0 +1,8 @@
+import {MatGridListModule} from '@angular/material/grid-list';
+import {MatGridListHarness} from './grid-list-harness';
+import {MatGridTileHarness} from './grid-tile-harness';
+import {runHarnessTests} from './shared.spec';
+
+describe('Non-MDC-based MatGridListHarness', () => {
+  runHarnessTests(MatGridListModule, MatGridListHarness, MatGridTileHarness);
+});

src/material/grid-list/testing/grid-list-harness.ts

@@ -0,0 +1,76 @@
+/**
+ * @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 {ɵTileCoordinator as TileCoordinator} from '@angular/material/grid-list';
+import {GridListHarnessFilters, GridTileHarnessFilters} from './grid-list-harness-filters';
+import {MatGridTileHarness} from './grid-tile-harness';
+
+/** Harness for interacting with a standard `MatGridList` in tests. */
+export class MatGridListHarness extends ComponentHarness {
+  /** The selector for the host element of a `MatGridList` instance. */
+  static hostSelector = '.mat-grid-list';
+
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a `MatGridListHarness`
+   * that meets certain criteria.
+   * @param options Options for filtering which dialog instances are considered a match.
+   * @return a `HarnessPredicate` configured with the given options.
+   */
+  static with(options: GridListHarnessFilters = {}): HarnessPredicate<MatGridListHarness> {
+    return new HarnessPredicate(MatGridListHarness, options);
+  }
+
+  /**
+   * Tile coordinator that is used by the "MatGridList" for computing
+   * positions of tiles. We leverage the coordinator to provide an API
+   * for retrieving tiles based on visual tile positions.
+   */
+  private _tileCoordinator = new TileCoordinator();
+
+  /** Gets all tiles of the grid-list. */
+  async getTiles(filters: GridTileHarnessFilters = {}): Promise<MatGridTileHarness[]> {
+    return await this.locatorForAll(MatGridTileHarness.with(filters))();
+  }
+
+  /** Gets the amount of columns of the grid-list. */
+  async getColumns(): Promise<number> {
+    return Number(await (await this.host()).getAttribute('cols'));
+  }
+
+  /**
+   * Gets a tile of the grid-list that is located at the given location.
+   * @param row Zero-based row index.
+   * @param column Zero-based column index.
+   */
+  async getTileAtPosition({row, column}: {row: number, column: number}):
+      Promise<MatGridTileHarness> {
+    const [tileHarnesses, columns] = await Promise.all([this.getTiles(), this.getColumns()]);
+    const tileSpans = tileHarnesses.map(t => Promise.all([t.getColspan(), t.getRowspan()]));
+    const tiles = (await Promise.all(tileSpans)).map(([colspan, rowspan]) => ({colspan, rowspan}));
+    // Update the tile coordinator to reflect the current column amount and
+    // rendered tiles. We update upon every call of this method since we do not
+    // know if tiles have been added, removed or updated (in terms of rowspan/colspan).
+    this._tileCoordinator.update(columns, tiles);
+    // The tile coordinator respects the colspan and rowspan for calculating the positions
+    // of tiles, but it does not create multiple position entries if a tile spans over multiple
+    // columns or rows. We want to provide an API where developers can retrieve a tile based on
+    // any position that lies within the visual tile boundaries. For example: If a tile spans
+    // over two columns, then the same tile should be returned for either column indices.
+    for (let i = 0; i < this._tileCoordinator.positions.length; i++) {
+      const position = this._tileCoordinator.positions[i];
+      const {rowspan, colspan} = tiles[i];
+      // Return the tile harness if the given position visually resolves to the tile.
+      if (column >= position.col && column <= position.col + colspan - 1 && row >= position.row &&
+          row <= position.row + rowspan - 1) {
+        return tileHarnesses[i];
+      }
+    }
+    throw Error('Could not find tile at given position.');
+  }
+}

src/material/grid-list/testing/grid-tile-harness.ts

@@ -0,0 +1,77 @@
+/**
+ * @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 {GridTileHarnessFilters} from './grid-list-harness-filters';
+
+/** Harness for interacting with a standard `MatGridTitle` in tests. */
+export class MatGridTileHarness extends ComponentHarness {
+  /** The selector for the host element of a `MatGridTile` instance. */
+  static hostSelector = '.mat-grid-tile';
+
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a `MatGridTileHarness`
+   * that meets certain criteria.
+   * @param options Options for filtering which dialog instances are considered a match.
+   * @return a `HarnessPredicate` configured with the given options.
+   */
+  static with(options: GridTileHarnessFilters = {}): HarnessPredicate<MatGridTileHarness> {
+    return new HarnessPredicate(MatGridTileHarness, options)
+        .addOption(
+            'headerText', options.headerText,
+            (harness, pattern) => HarnessPredicate.stringMatches(harness.getHeaderText(), pattern))
+        .addOption(
+            'footerText', options.footerText,
+            (harness, pattern) => HarnessPredicate.stringMatches(harness.getFooterText(), pattern));
+  }
+
+  private _header = this.locatorForOptional('.mat-grid-tile-header');
+  private _footer = this.locatorForOptional('.mat-grid-tile-footer');
+  private _avatar = this.locatorForOptional('.mat-grid-avatar');
+
+  /** Gets the amount of rows that the grid-tile takes up. */
+  async getRowspan(): Promise<number> {
+    return Number(await (await this.host()).getAttribute('rowspan'));
+  }
+
+  /** Gets the amount of columns that the grid-tile takes up. */
+  async getColspan(): Promise<number> {
+    return Number(await (await this.host()).getAttribute('colspan'));
+  }
+
+  /** Whether the grid-tile has a header. */
+  async hasHeader(): Promise<boolean> {
+    return (await this._header()) !== null;
+  }
+
+  /** Whether the grid-tile has a footer. */
+  async hasFooter(): Promise<boolean> {
+    return (await this._footer()) !== null;
+  }
+
+  /** Whether the grid-tile has an avatar. */
+  async hasAvatar(): Promise<boolean> {
+    return (await this._avatar()) !== null;
+  }
+
+  /** Gets the text of the header if present. */
+  async getHeaderText(): Promise<string|null> {
+    // For performance reasons, we do not use "hasHeader" as
+    // we would then need to query twice for the header.
+    const headerEl = await this._header();
+    return headerEl ? headerEl.text() : null;
+  }
+
+  /** Gets the text of the footer if present. */
+  async getFooterText(): Promise<string|null> {
+    // For performance reasons, we do not use "hasFooter" as
+    // we would then need to query twice for the footer.
+    const headerEl = await this._footer();
+    return headerEl ? headerEl.text() : null;
+  }
+}

src/material/grid-list/testing/index.ts

@@ -0,0 +1,9 @@
+/**
+ * @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
+ */
+
+export * from './public-api';

src/material/grid-list/testing/public-api.ts

@@ -0,0 +1,11 @@
+/**
+ * @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
+ */
+
+export * from './grid-tile-harness';
+export * from './grid-list-harness';
+export * from './grid-list-harness-filters';