@oneuptime/common 11.7.2 → 11.7.4

package/Tests/UI/Components/TelemetryTimeRangePicker.test.tsx

@@ -0,0 +1,404 @@
+import TelemetryTimeRangePicker, {
+  TIME_RANGE_DROPDOWN_WIDTH_IN_PX,
+} from "../../../UI/Components/TelemetryViewer/components/TelemetryTimeRangePicker";
+import RangeStartAndEndDateTime from "../../../Types/Time/RangeStartAndEndDateTime";
+import TimeRange from "../../../Types/Time/TimeRange";
+import InBetween from "../../../Types/BaseDatabase/InBetween";
+import "@testing-library/jest-dom/extend-expect";
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+} from "@testing-library/react";
+import React from "react";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+
+const BUTTON_TEST_ID: string = "telemetry-time-range-picker-button";
+const DROPDOWN_TEST_ID: string = "telemetry-time-range-picker-dropdown";
+
+const ORIGINAL_INNER_WIDTH: number = window.innerWidth;
+const originalGetBoundingClientRect: () => DOMRect =
+  Element.prototype.getBoundingClientRect;
+
+/*
+ * jsdom performs no layout, so every rect comes back zero-sized. These helpers
+ * let a test describe where the trigger button sits inside a viewport of a
+ * given width, which is the only input the alignment logic reads.
+ */
+function setViewportWidth(width: number): void {
+  Object.defineProperty(window, "innerWidth", {
+    configurable: true,
+    writable: true,
+    value: width,
+  });
+}
+
+function stubTriggerRect(left: number, right: number): void {
+  Element.prototype.getBoundingClientRect = function (this: Element): DOMRect {
+    if (
+      this instanceof HTMLElement &&
+      this.getAttribute("data-testid") === BUTTON_TEST_ID
+    ) {
+      return {
+        left: left,
+        right: right,
+        top: 40,
+        bottom: 68,
+        width: right - left,
+        height: 28,
+        x: left,
+        y: 40,
+        toJSON: (): Record<string, unknown> => {
+          return {};
+        },
+      } as DOMRect;
+    }
+
+    return originalGetBoundingClientRect.call(this);
+  };
+}
+
+function renderPicker(
+  value: RangeStartAndEndDateTime,
+  onChange: (value: RangeStartAndEndDateTime) => void = jest.fn(),
+): void {
+  render(<TelemetryTimeRangePicker value={value} onChange={onChange} />);
+}
+
+function getTrigger(): HTMLElement {
+  return screen.getByTestId(BUTTON_TEST_ID);
+}
+
+function getDropdown(): HTMLElement {
+  return screen.getByTestId(DROPDOWN_TEST_ID);
+}
+
+function openDropdown(): HTMLElement {
+  fireEvent.click(getTrigger());
+  return getDropdown();
+}
+
+function hasClass(element: HTMLElement, className: string): boolean {
+  return element.classList.contains(className);
+}
+
+describe("TelemetryTimeRangePicker", () => {
+  beforeEach(() => {
+    setViewportWidth(1440);
+    stubTriggerRect(64, 180);
+  });
+
+  afterEach(() => {
+    cleanup();
+    Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+    setViewportWidth(ORIGINAL_INNER_WIDTH);
+  });
+
+  describe("dropdown alignment", () => {
+    test("opens rightwards when the trigger sits at the left of the metrics toolbar", () => {
+      /*
+       * Regression: the panel was hard-coded to `right-0`, so on the metric
+       * explorer — where the time range button is the first control in the
+       * toolbar — the 288px panel rendered off the left edge of the content
+       * area and on top of the app sidebar.
+       */
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+
+      const dropdown: HTMLElement = openDropdown();
+
+      expect(hasClass(dropdown, "left-0")).toBe(true);
+      expect(hasClass(dropdown, "right-0")).toBe(false);
+      expect(dropdown.getAttribute("data-align")).toBe("left");
+    });
+
+    test("stays left aligned for a trigger flush against x=0", () => {
+      stubTriggerRect(0, 116);
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+
+      expect(hasClass(openDropdown(), "left-0")).toBe(true);
+    });
+
+    test("stays left aligned for a trigger in the middle of a wide toolbar", () => {
+      stubTriggerRect(500, 616);
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+
+      expect(hasClass(openDropdown(), "left-0")).toBe(true);
+    });
+
+    test("flips to right alignment when the trigger is near the right edge", () => {
+      stubTriggerRect(1310, 1430);
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+
+      const dropdown: HTMLElement = openDropdown();
+
+      expect(hasClass(dropdown, "right-0")).toBe(true);
+      expect(hasClass(dropdown, "left-0")).toBe(false);
+      expect(dropdown.getAttribute("data-align")).toBe("right");
+    });
+
+    test("never emits both positioning classes at once", () => {
+      stubTriggerRect(1310, 1430);
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+
+      const dropdown: HTMLElement = openDropdown();
+
+      expect(
+        hasClass(dropdown, "left-0") && hasClass(dropdown, "right-0"),
+      ).toBe(false);
+    });
+
+    test("stays left aligned on a narrow mobile viewport", () => {
+      setViewportWidth(375);
+      stubTriggerRect(12, 128);
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+
+      expect(hasClass(openDropdown(), "left-0")).toBe(true);
+    });
+
+    test("re-measures alignment when the window is resized", () => {
+      stubTriggerRect(1000, 1116);
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+
+      expect(hasClass(openDropdown(), "left-0")).toBe(true);
+
+      // Shrink the window so the same trigger no longer has room to its right.
+      act(() => {
+        setViewportWidth(1200);
+        window.dispatchEvent(new Event("resize"));
+      });
+
+      expect(hasClass(getDropdown(), "right-0")).toBe(true);
+    });
+
+    test("keeps the panel on screen when neither edge fits the viewport", () => {
+      /*
+       * Viewport narrower than the 288px panel: left alignment clips by 60px,
+       * right alignment would clip by 116px, so left is the lesser evil.
+       */
+      setViewportWidth(300);
+      stubTriggerRect(64, 180);
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+
+      const dropdown: HTMLElement = openDropdown();
+
+      expect(hasClass(dropdown, "left-0")).toBe(true);
+      expect(hasClass(dropdown, "max-w-[calc(100vw-1rem)]")).toBe(true);
+    });
+
+    test("re-measures alignment when scrolling moves the trigger sideways", () => {
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+
+      expect(hasClass(openDropdown(), "left-0")).toBe(true);
+
+      act(() => {
+        stubTriggerRect(1310, 1430);
+        window.dispatchEvent(new Event("scroll"));
+      });
+
+      expect(hasClass(getDropdown(), "right-0")).toBe(true);
+    });
+
+    test("re-evaluates alignment each time the dropdown is reopened", () => {
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+
+      expect(hasClass(openDropdown(), "left-0")).toBe(true);
+
+      fireEvent.click(getTrigger());
+      expect(screen.queryByTestId(DROPDOWN_TEST_ID)).toBeNull();
+
+      stubTriggerRect(1310, 1430);
+      expect(hasClass(openDropdown(), "right-0")).toBe(true);
+    });
+
+    test("stops listening for layout changes once closed", () => {
+      const removedEvents: Array<string> = [];
+      const originalRemoveEventListener: typeof window.removeEventListener =
+        window.removeEventListener.bind(window);
+
+      window.removeEventListener = ((
+        type: string,
+        listener: EventListenerOrEventListenerObject,
+        options?: boolean | EventListenerOptions,
+      ): void => {
+        removedEvents.push(type);
+        originalRemoveEventListener(type, listener, options);
+      }) as typeof window.removeEventListener;
+
+      try {
+        renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+        openDropdown();
+        fireEvent.click(getTrigger());
+
+        expect(removedEvents).toContain("resize");
+        expect(removedEvents).toContain("scroll");
+      } finally {
+        window.removeEventListener = originalRemoveEventListener;
+      }
+    });
+
+    test("ignores layout events once the dropdown is closed", () => {
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+      openDropdown();
+      fireEvent.click(getTrigger());
+
+      /*
+       * Firing a resize after close must not resurrect the panel or throw
+       * because a listener outlived the element it measured.
+       */
+      act(() => {
+        setViewportWidth(300);
+        window.dispatchEvent(new Event("resize"));
+      });
+
+      expect(screen.queryByTestId(DROPDOWN_TEST_ID)).toBeNull();
+    });
+
+    test("keeps the panel anchored below the trigger inside a relative container", () => {
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+
+      const dropdown: HTMLElement = openDropdown();
+
+      expect(hasClass(dropdown, "absolute")).toBe(true);
+      expect(hasClass(dropdown, "top-full")).toBe(true);
+      expect(
+        dropdown.parentElement?.classList.contains("relative") ?? false,
+      ).toBe(true);
+    });
+
+    test("caps the panel width so it cannot exceed the viewport", () => {
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+
+      expect(hasClass(openDropdown(), "max-w-[calc(100vw-1rem)]")).toBe(true);
+    });
+
+    test("exports a width constant that matches the rendered w-72 panel", () => {
+      expect(TIME_RANGE_DROPDOWN_WIDTH_IN_PX).toBe(288);
+
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+      expect(hasClass(openDropdown(), "w-72")).toBe(true);
+    });
+  });
+
+  describe("open and close behaviour", () => {
+    test("is closed until the trigger is clicked", () => {
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+
+      expect(screen.queryByTestId(DROPDOWN_TEST_ID)).toBeNull();
+      expect(getTrigger().getAttribute("aria-expanded")).toBe("false");
+    });
+
+    test("marks the trigger as expanded while open", () => {
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+      openDropdown();
+
+      expect(getTrigger().getAttribute("aria-expanded")).toBe("true");
+    });
+
+    test("closes when clicking outside the picker", () => {
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+      openDropdown();
+
+      fireEvent.mouseDown(document.body);
+
+      expect(screen.queryByTestId(DROPDOWN_TEST_ID)).toBeNull();
+    });
+
+    test("stays open when clicking inside the dropdown", () => {
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+      const dropdown: HTMLElement = openDropdown();
+
+      fireEvent.mouseDown(dropdown);
+
+      expect(screen.queryByTestId(DROPDOWN_TEST_ID)).not.toBeNull();
+    });
+  });
+
+  describe("range selection", () => {
+    test("shows the label of the currently selected preset", () => {
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+
+      expect(getTrigger().textContent).toContain("Past 1 Hour");
+    });
+
+    test("emits the picked preset and closes the dropdown", () => {
+      const onChange: (value: RangeStartAndEndDateTime) => void = jest.fn();
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR }, onChange);
+      openDropdown();
+
+      fireEvent.click(screen.getByText("Past 30 Minutes"));
+
+      expect(onChange).toHaveBeenCalledWith({
+        range: TimeRange.PAST_THIRTY_MINS,
+      });
+      expect(screen.queryByTestId(DROPDOWN_TEST_ID)).toBeNull();
+    });
+
+    test("lists every preset option plus the custom entry", () => {
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+      const dropdown: HTMLElement = openDropdown();
+
+      const optionLabels: Array<string> = Array.from(
+        dropdown.querySelectorAll("button"),
+      ).map((button: HTMLButtonElement): string => {
+        return (button.textContent || "").trim();
+      });
+
+      const expectedLabels: Array<string> = [
+        "Past 5 Minutes",
+        "Past 15 Minutes",
+        "Past 30 Minutes",
+        "Past 1 Hour",
+        "Past 2 Hours",
+        "Past 3 Hours",
+        "Past 1 Day",
+        "Past 2 Days",
+        "Past 1 Week",
+        "Past 2 Weeks",
+        "Past 1 Month",
+        "Past 3 Months",
+        "Custom Range...",
+      ];
+
+      expect(optionLabels).toEqual(expectedLabels);
+    });
+
+    test("renders the custom range editor when a custom range is active", () => {
+      renderPicker({
+        range: TimeRange.CUSTOM,
+        startAndEndDate: new InBetween<Date>(
+          new Date("2024-01-01T00:00:00.000Z"),
+          new Date("2024-01-02T00:00:00.000Z"),
+        ),
+      });
+
+      const dropdown: HTMLElement = openDropdown();
+
+      // The custom editor lives in the same panel, so alignment still applies.
+      expect(hasClass(dropdown, "left-0")).toBe(true);
+      expect(dropdown.querySelectorAll("input").length).toBeGreaterThan(0);
+    });
+
+    test("keeps the taller custom panel inside the viewport near the right edge", () => {
+      stubTriggerRect(1310, 1430);
+
+      renderPicker({
+        range: TimeRange.CUSTOM,
+        startAndEndDate: new InBetween<Date>(
+          new Date("2024-01-01T00:00:00.000Z"),
+          new Date("2024-01-02T00:00:00.000Z"),
+        ),
+      });
+
+      expect(hasClass(openDropdown(), "right-0")).toBe(true);
+    });
+  });
+});

