Skip to content

feat(material/list): add test harnesses for list components. #17859

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 7 commits into from
Dec 4, 2019
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
2 changes: 1 addition & 1 deletion src/cdk/testing/component-harness.ts
Original file line number Diff line number Diff line change
Expand Up @@ -412,7 +412,7 @@ export class HarnessPredicate<T extends ComponentHarness> {
* @param pattern The pattern the value is expected to match. If `pattern` is a string,
* `value` is expected to match exactly. If `pattern` is a regex, a partial match is
* allowed. If `pattern` is `null`, the value is expected to be `null`.
* @return A Promise that resolves to whether the value matches the pattern.
* @return Whether the value matches the pattern.
*/
static async stringMatches(value: string | null | Promise<string | null>,
pattern: string | RegExp | null): Promise<boolean> {
Expand Down
2 changes: 2 additions & 0 deletions src/material/config.bzl
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,15 @@ entryPoints = [
"dialog",
"dialog/testing",
"divider",
"divider/testing",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's consistent, but it feels a little silly to have a test harness for what is basically a div.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah its a little silly, but there are actually couple methods on it, and just having the selector encapsulated in a harness is kind of nice

"expansion",
"expansion/testing",
"form-field",
"grid-list",
"icon",
"input",
"list",
"list/testing",
"menu",
"menu/testing",
"paginator",
Expand Down
50 changes: 50 additions & 0 deletions src/material/divider/testing/BUILD.bazel
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
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/divider/testing",
deps = [
"//src/cdk/testing",
],
)

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/testbed",
"//src/material/divider",
"@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/divider",
],
)

ng_web_test_suite(
name = "unit_tests",
deps = [":unit_tests_lib"],
)
12 changes: 12 additions & 0 deletions src/material/divider/testing/divider-harness-filters.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
/**
* @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';

export interface DividerHarnessFilters extends BaseHarnessFilters {
}
7 changes: 7 additions & 0 deletions src/material/divider/testing/divider-harness.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import {MatDividerModule} from '@angular/material/divider';
import {MatDividerHarness} from './divider-harness';
import {runHarnessTests} from './shared.spec';

describe('Non-MDC-based MatButtonHarness', () => {
runHarnessTests(MatDividerModule, MatDividerHarness);
});
31 changes: 31 additions & 0 deletions src/material/divider/testing/divider-harness.ts
Original file line number Diff line number Diff line change
@@ -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 {DividerHarnessFilters} from './divider-harness-filters';

/**
* Harness for interacting with a `mat-divider`.
* @dynamic
*/
export class MatDividerHarness extends ComponentHarness {
static hostSelector = 'mat-divider';

static with(options: DividerHarnessFilters = {}) {
return new HarnessPredicate(MatDividerHarness, options);
}

async getOrientation(): Promise<'horizontal' | 'vertical'> {
return (await this.host()).getAttribute('aria-orientation') as
Promise<'horizontal' | 'vertical'>;
}

async isInset(): Promise<boolean> {
return (await this.host()).hasClass('mat-divider-inset');
}
}
9 changes: 9 additions & 0 deletions src/material/divider/testing/index.ts
Original file line number Diff line number Diff line change
@@ -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';
10 changes: 10 additions & 0 deletions src/material/divider/testing/public-api.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
/**
* @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 './divider-harness';
export * from './divider-harness-filters';
49 changes: 49 additions & 0 deletions src/material/divider/testing/shared.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import {HarnessLoader} from '@angular/cdk/testing';
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
import {Component} from '@angular/core';
import {ComponentFixture, TestBed} from '@angular/core/testing';
import {MatDividerModule} from '@angular/material/divider';
import {MatDividerHarness} from './divider-harness';

/** Shared tests to run on both the original and MDC-based dividers. */
export function runHarnessTests(
dividerModule: typeof MatDividerModule, dividerHarness: typeof MatDividerHarness) {
let fixture: ComponentFixture<DividerHarnessTest>;
let loader: HarnessLoader;

beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [dividerModule],
declarations: [DividerHarnessTest],
}).compileComponents();

