Links hidden behind action button

__tests__/components/utils/select/dropdown/CommonDropdownItemsDefaultWrapper.test.tsx

@@ -1,50 +1,222 @@
-import { render, fireEvent, waitFor } from '@testing-library/react';
-import React from 'react';
-import CommonDropdownItemsDefaultWrapper from '@/components/utils/select/dropdown/CommonDropdownItemsDefaultWrapper';
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import React from "react";
+import CommonDropdownItemsDefaultWrapper from "@/components/utils/select/dropdown/CommonDropdownItemsDefaultWrapper";
 
-jest.mock('framer-motion', () => ({
+jest.mock("framer-motion", () => ({
   AnimatePresence: ({ children }: any) => <div>{children}</div>,
   motion: { div: (props: any) => <div {...props} /> },
 }));
 
-jest.mock('react-use', () => ({
+jest.mock("react-use", () => ({
   useClickAway: (ref: React.RefObject<HTMLElement>, handler: () => void) => {
     React.useEffect(() => {
       const listener = (e: MouseEvent) => {
         if (ref.current && !ref.current.contains(e.target as Node)) handler();
       };
-      document.addEventListener('mousedown', listener);
-      return () => document.removeEventListener('mousedown', listener);
+      document.addEventListener("mousedown", listener);
+      return () => document.removeEventListener("mousedown", listener);
     }, [ref, handler]);
   },
   useKeyPressEvent: (key: string, cb: () => void) => {
     React.useEffect(() => {
       const handler = (e: KeyboardEvent) => e.key === key && cb();
-      window.addEventListener('keydown', handler);
-      return () => window.removeEventListener('keydown', handler);
+      window.addEventListener("keydown", handler);
+      return () => window.removeEventListener("keydown", handler);
     }, [key, cb]);
   },
 }));
 
-test('closes on escape press', () => {
+const createRect = ({
+  top,
+  bottom,
+  left,
+  right,
+}: {
+  readonly top: number;
+  readonly bottom: number;
+  readonly left: number;
+  readonly right: number;
+}) => ({
+  top,
+  bottom,
+  left,
+  right,
+  width: right - left,
+  height: bottom - top,
+  x: left,
+  y: top,
+  toJSON: () => ({}),
+});
+
+const originalInnerWidth = window.innerWidth;
+const originalInnerHeight = window.innerHeight;
+
+afterEach(() => {
+  Object.defineProperty(window, "innerWidth", {
+    configurable: true,
+    value: originalInnerWidth,
+  });
+  Object.defineProperty(window, "innerHeight", {
+    configurable: true,
+    value: originalInnerHeight,
+  });
+  jest.restoreAllMocks();
+});
+
+test("closes on escape press", () => {
   const setOpen = jest.fn();
   render(
-    <CommonDropdownItemsDefaultWrapper isOpen={true} setOpen={setOpen} buttonRef={{ current: null }}>
+    <CommonDropdownItemsDefaultWrapper
+      isOpen={true}
+      setOpen={setOpen}
+      buttonRef={{ current: null }}
+    >
       <li>item</li>
     </CommonDropdownItemsDefaultWrapper>
   );
-  fireEvent.keyDown(window, { key: 'Escape' });
+  fireEvent.keyDown(window, { key: "Escape" });
   expect(setOpen).toHaveBeenCalledWith(false);
 });
 
-test('positions dropdown when buttonPosition provided', async () => {
-  jest.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockReturnValue(40);
-  const { container } = render(
-    <CommonDropdownItemsDefaultWrapper isOpen={true} setOpen={() => {}} buttonRef={{ current: null }} buttonPosition={{ right:100 }}>
+test("positions the dropdown below the trigger when there is space", async () => {
+  Object.defineProperty(window, "innerWidth", {
+    configurable: true,
+    value: 1280,
+  });
+  Object.defineProperty(window, "innerHeight", {
+    configurable: true,
+    value: 720,
+  });
+  jest.spyOn(HTMLElement.prototype, "offsetWidth", "get").mockReturnValue(160);
+  jest.spyOn(HTMLElement.prototype, "offsetHeight", "get").mockReturnValue(120);
+
+  const button = document.createElement("button");
+  Object.defineProperty(button, "getBoundingClientRect", {
+    configurable: true,
+    value: () =>
+      createRect({
+        top: 200,
+        bottom: 232,
+        left: 100,
+        right: 132,
+      }),
+  });
+
+  render(
+    <CommonDropdownItemsDefaultWrapper
+      isOpen={true}
+      setOpen={() => {}}
+      buttonRef={{ current: button }}
+    >
       <li>item</li>
     </CommonDropdownItemsDefaultWrapper>
   );
+
   await waitFor(() => {
-    expect((container.firstChild as HTMLElement).style.left).toBe('60px');
+    expect(screen.getByRole("menu").parentElement).toHaveStyle({
+      left: "100px",
+      top: "240px",
+    });
+  });
+});
+
+test("positions the dropdown above the trigger near the viewport bottom", async () => {
+  Object.defineProperty(window, "innerWidth", {
+    configurable: true,
+    value: 1280,
+  });
+  Object.defineProperty(window, "innerHeight", {
+    configurable: true,
+    value: 500,
   });
+  jest.spyOn(HTMLElement.prototype, "offsetWidth", "get").mockReturnValue(160);
+  jest.spyOn(HTMLElement.prototype, "offsetHeight", "get").mockReturnValue(120);
+
+  const button = document.createElement("button");
+  Object.defineProperty(button, "getBoundingClientRect", {
+    configurable: true,
+    value: () =>
+      createRect({
+        top: 440,
+        bottom: 472,
+        left: 100,
+        right: 132,
+      }),
+  });
+
+  render(
+    <CommonDropdownItemsDefaultWrapper
+      isOpen={true}
+      setOpen={() => {}}
+      buttonRef={{ current: button }}
+    >
+      <li>item</li>
+    </CommonDropdownItemsDefaultWrapper>
+  );
+
+  await waitFor(() => {
+    expect(screen.getByRole("menu").parentElement).toHaveStyle({
+      left: "100px",
+      top: "312px",
+    });
+  });
+});
+
+test("closes when focus moves outside the trigger and portaled menu by default", async () => {
+  const setOpen = jest.fn();
+  const buttonRef = React.createRef<HTMLButtonElement>();
+
+  render(
+    <>
+      <button ref={buttonRef} type="button">
+        Trigger
+      </button>
+      <button type="button">Outside</button>
+      <CommonDropdownItemsDefaultWrapper
+        isOpen={true}
+        setOpen={setOpen}
+        buttonRef={buttonRef}
+      >
+        <li>
+          <button type="button">Item</button>
+        </li>
+      </CommonDropdownItemsDefaultWrapper>
+    </>
+  );
+
+  await screen.findByRole("menu");
+
+  fireEvent.focusIn(screen.getByRole("button", { name: "Outside" }));
+
+  expect(setOpen).toHaveBeenCalledWith(false);
+});
+
+test("does not close when opted out and focus moves outside the trigger and portaled menu", async () => {
+  const setOpen = jest.fn();
+  const buttonRef = React.createRef<HTMLButtonElement>();
+
+  render(
+    <>
+      <button ref={buttonRef} type="button">
+        Trigger
+      </button>
+      <button type="button">Outside</button>
+      <CommonDropdownItemsDefaultWrapper
+        isOpen={true}
+        setOpen={setOpen}
+        buttonRef={buttonRef}
+        closeOnFocusOutside={false}
+      >
+        <li>
+          <button type="button">Item</button>
+        </li>
+      </CommonDropdownItemsDefaultWrapper>
+    </>
+  );
+
+  await screen.findByRole("menu");
+
+  fireEvent.focusIn(screen.getByRole("button", { name: "Outside" }));
+
+  expect(setOpen).not.toHaveBeenCalled();
 });

__tests__/components/waves/LinkHandlerFrame.test.tsx

@@ -0,0 +1,106 @@
+import { render, screen } from "@testing-library/react";
+
+import LinkHandlerFrame from "@/components/waves/LinkHandlerFrame";
+
+let mockHideActions = false;
+
+jest.mock("@/components/waves/ChatItemHrefButtons", () => ({
+  __esModule: true,
+  default: ({ href, layout }: { href: string; layout: string }) => (
+    <div
+      data-testid="chat-item-href-buttons"
+      data-href={href}
+      data-layout={layout}
+    />
+  ),
+}));
+
+jest.mock("@/components/waves/LinkPreviewContext", () => ({
+  useLinkPreviewContext: () => ({ hideActions: mockHideActions }),
+}));
+
+describe("LinkHandlerFrame", () => {
+  beforeEach(() => {
+    mockHideActions = false;
+  });
+
+  it("uses the full-width frame wrapper by default", () => {
+    render(
+      <LinkHandlerFrame href="https://example.com/tweet">
+        <div data-testid="preview-card" className="lg:tw-max-w-[480px]">
+          Preview
+        </div>
+      </LinkHandlerFrame>
+    );
+
+    const actions = screen.getByTestId("chat-item-href-buttons");
+    const anchor = actions.parentElement;
+    const outer = anchor?.parentElement;
+
+    expect(anchor).not.toBeNull();
+    expect(anchor?.className).toContain("tw-group/link-card");
+    expect(anchor?.className).toContain("tw-relative");
+    expect(anchor?.className).toContain("tw-w-full");
+    expect(anchor?.className).toContain("tw-max-w-full");
+    expect(anchor?.className).not.toContain("tw-inline-flex");
+    expect(anchor?.className).not.toContain("tw-w-fit");
+    expect(outer).not.toBeNull();
+    expect(actions).toHaveAttribute("data-layout", "overlay");
+  });
+
+  it("supports content-width overlay anchoring when explicitly requested", () => {
+    render(
+      <LinkHandlerFrame
+        href="https://example.com/tweet"
+        overlayAnchor="content"
+      >
+        <div data-testid="preview-card" className="lg:tw-max-w-[480px]">
+          Preview
+        </div>
+      </LinkHandlerFrame>
+    );
+
+    const actions = screen.getByTestId("chat-item-href-buttons");
+    const anchor = actions.parentElement;
+    const outer = anchor?.parentElement;
+
+    expect(anchor).not.toBeNull();
+    expect(anchor?.className).toContain("tw-group/link-card");
+    expect(anchor?.className).toContain("tw-relative");
+    expect(anchor?.className).toContain("tw-inline-flex");
+    expect(anchor?.className).toContain("tw-w-fit");
+    expect(anchor?.className).toContain("tw-max-w-full");
+
+    expect(outer).not.toBeNull();
+    expect(outer?.className).toContain("tw-flex");
+    expect(outer?.className).toContain("tw-w-full");
+    expect(actions).toHaveAttribute("data-layout", "overlay");
+  });
+
+  it("falls back to the full-width frame wrapper when actions are hidden", () => {
+    mockHideActions = true;
+
+    render(
+      <LinkHandlerFrame
+        href="https://example.com/tweet"
+        overlayAnchor="content"
+      >
+        <div data-testid="preview-card" className="lg:tw-max-w-[480px]">
+          Preview
+        </div>
+      </LinkHandlerFrame>
+    );
+
+    const preview = screen.getByTestId("preview-card");
+    const anchor = preview.parentElement?.parentElement;
+
+    expect(
+      screen.queryByTestId("chat-item-href-buttons")
+    ).not.toBeInTheDocument();
+    expect(anchor).not.toBeNull();
+    expect(anchor?.className).toContain("tw-group/link-card");
+    expect(anchor?.className).toContain("tw-w-full");
+    expect(anchor?.className).not.toContain("tw-inline-flex");
+    expect(anchor?.className).not.toContain("tw-w-fit");
+  });
+});