Skip to content

refactor(material-experimental/mdc-table): de-duplicate test harness logic #22451

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 7, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions scripts/check-mdc-exports-config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,11 @@ export const config = {
'_MatTableDataSource',
'_MAT_TEXT_COLUMN_TEMPLATE'
],
'mdc-table/testing': [
// Private symbols that are only exported for MDC.
'_MatTableHarnessBase',
'_MatRowHarnessBase'
],
'mdc-tooltip': [
// Private symbols that are only exported for MDC.
'_MatTooltipBase',
Expand Down
1 change: 1 addition & 0 deletions src/material-experimental/mdc-table/testing/BUILD.bazel
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ ts_library(
module_name = "@angular/material-experimental/mdc-table/testing",
deps = [
"//src/cdk/testing",
"//src/material/table/testing",
],
)

Expand Down
56 changes: 12 additions & 44 deletions src/material-experimental/mdc-table/testing/cell-harness.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,16 @@
* found in the LICENSE file at https://angular.io/license
*/

import {HarnessPredicate} from '@angular/cdk/testing';
import {
HarnessPredicate,
ComponentHarnessConstructor,
ContentContainerComponentHarness,
} from '@angular/cdk/testing';
import {CellHarnessFilters} from './table-harness-filters';
MatCellHarness as BaseMatCellHarness,
MatHeaderCellHarness as BaseMatHeaderCellHarness,
MatFooterCellHarness as BaseMatFooterCellHarness,
CellHarnessFilters
} from '@angular/material/table/testing';

