|
| 1 | +/** |
| 2 | + * @license |
| 3 | + * Copyright Google LLC All Rights Reserved. |
| 4 | + * |
| 5 | + * Use of this source code is governed by an MIT-style license that can be |
| 6 | + * found in the LICENSE file at https://angular.io/license |
| 7 | + */ |
| 8 | + |
| 9 | +import {HarnessPredicate} from '@angular/cdk/testing'; |
| 10 | +import {MatFormFieldControlHarness} from '@angular/material/form-field/testing/control'; |
| 11 | +import { |
| 12 | + MatOptionHarness, |
| 13 | + MatOptgroupHarness, |
| 14 | + OptionHarnessFilters, |
| 15 | + OptgroupHarnessFilters, |
| 16 | +} from '@angular/material-experimental/mdc-core/testing'; |
| 17 | +import {SelectHarnessFilters} from './select-harness-filters'; |
| 18 | + |
| 19 | + |
| 20 | +/** Harness for interacting with an MDC-based mat-select in tests. */ |
| 21 | +export class MatSelectHarness extends MatFormFieldControlHarness { |
| 22 | + private _documentRootLocator = this.documentRootLocatorFactory(); |
| 23 | + private _backdrop = this._documentRootLocator.locatorFor('.cdk-overlay-backdrop'); |
| 24 | + private _trigger = this.locatorFor('.mat-mdc-select-trigger'); |
| 25 | + private _value = this.locatorFor('.mat-mdc-select-value'); |
| 26 | + |
| 27 | + static hostSelector = '.mat-mdc-select'; |
| 28 | + |
| 29 | + /** |
| 30 | + * Gets a `HarnessPredicate` that can be used to search for a `MatSelectHarness` that meets |
| 31 | + * certain criteria. |
| 32 | + * @param options Options for filtering which select instances are considered a match. |
| 33 | + * @return a `HarnessPredicate` configured with the given options. |
| 34 | + */ |
| 35 | + static with(options: SelectHarnessFilters = {}): HarnessPredicate<MatSelectHarness> { |
| 36 | + return new HarnessPredicate(MatSelectHarness, options); |
| 37 | + } |
| 38 | + |
| 39 | + /** Gets a boolean promise indicating if the select is disabled. */ |
| 40 | + async isDisabled(): Promise<boolean> { |
| 41 | + return (await this.host()).hasClass('mat-mdc-select-disabled'); |
| 42 | + } |
| 43 | + |
| 44 | + /** Gets a boolean promise indicating if the select is valid. */ |
| 45 | + async isValid(): Promise<boolean> { |
| 46 | + return !(await (await this.host()).hasClass('ng-invalid')); |
| 47 | + } |
| 48 | + |
| 49 | + /** Gets a boolean promise indicating if the select is required. */ |
| 50 | + async isRequired(): Promise<boolean> { |
| 51 | + return (await this.host()).hasClass('mat-mdc-select-required'); |
| 52 | + } |
| 53 | + |
| 54 | + /** Gets a boolean promise indicating if the select is empty (no value is selected). */ |
| 55 | + async isEmpty(): Promise<boolean> { |
| 56 | + return (await this.host()).hasClass('mat-mdc-select-empty'); |
| 57 | + } |
| 58 | + |
| 59 | + /** Gets a boolean promise indicating if the select is in multi-selection mode. */ |
| 60 | + async isMultiple(): Promise<boolean> { |
| 61 | + return (await this.host()).hasClass('mat-mdc-select-multiple'); |
| 62 | + } |
| 63 | + |
| 64 | + /** Gets a promise for the select's value text. */ |
| 65 | + async getValueText(): Promise<string> { |
| 66 | + return (await this._value()).text(); |
| 67 | + } |
| 68 | + |
| 69 | + /** Focuses the select and returns a void promise that indicates when the action is complete. */ |
| 70 | + async focus(): Promise<void> { |
| 71 | + return (await this.host()).focus(); |
| 72 | + } |
| 73 | + |
| 74 | + /** Blurs the select and returns a void promise that indicates when the action is complete. */ |
| 75 | + async blur(): Promise<void> { |
| 76 | + return (await this.host()).blur(); |
| 77 | + } |
| 78 | + |
| 79 | + /** Whether the select is focused. */ |
| 80 | + async isFocused(): Promise<boolean> { |
| 81 | + return (await this.host()).isFocused(); |
| 82 | + } |
| 83 | + |
| 84 | + /** Gets the options inside the select panel. */ |
| 85 | + async getOptions(filter: Omit<OptionHarnessFilters, 'ancestor'> = {}): |
| 86 | + Promise<MatOptionHarness[]> { |
| 87 | + return this._documentRootLocator.locatorForAll(MatOptionHarness.with({ |
| 88 | + ...filter, |
| 89 | + ancestor: await this._getPanelSelector() |
| 90 | + }))(); |
| 91 | + } |
| 92 | + |
| 93 | + /** Gets the groups of options inside the panel. */ |
| 94 | + async getOptionGroups(filter: Omit<OptgroupHarnessFilters, 'ancestor'> = {}): |
| 95 | + Promise<MatOptgroupHarness[]> { |
| 96 | + return this._documentRootLocator.locatorForAll(MatOptgroupHarness.with({ |
| 97 | + ...filter, |
| 98 | + ancestor: await this._getPanelSelector() |
| 99 | + }))(); |
| 100 | + } |
| 101 | + |
| 102 | + /** Gets whether the select is open. */ |
| 103 | + async isOpen(): Promise<boolean> { |
| 104 | + return !!await this._documentRootLocator.locatorForOptional(await this._getPanelSelector())(); |
| 105 | + } |
| 106 | + |
| 107 | + /** Opens the select's panel. */ |
| 108 | + async open(): Promise<void> { |
| 109 | + if (!await this.isOpen()) { |
| 110 | + return (await this._trigger()).click(); |
| 111 | + } |
| 112 | + } |
| 113 | + |
| 114 | + /** |
| 115 | + * Clicks the options that match the passed-in filter. If the select is in multi-selection |
| 116 | + * mode all options will be clicked, otherwise the harness will pick the first matching option. |
| 117 | + */ |
| 118 | + async clickOptions(filter: OptionHarnessFilters = {}): Promise<void> { |
| 119 | + await this.open(); |
| 120 | + |
| 121 | + const [isMultiple, options] = await Promise.all([this.isMultiple(), this.getOptions(filter)]); |
| 122 | + |
| 123 | + if (options.length === 0) { |
| 124 | + throw Error('Select does not have options matching the specified filter'); |
| 125 | + } |
| 126 | + |
| 127 | + if (isMultiple) { |
| 128 | + await Promise.all(options.map(option => option.click())); |
| 129 | + } else { |
| 130 | + await options[0].click(); |
| 131 | + } |
| 132 | + } |
| 133 | + |
| 134 | + /** Closes the select's panel. */ |
| 135 | + async close(): Promise<void> { |
| 136 | + if (await this.isOpen()) { |
| 137 | + // This is the most consistent way that works both in both single and multi-select modes, |
| 138 | + // but it assumes that only one overlay is open at a time. We should be able to make it |
| 139 | + // a bit more precise after #16645 where we can dispatch an ESCAPE press to the host instead. |
| 140 | + return (await this._backdrop()).click(); |
| 141 | + } |
| 142 | + } |
| 143 | + |
| 144 | + /** Gets the selector that should be used to find this select's panel. */ |
| 145 | + private async _getPanelSelector(): Promise<string> { |
| 146 | + const id = await (await this.host()).getAttribute('id'); |
| 147 | + return `#${id}-panel`; |
| 148 | + } |
| 149 | +} |
0 commit comments