test(dashboard): mock tooltip

cryostatio · Oct 23, 2023 · 47010dc · 47010dc
1 parent 0eb2f8b
commit 47010dc
Show file tree

Hide file tree

Showing 2 changed files with 236 additions and 98 deletions.
diff --git a/src/test/Dashboard/DashboardLayoutToolbar.test.tsx b/src/test/Dashboard/DashboardLayoutToolbar.test.tsx
@@ -19,6 +19,11 @@ import { renderSnapshot } from '@test/utils';
 
 jest.spyOn(defaultServices.settings, 'deletionDialogsEnabledFor').mockReturnValue(true);
 
+jest.mock('@patternfly/react-core', () => ({
+  ...jest.requireActual('@patternfly/react-core'),
+  Tooltip: ({ t }) => <>{t}</>,
+}));
+
 describe('<DashboardLayoutToolbar />', () => {
   it('renders correctly', async () => {
     const tree = await renderSnapshot({

diff --git a/src/test/Dashboard/__snapshots__/DashboardLayoutToolbar.test.tsx.snap b/src/test/Dashboard/__snapshots__/DashboardLayoutToolbar.test.tsx.snap
@@ -1,109 +1,242 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<DashboardLayoutToolbar /> renders correctly 1`] = `
-Array [
-  <h2>
-    Unexpected Application Error!
-  </h2>,
-  <h3
+<div
+  className="pf-c-toolbar"
+  data-ouia-component-id="OUIA-Generated-Toolbar-1"
+  data-ouia-component-type="PF4/Toolbar"
+  data-ouia-safe={true}
+  id="pf-random-id-0"
+>
+  <div
+    className="pf-c-toolbar__content"
     style={
       Object {
-        "fontStyle": "italic",
+        "paddingLeft": "24px",
       }
     }
   >
-    element.addEventListener is not a function
-  </h3>,
-  <pre
-    style={
-      Object {
-        "backgroundColor": "rgba(200,200,200, 0.5)",
-        "padding": "0.5rem",
-      }
-    }
-  >
-    TypeError: element.addEventListener is not a function
-    at addEventListener (/home/thvo/workspace/cryostat-web/node_modules/@patternfly/react-core/dist/js/helpers/Popper/Popper.js:61:21)
-    at /home/thvo/workspace/cryostat-web/node_modules/@patternfly/react-core/dist/js/helpers/Popper/Popper.js:70:9
-    at invokePassiveEffectCreate (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14504:20)
-    at HTMLUnknownElement.callCallback (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11391:14)
-    at HTMLUnknownElement.callTheUserObjectsOperation (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
-    at innerInvokeEventListeners (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
-    at invokeEventListeners (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
-    at HTMLUnknownElementImpl._dispatch (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
-    at HTMLUnknownElementImpl.dispatchEvent (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
-    at HTMLUnknownElement.dispatchEvent (/home/thvo/workspace/cryostat-web/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
-    at Object.invokeGuardedCallbackDev (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11440:16)
-    at invokeGuardedCallback (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11499:31)
-    at flushPassiveEffectsImpl (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14591:9)
-    at unstable_runWithPriority (/home/thvo/workspace/cryostat-web/node_modules/scheduler/cjs/scheduler.development.js:468:12)
-    at runWithPriority (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2486:10)
-    at flushPassiveEffects (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14464:14)
-    at performSyncWorkOnRoot (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13380:3)
-    at /home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2537:26
-    at unstable_runWithPriority (/home/thvo/workspace/cryostat-web/node_modules/scheduler/cjs/scheduler.development.js:468:12)
-    at runWithPriority (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2486:10)
-    at flushSyncCallbackQueueImpl (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2532:9)
-    at flushSyncCallbackQueue (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2519:3)
-    at batchedUpdates (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13459:7)
-    at act (/home/thvo/workspace/cryostat-web/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15280:14)
-    at /home/thvo/workspace/cryostat-web/src/test/utils.tsx:102:12
-    at step (/home/thvo/workspace/cryostat-web/node_modules/tslib/tslib.js:195:27)
-    at Object.next (/home/thvo/workspace/cryostat-web/node_modules/tslib/tslib.js:176:57)
-    at /home/thvo/workspace/cryostat-web/node_modules/tslib/tslib.js:169:75
-    at new Promise (&lt;anonymous&gt;)
-    at Object.__awaiter (/home/thvo/workspace/cryostat-web/node_modules/tslib/tslib.js:165:16)
-    at renderSnapshot (/home/thvo/workspace/cryostat-web/src/test/utils.tsx:99:60)
-    at /home/thvo/workspace/cryostat-web/src/test/Dashboard/DashboardLayoutToolbar.test.tsx:24:38
-    at step (/home/thvo/workspace/cryostat-web/node_modules/tslib/tslib.js:195:27)
-    at Object.next (/home/thvo/workspace/cryostat-web/node_modules/tslib/tslib.js:176:57)
-    at /home/thvo/workspace/cryostat-web/node_modules/tslib/tslib.js:169:75
-    at new Promise (&lt;anonymous&gt;)
-    at Object.__awaiter (/home/thvo/workspace/cryostat-web/node_modules/tslib/tslib.js:165:16)
-    at Object.&lt;anonymous&gt; (/home/thvo/workspace/cryostat-web/src/test/Dashboard/DashboardLayoutToolbar.test.tsx:23:27)
-    at Promise.then.completed (/home/thvo/workspace/cryostat-web/node_modules/jest-circus/build/utils.js:391:28)
-    at new Promise (&lt;anonymous&gt;)
-    at callAsyncCircusFn (/home/thvo/workspace/cryostat-web/node_modules/jest-circus/build/utils.js:316:10)
-    at _callCircusTest (/home/thvo/workspace/cryostat-web/node_modules/jest-circus/build/run.js:218:40)
-    at processTicksAndRejections (node:internal/process/task_queues:95:5)
-    at _runTest (/home/thvo/workspace/cryostat-web/node_modules/jest-circus/build/run.js:155:3)
-    at _runTestsForDescribeBlock (/home/thvo/workspace/cryostat-web/node_modules/jest-circus/build/run.js:66:9)
-    at _runTestsForDescribeBlock (/home/thvo/workspace/cryostat-web/node_modules/jest-circus/build/run.js:60:9)
-    at run (/home/thvo/workspace/cryostat-web/node_modules/jest-circus/build/run.js:25:3)
-    at runAndTransformResultsToJestFormat (/home/thvo/workspace/cryostat-web/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:170:21)
-    at jestAdapter (/home/thvo/workspace/cryostat-web/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:82:19)
-    at runTestInternal (/home/thvo/workspace/cryostat-web/node_modules/jest-runner/build/runTest.js:389:16)
-    at runTest (/home/thvo/workspace/cryostat-web/node_modules/jest-runner/build/runTest.js:475:34)
-    at Object.worker (/home/thvo/workspace/cryostat-web/node_modules/jest-runner/build/testWorker.js:133:12)
-  </pre>,
-  <p>
-    💿 Hey developer 👋
-  </p>,
-  <p>
-    You can provide a way better UX than this when your app throws errors by providing your own 
-    <code
-      style={
-        Object {
-          "backgroundColor": "rgba(200,200,200, 0.5)",
-          "padding": "2px 4px",
-        }
-      }
+    <div
+      className="pf-c-toolbar__content-section"
     >
-      ErrorBoundary
-    </code>
-     or
-     
-    <code
-      style={
-        Object {
-          "backgroundColor": "rgba(200,200,200, 0.5)",
-          "padding": "2px 4px",
-        }
-      }
+      <div
+        className="pf-c-toolbar__item"
+      >
+        <div
+          id="dashboard-catalog-btn-wrapper"
+        />
+      </div>
+      <div
+        className="pf-c-toolbar__group"
+      >
+        <div
+          className="pf-c-toolbar__item pf-m-spacer-none"
+        >
+          <div
+            data-ouia-component-id="OUIA-Generated-Dropdown-1"
+            data-ouia-component-type="PF4/Dropdown"
+            data-ouia-safe={true}
+          >
+            <div
+              style={
+                Object {
+                  "display": "contents",
+                }
+              }
+            >
+              <button
+                aria-expanded={false}
+                className="pf-c-menu-toggle"
+                data-quickstart-id="dashboard-layout-selector"
+                disabled={false}
+                id="dashboard-layout-dropdown-toggle"
+                onClick={[Function]}
+                type="button"
+              >
+                <span
+                  className="pf-c-menu-toggle__text"
+                >
+                  Default
+                </span>
+                <span
+                  className="pf-c-menu-toggle__controls"
+                >
+                  <span
+                    className="pf-c-menu-toggle__toggle-icon"
+                  >
+                    <svg
+                      aria-hidden={true}
+                      aria-labelledby={null}
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      style={
+                        Object {
+                          "verticalAlign": "-0.125em",
+                        }
+                      }
+                      viewBox="0 0 320 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div
+          className="pf-c-toolbar__item"
+        >
+          <button
+            aria-disabled={true}
+            aria-label="Rename layout"
+            className="pf-c-button pf-m-plain pf-m-aria-disabled"
+            data-ouia-component-id="OUIA-Generated-Button-plain-1"
+            data-ouia-component-type="PF4/Button"
+            data-ouia-safe={true}
+            data-quickstart-id="dashboard-rename-btn"
+            disabled={false}
+            onClick={[Function]}
+            onKeyPress={[Function]}
+            role={null}
+            tabIndex={null}
+            type="button"
+          >
+            <svg
+              aria-hidden={true}
+              aria-labelledby={null}
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style={
+                Object {
+                  "verticalAlign": "-0.125em",
+                }
+              }
+              viewBox="0 0 512 512"
+              width="1em"
+            >
+              <path
+                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+      <div
+        className="pf-c-toolbar__group pf-m-button-group"
+      >
+        <div
+          className="pf-c-toolbar__item"
+        >
+          <button
+            aria-disabled={true}
+            aria-label="Delete layout"
+            className="pf-c-button pf-m-danger pf-m-aria-disabled"
+            data-ouia-component-id="OUIA-Generated-Button-danger-1"
+            data-ouia-component-type="PF4/Button"
+            data-ouia-safe={true}
+            data-quickstart-id="dashboard-delete-btn"
+            disabled={false}
+            onClick={[Function]}
+            onKeyPress={[Function]}
+            role={null}
+            tabIndex={null}
+            type="button"
+          >
+            <span
+              className="pf-c-button__icon pf-m-start"
+            >
+              <svg
+                aria-hidden={true}
+                aria-labelledby={null}
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style={
+                  Object {
+                    "verticalAlign": "-0.125em",
+                  }
+                }
+                viewBox="0 0 448 512"
+                width="1em"
+              >
+                <path
+                  d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"
+                />
+              </svg>
+            </span>
+            Delete
+          </button>
+        </div>
+        <div
+          className="pf-c-toolbar__item"
+        >
+          <div
+            data-ouia-component-id="OUIA-Generated-Dropdown-2"
+            data-ouia-component-type="PF4/Dropdown"
+            data-ouia-safe={true}
+          >
+            <div
+              style={
+                Object {
+                  "display": "contents",
+                }
+              }
+            >
+              <button
+                aria-expanded={false}
+                aria-label="Layout menu"
+                className="pf-c-menu-toggle pf-m-plain"
+                data-quickstart-id="layout-toolbar-kebab-btn"
+                disabled={false}
+                onClick={[Function]}
+                type="button"
+              >
+                <svg
+                  aria-hidden={true}
+                  aria-labelledby={null}
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  style={
+                    Object {
+                      "verticalAlign": "-0.125em",
+                    }
+                  }
+                  viewBox="0 0 192 512"
+                  width="1em"
+                >
+                  <path
+                    d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="pf-c-toolbar__expandable-content"
+      id="pf-random-id-0-expandable-content-0"
     >
-      errorElement
-    </code>
-     prop on your route.
-  </p>,
-]
+      <div
+        className="pf-c-toolbar__group"
+      />
+    </div>
+  </div>
+  <div
+    className="pf-c-toolbar__content pf-m-hidden"
+    hidden={true}
+  >
+    <div
+      className="pf-c-toolbar__group"
+    />
+  </div>
+</div>
 `;