fix: Keep the notification popup visible / centered (#2702)

- Closes: #2693
2026-08-22 08:36:42 -07:00
parent 2f74889bcb
commit 0aebf3c484
10 changed files with 498 additions and 9 deletions
@@ -0,0 +1,138 @@
+import { describe, expect, it } from 'vitest';
+
+import { deepQuery } from '../../browser/dom';
+import { MountedCardFactory, type MountedCard } from '../../browser/mounted-card';
+import {
+  createGenericCameraHASS,
+  createStillImageCardConfig,
+} from '../../browser/test-utils';
+
+const generateNotification = (card: MountedCard): void => {
+  card.card.dispatchEvent(
+    new CustomEvent('ll-custom', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        action: 'fire-dom-event',
+        advanced_camera_card_action: 'notification',
+        notification: {
+          heading: { text: 'Heading', icon: 'mdi:information' },
+        },
+      },
+    }),
+  );
+};
+
+const isWithinViewport = (rect: DOMRect): boolean =>
+  rect.height > 0 && rect.top >= 0 && rect.bottom <= window.innerHeight;
+
+// The `.notification` box inside the popup, but only once it is within the
+// viewport, so a test can wait for the placement it asserts on.
+const findVisibleNotification = (card: MountedCard): Element | null => {
+  const notification = deepQuery(card.card, 'advanced-camera-card-notification');
+  const box = notification ? deepQuery(notification, '.notification') : null;
+  return box && isWithinViewport(box.getBoundingClientRect()) ? box : null;
+};
+
+describe('AdvancedCameraCardNotification', () => {
+  it('should place the popup within the viewport on a card taller than it', async () => {
+    const card = await MountedCardFactory.createFromSource(
+      createStillImageCardConfig({
+        dimensions: { height: `${window.innerHeight * 3}px` },
+      }),
+      createGenericCameraHASS(),
+    );
+
+    generateNotification(card);
+
+    const box = await card.waitForRender(
+      () => findVisibleNotification(card),
+      'notification within the viewport',
+    );
+
+    expect(card.card.getBoundingClientRect().bottom).toBeGreaterThan(window.innerHeight);
+    expect(isWithinViewport(box.getBoundingClientRect())).toBe(true);
+  });
+
+  it('should center the popup within the visible part of the card', async () => {
+    const card = await MountedCardFactory.createFromSource(
+      createStillImageCardConfig({
+        dimensions: { height: `${window.innerHeight * 3}px` },
+      }),
+      createGenericCameraHASS(),
+    );
+
+    generateNotification(card);
+
+    const box = await card.waitForRender(
+      () => findVisibleNotification(card),
+      'notification within the viewport',
+    );
+
+    // The pop-in animation translates the popup while it runs; measure only
+    // once every animation on the popup has finished.
+    await Promise.all(box.getAnimations().map((animation) => animation.finished));
+
+    // The visible band runs from the card's top edge to the viewport bottom,
+    // and the popup's center should sit at the band's center.
+    const bandTop = card.card.getBoundingClientRect().top;
+    const bandCenter = (bandTop + window.innerHeight) / 2;
+    const rect = box.getBoundingClientRect();
+    const popupCenter = (rect.top + rect.bottom) / 2;
+    expect(Math.abs(popupCenter - bandCenter)).toBeLessThanOrEqual(2);
+  });
+
+  it('should not shrink the popup below its close control', async () => {
+    const card = await MountedCardFactory.createFromSource(
+      createStillImageCardConfig({
+        dimensions: { height: `${window.innerHeight}px` },
+      }),
+      createGenericCameraHASS(),
+      // Leave a sliver of the card on screen.
+      { position: { top: `${window.innerHeight}px` } },
+    );
+
+    generateNotification(card);
+
+    // Bring 20 pixels of the card's top edge into view at the bottom of the
+    // viewport: far less room than the popup's minimum height.
+    window.scrollTo(0, 20);
+
+    await card.waitForRender(() => {
+      const notification = deepQuery(card.card, 'advanced-camera-card-notification');
+      const box = notification ? deepQuery(notification, '.notification') : null;
+      const rect = box?.getBoundingClientRect();
+      return rect &&
+        rect.height >= 48 &&
+        rect.top < window.innerHeight &&
+        rect.bottom > 0
+        ? box
+        : null;
+    }, 'a popup no smaller than its close control');
+  });
+
+  it('should keep the popup within the viewport while scrolling', async () => {
+    const card = await MountedCardFactory.createFromSource(
+      createStillImageCardConfig({
+        dimensions: { height: `${window.innerHeight * 3}px` },
+      }),
+      createGenericCameraHASS(),
+    );
+
+    generateNotification(card);
+    await card.waitForRender(
+      () => findVisibleNotification(card),
+      'notification within the viewport',
+    );
+
+    // Scroll the middle of the card into view, putting both its top and bottom
+    // edges outside the viewport.
+    window.scrollTo(0, window.innerHeight);
+
+    const box = await card.waitForRender(
+      () => findVisibleNotification(card),
+      'notification within the viewport after scrolling',
+    );
+    expect(isWithinViewport(box.getBoundingClientRect())).toBe(true);
+  });
+});