Skip to content

chore: Refactor dropdown test utils #3571

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.

Sign up for GitHub

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

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

chore: Refactor dropdown test utils #3571

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8a2f13c
chore: Refactor dropdown test utils
jperals Jun 11, 2025
de9ff21
Fix typo
jperals Jun 11, 2025
6d50919
Do not refactor findOptionByValue
jperals Jun 12, 2025
e5f6a4a
Add missing newline
jperals Jun 12, 2025
e1b2076
Merge branch 'main' into chore/refactor-dropdown-host
jperals Jun 16, 2025
5ee8a2e
Merge branch 'main' into chore/refactor-dropdown-host
jperals Jun 23, 2025
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
53 changes: 4 additions & 49 deletions src/test-utils/dom/autosuggest/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,20 @@
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import { ComponentWrapper, createWrapper, ElementWrapper, usesDom } from '@cloudscape-design/test-utils-core/dom';
import { createWrapper, ElementWrapper, usesDom } from '@cloudscape-design/test-utils-core/dom';
import { escapeSelector } from '@cloudscape-design/test-utils-core/utils';
import { act } from '@cloudscape-design/test-utils-core/utils-dom';

import InputWrapper from '../input';
import DropdownWrapper from '../internal/dropdown';
import { BaseDropdownContentWrapper } from '../internal/dropdown-host';
import OptionWrapper from '../internal/option';
import OptionsListWrapper from '../internal/options-list';

import mainStyles from '../../../autosuggest/styles.selectors.js';
import dropdownStyles from '../../../internal/components/dropdown/styles.selectors.js';
import dropdownStatusStyles from '../../../internal/components/dropdown-status/styles.selectors.js';
import footerStyles from '../../../internal/components/dropdown-status/styles.selectors.js';
import optionStyles from '../../../internal/components/option/styles.selectors.js';
import selectableStyles from '../../../internal/components/selectable-item/styles.selectors.js';

export class AutosuggestDropdownWrapper extends ComponentWrapper {
export class AutosuggestDropdownWrapper extends BaseDropdownContentWrapper {
findOptions(): Array<OptionWrapper> {
return this.findAll(`.${selectableStyles['selectable-item']}[data-test-index]`).map(
(elementWrapper: ElementWrapper) => new OptionWrapper(elementWrapper.getElement())
Expand All @@ -36,7 +34,7 @@ export class AutosuggestDropdownWrapper extends ComponentWrapper {
}

/**
* Returns an option from the autosuggest by it's value
* Returns an option from the autosuggest by its value
*
* @param value The 'value' of the option.
*/
Expand All @@ -57,49 +55,6 @@ export class AutosuggestDropdownWrapper extends ComponentWrapper {
OptionWrapper
);
}

/**
* Use this element to scroll through the list of options
*/
findOptionsContainer(): ElementWrapper | null {
return this.findByClassName(OptionsListWrapper.rootSelector);
}

findFooterRegion(): ElementWrapper | null {
return this.findByClassName(footerStyles.root);
}

findOpenDropdown(): ElementWrapper | null {
// Autosuggest always has a dropdown
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const dropdown = new DropdownWrapper(this.getElement());
return dropdown.findOpenDropdown();
}

findHighlightedOption(): OptionWrapper | null {
return this.findComponent(`.${selectableStyles.highlighted}`, OptionWrapper);
}

/**
* Returns all the selected options.
*/
findDisabledOptions(): Array<OptionWrapper> {
return this.findAllByClassName(selectableStyles.disabled).map(
(elementWrapper: ElementWrapper) => new OptionWrapper(elementWrapper.getElement())
);
}

/**
* Returns highlighted text fragments from all of the options.
* Options get highlighted when they match the value of the input field.
*/
findHighlightedMatches(): Array<ElementWrapper> {
return this.findAllByClassName(optionStyles['filtering-match-highlight']);
}

findHighlightedAriaLiveRegion(): ElementWrapper | null {
return this.findHighlightedOption()?.findByClassName(selectableStyles['screenreader-content']) ?? null;
}
}

class PortalAutosuggestDropdownWrapper extends AutosuggestDropdownWrapper {
Expand Down
22 changes: 14 additions & 8 deletions src/test-utils/dom/internal/dropdown-host.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,10 @@ export default abstract class DropdownHostComponentWrapper extends ComponentWrap
}
}

export class DropdownContentWrapper extends ComponentWrapper {
export class BaseDropdownContentWrapper extends ComponentWrapper {
/**
* Returns all the disabled options.
Copy link
Member Author

Choose a reason for hiding this comment

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

The original doc text here for the AutosuggestDropdownWrapper was "Returns all the selected options.", which must have been wrong.

*/
findDisabledOptions(): Array<OptionWrapper> {
return this.findAllByClassName(selectableStyles.disabled).map(
(elementWrapper: ElementWrapper) => new OptionWrapper(elementWrapper.getElement())
Expand Down Expand Up @@ -180,6 +183,16 @@ export class DropdownContentWrapper extends ComponentWrapper {
const dropdown = new DropdownWrapper(this.getElement());
return dropdown.findOpenDropdown();
}

/**
* Use this element to scroll through the list of options
*/
findOptionsContainer(): ElementWrapper | null {
return this.findByClassName(OptionsListWrapper.rootSelector);
}
}

export class DropdownContentWrapper extends BaseDropdownContentWrapper {
/**
* Returns an option from the dropdown.
*
Expand Down Expand Up @@ -216,13 +229,6 @@ export class DropdownContentWrapper extends ComponentWrapper {
);
}

/**
* Use this element to scroll through the list of options
*/
findOptionsContainer(): ElementWrapper | null {
return this.findByClassName(OptionsListWrapper.rootSelector);
}

findSelectedOptions(): Array<OptionWrapper> {
return this.findAllByClassName(selectableStyles.selected).map(
(elementWrapper: ElementWrapper) => new OptionWrapper(elementWrapper.getElement())
Expand Down
Loading