style(test): format popup boundary regressions

packages/csr/test/anchored-overlays.test.ts

@@ -4,47 +4,63 @@ import { REACTIVE_RUNTIME } from "../src/reactive-runtime.ts";
 
 function fixture(panel: Record<string, number>, clipped = false) {
   const win = new Window();
-  win.document.body.innerHTML = '<div id="clip"><div data-ui-component="ComboBox"><div data-wrn-anchored></div></div></div>';
-  const element = win.document.querySelector('[data-wrn-anchored]')! as any;
+  win.document.body.innerHTML =
+    '<div id="clip"><div data-ui-component="ComboBox"><div data-wrn-anchored></div></div></div>';
+  const element = win.document.querySelector("[data-wrn-anchored]")! as any;
   const host = element.parentElement;
-  const rect = (left: number, top: number, width: number, height: number) => ({left, top, width, height, right:left+width, bottom:top+height});
+  const rect = (left: number, top: number, width: number, height: number) => ({
+    left,
+    top,
+    width,
+    height,
+    right: left + width,
+    bottom: top + height,
+  });
   host.getBoundingClientRect = () => rect(270, 170, 40, 30);
-  element.getBoundingClientRect = () => rect(panel.left, panel.top,
+  element.getBoundingClientRect = () =>
+    rect(
+      panel.left,
+      panel.top,
       Math.min(panel.width, parseFloat(element.style.maxWidth) || Infinity),
-    Math.min(panel.height, parseFloat(element.style.maxHeight) || Infinity));
+      Math.min(panel.height, parseFloat(element.style.maxHeight) || Infinity),
+    );
   if (clipped) {
-    const clip = win.document.querySelector('#clip')! as any;
-    clip.style.overflow = 'hidden';
+    const clip = win.document.querySelector("#clip")! as any;
+    clip.style.overflow = "hidden";
     clip.getBoundingClientRect = () => rect(100, 50, 220, 220);
-    Object.defineProperty(clip, 'clientWidth', {value:220});
-    Object.defineProperty(clip, 'clientHeight', {value:220});
+    Object.defineProperty(clip, "clientWidth", { value: 220 });
+    Object.defineProperty(clip, "clientHeight", { value: 220 });
   }
-  const start = REACTIVE_RUNTIME.indexOf('  function isRenderedElement(');
-  const end = REACTIVE_RUNTIME.indexOf('  function repositionAnchored(', start);
-  const clamp = new Function('window', 'document', 'ANCHOR_MARGIN', REACTIVE_RUNTIME.slice(start,end) + '; return clampAnchored;')(win, win.document, 8);
-  return {win, element, clamp};
+  const start = REACTIVE_RUNTIME.indexOf("  function isRenderedElement(");
+  const end = REACTIVE_RUNTIME.indexOf("  function repositionAnchored(", start);
+  const clamp = new Function(
+    "window",
+    "document",
+    "ANCHOR_MARGIN",
+    REACTIVE_RUNTIME.slice(start, end) + "; return clampAnchored;",
+  )(win, win.document, 8);
+  return { win, element, clamp };
 }
 
-test('anchored panels fit clipping containers and positioning does not drift', async () => {
-  const {win, element, clamp} = fixture({left:40,top:208,width:180,height:100}, true);
+test("anchored panels fit clipping containers and positioning does not drift", async () => {
+  const { win, element, clamp } = fixture({ left: 40, top: 208, width: 180, height: 100 }, true);
   clamp(element);
-  expect(element.style.translate).toBe('68px -146px');
+  expect(element.style.translate).toBe("68px -146px");
   clamp(element);
-  expect(element.style.translate).toBe('68px -146px');
+  expect(element.style.translate).toBe("68px -146px");
   await win.happyDOM.close();
 });
 
-test('oversized panels become scrollable and recover authored sizing when space returns', async () => {
-  const {win, element, clamp} = fixture({left:40,top:60,width:500,height:400}, true);
-  element.style.minWidth = '300px';
+test("oversized panels become scrollable and recover authored sizing when space returns", async () => {
+  const { win, element, clamp } = fixture({ left: 40, top: 60, width: 500, height: 400 }, true);
+  element.style.minWidth = "300px";
   clamp(element);
-  expect(element.style.maxWidth).toBe('204px');
-  expect(element.style.maxHeight).toBe('204px');
-  expect(element.style.overflow).toBe('auto');
-  element.parentElement.parentElement.style.overflow = 'visible';
+  expect(element.style.maxWidth).toBe("204px");
+  expect(element.style.maxHeight).toBe("204px");
+  expect(element.style.overflow).toBe("auto");
+  element.parentElement.parentElement.style.overflow = "visible";
   clamp(element);
-  expect(element.style.minWidth).toBe('300px');
-  expect(element.style.maxWidth).toBe('');
+  expect(element.style.minWidth).toBe("300px");
+  expect(element.style.maxWidth).toBe("");
   await win.happyDOM.close();
 });
-

packages/ui/test/account-shell-regressions.test.ts

@@ -247,8 +247,15 @@ describe("account shell UI regressions", () => {
   });
 });
 
-test('floating selection and preference panels opt into shared boundary handling', async () => {
-  for (const name of ['PreferenceSwitcher', 'ComboBox', 'AdvancedSelect', 'TimePicker', 'DataTable', 'Navbar']) {
-    expect(readFileSync(uiComponentPath(name), 'utf8')).toContain('data-wrn-anchored="true"');
+test("floating selection and preference panels opt into shared boundary handling", async () => {
+  for (const name of [
+    "PreferenceSwitcher",
+    "ComboBox",
+    "AdvancedSelect",
+    "TimePicker",
+    "DataTable",
+    "Navbar",
+  ]) {
+    expect(readFileSync(uiComponentPath(name), "utf8")).toContain('data-wrn-anchored="true"');
   }
 });