package/Tests/UI/Utils/DropdownAlignment.test.ts

@@ -0,0 +1,306 @@
+import {
+  DEFAULT_DROPDOWN_VIEWPORT_MARGIN_IN_PX,
+  DropdownHorizontalAlignment,
+  getDropdownAlignmentClassName,
+  getDropdownHorizontalAlignment,
+} from "../../../UI/Utils/DropdownAlignment";
+import { describe, expect, test } from "@jest/globals";
+
+// Tailwind `w-72`, the width every telemetry time range dropdown is styled to.
+const DROPDOWN_WIDTH: number = 288;
+
+describe("getDropdownHorizontalAlignment", () => {
+  describe("triggers with room to the right", () => {
+    test("left aligns a trigger at the far left of a desktop viewport", () => {
+      /*
+       * This is the metric explorer toolbar case: the time range button is the
+       * first control in the toolbar, so the popup must open rightwards.
+       */
+      expect(
+        getDropdownHorizontalAlignment({
+          anchorLeft: 64,
+          anchorRight: 180,
+          dropdownWidth: DROPDOWN_WIDTH,
+          viewportWidth: 1440,
+        }),
+      ).toBe(DropdownHorizontalAlignment.Left);
+    });
+
+    test("left aligns when the trigger starts at x=0", () => {
+      expect(
+        getDropdownHorizontalAlignment({
+          anchorLeft: 0,
+          anchorRight: 116,
+          dropdownWidth: DROPDOWN_WIDTH,
+          viewportWidth: 1024,
+        }),
+      ).toBe(DropdownHorizontalAlignment.Left);
+    });
+
+    test("left aligns a mid-page trigger that still fits", () => {
+      expect(
+        getDropdownHorizontalAlignment({
+          anchorLeft: 500,
+          anchorRight: 616,
+          dropdownWidth: DROPDOWN_WIDTH,
+          viewportWidth: 1440,
+        }),
+      ).toBe(DropdownHorizontalAlignment.Left);
+    });
+
+    test("left aligns when the popup lands exactly on the right gutter", () => {
+      const viewportWidth: number = 1000;
+      const anchorLeft: number =
+        viewportWidth - DEFAULT_DROPDOWN_VIEWPORT_MARGIN_IN_PX - DROPDOWN_WIDTH;
+
+      expect(
+        getDropdownHorizontalAlignment({
+          anchorLeft: anchorLeft,
+          anchorRight: anchorLeft + 116,
+          dropdownWidth: DROPDOWN_WIDTH,
+          viewportWidth: viewportWidth,
+        }),
+      ).toBe(DropdownHorizontalAlignment.Left);
+    });
+  });
+
+  describe("triggers near the right edge", () => {
+    test("flips to right alignment one pixel past the right gutter", () => {
+      const viewportWidth: number = 1000;
+      const anchorLeft: number =
+        viewportWidth -
+        DEFAULT_DROPDOWN_VIEWPORT_MARGIN_IN_PX -
+        DROPDOWN_WIDTH +
+        1;
+
+      expect(
+        getDropdownHorizontalAlignment({
+          anchorLeft: anchorLeft,
+          anchorRight: viewportWidth - 20,
+          dropdownWidth: DROPDOWN_WIDTH,
+          viewportWidth: viewportWidth,
+        }),
+      ).toBe(DropdownHorizontalAlignment.Right);
+    });
+
+    test("right aligns a trigger flush against the right edge", () => {
+      expect(
+        getDropdownHorizontalAlignment({
+          anchorLeft: 1300,
+          anchorRight: 1436,
+          dropdownWidth: DROPDOWN_WIDTH,
+          viewportWidth: 1440,
+        }),
+      ).toBe(DropdownHorizontalAlignment.Right);
+    });
+  });
+
+  describe("viewports smaller than the popup", () => {
+    test("prefers the edge that clips least when neither side fits", () => {
+      /*
+       * A 200px viewport cannot contain a 288px popup. Left alignment clips by
+       * 288 + 10 - 192 = 106; right alignment clips by 8 - (150 - 288) = 146.
+       * Left wins.
+       */
+      expect(
+        getDropdownHorizontalAlignment({
+          anchorLeft: 10,
+          anchorRight: 150,
+          dropdownWidth: DROPDOWN_WIDTH,
+          viewportWidth: 200,
+        }),
+      ).toBe(DropdownHorizontalAlignment.Left);
+    });
+
+    test("picks right alignment when that is the smaller overflow", () => {
+      /*
+       * Left alignment clips by 180 + 288 - 292 = 176; right alignment clips by
+       * 8 - (290 - 288) = 6. Right wins.
+       */
+      expect(
+        getDropdownHorizontalAlignment({
+          anchorLeft: 180,
+          anchorRight: 290,
+          dropdownWidth: DROPDOWN_WIDTH,
+          viewportWidth: 300,
+        }),
+      ).toBe(DropdownHorizontalAlignment.Right);
+    });
+
+    test("prefers left alignment when both edges clip by the same amount", () => {
+      /*
+       * Anchor built so both edges clip by exactly `overflow` pixels:
+       * left overflow  = 14 + 288 - (300 - 8)  = 10
+       * right overflow = 8 - (286 - 288)       = 10
+       */
+      const viewportWidth: number = 300;
+      const margin: number = 8;
+      const width: number = 288;
+      const overflow: number = 10;
+      const anchorLeft: number = viewportWidth - margin - width + overflow;
+      const anchorRight: number = width + margin - overflow;
+
+      expect(
+        getDropdownHorizontalAlignment({
+          anchorLeft: anchorLeft,
+          anchorRight: anchorRight,
+          dropdownWidth: width,
+          viewportWidth: viewportWidth,
+          viewportMargin: margin,
+        }),
+      ).toBe(DropdownHorizontalAlignment.Left);
+    });
+  });
+
+  describe("viewport margin", () => {
+    test("honours a custom margin when deciding to flip", () => {
+      const viewportWidth: number = 1000;
+      const anchorLeft: number = 700;
+
+      // With no gutter the popup fits: 700 + 288 = 988 <= 1000.
+      expect(
+        getDropdownHorizontalAlignment({
+          anchorLeft: anchorLeft,
+          anchorRight: 820,
+          dropdownWidth: DROPDOWN_WIDTH,
+          viewportWidth: viewportWidth,
+          viewportMargin: 0,
+        }),
+      ).toBe(DropdownHorizontalAlignment.Left);
+
+      // With a 40px gutter it no longer fits: 988 > 960.
+      expect(
+        getDropdownHorizontalAlignment({
+          anchorLeft: anchorLeft,
+          anchorRight: 820,
+          dropdownWidth: DROPDOWN_WIDTH,
+          viewportWidth: viewportWidth,
+          viewportMargin: 40,
+        }),
+      ).toBe(DropdownHorizontalAlignment.Right);
+    });
+
+    test("treats an explicit zero margin as zero, not as the default", () => {
+      const viewportWidth: number = 1000;
+      const anchorLeft: number = viewportWidth - DROPDOWN_WIDTH;
+
+      expect(
+        getDropdownHorizontalAlignment({
+          anchorLeft: anchorLeft,
+          anchorRight: viewportWidth,
+          dropdownWidth: DROPDOWN_WIDTH,
+          viewportWidth: viewportWidth,
+          viewportMargin: 0,
+        }),
+      ).toBe(DropdownHorizontalAlignment.Left);
+
+      expect(
+        getDropdownHorizontalAlignment({
+          anchorLeft: anchorLeft,
+          anchorRight: viewportWidth,
+          dropdownWidth: DROPDOWN_WIDTH,
+          viewportWidth: viewportWidth,
+        }),
+      ).toBe(DropdownHorizontalAlignment.Right);
+    });
+  });
+
+  describe("unmeasurable layouts", () => {
+    test("defaults to left when the popup has no width yet", () => {
+      expect(
+        getDropdownHorizontalAlignment({
+          anchorLeft: 1400,
+          anchorRight: 1440,
+          dropdownWidth: 0,
+          viewportWidth: 1440,
+        }),
+      ).toBe(DropdownHorizontalAlignment.Left);
+    });
+
+    test("defaults to left when the viewport has no width", () => {
+      expect(
+        getDropdownHorizontalAlignment({
+          anchorLeft: 0,
+          anchorRight: 0,
+          dropdownWidth: DROPDOWN_WIDTH,
+          viewportWidth: 0,
+        }),
+      ).toBe(DropdownHorizontalAlignment.Left);
+    });
+
+    test("defaults to left for non-finite measurements", () => {
+      expect(
+        getDropdownHorizontalAlignment({
+          anchorLeft: 0,
+          anchorRight: 100,
+          dropdownWidth: Number.NaN,
+          viewportWidth: 1440,
+        }),
+      ).toBe(DropdownHorizontalAlignment.Left);
+
+      expect(
+        getDropdownHorizontalAlignment({
+          anchorLeft: 0,
+          anchorRight: 100,
+          dropdownWidth: DROPDOWN_WIDTH,
+          viewportWidth: Number.POSITIVE_INFINITY,
+        }),
+      ).toBe(DropdownHorizontalAlignment.Left);
+    });
+  });
+
+  describe("common breakpoints", () => {
+    /*
+     * The picker is the first control in the toolbar on every telemetry page,
+     * so it must stay left aligned no matter how narrow the screen gets.
+     */
+    const leftmostAnchorCases: Array<{ name: string; viewportWidth: number }> =
+      [
+        { name: "mobile", viewportWidth: 375 },
+        { name: "tablet", viewportWidth: 768 },
+        { name: "laptop", viewportWidth: 1280 },
+        { name: "desktop", viewportWidth: 1920 },
+      ];
+
+    test.each(leftmostAnchorCases)(
+      "left aligns a leftmost toolbar trigger on $name",
+      (testCase: { name: string; viewportWidth: number }) => {
+        expect(
+          getDropdownHorizontalAlignment({
+            anchorLeft: 16,
+            anchorRight: 132,
+            dropdownWidth: DROPDOWN_WIDTH,
+            viewportWidth: testCase.viewportWidth,
+          }),
+        ).toBe(DropdownHorizontalAlignment.Left);
+      },
+    );
+  });
+});
+
+describe("getDropdownAlignmentClassName", () => {
+  test("maps left alignment to the Tailwind left-0 class", () => {
+    expect(
+      getDropdownAlignmentClassName(DropdownHorizontalAlignment.Left),
+    ).toBe("left-0");
+  });
+
+  test("maps right alignment to the Tailwind right-0 class", () => {
+    expect(
+      getDropdownAlignmentClassName(DropdownHorizontalAlignment.Right),
+    ).toBe("right-0");
+  });
+
+  test("never returns both positioning classes at once", () => {
+    const classNames: Array<string> = [
+      getDropdownAlignmentClassName(DropdownHorizontalAlignment.Left),
+      getDropdownAlignmentClassName(DropdownHorizontalAlignment.Right),
+    ];
+
+    for (const className of classNames) {
+      expect(
+        className.includes("left-0") && className.includes("right-0"),
+      ).toBe(false);
+    }
+  });
+});