fixture = TestBed.createComponent(DividerHarnessTest);
fixture.detectChanges();
loader = TestbedHarnessEnvironment.loader(fixture);
});

it('should load all divider harnesses', async () => {
const dividers = await loader.getAllHarnesses(dividerHarness);
expect(dividers.length).toBe(2);
});

it('should check if divider is inset', async () => {
const dividers = await loader.getAllHarnesses(dividerHarness);
expect(await dividers[0].isInset()).toBe(false);
expect(await dividers[1].isInset()).toBe(true);
});

it('should get divider orientation', async () => {
const dividers = await loader.getAllHarnesses(dividerHarness);
expect(await dividers[0].getOrientation()).toBe('horizontal');
expect(await dividers[1].getOrientation()).toBe('vertical');
});
}

@Component({
template: `
<mat-divider></mat-divider>
<mat-divider inset vertical></mat-divider>
`
})
class DividerHarnessTest {}
54 changes: 54 additions & 0 deletions src/material/list/testing/BUILD.bazel
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
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/list/testing",
deps = [
"//src/cdk/coercion",
"//src/cdk/testing",
"//src/material/divider/testing",
],
)

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/testbed",
"//src/material/divider/testing",
"//src/material/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/divider/testing",
"//src/material/list",
],
)

ng_web_test_suite(
name = "unit_tests",
deps = [":unit_tests_lib"],
)
65 changes: 65 additions & 0 deletions src/material/list/testing/action-list-harness.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
/**
* @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 {HarnessPredicate} from '@angular/cdk/testing';
import {MatListHarnessBase} from './list-harness-base';
import {ActionListHarnessFilters, ActionListItemHarnessFilters} from './list-harness-filters';
import {getListItemPredicate, MatListItemHarnessBase} from './list-item-harness-base';

/** Harness for interacting with a standard mat-action-list in tests. */
export class MatActionListHarness extends MatListHarnessBase<
typeof MatActionListItemHarness, MatActionListItemHarness, ActionListItemHarnessFilters> {
/** The selector for the host element of a `MatActionList` instance. */
static hostSelector = 'mat-action-list';

/**
* Gets a `HarnessPredicate` that can be used to search for a `MatActionListHarness` that meets
* certain criteria.
* @param options Options for filtering which action list instances are considered a match.
* @return a `HarnessPredicate` configured with the given options.
*/
static with(options: ActionListHarnessFilters = {}): HarnessPredicate<MatActionListHarness> {
return new HarnessPredicate(MatActionListHarness, options);
}

_itemHarness = MatActionListItemHarness;
}

/** Harness for interacting with an action list item. */
export class MatActionListItemHarness extends MatListItemHarnessBase {
/** The selector for the host element of a `MatListItem` instance. */
static hostSelector = ['mat-list-item', 'a[mat-list-item]', 'button[mat-list-item]']
.map(selector => `${MatActionListHarness.hostSelector} ${selector}`)
.join(',');

/**
* Gets a `HarnessPredicate` that can be used to search for a `MatActionListItemHarness` that
* meets certain criteria.
* @param options Options for filtering which action list item instances are considered a match.
* @return a `HarnessPredicate` configured with the given options.
*/
static with(options: ActionListItemHarnessFilters = {}):
HarnessPredicate<MatActionListItemHarness> {
return getListItemPredicate(MatActionListItemHarness, options);
}

/** Clicks on the action list item. */
async click(): Promise<void> {
return (await this.host()).click();
}

/** Focuses the action list item. */
async focus(): Promise<void> {
return (await this.host()).focus();
}

/** Blurs the action list item. */
async blur(): Promise<void> {
return (await this.host()).blur();
}
}
9 changes: 9 additions & 0 deletions src/material/list/testing/index.ts
Original file line number Diff line number Diff line change
@@ -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';
Loading