From 5554f895df7a264b96519cfd486a8bec8afdcf39 Mon Sep 17 00:00:00 2001
From: Janne Savolainen <janne.savolainen@live.fi>
Date: Mon, 17 Oct 2022 15:16:22 +0300
Subject: [PATCH] Consolidate discovery of HTML elements in a test

Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>
---
 .../hiding-of-empty-branches.test.tsx.snap    | 43 +++--------
 .../hiding-of-empty-branches.test.tsx         | 77 +++++++++++++------
 .../preferences-navigation.tsx                |  2 +-
 .../preferences/renderer/preferences.tsx      |  1 -
 4 files changed, 64 insertions(+), 59 deletions(-)

diff --git a/src/features/preferences/__snapshots__/hiding-of-empty-branches.test.tsx.snap b/src/features/preferences/__snapshots__/hiding-of-empty-branches.test.tsx.snap
index f7b432b3cd..15f73f4f6b 100644
--- a/src/features/preferences/__snapshots__/hiding-of-empty-branches.test.tsx.snap
+++ b/src/features/preferences/__snapshots__/hiding-of-empty-branches.test.tsx.snap
@@ -74,7 +74,6 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
       />
       <div
         class="SettingLayout showNavigation Preferences"
-        data-testid="application-preferences-page"
       >
         <nav
           class="sidebarRegion"
@@ -87,14 +86,13 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
             >
               <div
                 class="header flex items-center"
-                data-testid="general-tab-group"
+                data-preference-tab-group-test="general-tab-group"
               >
                 Preferences
               </div>
               <div
                 class="Tab flex gaps align-center active"
                 data-preference-tab-link-test="app"
-                data-testid="application-preferences-page"
                 role="tab"
                 tabindex="0"
               >
@@ -107,7 +105,6 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
               <div
                 class="Tab flex gaps align-center"
                 data-preference-tab-link-test="proxy"
-                data-testid="proxy-preferences-page"
                 role="tab"
                 tabindex="0"
               >
@@ -120,7 +117,6 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
               <div
                 class="Tab flex gaps align-center"
                 data-preference-tab-link-test="kubernetes"
-                data-testid="kubernetes-preferences-page"
                 role="tab"
                 tabindex="0"
               >
@@ -133,7 +129,6 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
               <div
                 class="Tab flex gaps align-center"
                 data-preference-tab-link-test="editor"
-                data-testid="editor-preferences-page"
                 role="tab"
                 tabindex="0"
               >
@@ -146,7 +141,6 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
               <div
                 class="Tab flex gaps align-center"
                 data-preference-tab-link-test="terminal"
-                data-testid="terminal-preferences-page"
                 role="tab"
                 tabindex="0"
               >
@@ -739,7 +733,6 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
       />
       <div
         class="SettingLayout showNavigation Preferences"
-        data-testid="application-preferences-page"
       >
         <nav
           class="sidebarRegion"
@@ -752,14 +745,13 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
             >
               <div
                 class="header flex items-center"
-                data-testid="general-tab-group"
+                data-preference-tab-group-test="general-tab-group"
               >
                 Preferences
               </div>
               <div
                 class="Tab flex gaps align-center active"
                 data-preference-tab-link-test="app"
-                data-testid="application-preferences-page"
                 role="tab"
                 tabindex="0"
               >
@@ -772,7 +764,6 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
               <div
                 class="Tab flex gaps align-center"
                 data-preference-tab-link-test="proxy"
-                data-testid="proxy-preferences-page"
                 role="tab"
                 tabindex="0"
               >
@@ -785,7 +776,6 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
               <div
                 class="Tab flex gaps align-center"
                 data-preference-tab-link-test="kubernetes"
-                data-testid="kubernetes-preferences-page"
                 role="tab"
                 tabindex="0"
               >
@@ -798,7 +788,6 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
               <div
                 class="Tab flex gaps align-center"
                 data-preference-tab-link-test="editor"
-                data-testid="editor-preferences-page"
                 role="tab"
                 tabindex="0"
               >
