Skip to content

Commit 0baa7ff

Browse files
crisbetocrisbeto
authored
refactor(material-experimental/mdc-autocomplete): de-duplicate test harness logic (#21476)
De-duplicates the test harness logic between the base and MDC autocomplete test harnesses.
1 parent ebdb954 commit 0baa7ff

File tree

5 files changed

+88
-121
lines changed

5 files changed

+88
-121
lines changed

‎src/material-experimental/mdc-autocomplete/testing/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ ts_library(
1010
),
1111
module_name = "@angular/material-experimental/mdc-autocomplete/testing",
1212
deps = [
13-
"//src/cdk/coercion",
1413
"//src/cdk/testing",
1514
"//src/material-experimental/mdc-core/testing",
15+
"//src/material/autocomplete/testing",
1616
],
1717
)
1818

‎src/material-experimental/mdc-autocomplete/testing/autocomplete-harness.ts

Lines changed: 9 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,24 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9-
import {coerceBooleanProperty} from '@angular/cdk/coercion';
10-
import {ComponentHarness, HarnessPredicate} from '@angular/cdk/testing';
9+
import {HarnessPredicate} from '@angular/cdk/testing';
1110
import {
1211
MatOptgroupHarness,
1312
MatOptionHarness,
1413
OptgroupHarnessFilters,
1514
OptionHarnessFilters
1615
} from '@angular/material-experimental/mdc-core/testing';
16+
import {_MatAutocompleteHarnessBase} from '@angular/material/autocomplete/testing';
1717
import {AutocompleteHarnessFilters} from './autocomplete-harness-filters';
1818

