From 95ec8d958fb65e766745fd9b8001e86a19acd5eb Mon Sep 17 00:00:00 2001
From: Arjun Patel <arjun453@gmail.com>
Date: Fri, 26 Apr 2024 15:16:16 -0400
Subject: [PATCH] fix parsley tests

---
 .../DetailsMenu.stories.storyshot             | 184 ++++++++++--------
 .../Search/SearchBar/SearchBar.test.tsx       |   5 +-
 .../__snapshots__/SearchBar.stories.storyshot | 139 +++++++------
 .../__snapshots__/SidePanel.stories.storyshot |  32 +--
 4 files changed, 212 insertions(+), 148 deletions(-)

diff --git a/apps/parsley/src/components/DetailsMenu/DetailsMenuCard/__snapshots__/DetailsMenu.stories.storyshot b/apps/parsley/src/components/DetailsMenu/DetailsMenuCard/__snapshots__/DetailsMenu.stories.storyshot
index 1ec8ce93b..c5b05a7bc 100644
--- a/apps/parsley/src/components/DetailsMenu/DetailsMenuCard/__snapshots__/DetailsMenu.stories.storyshot
+++ b/apps/parsley/src/components/DetailsMenu/DetailsMenuCard/__snapshots__/DetailsMenu.stories.storyshot
@@ -124,51 +124,67 @@ exports[`Snapshot Tests DetailsMenu.stories Default 1`] = `
                       class="css-1sg2lsz"
                     >
                       <div
-                        class="css-1b84j75 leafygreen-ui-90q1a7"
+                        aria-labelledby="Range Lower Bound"
+                        class="leafygreen-ui-1br9h7w css-1b84j75"
+                        data-lgid="lg-text_input"
                       >
                         <div
-                          class="leafygreen-ui-lzja97"
+                          class="leafygreen-ui-1iyoj2o"
+                        />
+                        <div
+                          class="leafygreen-ui-1c0ck9t"
                         >
-                          <input
-                            aria-invalid="false"
-                            aria-labelledby="Range Lower Bound"
-                            autocomplete="on"
-                            class="leafygreen-ui-lkup3q"
-                            data-cy="range-lower-bound"
-                            id="textinput-3"
-                            min="0"
-                            placeholder="0"
-                            required=""
-                            type="number"
-                            value=""
-                          />
                           <div
-                            class="lg-ui-icon-selector-0000 leafygreen-ui-dhxvhh"
-                          />
+                            class="leafygreen-ui-1ago99h"
+                          >
+                            <input
+                              aria-describedby=""
+                              aria-disabled="false"
+                              aria-invalid="false"
+                              aria-labelledby="Range Lower Bound"
+                              autocomplete="on"
+                              class="lg-ui-form-field-input-0000 leafygreen-ui-1ago99h"
+                              data-cy="range-lower-bound"
+                              id="lg-form-field-input-25"
+                              min="0"
+                              placeholder="0"
+                              required=""
+                              type="number"
+                              value=""
+                            />
+                          </div>
                         </div>
                       </div>
                       <div
-                        class="css-1b84j75 leafygreen-ui-90q1a7"
+                        aria-labelledby="Range Upper Bound"
+                        class="leafygreen-ui-1br9h7w css-1b84j75"
+                        data-lgid="lg-text_input"
                       >
                         <div
-                          class="leafygreen-ui-lzja97"
+                          class="leafygreen-ui-1iyoj2o"
+                        />
+                        <div
+                          class="leafygreen-ui-1c0ck9t"
                         >
-                          <input
-                            aria-invalid="false"
-                            aria-labelledby="Range Upper Bound"
-                            autocomplete="on"
-                            class="leafygreen-ui-lkup3q"
-                            data-cy="range-upper-bound"
-                            id="textinput-4"
-                            min="0"
-                            placeholder="100"
-                            required=""
-                            type="number"
-                            value=""
-                          />
                           <div
-                            class="lg-ui-icon-selector-0000 leafygreen-ui-dhxvhh"
-                          />
+                            class="leafygreen-ui-1ago99h"
+                          >
+                            <input
+                              aria-describedby=""
+                              aria-disabled="false"
+                              aria-invalid="false"
+                              aria-labelledby="Range Upper Bound"
+                              autocomplete="on"
+                              class="lg-ui-form-field-input-0000 leafygreen-ui-1ago99h"
+                              data-cy="range-upper-bound"
+                              id="lg-form-field-input-29"
+                              min="0"
+                              placeholder="100"
+                              required=""
+                              type="number"
+                              value=""
+                            />
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -524,12 +540,12 @@ exports[`Snapshot Tests DetailsMenu.stories WithDownloadedLog 1`] = `
             role="tablist"
           >
             <button