@@ -811,7 +800,6 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
               <div
                 class="Tab flex gaps align-center"
                 data-preference-tab-link-test="terminal"
-                data-testid="terminal-preferences-page"
                 role="tab"
                 tabindex="0"
               >
@@ -824,21 +812,20 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
               <hr />
               <div
                 class="header flex items-center"
-                data-testid="some-tab-group-test-id"
+                data-preference-tab-group-test="some-tab-group"
               >
                 Some tab group label
               </div>
               <div
                 class="Tab flex gaps align-center"
-                data-preference-tab-link-test="irrelevant"
-                data-testid="some-tab-with-items"
+                data-preference-tab-link-test="some-path-id-for-some-tab-id"
                 role="tab"
                 tabindex="0"
               >
                 <div
                   class="label"
                 >
-                  Some label for tab with items
+                  Some tab label
                 </div>
               </div>
               <hr />
@@ -1423,7 +1410,6 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
       />
       <div
         class="SettingLayout showNavigation Preferences"
-        data-testid="application-preferences-page"
       >
         <nav
           class="sidebarRegion"
@@ -1436,14 +1422,13 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
             >
               <div
                 class="header flex items-center"
-                data-testid="general-tab-group"
+                data-preference-tab-group-test="general-tab-group"
               >
                 Preferences
               </div>
               <div
                 class="Tab flex gaps align-center active"
                 data-preference-tab-link-test="app"
-                data-testid="application-preferences-page"
                 role="tab"
                 tabindex="0"
               >
@@ -1456,7 +1441,6 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
               <div
                 class="Tab flex gaps align-center"
                 data-preference-tab-link-test="proxy"
-                data-testid="proxy-preferences-page"
                 role="tab"
                 tabindex="0"
               >
@@ -1469,7 +1453,6 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
               <div
                 class="Tab flex gaps align-center"
                 data-preference-tab-link-test="kubernetes"
-                data-testid="kubernetes-preferences-page"
                 role="tab"
                 tabindex="0"
               >
@@ -1482,7 +1465,6 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
               <div
                 class="Tab flex gaps align-center"
                 data-preference-tab-link-test="editor"
-                data-testid="editor-preferences-page"
                 role="tab"
                 tabindex="0"
               >
@@ -1495,7 +1477,6 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
               <div
                 class="Tab flex gaps align-center"
                 data-preference-tab-link-test="terminal"
-                data-testid="terminal-preferences-page"
                 role="tab"
                 tabindex="0"
               >
@@ -1508,34 +1489,32 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
               <hr />
               <div
                 class="header flex items-center"
-                data-testid="some-tab-group-test-id"
+                data-preference-tab-group-test="some-tab-group"
               >
                 Some tab group label
               </div>
               <div
                 class="Tab flex gaps align-center"
-                data-preference-tab-link-test="irrelevant"
-                data-testid="some-tab-with-items"
+                data-preference-tab-link-test="some-path-id-for-some-tab-id"
                 role="tab"
                 tabindex="0"
               >
                 <div
                   class="label"
                 >
-                  Some label for tab with items
+                  Some tab label
                 </div>
               </div>
               <div
                 class="Tab flex gaps align-center"
-                data-preference-tab-link-test="irrelevant"
-                data-testid="some-tab-without-items"
+                data-preference-tab-link-test="some-path-id-for-some-other-tab-id"
                 role="tab"
                 tabindex="0"
               >
                 <div
                   class="label"
                 >
-                  Some label for tab without items
+                  Some other tab label
                 </div>
               </div>
               <hr />
diff --git a/src/features/preferences/hiding-of-empty-branches.test.tsx b/src/features/preferences/hiding-of-empty-branches.test.tsx
index 9c36b1eaab..2e483d6134 100644
--- a/src/features/preferences/hiding-of-empty-branches.test.tsx
+++ b/src/features/preferences/hiding-of-empty-branches.test.tsx
@@ -10,6 +10,7 @@ import { runInAction } from "mobx";
 import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
 import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
 import { preferenceItemInjectionToken } from "./renderer/preference-items/preference-item-injection-token";
