From a49f50e15c570efa73644c08b44a56577a455742 Mon Sep 17 00:00:00 2001
From: Evan <evan.wilkinson@redhat.com>
Date: Thu, 15 Feb 2024 11:32:57 -0500
Subject: [PATCH] add IDs to fix Jest errors

---
 src/app/AppLayout/AppLayout.tsx         |  6 +-
 src/app/__snapshots__/app.test.tsx.snap | 76 ++++++++++++++-----------
 2 files changed, 46 insertions(+), 36 deletions(-)

diff --git a/src/app/AppLayout/AppLayout.tsx b/src/app/AppLayout/AppLayout.tsx
index 19f9c222..7cd3f299 100644
--- a/src/app/AppLayout/AppLayout.tsx
+++ b/src/app/AppLayout/AppLayout.tsx
@@ -141,12 +141,14 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
       {children}
       <Flex direction={{ default: 'column' }} gap={{ default: 'gapLg' }} className="ws-full-page-utils">
         <Switch
-          label="Dark theme"
+          id="demo-theme-switcher"
+          aria-label="Dark theme enabled"
           defaultChecked={false}
           onChange={() => document!.querySelector('html')!.classList.toggle('pf-v5-theme-dark')}
         />
         <Switch
-          label="RTL"
+          id="demo-rtl-switcher"
+          aria-label="RTL enabled"
           defaultChecked={false}
           onChange={() => {
             const html = document.querySelector('html');
diff --git a/src/app/__snapshots__/app.test.tsx.snap b/src/app/__snapshots__/app.test.tsx.snap
index 37a9a2d8..8700fe6a 100644
--- a/src/app/__snapshots__/app.test.tsx.snap
+++ b/src/app/__snapshots__/app.test.tsx.snap
@@ -294,31 +294,35 @@ exports[`App tests should render default App component 1`] = `
           data-ouia-component-id="OUIA-Generated-Switch-1"
           data-ouia-component-type="PF5/Switch"
           data-ouia-safe="true"
-          for="pf-1707789380679np9ng40t0v"
+          for="demo-theme-switcher"
         >
           <input
-            aria-label=""
-            aria-labelledby="pf-1707789380679np9ng40t0v-on"
+            aria-label="Dark theme enabled"
             class="pf-v5-c-switch__input"
-            id="pf-1707789380679np9ng40t0v"
+            id="demo-theme-switcher"
             type="checkbox"
           />
           <span
             class="pf-v5-c-switch__toggle"
-          />
-          <span
-            aria-hidden="true"
-            class="pf-v5-c-switch__label pf-m-on"
-            id="pf-1707789380679np9ng40t0v-on"
           >
-            Dark theme
-          </span>
-          <span
-            aria-hidden="true"
-            class="pf-v5-c-switch__label pf-m-off"
-            id="pf-1707789380679np9ng40t0v-off"
-          >
-            Dark theme
+            <div
+              aria-hidden="true"
+              class="pf-v5-c-switch__toggle-icon"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 512 512"
+                width="1em"
+              >
+                <path
+                  d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                />
+              </svg>
+            </div>
           </span>
         </label>
         <label
@@ -326,31 +330,35 @@ exports[`App tests should render default App component 1`] = `
           data-ouia-component-id="OUIA-Generated-Switch-2"
           data-ouia-component-type="PF5/Switch"
           data-ouia-safe="true"
-          for="pf-1707789380681ziihjaq6q3"
+          for="demo-rtl-switcher"
         >
           <input
-            aria-label=""
-            aria-labelledby="pf-1707789380681ziihjaq6q3-on"
+            aria-label="RTL enabled"
             class="pf-v5-c-switch__input"
-            id="pf-1707789380681ziihjaq6q3"
+            id="demo-rtl-switcher"
             type="checkbox"
           />
           <span
             class="pf-v5-c-switch__toggle"
-          />
-          <span
-            aria-hidden="true"
-            class="pf-v5-c-switch__label pf-m-on"
-            id="pf-1707789380681ziihjaq6q3-on"
           >
-            RTL
-          </span>
-          <span
-            aria-hidden="true"
-            class="pf-v5-c-switch__label pf-m-off"
-            id="pf-1707789380681ziihjaq6q3-off"
-          >
-            RTL
+            <div
+              aria-hidden="true"
+              class="pf-v5-c-switch__toggle-icon"
+            >
+              <svg
+                aria-hidden="true"
+                class="pf-v5-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 512 512"
+                width="1em"
+              >
+                <path
+                  d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                />
+              </svg>
+            </div>
           </span>
         </label>
       </div>