web: improve testability (#6952)

web/improve testability

This is a trio of small hacks that allow the E2E tests to find several components
on the page while the test is running:

- Add a `data-managed-for` field to SearchSelect's positioned elements. If a search
  has a `name` field, it will be reflected here, allowing tests to find specific
  instances of the dropdown elements.
- Add a forwarder to the search select wrappers we use for our SearchSelect.
- Added aria details to the UserLibrary header to make it easy to identify.
This commit is contained in:
Ken Sternberg 2023-09-22 09:04:30 -07:00 committed by GitHub
parent 355c5f0f74
commit 671b7156ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 7 additions and 1 deletions

View File

@ -122,6 +122,7 @@ export class FlowSearch<T extends Flow> extends CustomListenerElement(AKElement)
.renderElement=${renderElement} .renderElement=${renderElement}
.renderDescription=${renderDescription} .renderDescription=${renderDescription}
.value=${getFlowValue} .value=${getFlowValue}
.name=${this.name}
?blankable=${!this.required} ?blankable=${!this.required}
> >
</ak-search-select> </ak-search-select>

View File

@ -134,6 +134,9 @@ export class SearchSelect<T> extends CustomEmitterElement(AKElement) {
super.connectedCallback(); super.connectedCallback();
this.dropdownContainer = document.createElement("div"); this.dropdownContainer = document.createElement("div");
this.dropdownContainer.dataset["managedBy"] = "ak-search-select"; this.dropdownContainer.dataset["managedBy"] = "ak-search-select";
if (this.name) {
this.dropdownContainer.dataset["managedFor"] = this.name;
}
document.body.append(this.dropdownContainer); document.body.append(this.dropdownContainer);
this.updateData(); this.updateData();
this.addEventListener(EVENT_REFRESH, this.updateData); this.addEventListener(EVENT_REFRESH, this.updateData);

View File

@ -136,7 +136,9 @@ export class LibraryPage extends AKElement {
render() { render() {
return html`<main role="main" class="pf-c-page__main" tabindex="-1" id="main-content"> return html`<main role="main" class="pf-c-page__main" tabindex="-1" id="main-content">
<div class="pf-c-content header"> <div class="pf-c-content header">
<h1>${msg("My applications")}</h1> <h1 role="heading" aria-level="1" id="library-page-title">
${msg("My applications")}
</h1>
${this.uiConfig.searchEnabled ? this.renderSearch() : html``} ${this.uiConfig.searchEnabled ? this.renderSearch() : html``}
</div> </div>
<section class="pf-c-page__main-section"> <section class="pf-c-page__main-section">