@oneuptime/common 14.0.13 → 14.0.14

package/Tests/UI/Components/Forms/AdvancedStepsGuard.test.ts

@@ -8,6 +8,8 @@ import {
   FormFacts,
   FormFieldFacts,
   FormStepFacts,
+  MIN_SCANNED_FORMS,
+  SourceFileSystem,
   scanFormFiles,
 } from "../../../Helpers/FormStepsScan";
 
@@ -21,13 +23,26 @@ import {
  *
  * A wizard step called "Advanced" is that issue in another shape: every new
  * record has to walk through a page of options almost nobody changes. Those
- * options now go in a collapsed Advanced section (getAdvancedFormSection) at
- * the end of the step before, which a create wizard walks past and an edit
- * dialog shows folded, saying "Configured" when something in it is set.
+ * options now go in a collapsed "More fields" section (getAdvancedFormSection,
+ * called Advanced until the maintainer asked for "something better - like
+ * 'more'") at the end of the step before, which a create wizard walks past
+ * and an edit dialog shows folded, its header naming what is inside and
+ * what of it is set.
  *
  * This guard keeps it that way: no form host may declare a step titled
- * Advanced (Advanced Options, Advanced Settings...) unless it is listed
- * below with the reason it stays.
+ * Advanced (Advanced Options, Advanced Settings...) or More (More fields,
+ * More settings, More options...) - the fold's old name and its new one -
+ * unless it is listed below with the reason it stays.
+ *
+ * It judges the title the step shows, not how the source spells it. The
+ * Admin Dashboard's Global LLM Providers form kept an Advanced step after
+ * the Dashboard's lost theirs, because its title was written
+ * t("pages.settings.llmProviders.stepAdvanced") - a key, which a check of
+ * the literal text never saw. The scan now reads a title through the
+ * translation call, in the English locale of the front end it is drawn in
+ * (FormStepFacts.titleTexts), through a constant or an object of copy, and
+ * through both branches of a condition; a title it still cannot read fails
+ * here too, so none can slip past again.
  */
 
 const REPOSITORY_ROOT: string = path.resolve(
@@ -42,31 +57,21 @@ const REPOSITORY_ROOT: string = path.resolve(
 
 const DASHBOARD: string = "packages/App/FeatureSet/Dashboard/src";
 
+const ADMIN_DASHBOARD: string = "packages/App/FeatureSet/AdminDashboard/src";
+
 interface ListedForm {
   file: string;
   form: string;
   reason: string;
 }
 
-const STATUS_PAGE_RESOURCE_REASON: string =
-  "The display options of a status page resource or group (current status, uptime and its precision), on a step the resource panel, bulk add and the status page monitor rules share - their own tests walk it. Left for a pass over the status page resource forms as a whole, so the four keep one layout.";
-
+/*
+ * The status page resource forms (a resource, a group, Add Multiple
+ * Monitors and the status page monitor rules) left this list when their
+ * display options were folded: StatusPageResourceFormsGuard.test.ts pins
+ * where each one keeps them now.
+ */
 export const ADVANCED_STEPS_ALLOWED: Array<ListedForm> = [
-  {
-    file: `${DASHBOARD}/Pages/StatusPages/View/MonitorRules.tsx`,
-    form: "RuleTable: Status Page > Monitor Rules",
-    reason: STATUS_PAGE_RESOURCE_REASON,
-  },
-  {
-    file: `${DASHBOARD}/Components/StatusPage/BulkAddStatusPageMonitorsModal.tsx`,
-    form: "BasicForm: Status Page > Add Multiple Monitors",
-    reason: STATUS_PAGE_RESOURCE_REASON,
-  },
-  {
-    file: `${DASHBOARD}/Pages/StatusPages/View/Resources.tsx`,
-    form: "ModelFormModal #1",
-    reason: STATUS_PAGE_RESOURCE_REASON,
-  },
   ...[
     [
       `${DASHBOARD}/Components/Workflow/CreateOAuthWorkflowVariableModal.tsx`,
@@ -90,14 +95,270 @@ function key(form: { file: string; form?: string; label?: string }): string {
   return `${form.file} :: ${form.form ?? form.label}`;
 }
 
-const ADVANCED_STEP_TITLE: RegExp = /^Advanced\b/i;
+// The fold's old name and its new one: neither is a step's.
+const ADVANCED_STEP_TITLE: RegExp = /^(?:Advanced|More)\b/i;
+
+// What a step's title can say on screen; its source text when unread.
+function titleTextsOf(step: FormStepFacts): Array<string> {
+  return step.titleTexts ?? [step.title.replace(/^["'`]|["'`]$/g, "")];
+}
+
+function isAdvancedStep(step: FormStepFacts): boolean {
+  return titleTextsOf(step).some((text: string): boolean => {
+    return ADVANCED_STEP_TITLE.test(text.trim());
+  });
+}
 
 function advancedSteps(form: FormFacts): Array<FormStepFacts> {
-  return (form.steps || []).filter((step: FormStepFacts): boolean => {
-    return ADVANCED_STEP_TITLE.test(step.title.replace(/^["'`]|["'`]$/g, ""));
+  return (form.steps || []).filter(isAdvancedStep);
+}
+
+/*
+ * The detector, on snippets: each front end's way of writing a translated
+ * title is read as the text it shows. The snippets live where their front
+ * end does, beside the English locale it reads.
+ */
+const VIRTUAL_ROOT: string = "/repo";
+
+const ADMIN_PAGE: string = `${ADMIN_DASHBOARD}/Pages/Settings/Page.tsx`;
+const ADMIN_LOCALE: string = `${ADMIN_DASHBOARD}/Locales/en.json`;
+const DASHBOARD_PAGE: string = `${DASHBOARD}/Pages/Settings/Page.tsx`;
+const DASHBOARD_LOCALE: string = `${DASHBOARD}/Locales/en.json`;
+const STATUS_PAGE_PAGE: string =
+  "packages/App/FeatureSet/StatusPage/src/Pages/Subscribe/Page.tsx";
+const STATUS_PAGE_LOCALE: string =
+  "packages/App/FeatureSet/StatusPage/src/Locales/en.json";
+
+function virtualFileSystem(files: Record<string, string>): SourceFileSystem {
+  return {
+    readFile: (filePath: string): string | null => {
+      const relative: string = path
+        .relative(VIRTUAL_ROOT, filePath)
+        .split(path.sep)
+        .join("/");
+
+      return Object.prototype.hasOwnProperty.call(files, relative)
+        ? (files[relative] as string)
+        : null;
+    },
+  };
+}
+
+// The one form on `page`, read with the other files given beside it.
+function scanPage(page: string, files: Record<string, string>): FormFacts {
+  const forms: Array<FormFacts> = scanFormFiles({
+    repositoryRoot: VIRTUAL_ROOT,
+    files: [path.join(VIRTUAL_ROOT, page)],
+    fileSystem: virtualFileSystem(files),
+  });
+
+  expect(forms).toHaveLength(1);
+
+  return forms[0]!;
+}
+
+// A ModelTable whose formSteps are `steps`, as written in source.
+function tableWithSteps(steps: Array<string>, before: string = ""): string {
+  const fieldLines: Array<string> = steps.map(
+    (_step: string, index: number): string => {
+      return `{ field: { field${index}: true }, title: "Field ${index}", stepId: "step-${index}", fieldType: FormFieldSchemaType.Text }`;
+    },
+  );
+  const stepLines: Array<string> = steps.map(
+    (title: string, index: number): string => {
+      return `{ title: ${title}, id: "step-${index}" }`;
+    },
+  );
+
+  return `${before}
+    const Page = () => {
+      const { t } = useTranslation();
+      const translator = useTranslator();
+      return <ModelTable name="Things" isCreateable={true} formSteps={[${stepLines.join(", ")}]} formFields={[${fieldLines.join(", ")}]} />;
+    };`;
+}
+
+function titleTexts(form: FormFacts): Array<Array<string> | null> {
+  return (form.steps || []).map((step: FormStepFacts): Array<string> | null => {
+    return step.titleTexts;
   });
 }
 
+describe("the step title reader", () => {
+  test("reads an Admin Dashboard t() key in the Admin Dashboard's English locale", () => {
+    const form: FormFacts = scanPage(ADMIN_PAGE, {
+      [ADMIN_PAGE]: tableWithSteps([
+        't("pages.settings.things.stepBasicInfo")',
+        't("pages.settings.things.stepAdvanced")',
+      ]),
+      [ADMIN_LOCALE]: JSON.stringify({
+        pages: {
+          settings: {
+            things: {
+              stepBasicInfo: "Basic Info",
+              stepAdvanced: "Advanced",
+            },
+          },
+        },
+      }),
+    });
+
+    expect(titleTexts(form)).toEqual([["Basic Info"], ["Advanced"]]);
+    expect(
+      advancedSteps(form).map((step: FormStepFacts): string | null => {
+        return step.id;
+      }),
+    ).toEqual(["step-1"]);
+  });
+
+  test("leaves an Admin Dashboard key its locale does not have unread, as it would be drawn as the key", () => {
+    const form: FormFacts = scanPage(ADMIN_PAGE, {
+      [ADMIN_PAGE]: tableWithSteps([
+        't("pages.settings.things.stepBasicInfo")',
+        't("pages.settings.things.stepGone")',
+      ]),
+      [ADMIN_LOCALE]: JSON.stringify({
+        pages: { settings: { things: { stepBasicInfo: "Basic Info" } } },
+      }),
+    });
+
+    expect(titleTexts(form)).toEqual([["Basic Info"], null]);
+  });
+
+  test("reads the Dashboard's English keys: translationKey, translateText, translateString and a template", () => {
+    const form: FormFacts = scanPage(DASHBOARD_PAGE, {
+      [DASHBOARD_PAGE]: tableWithSteps([
+        'translationKey("Basic Info")',
+        'translator.translateText("Advanced Options")',
+        // Not extracted into en.json yet: shown in English all the same.
+        'translateString("Advanced Settings")',
+        'translator.translateTemplate("Advanced {{kind}} Options", { kind: kindName })',
+      ]),
+      [DASHBOARD_LOCALE]: JSON.stringify({
+        "Basic Info": "Basic Info",
+        "Advanced Options": "Advanced Options",
+      }),
+    });
+
+    expect(titleTexts(form)).toEqual([
+      ["Basic Info"],
+      ["Advanced Options"],
+      ["Advanced Settings"],
+      ["Advanced {{kind}} Options"],
+    ]);
+    expect(advancedSteps(form)).toHaveLength(3);
+  });
+
+  /*
+   * The fold is called More fields now. A step of that name - or More
+   * settings, More options - is the same page of rarely changed options as
+   * an Advanced step was, so it is caught too; a title that only starts with
+   * the letters is not.
+   */
+  test("calls a step titled More one too, the fold's new name", () => {
+    const form: FormFacts = scanPage(DASHBOARD_PAGE, {
+      [DASHBOARD_PAGE]: tableWithSteps([
+        '"Basic Info"',
+        '"More fields"',
+        'translationKey("More settings")',
+        '"More Options"',
+        '"Moreover"',
+      ]),
+      [DASHBOARD_LOCALE]: JSON.stringify({ "More settings": "More settings" }),
+    });
+
+    expect(
+      advancedSteps(form).map((step: FormStepFacts): string | null => {
+        return step.id;
+      }),
+    ).toEqual(["step-1", "step-2", "step-3"]);
+  });
+
+  test("reads the status page's translate() keys in its own locale", () => {
+    const form: FormFacts = scanPage(STATUS_PAGE_PAGE, {
+      [STATUS_PAGE_PAGE]: tableWithSteps([
+        'data.translate("subscribe.steps.details")',
+        'data.translate("subscribe.steps.more")',
+      ]),
+      [STATUS_PAGE_LOCALE]: JSON.stringify({
+        subscribe: {
+          steps: { details: "Details", more: "Advanced Preferences" },
+        },
+      }),
+    });
+
+    expect(titleTexts(form)).toEqual([["Details"], ["Advanced Preferences"]]);
+    expect(advancedSteps(form)).toHaveLength(1);
+  });
+
+  test("follows a constant, an object of copy and a re-export to the text", () => {
+    const form: FormFacts = scanPage(DASHBOARD_PAGE, {
+      [DASHBOARD_PAGE]: tableWithSteps(
+        [
+          "BASIC_STEP_TITLE",
+          "StepCopy.advanced",
+          'StepCopy["details"]',
+          "StepCopy.byKind[kind]",
+          "ADVANCED_FROM_INDEX",
+          "translator.translateText(StepCopy.advanced)",
+        ],
+        `import { StepCopy } from "./StepCopy";
+         import { ADVANCED_FROM_INDEX } from "./Steps";
+         const BASIC_STEP_TITLE = "Basic Info";`,
+      ),
+      [`${DASHBOARD}/Pages/Settings/StepCopy.ts`]: `
+        export const StepCopy = {
+          advanced: translationKey("Advanced"),
+          details: "Details",
+          byKind: { [Kind.Incident]: "Which Incidents", [Kind.Alert]: "Advanced Alerts" },
+        };`,
+      [`${DASHBOARD}/Pages/Settings/Steps.ts`]: `export { ADVANCED_STEP as ADVANCED_FROM_INDEX } from "./StepTitles";`,
+      [`${DASHBOARD}/Pages/Settings/StepTitles.ts`]: `export const ADVANCED_STEP: string = "Advanced Options";`,
+    });
+
+    expect(titleTexts(form)).toEqual([
+      ["Basic Info"],
+      ["Advanced"],
+      ["Details"],
+      ["Which Incidents", "Advanced Alerts"],
+      ["Advanced Options"],
+      ["Advanced"],
+    ]);
+    expect(
+      advancedSteps(form).map((step: FormStepFacts): string | null => {
+        return step.id;
+      }),
+    ).toEqual(["step-1", "step-3", "step-4", "step-5"]);
+  });
+
+  test("reads both branches of a condition, and calls an Advanced step one when either is", () => {
+    const form: FormFacts = scanPage(ADMIN_PAGE, {
+      [ADMIN_PAGE]: tableWithSteps([
+        'isEditing ? t("pages.things.stepMore") : "Details"',
+      ]),
+      [ADMIN_LOCALE]: JSON.stringify({
+        pages: { things: { stepMore: "Advanced" } },
+      }),
+    });
+
+    expect(titleTexts(form)).toEqual([["Advanced", "Details"]]);
+    expect(advancedSteps(form)).toHaveLength(1);
+  });
+
+  test("leaves a title built at runtime unread", () => {
+    const form: FormFacts = scanPage(DASHBOARD_PAGE, {
+      [DASHBOARD_PAGE]: tableWithSteps([
+        "getStepTitle()",
+        "`${prefix} Settings`",
+        "props.stepTitle",
+        "t(someKey)",
+      ]),
+    });
+
+    expect(titleTexts(form)).toEqual([null, null, null, null]);
+  });
+});
+
 describe("rarely used options", () => {
   const files: Array<string> = listScanRoots(REPOSITORY_ROOT).flatMap(
     (root: string): Array<string> => {
@@ -111,10 +372,51 @@ describe("rarely used options", () => {
   });
 
   test("are really read", () => {
-    expect(forms.length).toBeGreaterThan(500);
+    expect(forms.length).toBeGreaterThan(MIN_SCANNED_FORMS);
+  });
+
+  /*
+   * A title the scan cannot read could say Advanced. Write it as a string,
+   * a constant or a property of a constant object of copy, or a translation
+   * call with its key written out (and in the locale).
+   */
+  test("on every step have a title the scan can read, translated ones included", () => {
+    expect(
+      forms.flatMap((form: FormFacts): Array<string> => {
+        return (form.steps || [])
+          .filter((step: FormStepFacts): boolean => {
+            return step.titleTexts === null;
+          })
+          .map((step: FormStepFacts): string => {
+            return `${form.file}:${form.line} ${form.label} - step "${step.id}" titled ${step.title}`;
+          });
+      }),
+    ).toEqual([]);
   });
 
-  test("sit in a folded Advanced section, never a wizard step of their own", () => {
+  test("on the Admin Dashboard are read in its own locale", () => {
+    const adminTitles: Array<string> = forms
+      .filter((form: FormFacts): boolean => {
+        return form.file.startsWith(`${ADMIN_DASHBOARD}/`);
+      })
+      .flatMap((form: FormFacts): Array<FormStepFacts> => {
+        return form.steps || [];
+      })
+      .filter((step: FormStepFacts): boolean => {
+        return step.title.startsWith("t(");
+      })
+      .flatMap(titleTextsOf);
+
+    // Some are written t("pages...") - and read as the English they show.
+    expect(adminTitles.length).toBeGreaterThan(0);
+    expect(
+      adminTitles.filter((text: string): boolean => {
+        return text.startsWith("pages.");
+      }),
+    ).toEqual([]);
+  });
+
+  test("sit in a folded More fields section, never a wizard step of their own", () => {
     const allowed: Set<string> = new Set<string>(
       ADVANCED_STEPS_ALLOWED.map(key),
     );
@@ -151,10 +453,13 @@ describe("rarely used options", () => {
   });
 
   /*
-   * The two wizards that had an Advanced step of their own: an LLM provider
-   * (Additional Parameters) and a dashboard data source (custom headers and
-   * per-type options). Their options are folded at the end of the step
-   * before - on the create form and on the record's own page.
+   * The wizards that had an Advanced step of their own: an LLM provider
+   * (Additional Parameters) on the Dashboard and the Admin Dashboard - where
+   * the cost per million tokens, a step of its own too when projects are
+   * billed for AI, is folded with it - a dashboard data source (custom
+   * headers and per-type options) and a status page monitor rule (what is
+   * shown beside the monitors it adds). Their options are folded at the end
+   * of the step before - on the create form and on the record's own page.
    */
   test.each([
     [
@@ -169,6 +474,12 @@ describe("rarely used options", () => {
       "provider-settings",
       ["isDefault", "additionalParams"],
     ],
+    [
+      `${ADMIN_DASHBOARD}/Pages/Settings/LlmProviders/Index.tsx`,
+      "ModelTable",
+      "provider-settings",
+      ["additionalParams", "costPerMillionTokensInUSDCents"],
+    ],
     [
       `${DASHBOARD}/Pages/Dashboards/Settings/DataSources.tsx`,
       "ModelTable",
@@ -181,6 +492,21 @@ describe("rarely used options", () => {
       "auth",
       ["additionalOptions"],
     ],
+    /*
+     * A status page monitor rule: how each monitor it adds is shown, folded
+     * on the step that says where the monitors land.
+     */
+    [
+      `${DASHBOARD}/Pages/StatusPages/View/MonitorRules.tsx`,
+      "RuleTable",
+      "group",
+      [
+        "showCurrentStatus",
+        "showUptimePercent",
+        "uptimePercentPrecision",
+        "showStatusHistoryChart",
+      ],
+    ],
   ])(
     "%s folds its options at the end of its last step",
     (file: string, host: string, stepId: string, folded: Array<string>) => {

package/Tests/UI/Components/Forms/AnchoredFieldPopupPlacement.test.tsx

@@ -0,0 +1,195 @@
+import "@testing-library/jest-dom";
+import { afterEach, describe, expect, jest, test } from "@jest/globals";
+import { act, cleanup, render, screen } from "@testing-library/react";
+import React, { FunctionComponent, ReactElement } from "react";
+import { createPortal } from "react-dom";
+import useAnchoredFieldPopup, {
+  AnchoredFieldPopup,
+  AnchoredFieldPopupPlacement,
+  shouldAnchoredPopupOpenAbove,
+} from "../../../../UI/Types/UseAnchoredFieldPopup";
+
+/*
+ * Where an anchored popup opens. Below its anchor unless it asks for above
+ * (preferredPlacement) - the note composer's template menu does, because its
+ * trigger sits at the foot of the note - and either way it moves to the
+ * other side when its own side leaves it less than a useful height (160px)
+ * and the other side has more room. Its maxHeight is the room it got, so it
+ * never runs off the screen.
+ */
+
+describe("shouldAnchoredPopupOpenAbove", () => {
+  test.each([
+    // [preferred, above, below, opens above]
+    ["below", 50, 600, false],
+    ["below", 600, 600, false],
+    ["below", 600, 400, false],
+    ["below", 600, 159, true],
+    ["below", 100, 159, false],
+    ["below", 100, 20, true],
+    ["above", 600, 50, true],
+    ["above", 160, 600, true],
+    ["above", 400, 600, true],
+    ["above", 159, 600, false],
+    ["above", 159, 100, true],
+    ["above", 20, 100, false],
+  ] as Array<[AnchoredFieldPopupPlacement, number, number, boolean]>)(
+    "prefers %s, %ipx above and %ipx below: above is %s",
+    (
+      preferredPlacement: AnchoredFieldPopupPlacement,
+      spaceAbove: number,
+      spaceBelow: number,
+      isAbove: boolean,
+    ) => {
+      expect(
+        shouldAnchoredPopupOpenAbove({
+          preferredPlacement,
+          spaceAbove,
+          spaceBelow,
+        }),
+      ).toBe(isAbove);
+    },
+  );
+
+  test("with no room either way it stays on the side it prefers", () => {
+    expect(
+      shouldAnchoredPopupOpenAbove({
+        preferredPlacement: "below",
+        spaceAbove: 0,
+        spaceBelow: 0,
+      }),
+    ).toBe(false);
+    expect(
+      shouldAnchoredPopupOpenAbove({
+        preferredPlacement: "above",
+        spaceAbove: 0,
+        spaceBelow: 0,
+      }),
+    ).toBe(true);
+  });
+});
+
+interface HarnessProps {
+  preferredPlacement?: AnchoredFieldPopupPlacement | undefined;
+}
+
+const Harness: FunctionComponent<HarnessProps> = (
+  props: HarnessProps,
+): ReactElement => {
+  const popup: AnchoredFieldPopup = useAnchoredFieldPopup({
+    popupWidth: 320,
+    popupMaxHeight: 420,
+    preferredPlacement: props.preferredPlacement,
+  });
+
+  return (
+    <div>
+      <div ref={popup.anchorRef}>
+        <button
+          type="button"
+          onClick={() => {
+            popup.togglePopup();
+          }}
+        >
+          Open
+        </button>
+      </div>
+      {popup.isPopupOpen &&
+        popup.portalTarget &&
+        createPortal(
+          <div
+            ref={popup.popupRef}
+            data-testid="popup"
+            data-top={String(popup.popupPosition?.top)}
+            data-bottom={String(popup.popupPosition?.bottom)}
+            data-max-height={String(popup.popupPosition?.maxHeight)}
+          />,
+          popup.portalTarget,
+        )}
+    </div>
+  );
+};
+
+function placeAnchorAt(top: number, height: number = 32): void {
+  jest
+    .spyOn(HTMLElement.prototype, "getBoundingClientRect")
+    .mockImplementation((): DOMRect => {
+      return {
+        top,
+        bottom: top + height,
+        left: 40,
+        right: 140,
+        width: 100,
+        height,
+        x: 40,
+        y: top,
+        toJSON: () => {
+          return {};
+        },
+      } as DOMRect;
+    });
+}
+
+function open(): HTMLElement {
+  act(() => {
+    screen.getByRole("button", { name: "Open" }).click();
+  });
+  return screen.getByTestId("popup");
+}
+
+afterEach(() => {
+  cleanup();
+  jest.restoreAllMocks();
+});
+
+describe("useAnchoredFieldPopup placement", () => {
+  // jsdom's window is 1024x768.
+
+  test("opens below by default when there is room below", () => {
+    placeAnchorAt(100);
+    render(<Harness />);
+    const popup: HTMLElement = open();
+
+    expect(popup).toHaveAttribute("data-top", String(100 + 32 + 4));
+    expect(popup).toHaveAttribute("data-bottom", "undefined");
+    expect(popup).toHaveAttribute("data-max-height", "420");
+  });
+
+  test("a popup that prefers above opens above when there is room above", () => {
+    placeAnchorAt(600);
+    render(<Harness preferredPlacement="above" />);
+    const popup: HTMLElement = open();
+
+    expect(popup).toHaveAttribute("data-top", "undefined");
+    // Measured from the bottom of the window, up to just above the anchor.
+    expect(popup).toHaveAttribute("data-bottom", String(768 - 600 + 4));
+    expect(popup).toHaveAttribute("data-max-height", "420");
+  });
+
+  test("a popup that prefers above is clamped to the room above it", () => {
+    placeAnchorAt(300);
+    render(<Harness preferredPlacement="above" />);
+    const popup: HTMLElement = open();
+
+    expect(popup).toHaveAttribute("data-bottom", String(768 - 300 + 4));
+    expect(popup).toHaveAttribute("data-max-height", String(300 - 4 - 8));
+  });
+
+  test("a popup that prefers above opens below when above is too short and below is roomier", () => {
+    placeAnchorAt(60);
+    render(<Harness preferredPlacement="above" />);
+    const popup: HTMLElement = open();
+
+    expect(popup).toHaveAttribute("data-top", String(60 + 32 + 4));
+    expect(popup).toHaveAttribute("data-bottom", "undefined");
+  });
+
+  test("a popup that prefers below still flips above at the foot of the window", () => {
+    placeAnchorAt(700);
+    render(<Harness />);
+    const popup: HTMLElement = open();
+
+    expect(popup).toHaveAttribute("data-top", "undefined");
+    expect(popup).toHaveAttribute("data-bottom", String(768 - 700 + 4));
+  });
+});