1919
/** Harness for interacting with an MDC-based mat-autocomplete in tests. */
20-
export class MatAutocompleteHarness extends ComponentHarness {
21-
private _documentRootLocator = this.documentRootLocatorFactory();
20+
export class MatAutocompleteHarness extends _MatAutocompleteHarnessBase<
21+
typeof MatOptionHarness, MatOptionHarness, OptionHarnessFilters,
22+
typeof MatOptgroupHarness, MatOptgroupHarness, OptgroupHarnessFilters
23+
> {
24+
protected _prefix = 'mat-mdc';
25+
protected _optionClass = MatOptionHarness;
26+
protected _optionGroupClass = MatOptgroupHarness;
2227

2328
/** The selector for the host element of a `MatAutocomplete` instance. */
2429
static hostSelector = '.mat-mdc-autocomplete-trigger';
@@ -34,81 +39,4 @@ export class MatAutocompleteHarness extends ComponentHarness {
3439
.addOption('value', options.value,
3540
(harness, value) => HarnessPredicate.stringMatches(harness.getValue(), value));
3641
}
37-
38-
/** Gets the value of the autocomplete input. */
39-
async getValue(): Promise<string> {
40-
return (await this.host()).getProperty('value');
41-
}
42-
43-
/** Whether the autocomplete input is disabled. */
44-
async isDisabled(): Promise<boolean> {
45-
const disabled = (await this.host()).getAttribute('disabled');
46-
return coerceBooleanProperty(await disabled);
47-
}
48-
49-
/** Focuses the autocomplete input. */
50-
async focus(): Promise<void> {
51-
return (await this.host()).focus();
52-
}
53-
54-
/** Blurs the autocomplete input. */
55-
async blur(): Promise<void> {
56-
return (await this.host()).blur();
57-
}
58-
59-
/** Whether the autocomplete input is focused. */
60-
async isFocused(): Promise<boolean> {
61-
return (await this.host()).isFocused();
62-
}
63-
64-
/** Enters text into the autocomplete. */
65-
async enterText(value: string): Promise<void> {
66-
return (await this.host()).sendKeys(value);
67-
}
68-
69-
/** Gets the options inside the autocomplete panel. */
70-
async getOptions(filters: Omit<OptionHarnessFilters, 'ancestor'> = {}):
71-
Promise<MatOptionHarness[]> {
72-
return this._documentRootLocator.locatorForAll(MatOptionHarness.with({
73-
...filters,
74-
ancestor: await this._getPanelSelector()
75-
}))();
76-
}
77-
78-
/** Gets the option groups inside the autocomplete panel. */
79-
async getOptionGroups(filters: Omit<OptgroupHarnessFilters, 'ancestor'> = {}):
80-
Promise<MatOptgroupHarness[]> {
81-
return this._documentRootLocator.locatorForAll(MatOptgroupHarness.with({
82-
...filters,
83-
ancestor: await this._getPanelSelector()
84-
}))();
85-
}
86-
87-
/** Selects the first option matching the given filters. */
88-
async selectOption(filters: OptionHarnessFilters): Promise<void> {
89-
await this.focus(); // Focus the input to make sure the autocomplete panel is shown.
90-
const options = await this.getOptions(filters);
91-
if (!options.length) {
92-
throw Error(`Could not find a mat-option matching ${JSON.stringify(filters)}`);
93-
}
94-
await options[0].click();
95-
}
96-
97-
/** Whether the autocomplete is open. */
98-
async isOpen(): Promise<boolean> {
99-
const panel = await this._getPanel();
100-
return !!panel && await panel.hasClass('mat-mdc-autocomplete-visible');
101-
}
102-
103-
/** Gets the panel associated with this autocomplete trigger. */
104-
private async _getPanel() {
105-
// Technically this is static, but it needs to be in a
106-
// function, because the autocomplete's panel ID can changed.
107-
return this._documentRootLocator.locatorForOptional(await this._getPanelSelector())();
108-
}
109-
110-
/** Gets the selector that can be used to find the autocomplete trigger's panel. */
111-
private async _getPanelSelector(): Promise<string> {
112-
return `#${(await (await this.host()).getAttribute('aria-owns'))}`;
113-
}
11442
}

‎src/material/autocomplete/testing/autocomplete-harness.ts

Lines changed: 54 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,12 @@
77
*/
88

99
import {coerceBooleanProperty} from '@angular/cdk/coercion';
10-
import {ComponentHarness, HarnessPredicate} from '@angular/cdk/testing';
10+
import {
11+
BaseHarnessFilters,
12+
ComponentHarness,
13+
ComponentHarnessConstructor,
14+
HarnessPredicate,
15+
} from '@angular/cdk/testing';
1116
import {
1217
MatOptgroupHarness,
1318
MatOptionHarness,
@@ -16,24 +21,20 @@ import {
1621
} from '@angular/material/core/testing';
1722
import {AutocompleteHarnessFilters} from './autocomplete-harness-filters';
1823

19-
/** Harness for interacting with a standard mat-autocomplete in tests. */
20-
export class MatAutocompleteHarness extends ComponentHarness {
24+
export abstract class _MatAutocompleteHarnessBase<
25+
OptionType extends (ComponentHarnessConstructor<Option> & {
26+
with: (options?: OptionFilters) => HarnessPredicate<Option>}),
27+
Option extends ComponentHarness & {click(): Promise<void>},
28+
OptionFilters extends BaseHarnessFilters,
29+
OptionGroupType extends (ComponentHarnessConstructor<OptionGroup> & {
30+
with: (options?: OptionGroupFilters) => HarnessPredicate<OptionGroup>}),
31+
OptionGroup extends ComponentHarness,
32+
OptionGroupFilters extends BaseHarnessFilters
33+
> extends ComponentHarness {
2134
private _documentRootLocator = this.documentRootLocatorFactory();
22-
23-
/** The selector for the host element of a `MatAutocomplete` instance. */
24-
static hostSelector = '.mat-autocomplete-trigger';
25-
26-
/**
27-
* Gets a `HarnessPredicate` that can be used to search for a `MatAutocompleteHarness` that meets
28-
* certain criteria.
29-
* @param options Options for filtering which autocomplete instances are considered a match.
30-
* @return a `HarnessPredicate` configured with the given options.
31-
*/
32-
static with(options: AutocompleteHarnessFilters = {}): HarnessPredicate<MatAutocompleteHarness> {
33-
return new HarnessPredicate(MatAutocompleteHarness, options)
34-
.addOption('value', options.value,
35-
(harness, value) => HarnessPredicate.stringMatches(harness.getValue(), value));
36-
}
35+
protected abstract _prefix: string;
36+
protected abstract _optionClass: OptionType;
37+
protected abstract _optionGroupClass: OptionGroupType;
3738

3839
/** Gets the value of the autocomplete input. */
3940
async getValue(): Promise<string> {
@@ -67,25 +68,23 @@ export class MatAutocompleteHarness extends ComponentHarness {
6768
}
6869

6970
/** Gets the options inside the autocomplete panel. */
70-
async getOptions(filters: Omit<OptionHarnessFilters, 'ancestor'> = {}):
71-
Promise<MatOptionHarness[]> {
72-
return this._documentRootLocator.locatorForAll(MatOptionHarness.with({
73-
...filters,
71+
async getOptions(filters?: Omit<OptionFilters, 'ancestor'>): Promise<Option[]> {
72+
return this._documentRootLocator.locatorForAll(this._optionClass.with({
73+
...(filters || {}),
7474
ancestor: await this._getPanelSelector()
75-
}))();
75+
} as OptionFilters))();
7676
}
7777

7878
/** Gets the option groups inside the autocomplete panel. */
79-
async getOptionGroups(filters: Omit<OptgroupHarnessFilters, 'ancestor'> = {}):
80-
Promise<MatOptgroupHarness[]> {
81-
return this._documentRootLocator.locatorForAll(MatOptgroupHarness.with({
82-
...filters,
79+
async getOptionGroups(filters?: Omit<OptionGroupFilters, 'ancestor'>): Promise<OptionGroup[]> {
80+
return this._documentRootLocator.locatorForAll(this._optionGroupClass.with({
81+
...(filters || {}),
8382
ancestor: await this._getPanelSelector()
84-
}))();
83+
} as OptionGroupFilters))();
8584
}
8685

8786
/** Selects the first option matching the given filters. */
88-
async selectOption(filters: OptionHarnessFilters): Promise<void> {
87+
async selectOption(filters: OptionFilters): Promise<void> {
8988
await this.focus(); // Focus the input to make sure the autocomplete panel is shown.
9089
const options = await this.getOptions(filters);
9190
if (!options.length) {
@@ -97,7 +96,7 @@ export class MatAutocompleteHarness extends ComponentHarness {
9796
/** Whether the autocomplete is open. */
9897
async isOpen(): Promise<boolean> {
9998
const panel = await this._getPanel();
100-
return !!panel && await panel.hasClass('mat-autocomplete-visible');
99+
return !!panel && await panel.hasClass(`${this._prefix}-autocomplete-visible`);
101100
}
102101

103102
/** Gets the panel associated with this autocomplete trigger. */
@@ -112,3 +111,28 @@ export class MatAutocompleteHarness extends ComponentHarness {
112111
return `#${(await (await this.host()).getAttribute('aria-owns'))}`;
113112
}
114113
}
114+
115+
/** Harness for interacting with a standard mat-autocomplete in tests. */
116+
export class MatAutocompleteHarness extends _MatAutocompleteHarnessBase<
117+
typeof MatOptionHarness, MatOptionHarness, OptionHarnessFilters,
118+
typeof MatOptgroupHarness, MatOptgroupHarness, OptgroupHarnessFilters
119+
> {
120+
protected _prefix = 'mat';
121+
protected _optionClass = MatOptionHarness;
122+
protected _optionGroupClass = MatOptgroupHarness;
123+
124+
/** The selector for the host element of a `MatAutocomplete` instance. */
125+
static hostSelector = '.mat-autocomplete-trigger';
126+
127+
/**
128+
* Gets a `HarnessPredicate` that can be used to search for a `MatAutocompleteHarness` that meets
129+
* certain criteria.
130+
* @param options Options for filtering which autocomplete instances are considered a match.
131+
* @return a `HarnessPredicate` configured with the given options.
132+
*/
133+
static with(options: AutocompleteHarnessFilters = {}): HarnessPredicate<MatAutocompleteHarness> {
134+
return new HarnessPredicate(MatAutocompleteHarness, options)
135+
.addOption('value', options.value,
136+
(harness, value) => HarnessPredicate.stringMatches(harness.getValue(), value));
137+
}
138+
}

‎src/material/autocomplete/testing/shared.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {NoopAnimationsModule} from '@angular/platform-browser/animations';
99

1010
/**
1111
* Function that can be used to run the shared autocomplete harness tests for either the non-MDC or
12-
* MDC based checkbox harness.
12+
* MDC based autocomplete harness.
1313
*/
1414
export function runHarnessTests(
1515
autocompleteModule: typeof MatAutocompleteModule,

‎tools/public_api_guard/material/autocomplete/testing.d.ts

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,33 @@
1-
export interface AutocompleteHarnessFilters extends BaseHarnessFilters {
2-
value?: string | RegExp;
3-
}
4-
5-
export declare class MatAutocompleteHarness extends ComponentHarness {
1+
export declare abstract class _MatAutocompleteHarnessBase<OptionType extends (ComponentHarnessConstructor<Option> & {
2+
with: (options?: OptionFilters) => HarnessPredicate<Option>;
3+
}), Option extends ComponentHarness & {
4+
click(): Promise<void>;
5+
}, OptionFilters extends BaseHarnessFilters, OptionGroupType extends (ComponentHarnessConstructor<OptionGroup> & {
6+
with: (options?: OptionGroupFilters) => HarnessPredicate<OptionGroup>;
7+
}), OptionGroup extends ComponentHarness, OptionGroupFilters extends BaseHarnessFilters> extends ComponentHarness {
8+
protected abstract _optionClass: OptionType;
9+
protected abstract _optionGroupClass: OptionGroupType;
10+
protected abstract _prefix: string;
611
blur(): Promise<void>;
712
enterText(value: string): Promise<void>;
813
focus(): Promise<void>;
9-
getOptionGroups(filters?: Omit<OptgroupHarnessFilters, 'ancestor'>): Promise<MatOptgroupHarness[]>;
10-
getOptions(filters?: Omit<OptionHarnessFilters, 'ancestor'>): Promise<MatOptionHarness[]>;
14+
getOptionGroups(filters?: Omit<OptionGroupFilters, 'ancestor'>): Promise<OptionGroup[]>;
15+
getOptions(filters?: Omit<OptionFilters, 'ancestor'>): Promise<Option[]>;
1116
getValue(): Promise<string>;
1217
isDisabled(): Promise<boolean>;
1318
isFocused(): Promise<boolean>;
1419
isOpen(): Promise<boolean>;
15-
selectOption(filters: OptionHarnessFilters): Promise<void>;
20+
selectOption(filters: OptionFilters): Promise<void>;
21+
}
22+
23+
export interface AutocompleteHarnessFilters extends BaseHarnessFilters {
24+
value?: string | RegExp;
25+
}
26+
27+
export declare class MatAutocompleteHarness extends _MatAutocompleteHarnessBase<typeof MatOptionHarness, MatOptionHarness, OptionHarnessFilters, typeof MatOptgroupHarness, MatOptgroupHarness, OptgroupHarnessFilters> {
28+
protected _optionClass: typeof MatOptionHarness;
29+
protected _optionGroupClass: typeof MatOptgroupHarness;
30+
protected _prefix: string;
1631
static hostSelector: string;
1732
static with(options?: AutocompleteHarnessFilters): HarnessPredicate<MatAutocompleteHarness>;
1833
}

0 commit comments

Comments
 (0)