Test(web-react): Fix & Enable Tooltip visual tests

lmc-eu · Jul 17, 2024 · 26c38bd · 26c38bd
1 parent 6e9b711
commit 26c38bd
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>