-              aria-controls="tab-panel-20"
+              aria-controls="tab-panel-36"
               aria-selected="true"
               class="leafygreen-ui-oq6if2"
               data-cy="search-and-filter-tab"
               data-text="Search & Filter"
-              id="tab-21"
+              id="tab-37"
               name="Search & Filter"
               role="tab"
               tabindex="0"
@@ -541,12 +557,12 @@ exports[`Snapshot Tests DetailsMenu.stories WithDownloadedLog 1`] = `
               </div>
             </button>
             <button
-              aria-controls="tab-panel-22"
+              aria-controls="tab-panel-38"
               aria-selected="false"
               class="leafygreen-ui-1vvp6ij"
               data-cy="log-viewing-tab"
               data-text="Log Viewing"
-              id="tab-23"
+              id="tab-39"
               name="Log Viewing"
               role="tab"
               tabindex="-1"
@@ -568,9 +584,9 @@ exports[`Snapshot Tests DetailsMenu.stories WithDownloadedLog 1`] = `
         </div>
         <div>
           <div
-            aria-labelledby="tab-21"
+            aria-labelledby="tab-37"
             data-cy="search-and-filter-tab"
-            id="tab-panel-20"
+            id="tab-panel-36"
             role="tabpanel"
           >
             <div
@@ -623,51 +639,67 @@ exports[`Snapshot Tests DetailsMenu.stories WithDownloadedLog 1`] = `
                       class="css-1sg2lsz"
                     >
                       <div
-                        class="css-1b84j75 leafygreen-ui-90q1a7"
+                        aria-labelledby="Range Lower Bound"
+                        class="leafygreen-ui-1br9h7w css-1b84j75"
+                        data-lgid="lg-text_input"
                       >
                         <div
-                          class="leafygreen-ui-lzja97"
+                          class="leafygreen-ui-1iyoj2o"
+                        />
+                        <div
+                          class="leafygreen-ui-1c0ck9t"
                         >
-                          <input
-                            aria-invalid="false"
-                            aria-labelledby="Range Lower Bound"
-                            autocomplete="on"
-                            class="leafygreen-ui-lkup3q"
-                            data-cy="range-lower-bound"
-                            id="textinput-7"
-                            min="0"
-                            placeholder="0"
-                            required=""
-                            type="number"
-                            value=""
-                          />
                           <div
-                            class="lg-ui-icon-selector-0000 leafygreen-ui-dhxvhh"
-                          />
+                            class="leafygreen-ui-1ago99h"
+                          >
+                            <input
+                              aria-describedby=""
+                              aria-disabled="false"
+                              aria-invalid="false"
+                              aria-labelledby="Range Lower Bound"
+                              autocomplete="on"
+                              class="lg-ui-form-field-input-0000 leafygreen-ui-1ago99h"
+                              data-cy="range-lower-bound"
+                              id="lg-form-field-input-59"
+                              min="0"
+                              placeholder="0"
+                              required=""
+                              type="number"
+                              value=""
+                            />
+                          </div>
                         </div>
                       </div>
                       <div
-                        class="css-1b84j75 leafygreen-ui-90q1a7"
+                        aria-labelledby="Range Upper Bound"
+                        class="leafygreen-ui-1br9h7w css-1b84j75"
+                        data-lgid="lg-text_input"
                       >
                         <div
-                          class="leafygreen-ui-lzja97"
+                          class="leafygreen-ui-1iyoj2o"
+                        />
+                        <div
+                          class="leafygreen-ui-1c0ck9t"
                         >
-                          <input
-                            aria-invalid="false"
-                            aria-labelledby="Range Upper Bound"
-                            autocomplete="on"
-                            class="leafygreen-ui-lkup3q"
-                            data-cy="range-upper-bound"
-                            id="textinput-8"
-                            min="0"
-                            placeholder="100"
-                            required=""
-                            type="number"
-                            value=""
-                          />
                           <div
-                            class="lg-ui-icon-selector-0000 leafygreen-ui-dhxvhh"
-                          />
+                            class="leafygreen-ui-1ago99h"
+                          >
+                            <input
+                              aria-describedby=""
+                              aria-disabled="false"
+                              aria-invalid="false"
+                              aria-labelledby="Range Upper Bound"
+                              autocomplete="on"
+                              class="lg-ui-form-field-input-0000 leafygreen-ui-1ago99h"
+                              data-cy="range-upper-bound"
+                              id="lg-form-field-input-63"
+                              min="0"
+                              placeholder="100"
+                              required=""
+                              type="number"
+                              value=""
+                            />
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -986,9 +1018,9 @@ exports[`Snapshot Tests DetailsMenu.stories WithDownloadedLog 1`] = `
             </div>
           </div>
           <div
