From 671b7156ed05140f5c3c903894bcc36593473df6 Mon Sep 17 00:00:00 2001
From: Ken Sternberg
 <133134217+kensternberg-authentik@users.noreply.github.com>
Date: Fri, 22 Sep 2023 09:04:30 -0700
Subject: [PATCH] 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.
---
 web/src/admin/common/ak-flow-search/FlowSearch.ts | 1 +
 web/src/elements/forms/SearchSelect.ts            | 3 +++
 web/src/user/LibraryPage/LibraryPageImpl.ts       | 4 +++-
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/web/src/admin/common/ak-flow-search/FlowSearch.ts b/web/src/admin/common/ak-flow-search/FlowSearch.ts
index e6e18ad3a..0300e0bd3 100644
--- a/web/src/admin/common/ak-flow-search/FlowSearch.ts
+++ b/web/src/admin/common/ak-flow-search/FlowSearch.ts
@@ -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>
diff --git a/web/src/elements/forms/SearchSelect.ts b/web/src/elements/forms/SearchSelect.ts
index 6305c8521..6c8865ca1 100644
--- a/web/src/elements/forms/SearchSelect.ts
+++ b/web/src/elements/forms/SearchSelect.ts
@@ -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);
diff --git a/web/src/user/LibraryPage/LibraryPageImpl.ts b/web/src/user/LibraryPage/LibraryPageImpl.ts
index 1f6f5c2ce..79fc8d609 100644
--- a/web/src/user/LibraryPage/LibraryPageImpl.ts
+++ b/web/src/user/LibraryPage/LibraryPageImpl.ts
@@ -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">