+import { getSingleElement, querySingleElement } from "../../renderer/components/test-utils/discovery-of-html-elements";
 
 describe("preferences - hiding-of-empty-branches, given in preferences page", () => {
   let builder: ApplicationBuilder;
@@ -34,7 +35,6 @@ describe("preferences - hiding-of-empty-branches, given in preferences page", ()
         instantiate: () => ({
           kind: "tab-group" as const,
           id: "some-tab-group",
-          testId: "some-tab-group-test-id",
           parentId: "preference-tabs" as const,
           label: "Some tab group label",
           orderNumber: 10,
@@ -43,32 +43,30 @@ describe("preferences - hiding-of-empty-branches, given in preferences page", ()
         injectionToken: preferenceItemInjectionToken,
       });
 
-      const tabWithItemsInjectable = getInjectable({
+      const someTabInjectable = getInjectable({
         id: "some-tab",
 
         instantiate: () => ({
           kind: "tab" as const,
-          id: "some-tab-with-items-id",
+          id: "some-tab-id",
           parentId: "some-tab-group" as const,
-          testId: "some-tab-with-items",
-          pathId: "irrelevant",
-          label: "Some label for tab with items",
+          pathId: "some-path-id-for-some-tab-id",
+          label: "Some tab label",
           orderNumber: 10,
         }),
 
         injectionToken: preferenceItemInjectionToken,
       });
 
-      const tabWithoutItemsInjectable = getInjectable({
-        id: "some-empty-tab",
+      const someOtherTabInjectable = getInjectable({
+        id: "some-other-tab",
 
         instantiate: () => ({
           kind: "tab" as const,
-          id: "some-tab-without-items-id",
+          id: "some-other-tab-id",
           parentId: "some-tab-group" as const,
-          testId: "some-tab-without-items",
-          pathId: "irrelevant",
-          label: "Some label for tab without items",
+          pathId: "some-path-id-for-some-other-tab-id",
+          label: "Some other tab label",
           orderNumber: 10,
         }),
 
@@ -78,8 +76,8 @@ describe("preferences - hiding-of-empty-branches, given in preferences page", ()
       runInAction(() => {
         windowDi.register(
           someTabGroupInjectable,
-          tabWithItemsInjectable,
-          tabWithoutItemsInjectable,
+          someTabInjectable,
+          someOtherTabInjectable,
         );
       });
     });
@@ -89,14 +87,25 @@ describe("preferences - hiding-of-empty-branches, given in preferences page", ()
     });
 
     it("does not render the empty tab group", () => {
-      const someTabGroup = rendered.queryByTestId("some-tab-group-test-id");
+      const someTabGroup = querySingleElement(
+        "preference-tab-group",
+        "some-tab-group",
+      )(rendered);
 
       expect(someTabGroup).toBeNull();
     });
 
     it("does not render the empty tabs", () => {
-      const someTab = rendered.queryByTestId("some-tab-with-items");
-      const someOtherTab = rendered.queryByTestId("some-tab-without-items");
+      const someTab = querySingleElement(
+        "preference-tab-link",
+        "some-path-id-for-some-tab-id",
+      )(rendered);
+
+      const someOtherTab = querySingleElement(
+        "preference-tab-link",
+        "some-path-id-for-some-other-tab-id",
+      )(rendered);
+
 
       expect([someTab, someOtherTab]).toEqual([null, null]);
     });
@@ -109,7 +118,7 @@ describe("preferences - hiding-of-empty-branches, given in preferences page", ()
           instantiate: () => ({
             kind: "item" as const,
             id: "some-preference-item-id",
-            parentId: "some-tab-with-items-id" as const,
+            parentId: "some-tab-id" as const,
             testId: "some-preference-item",
             Component: () => <div>Irrelevant</div>,
             orderNumber: 10,
@@ -128,19 +137,28 @@ describe("preferences - hiding-of-empty-branches, given in preferences page", ()
       });
 
       it("renders the tab group that is no longer empty", () => {
-        const someTabGroup = rendered.queryByTestId("some-tab-group-test-id");
+        const someTabGroup = querySingleElement(
+          "preference-tab-group",
+          "some-tab-group",
+        )(rendered);
 
         expect(someTabGroup).not.toBeNull();
       });
 
       it("renders the tab that is no longer empty", () => {
-        const someTab = rendered.queryByTestId("some-tab-with-items");
+        const someTab = getSingleElement(
+          "preference-tab-link",
+          "some-path-id-for-some-tab-id",
+        )(rendered);
 
         expect(someTab).not.toBeNull();
       });
 
       it("does not render the tab that is still empty", () => {
-        const someTab = rendered.queryByTestId("some-tab-without-items");
+        const someTab = querySingleElement(
+          "preference-tab-link",
+          "some-path-id-for-some-other-tab-id",
+        )(rendered);
 
         expect(someTab).toBeNull();
       });
@@ -153,7 +171,7 @@ describe("preferences - hiding-of-empty-branches, given in preferences page", ()
             instantiate: () => ({
               kind: "item" as const,
               id: "some-other-preference-item-id",
-              parentId: "some-tab-without-items-id" as const,
+              parentId: "some-other-tab-id" as const,
               testId: "some-other-preference-item",
               Component: () => <div>Irrelevant</div>,
               orderNumber: 10,
@@ -172,19 +190,28 @@ describe("preferences - hiding-of-empty-branches, given in preferences page", ()
         });
 
         it("still renders the tab group that is not empty", () => {
-          const someTabGroup = rendered.queryByTestId("some-tab-group-test-id");
+          const someTabGroup = getSingleElement(
+            "preference-tab-group",
+            "some-tab-group",
+          )(rendered);
 
           expect(someTabGroup).not.toBeNull();
         });
 
         it("still renders the tab that is not empty", () => {
-          const someTab = rendered.queryByTestId("some-tab-with-items");
+          const someTab = getSingleElement(
+            "preference-tab-link",
+            "some-path-id-for-some-tab-id",
+          )(rendered);
 
           expect(someTab).not.toBeNull();
         });
 
         it("now renders the other tab that is no longer empty", () => {
-          const someTab = rendered.queryByTestId("some-tab-without-items");
+          const someTab = getSingleElement(
+            "preference-tab-link",
+            "some-path-id-for-some-other-tab-id",
+          )(rendered);
 
           expect(someTab).not.toBeNull();
         });
diff --git a/src/features/preferences/renderer/preference-navigation/preferences-navigation.tsx b/src/features/preferences/renderer/preference-navigation/preferences-navigation.tsx
index 3a62b1568e..617ac089f8 100644
--- a/src/features/preferences/renderer/preference-navigation/preferences-navigation.tsx
+++ b/src/features/preferences/renderer/preference-navigation/preferences-navigation.tsx
@@ -64,7 +64,7 @@ const toNavigationHierarchy = (composite: Composite<PreferenceTypes | Preference
     case "tab-group": {
       return (
         <>
-          <div data-testid={value.testId} className="header flex items-center">
+          <div className="header flex items-center" data-preference-tab-group-test={value.id}>
             {value.iconName && (
               <Icon
                 material={value.iconName}
diff --git a/src/features/preferences/renderer/preferences.tsx b/src/features/preferences/renderer/preferences.tsx
index 5e4e03e0dd..9a2465112a 100644
--- a/src/features/preferences/renderer/preferences.tsx
+++ b/src/features/preferences/renderer/preferences.tsx
@@ -34,7 +34,6 @@ const NonInjectedPreferences = observer(({
       contentGaps={false}
       closeButtonProps={{ "data-testid": "close-preferences" }}
       back={closePreferences}
-      data-testid={composite.value.testId}
     >
       {toPreferenceItemHierarchy(composite)}
     </SettingLayout>