From 26c38bdeedd46e7ab04071553624596f9f8a8d80 Mon Sep 17 00:00:00 2001
From: Pavel Klibani <pavel@techloop.io>
Date: Thu, 11 Jul 2024 11:45:46 +0200
Subject: [PATCH] Test(web-react): Fix & Enable Tooltip visual tests

---
 .../Tooltip/demo/TooltipAdvancedFloating.tsx  | 24 +++++++++++++++----
 .../components/Tooltip/demo/TooltipIcon.tsx   |  8 +------
 .../Tooltip/demo/TooltipPlacements.tsx        |  8 ++++++-
 .../src/components/Tooltip/demo/index.tsx     |  6 ++---
 .../src/scss/components/Tooltip/index.html    |  2 --
 5 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/packages/web-react/src/components/Tooltip/demo/TooltipAdvancedFloating.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipAdvancedFloating.tsx
index a4da87b544..14afce0869 100644
--- a/packages/web-react/src/components/Tooltip/demo/TooltipAdvancedFloating.tsx
+++ b/packages/web-react/src/components/Tooltip/demo/TooltipAdvancedFloating.tsx
@@ -48,10 +48,26 @@ const TooltipAdvancedFloating = () => {
   useEffect(() => {
     const viewport = viewportRef.current;
     const content = contentRef.current;
-    if (viewport && content) {
-      viewport.scrollLeft = (content.offsetWidth - viewport.offsetWidth) / 2;
-      viewport.scrollTop = (content.offsetHeight - viewport.offsetHeight) / 2;
-    }
+
+    const centerContentInViewport = () => {
+      if (!viewport || !content) {
+        return;
+      }
+
+      const scrollLeft = (content.offsetWidth - viewport.offsetWidth) / 2;
+      const scrollTop = (content.offsetHeight - viewport.offsetHeight) / 2;
+
+      viewport.scrollLeft = scrollLeft;
+      viewport.scrollTop = scrollTop;
+    };
+
+    centerContentInViewport();
+
+    window.addEventListener('resize', centerContentInViewport);
+
+    return () => {
+      window.removeEventListener('resize', centerContentInViewport);
+    };
   }, []);
 
   return (
diff --git a/packages/web-react/src/components/Tooltip/demo/TooltipIcon.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipIcon.tsx
index e0e75c7504..114f8bd087 100644
--- a/packages/web-react/src/components/Tooltip/demo/TooltipIcon.tsx
+++ b/packages/web-react/src/components/Tooltip/demo/TooltipIcon.tsx
@@ -17,13 +17,7 @@ const TooltipIcon = () => {
         placement="right"
         UNSAFE_className="d-inline-block"
       >
-        <TooltipTrigger
-          boxSize={16}
-          elementType={Icon}
-          marginBottom="space-200"
-          name="info"
-          UNSAFE_className="d-inline-block"
-        />
+        <TooltipTrigger boxSize={16} elementType={Icon} name="info" UNSAFE_className="d-inline-block" />
         <TooltipPopover>Close me</TooltipPopover>
       </Tooltip>
     </div>
diff --git a/packages/web-react/src/components/Tooltip/demo/TooltipPlacements.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipPlacements.tsx
index 20e68079d4..00e9839b6c 100644
--- a/packages/web-react/src/components/Tooltip/demo/TooltipPlacements.tsx
+++ b/packages/web-react/src/components/Tooltip/demo/TooltipPlacements.tsx
@@ -143,7 +143,13 @@ const TooltipPlacements = () => {
         </GridItem>
         <GridItem columnStart={2} rowStart={2}>
           <div className="mx-auto space-1200">
-            <Tooltip isOpen id="tooltip-placement" placement={placement as Placement} onToggle={() => {}}>
+            <Tooltip
+              isOpen
+              id="tooltip-placement"
+              placement={placement as Placement}
+              onToggle={() => {}}
+              enableFlipping={false}
+            >
               <TooltipTrigger elementType="div" UNSAFE_style={{ margin: '5rem auto' }}>
                 <DocsBox UNSAFE_className="px-900 py-900">
                   Click
diff --git a/packages/web-react/src/components/Tooltip/demo/index.tsx b/packages/web-react/src/components/Tooltip/demo/index.tsx
index a9211f3600..e7f80d807f 100644
--- a/packages/web-react/src/components/Tooltip/demo/index.tsx
+++ b/packages/web-react/src/components/Tooltip/demo/index.tsx
@@ -19,9 +19,6 @@ import TooltipWithLink from './TooltipWithLink';
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <IconsProvider value={icons}>
-      <DocsSection title="Placements" stackAlignment="stretch">
-        <TooltipPlacements />
-      </DocsSection>
       <DocsSection title="Default">
         <TooltipDefault />
       </DocsSection>
@@ -40,6 +37,9 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
       <DocsSection title="Tooltip on Icon Component">
         <TooltipIcon />
       </DocsSection>
+      <DocsSection title="Placements" stackAlignment="stretch">
+        <TooltipPlacements />
+      </DocsSection>
       <DocsSection title="Advanced Floating Functionality" stackAlignment="stretch">
         <TooltipAdvancedFloating />
       </DocsSection>
diff --git a/packages/web/src/scss/components/Tooltip/index.html b/packages/web/src/scss/components/Tooltip/index.html
index 7ddd302d2c..d80aa805db 100644
--- a/packages/web/src/scss/components/Tooltip/index.html
+++ b/packages/web/src/scss/components/Tooltip/index.html
@@ -434,8 +434,6 @@ <h2 class="docs-Heading">Advanced Floating Functionality</h2>
 
     <div class="docs-Stack docs-Stack--stretch">
 
-      <div id="test"></div>
-
       <script type="module" src="floating-ui-example.mjs" rel="preload" as="script"></script>
 
       <style>