test: update

floating-ui · Jan 19, 2024 · 3127a47 · 3127a47
1 parent 59bd765
commit 3127a47
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 4 deletions.
diff --git a/packages/dom/test/functional/top-layer.test.ts b/packages/dom/test/functional/top-layer.test.ts
@@ -146,15 +146,16 @@ test('top-layer, dialog, no transform, stack on dialog', async ({page}) => {
 
 test('flip collision', async ({page}) => {
   await page.goto('http://localhost:1234/top-layer');
+  await click(page, '[data-testid="collision-true"]');
   await click(page, '#reference');
 
-  await page.evaluate(() => window.scrollTo(0, 130));
+  await page.evaluate(() => window.scrollTo(0, 86));
 
   expect(await page.locator('.host').screenshot()).toMatchSnapshot(
     `top-layer.no-flip.png`,
   );
 
-  await page.evaluate(() => window.scrollTo(0, 140));
+  await page.evaluate(() => window.scrollTo(0, 96));
 
   expect(await page.locator('.host').screenshot()).toMatchSnapshot(
     `top-layer.flip.png`,

diff --git a/packages/dom/test/visual/index.css b/packages/dom/test/visual/index.css
@@ -108,6 +108,7 @@ main {
   background: turquoise;
   width: 80px;
   height: 80px;
+  outline: none;
 }
 
 .arrow {

diff --git a/packages/dom/test/visual/spec/TopLayer.tsx b/packages/dom/test/visual/spec/TopLayer.tsx
@@ -150,12 +150,13 @@ export function TopLayer() {
   const [withTransform, setWithTransform] = useState(true);
   const [withPopover, setPopover] = useState(true);
   const [stackedOn, setStackedOn] = useState<STACKED_TYPES>('none');
+  const [collision, setCollision] = useState(false);
 
   const {x, y, strategy, refs} = useFloating({
     whileElementsMounted: autoUpdate,
     placement: 'top',
     strategy: 'fixed',
-    middleware: [withMiddleware && topLayer(), flip(), shift()],
+    middleware: [withMiddleware && topLayer(), collision && flip()],
   });
 
   const tooltipStyles = {
@@ -192,7 +193,11 @@ export function TopLayer() {
   return (
     <>
       <style>{styles}</style>
-      <h1>Top Layer</h1>
+      <h1
+        style={{display: 'flex', alignItems: 'center', height: 100, margin: 0}}
+      >
+        Top Layer
+      </h1>
       <Stack {...stackProps}>
         <div
           className={classes}
@@ -235,13 +240,32 @@ export function TopLayer() {
               position: strategy,
               top: y,
               left: x,
+              ...(collision && {
+                height: 100,
+              }),
             }}
           >
             Floating
           </dialog>
         </div>
       </Stack>
 
+      <h2>Collision</h2>
+      <Controls>
+        {BOOLS.map((bool) => (
+          <button
+            key={String(bool)}
+            data-testid={`collision-${bool}`}
+            onClick={() => setCollision(bool)}
+            style={{
+              backgroundColor: bool === collision ? 'black' : '',
+            }}
+          >
+            {String(bool)}
+          </button>
+        ))}
+      </Controls>
+
       <h2>withMiddleware</h2>
       <Controls>
         {BOOLS.map((bool) => (