/** Harness for interacting with an MDC-based Angular Material table cell. */
export class MatCellHarness extends ContentContainerComponentHarness {
export class MatCellHarness extends BaseMatCellHarness {
/** The selector for the host element of a `MatCellHarness` instance. */
static hostSelector = '.mat-mdc-cell';

Expand All @@ -24,34 +25,12 @@ export class MatCellHarness extends ContentContainerComponentHarness {
* @return a `HarnessPredicate` configured with the given options.
*/
static with(options: CellHarnessFilters = {}): HarnessPredicate<MatCellHarness> {
return getCellPredicate(MatCellHarness, options);
}

/** Gets the cell's text. */
async getText(): Promise<string> {
return (await this.host()).text();
}

/** Gets the name of the column that the cell belongs to. */
async getColumnName(): Promise<string> {
const host = await this.host();
const classAttribute = await host.getAttribute('class');

if (classAttribute) {
const prefix = 'mat-column-';
const name = classAttribute.split(' ').map(c => c.trim()).find(c => c.startsWith(prefix));

if (name) {
return name.split(prefix)[1];
}
}

throw Error('Could not determine column name of cell.');
return BaseMatCellHarness._getCellPredicate(MatCellHarness, options);
}
}

/** Harness for interacting with an MDC-based Angular Material table header cell. */
export class MatHeaderCellHarness extends MatCellHarness {
export class MatHeaderCellHarness extends BaseMatHeaderCellHarness {
/** The selector for the host element of a `MatHeaderCellHarness` instance. */
static hostSelector = '.mat-mdc-header-cell';

Expand All @@ -62,12 +41,12 @@ export class MatHeaderCellHarness extends MatCellHarness {
* @return a `HarnessPredicate` configured with the given options.
*/
static with(options: CellHarnessFilters = {}): HarnessPredicate<MatHeaderCellHarness> {
return getCellPredicate(MatHeaderCellHarness, options);
return BaseMatHeaderCellHarness._getCellPredicate(MatHeaderCellHarness, options);
}
}

/** Harness for interacting with an MDC-based Angular Material table footer cell. */
export class MatFooterCellHarness extends MatCellHarness {
export class MatFooterCellHarness extends BaseMatFooterCellHarness {
/** The selector for the host element of a `MatFooterCellHarness` instance. */
static hostSelector = '.mat-mdc-footer-cell';

Expand All @@ -78,17 +57,6 @@ export class MatFooterCellHarness extends MatCellHarness {
* @return a `HarnessPredicate` configured with the given options.
*/
static with(options: CellHarnessFilters = {}): HarnessPredicate<MatFooterCellHarness> {
return getCellPredicate(MatFooterCellHarness, options);
return BaseMatFooterCellHarness._getCellPredicate(MatFooterCellHarness, options);
}
}


function getCellPredicate<T extends MatCellHarness>(
type: ComponentHarnessConstructor<T>,
options: CellHarnessFilters): HarnessPredicate<T> {
return new HarnessPredicate(type, options)
.addOption('text', options.text,
(harness, text) => HarnessPredicate.stringMatches(harness.getText(), text))
.addOption('columnName', options.columnName,
(harness, name) => HarnessPredicate.stringMatches(harness.getColumnName(), name));
}
8 changes: 7 additions & 1 deletion src/material-experimental/mdc-table/testing/public-api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,13 @@
* found in the LICENSE file at https://angular.io/license
*/

export {
CellHarnessFilters,
RowHarnessFilters,
TableHarnessFilters,
MatRowHarnessColumnsText,
MatTableHarnessColumnsText,
} from '@angular/material/table/testing';
export * from './table-harness';
export * from './row-harness';
export * from './cell-harness';
export * from './table-harness-filters';
85 changes: 10 additions & 75 deletions src/material-experimental/mdc-table/testing/row-harness.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,15 @@
* found in the LICENSE file at https://angular.io/license
*/

import {ComponentHarness, HarnessPredicate, parallel} from '@angular/cdk/testing';
import {RowHarnessFilters, CellHarnessFilters} from './table-harness-filters';
import {HarnessPredicate} from '@angular/cdk/testing';
import {_MatRowHarnessBase, RowHarnessFilters} from '@angular/material/table/testing';
import {MatCellHarness, MatHeaderCellHarness, MatFooterCellHarness} from './cell-harness';

/** Text extracted from a table row organized by columns. */
export interface MatRowHarnessColumnsText {
[columnName: string]: string;
}

/** Harness for interacting with an MDC-based Angular Material table row. */
export class MatRowHarness extends ComponentHarness {
export class MatRowHarness extends _MatRowHarnessBase<typeof MatCellHarness, MatCellHarness> {
/** The selector for the host element of a `MatRowHarness` instance. */
static hostSelector = '.mat-mdc-row';
protected _cellHarness = MatCellHarness;

/**
* Gets a `HarnessPredicate` that can be used to search for a table row with specific attributes.
Expand All @@ -28,27 +24,14 @@ export class MatRowHarness extends ComponentHarness {
static with(options: RowHarnessFilters = {}): HarnessPredicate<MatRowHarness> {
return new HarnessPredicate(MatRowHarness, options);
}

/** Gets a list of `MatCellHarness` for all cells in the row. */
async getCells(filter: CellHarnessFilters = {}): Promise<MatCellHarness[]> {
return this.locatorForAll(MatCellHarness.with(filter))();
}

/** Gets the text of the cells in the row. */
async getCellTextByIndex(filter: CellHarnessFilters = {}): Promise<string[]> {
return getCellTextByIndex(this, filter);
}

/** Gets the text inside the row organized by columns. */
async getCellTextByColumnName(): Promise<MatRowHarnessColumnsText> {
return getCellTextByColumnName(this);
}
}

/** Harness for interacting with an MDC-based Angular Material table header row. */
export class MatHeaderRowHarness extends ComponentHarness {
export class MatHeaderRowHarness extends _MatRowHarnessBase<
typeof MatHeaderCellHarness, MatHeaderCellHarness> {
/** The selector for the host element of a `MatHeaderRowHarness` instance. */
static hostSelector = '.mat-mdc-header-row';
protected _cellHarness = MatHeaderCellHarness;

/**
* Gets a `HarnessPredicate` that can be used to search for
Expand All @@ -59,28 +42,15 @@ export class MatHeaderRowHarness extends ComponentHarness {
static with(options: RowHarnessFilters = {}): HarnessPredicate<MatHeaderRowHarness> {
return new HarnessPredicate(MatHeaderRowHarness, options);
}

/** Gets a list of `MatHeaderCellHarness` for all cells in the row. */
async getCells(filter: CellHarnessFilters = {}): Promise<MatHeaderCellHarness[]> {
return this.locatorForAll(MatHeaderCellHarness.with(filter))();
}

/** Gets the text of the cells in the header row. */
async getCellTextByIndex(filter: CellHarnessFilters = {}): Promise<string[]> {
return getCellTextByIndex(this, filter);
}

/** Gets the text inside the header row organized by columns. */
async getCellTextByColumnName(): Promise<MatRowHarnessColumnsText> {
return getCellTextByColumnName(this);
}
}


/** Harness for interacting with an MDC-based Angular Material table footer row. */
export class MatFooterRowHarness extends ComponentHarness {
export class MatFooterRowHarness extends _MatRowHarnessBase<
typeof MatFooterCellHarness, MatFooterCellHarness> {
/** The selector for the host element of a `MatFooterRowHarness` instance. */
static hostSelector = '.mat-mdc-footer-row';
protected _cellHarness = MatFooterCellHarness;

/**
* Gets a `HarnessPredicate` that can be used to search for
Expand All @@ -91,39 +61,4 @@ export class MatFooterRowHarness extends ComponentHarness {
static with(options: RowHarnessFilters = {}): HarnessPredicate<MatFooterRowHarness> {
return new HarnessPredicate(MatFooterRowHarness, options);
}

/** Gets a list of `MatFooterCellHarness` for all cells in the row. */
async getCells(filter: CellHarnessFilters = {}): Promise<MatFooterCellHarness[]> {
return this.locatorForAll(MatFooterCellHarness.with(filter))();
}

/** Gets the text of the cells in the footer row. */
async getCellTextByIndex(filter: CellHarnessFilters = {}): Promise<string[]> {
return getCellTextByIndex(this, filter);
}

/** Gets the text inside the footer row organized by columns. */
async getCellTextByColumnName(): Promise<MatRowHarnessColumnsText> {
return getCellTextByColumnName(this);
}
}


async function getCellTextByIndex(harness: {
getCells: (filter?: CellHarnessFilters) => Promise<MatCellHarness[]>
}, filter: CellHarnessFilters): Promise<string[]> {
const cells = await harness.getCells(filter);
return parallel(() => cells.map(cell => cell.getText()));
}

async function getCellTextByColumnName(harness: {
getCells: () => Promise<MatCellHarness[]>
}): Promise<MatRowHarnessColumnsText> {
const output: MatRowHarnessColumnsText = {};
const cells = await harness.getCells();
const cellsData = await parallel(() => cells.map(cell => {
return parallel(() => [cell.getColumnName(), cell.getText()]);
}));
cellsData.forEach(([columnName, text]) => output[columnName] = text);
return output;
}

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,5 @@ import {runHarnessTests} from '@angular/material/table/testing/shared.spec';
import {MatTableHarness} from './table-harness';

describe('MDC-based MatTableHarness', () => {
runHarnessTests(MatTableModule, MatTableHarness);
runHarnessTests(MatTableModule, MatTableHarness as any);
});
Loading