@internetarchive/collection-browser 4.5.1 → 4.6.0

package/test/tiles/hover/hover-pane-controller.test.ts

@@ -1,4 +1,4 @@
-import { expect, fixture } from '@open-wc/testing';
+import { expect, fixture, waitUntil } from '@open-wc/testing';
 import { html, LitElement, nothing, TemplateResult } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import {
@@ -182,6 +182,42 @@ describe('Hover Pane Controller', () => {
     );
   });
 
+  it('should not call showPopover when the hover pane is already open', async () => {
+    const host = await fixture<HostElement>(
+      html`<host-element
+        .controllerOptions=${{ showDelay: 0, hideDelay: 0 }}
+      ></host-element>`,
+    );
+
+    // Show the pane and confirm the :popover-open state
+    host.dispatchEvent(new MouseEvent('mousemove'));
+    await new Promise(resolve => {
+      setTimeout(resolve, 0);
+    });
+    await host.updateComplete;
+
+    const pane = host.getHoverPane() as TileHoverPane;
+    expect(pane?.matches(':popover-open')).to.be.true;
+
+    const showPopoverSpy = sinon.spy(pane, 'showPopover');
+
+    // Simulate the condition where the hover pane has finished its fade out
+    // but its popover has not yet been hidden.
+    (host.controller as unknown as { hoverPaneState: string }).hoverPaneState =
+      'hidden';
+
+    // Subsequent mousemove tries to re-show the hover pane...
+    host.dispatchEvent(new MouseEvent('mousemove'));
+    await new Promise(resolve => {
+      setTimeout(resolve, 10);
+    });
+    await host.updateComplete;
+
+    // ...but should NOT call showPopover() again
+    expect(showPopoverSpy.called).to.be.false;
+    expect(host.getHoverPane()?.matches(':popover-open')).to.be.true;
+  });
+
   it('should gracefully handle undefined hover pane from host element', async () => {
     const host = await fixture<HostElement>(
       html`<host-element
@@ -367,12 +403,10 @@ describe('Hover Pane Controller', () => {
       const getBoundingClientRectSpy = sinon.spy(host, 'getBoundingClientRect');
 
       host.dispatchEvent(new FocusEvent('focus'));
-      // Need to wait a tick for the event handlers to run
-      await new Promise(resolve => {
-        setTimeout(resolve, 0);
-      });
-
-      expect(getBoundingClientRectSpy.called).to.be.true;
+      await waitUntil(
+        () => getBoundingClientRectSpy.called,
+        'host getBoundingClientRect was never consulted for positioning',
+      );
     });
 
     it('should show hover pane on focus', async () => {
@@ -383,12 +417,15 @@ describe('Hover Pane Controller', () => {
       );
 
       host.dispatchEvent(new FocusEvent('focus'));
-      // Need to wait a tick for the event handlers to run
-      await new Promise(resolve => {
-        setTimeout(resolve, 0);
-      });
 
-      expect(host.controller?.getTemplate()).not.to.equal(nothing); // Is a TemplateResult
+      // The controller template becomes available synchronously with the focus event
+      expect(host.controller?.getTemplate()).not.to.equal(nothing);
+
+      // The pane element then renders and opens as a popover
+      await waitUntil(
+        () => host.getHoverPane()?.matches(':popover-open') ?? false,
+        'Hover pane never opened as a popover',
+      );
     });
 
     it('should hide hover pane on blur', async () => {
@@ -399,20 +436,47 @@ describe('Hover Pane Controller', () => {
       );
 
       host.dispatchEvent(new FocusEvent('focus'));
-      // Need to wait a tick for the event handlers to run
-      await new Promise(resolve => {
-        setTimeout(resolve, 0);
-      });
-
-      expect(host.controller?.getTemplate()).not.to.equal(nothing); // Is a TemplateResult
+      await waitUntil(
+        () => host.getHoverPane()?.matches(':popover-open') ?? false,
+        'Hover pane never opened as a popover',
+      );
 
       host.dispatchEvent(new FocusEvent('blur'));
-      // Need to wait for the fade out transition
-      await new Promise(resolve => {
-        setTimeout(resolve, 150);
-      });
+      await waitUntil(
+        () => !host.getHoverPane(),
+        'Hover pane was not removed after blur',
+      );
+    });
+  });
 
-      expect(host.controller?.getTemplate()).to.equal(nothing);
+  describe('frame-starved environments', () => {
+    let realRaf: typeof window.requestAnimationFrame;
+
+    before(() => {
+      realRaf = window.requestAnimationFrame;
+      // Simulate an environment that never produces rendering frames:
+      // callbacks are accepted but never invoked.
+      window.requestAnimationFrame = () => 0;
+    });
+
+    after(() => {
+      window.requestAnimationFrame = realRaf;
+    });
+
+    it('should position the hover pane even when animation frames never fire', async () => {
+      const host = await fixture<HostElement>(
+        html`<host-element
+          .controllerOptions=${{ showDelay: 0, hideDelay: 0 }}
+        ></host-element>`,
+      );
+
+      const getBoundingClientRectSpy = sinon.spy(host, 'getBoundingClientRect');
+
+      host.dispatchEvent(new FocusEvent('focus'));
+      await waitUntil(
+        () => getBoundingClientRectSpy.called,
+        'host getBoundingClientRect was never consulted for positioning',
+      );
     });
   });
 });