-            aria-labelledby="tab-23"
+            aria-labelledby="tab-39"
             data-cy="log-viewing-tab"
-            id="tab-panel-22"
+            id="tab-panel-38"
             role="tabpanel"
           />
         </div>
diff --git a/apps/parsley/src/components/Search/SearchBar/SearchBar.test.tsx b/apps/parsley/src/components/Search/SearchBar/SearchBar.test.tsx
index 4ccc1e346..cbbce9287 100644
--- a/apps/parsley/src/components/Search/SearchBar/SearchBar.test.tsx
+++ b/apps/parsley/src/components/Search/SearchBar/SearchBar.test.tsx
@@ -13,7 +13,10 @@ describe("searchbar", () => {
       "aria-disabled",
       "true",
     );
-    expect(screen.getByDataCy("searchbar-input")).toBeDisabled();
+    expect(screen.getByDataCy("searchbar-input")).toHaveAttribute(
+      "aria-disabled",
+      "true",
+    );
   });
   it("should be able to paginate forwards by pressing Enter and keep focus", async () => {
     const user = userEvent.setup();
diff --git a/apps/parsley/src/components/Search/SearchBar/__snapshots__/SearchBar.stories.storyshot b/apps/parsley/src/components/Search/SearchBar/__snapshots__/SearchBar.stories.storyshot
index 7a735fd28..140589711 100644
--- a/apps/parsley/src/components/Search/SearchBar/__snapshots__/SearchBar.stories.storyshot
+++ b/apps/parsley/src/components/Search/SearchBar/__snapshots__/SearchBar.stories.storyshot
@@ -9,8 +9,8 @@ exports[`Snapshot Tests SearchBar.stories Default 1`] = `
       class="leafygreen-ui-1iyoj2o css-6lshyd"
     >
       <button
-        aria-controls="select-193-menu"
-        aria-describedby="select-193-description"
+        aria-controls="select-225-menu"
+        aria-describedby="select-225-description"
         aria-disabled="false"
         aria-expanded="false"
         aria-invalid="false"
@@ -18,7 +18,7 @@ exports[`Snapshot Tests SearchBar.stories Default 1`] = `
         class="lg-ui-button-0000 leafygreen-ui-1bkgt4w"
         data-cy="searchbar-select"
         data-testid="leafygreen-ui-select-menubutton"
-        id="select-194"
+        id="select-226"
         type="button"
         value="filter"
       >
@@ -112,45 +112,66 @@ exports[`Snapshot Tests SearchBar.stories Default 1`] = `
         class="css-1xm32e0"
       >
         <div
-          class="css-z4vplf leafygreen-ui-90q1a7"
+          aria-labelledby="searchbar-input"
+          class="leafygreen-ui-1br9h7w css-z4vplf"
+          data-lgid="lg-text_input"
         >
           <div
-            class="leafygreen-ui-lzja97"
+            class="leafygreen-ui-1iyoj2o"
+          />
+          <div
+            class="leafygreen-ui-os8x4a"
           >
-            <input
-              aria-invalid="true"
-              aria-labelledby="searchbar-input"
-              autocomplete="on"
-              class="leafygreen-ui-18wtnk9"
-              data-cy="searchbar-input"
-              id="textinput-9"
-              placeholder="optional, regexp to search"
-              required=""
-              spellcheck="false"
-              type="text"
-              value=""
-            />
             <div
-              class="lg-ui-icon-selector-0000 leafygreen-ui-11c7q5r"
+              class="leafygreen-ui-1ago99h"
             >
-              <svg
-                alt=""
-                aria-hidden="true"
-                class="leafygreen-ui-1lzd8bx"
-                height="16"
-                role="presentation"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M8.8639 1.51357C8.49039 0.828811 7.50961 0.828811 7.1361 1.51357L1.12218 12.5388C0.763263 13.1968 1.23814 14 1.98608 14H14.0139C14.7619 14 15.2367 13.1968 14.8778 12.5388L8.8639 1.51357ZM7 5C7 4.44772 7.44772 4 8 4C8.55228 4 9 4.44772 9 5V9C9 9.55228 8.55228 10 8 10C7.44772 10 7 9.55228 7 9V5ZM9 12C9 12.5523 8.55228 13 8 13C7.44772 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11C8.55228 11 9 11.4477 9 12Z"
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                />
-              </svg>
+              <input
+                aria-describedby="lg-form-field-description-229"
+                aria-disabled="false"
+                aria-invalid="true"
+                aria-labelledby="searchbar-input"
+                autocomplete="on"
+                class="lg-ui-form-field-input-0000 leafygreen-ui-1ago99h"
+                data-cy="searchbar-input"
+                id="lg-form-field-input-230"
+                placeholder="optional, regexp to search"
+                required=""
+                spellcheck="false"
+                type="text"
+                value=""
+              />
             </div>
           </div>
+          <div
+            class="leafygreen-ui-15w6x3f"
+          >
+            <svg
+              aria-hidden="true"
+              class="leafygreen-ui-160ryfb"
+              fill="none"
+              height="16"
+              role="img"
+              title="Error"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M8.864 1.514a.983.983 0 0 0-1.728 0L1.122 12.539A.987.987 0 0 0 1.986 14h12.028a.987.987 0 0 0 .864-1.461L8.864 1.514ZM7 5a1 1 0 0 1 2 0v4a1 1 0 0 1-2 0V5Zm2 7a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                fill="currentColor"
+                fill-rule="evenodd"
+              />
+            </svg>
+            <p
+              class="leafygreen-ui-jvw8or"
+              data-lgid="lg-form_field-error_message"
+              data-testid="lg-form_field-error_message"
+              id="lg-form-field-description-229"
+            >
+              This input needs your attention
+            </p>
+          </div>
         </div>
         <div
           class="css-1kijwh"
@@ -175,8 +196,8 @@ exports[`Snapshot Tests SearchBar.stories WithSearchSuggestions 1`] = `
       class="leafygreen-ui-1iyoj2o css-6lshyd"
     >
       <button
-        aria-controls="select-196-menu"
-        aria-describedby="select-196-description"
+        aria-controls="select-232-menu"
+        aria-describedby="select-232-description"
         aria-disabled="false"
         aria-expanded="false"
         aria-invalid="false"
@@ -184,7 +205,7 @@ exports[`Snapshot Tests SearchBar.stories WithSearchSuggestions 1`] = `
         class="lg-ui-button-0000 leafygreen-ui-1bkgt4w"
         data-cy="searchbar-select"
         data-testid="leafygreen-ui-select-menubutton"
-        id="select-197"
+        id="select-233"
         type="button"
         value="filter"
       >
@@ -278,27 +299,35 @@ exports[`Snapshot Tests SearchBar.stories WithSearchSuggestions 1`] = `
         class="css-1xm32e0"
       >
         <div
-          class="css-z4vplf leafygreen-ui-90q1a7"
+          aria-labelledby="searchbar-input"
+          class="leafygreen-ui-1br9h7w css-z4vplf"
+          data-lgid="lg-text_input"
         >
           <div
-            class="leafygreen-ui-lzja97"
+            class="leafygreen-ui-1iyoj2o"
+          />
+          <div
+            class="leafygreen-ui-95c1iv"
           >
-            <input
-              aria-invalid="false"
-              aria-labelledby="searchbar-input"
-              autocomplete="on"
-              class="leafygreen-ui-1kmfbzh"
-              data-cy="searchbar-input"
-              id="textinput-10"
-              placeholder="optional, regexp to search"
-              required=""
-              spellcheck="false"
-              type="text"
-              value=""
-            />
             <div
-              class="lg-ui-icon-selector-0000 leafygreen-ui-11c7q5r"
-            />
+              class="leafygreen-ui-1ago99h"
+            >
+              <input
+                aria-describedby=""
+                aria-disabled="false"
+                aria-invalid="false"
+                aria-labelledby="searchbar-input"
+                autocomplete="on"
+                class="lg-ui-form-field-input-0000 leafygreen-ui-1ago99h"
+                data-cy="searchbar-input"
+                id="lg-form-field-input-237"
+                placeholder="optional, regexp to search"
+                required=""
+                spellcheck="false"
+                type="text"
+                value=""
+              />
+            </div>
           </div>
         </div>
         <div
diff --git a/apps/parsley/src/components/SidePanel/__snapshots__/SidePanel.stories.storyshot b/apps/parsley/src/components/SidePanel/__snapshots__/SidePanel.stories.storyshot
index 94072d04f..9b2d8468e 100644
--- a/apps/parsley/src/components/SidePanel/__snapshots__/SidePanel.stories.storyshot
+++ b/apps/parsley/src/components/SidePanel/__snapshots__/SidePanel.stories.storyshot
@@ -15,7 +15,7 @@ exports[`Snapshot Tests SidePanel.stories Default 1`] = `
         <nav
           aria-label="Side panel"
           class="leafygreen-ui-fw8ayd"
-          id="side-nav-206"
+          id="side-nav-246"
         >
           <div
             class="leafygreen-ui-1nmawjt"
@@ -32,7 +32,7 @@ exports[`Snapshot Tests SidePanel.stories Default 1`] = `
                   <div
                     class="leafygreen-ui-g6ml2m"
                     data-testid="side-nav-group-header-label"
-                    id="menu-group-label-id-202"
+                    id="menu-group-label-id-242"
                   >
                     <div
                       class="leafygreen-ui-1rnl6t5"
@@ -89,7 +89,7 @@ exports[`Snapshot Tests SidePanel.stories Default 1`] = `
                     </div>
                   </div>
                   <ul
-                    aria-labelledby="menu-group-label-id-202"
+                    aria-labelledby="menu-group-label-id-242"
                     class="leafygreen-ui-bdnco"
                   >
                     <div
@@ -245,8 +245,8 @@ exports[`Snapshot Tests SidePanel.stories Default 1`] = `
                                   Case
                                 </div>
                                 <div
-                                  aria-label="segmented-control-207"
-                                  aria-owns="segmented-control-207-0 segmented-control-207-1"
+                                  aria-label="segmented-control-247"
+                                  aria-owns="segmented-control-247-0 segmented-control-247-1"
                                   class="leafygreen-ui-18en4yf"
                                   role="tablist"
                                 >
@@ -262,7 +262,7 @@ exports[`Snapshot Tests SidePanel.stories Default 1`] = `
                                         aria-controls="Toggle case sensitivity"
                                         aria-selected="true"
                                         class="leafygreen-ui-ypz97o"
-                                        id="segmented-control-207-0"
+                                        id="segmented-control-247-0"
                                         role="tab"
                                         tabindex="0"
                                         type="button"
@@ -291,7 +291,7 @@ exports[`Snapshot Tests SidePanel.stories Default 1`] = `
                                         aria-controls="Toggle case sensitivity"
                                         aria-selected="false"
                                         class="leafygreen-ui-ypz97o"
-                                        id="segmented-control-207-1"
+                                        id="segmented-control-247-1"
                                         role="tab"
                                         tabindex="-1"
                                         type="button"
@@ -325,8 +325,8 @@ exports[`Snapshot Tests SidePanel.stories Default 1`] = `
                                   Match
                                 </div>
                                 <div
-                                  aria-label="segmented-control-208"
-                                  aria-owns="segmented-control-208-0 segmented-control-208-1"
+                                  aria-label="segmented-control-248"
+                                  aria-owns="segmented-control-248-0 segmented-control-248-1"
                                   class="leafygreen-ui-18en4yf"
                                   role="tablist"
                                 >
@@ -342,7 +342,7 @@ exports[`Snapshot Tests SidePanel.stories Default 1`] = `
                                         aria-controls="Toggle match type"
                                         aria-selected="true"
                                         class="leafygreen-ui-ypz97o"
-                                        id="segmented-control-208-0"
+                                        id="segmented-control-248-0"
                                         role="tab"
                                         tabindex="0"
                                         type="button"
@@ -371,7 +371,7 @@ exports[`Snapshot Tests SidePanel.stories Default 1`] = `
                                         aria-controls="Toggle match type"
                                         aria-selected="false"
                                         class="leafygreen-ui-ypz97o"
-                                        id="segmented-control-208-1"
+                                        id="segmented-control-248-1"
                                         role="tab"
                                         tabindex="-1"
                                         type="button"
@@ -409,7 +409,7 @@ exports[`Snapshot Tests SidePanel.stories Default 1`] = `
                   <div
                     class="leafygreen-ui-g6ml2m"
                     data-testid="side-nav-group-header-label"
-                    id="menu-group-label-id-203"
+                    id="menu-group-label-id-243"
                   >
                     <div
                       class="leafygreen-ui-1rnl6t5"
@@ -464,7 +464,7 @@ exports[`Snapshot Tests SidePanel.stories Default 1`] = `
                     </div>
                   </div>
                   <ul
-                    aria-labelledby="menu-group-label-id-203"
+                    aria-labelledby="menu-group-label-id-243"
                     class="leafygreen-ui-bdnco"
                   >
                     <div
@@ -516,7 +516,7 @@ exports[`Snapshot Tests SidePanel.stories Default 1`] = `
                   <div
                     class="leafygreen-ui-g6ml2m"
                     data-testid="side-nav-group-header-label"
-                    id="menu-group-label-id-204"
+                    id="menu-group-label-id-244"
                   >
                     <div
                       class="leafygreen-ui-1rnl6t5"
@@ -564,7 +564,7 @@ exports[`Snapshot Tests SidePanel.stories Default 1`] = `
                     </div>
                   </div>
                   <ul
-                    aria-labelledby="menu-group-label-id-204"
+                    aria-labelledby="menu-group-label-id-244"
                     class="leafygreen-ui-bdnco"
                   >
                     <div
@@ -735,7 +735,7 @@ exports[`Snapshot Tests SidePanel.stories Default 1`] = `
           </div>
         </nav>
         <button
-          aria-controls="side-nav-206"
+          aria-controls="side-nav-246"
           aria-expanded="true"
           aria-label="Collapse navigation"
           class="leafygreen-ui-v87gj9"