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:
parent
355c5f0f74
commit
671b7156ed
|
@ -122,6 +122,7 @@ export class FlowSearch<T extends Flow> extends CustomListenerElement(AKElement)
|
|||
.renderElement=${renderElement}
|
||||
.renderDescription=${renderDescription}
|
||||
.value=${getFlowValue}
|
||||
.name=${this.name}
|
||||
?blankable=${!this.required}
|
||||
>
|
||||
</ak-search-select>
|
||||
|
|
|
@ -134,6 +134,9 @@ export class SearchSelect<T> extends CustomEmitterElement(AKElement) {
|
|||
super.connectedCallback();
|
||||
this.dropdownContainer = document.createElement("div");
|
||||
this.dropdownContainer.dataset["managedBy"] = "ak-search-select";
|
||||
if (this.name) {
|
||||
this.dropdownContainer.dataset["managedFor"] = this.name;
|
||||
}
|
||||
document.body.append(this.dropdownContainer);
|
||||
this.updateData();
|
||||
this.addEventListener(EVENT_REFRESH, this.updateData);
|
||||
|
|
|
@ -136,7 +136,9 @@ export class LibraryPage extends AKElement {
|
|||
render() {
|
||||
return html`<main role="main" class="pf-c-page__main" tabindex="-1" id="main-content">
|
||||
<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``}
|
||||
</div>
|
||||
<section class="pf-c-page__main-section">
|
||||
|
|
Reference in New Issue