@internetarchive/collection-browser 4.5.1 → 4.6.0

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/test/tiles/hover/hover-pane-controller.test.ts

@@ -0,0 +1,482 @@
+import { expect, fixture, waitUntil } from '@open-wc/testing';
+import { html, LitElement, nothing, TemplateResult } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import {
+  HoverPaneController,
+  HoverPaneControllerInterface,
+  HoverPaneControllerOptions,
+  HoverPaneProperties,
+  HoverPaneProviderInterface,
+} from '../../../src/tiles/hover/hover-pane-controller';
+import type { TileHoverPane } from '../../../src/tiles/hover/tile-hover-pane';
+import { TileModel } from '../../../src/models';
+import sinon from 'sinon';
+
+@customElement('host-element')
+class HostElement extends LitElement implements HoverPaneProviderInterface {
+  @property({ type: Object }) controllerOptions?: HoverPaneControllerOptions;
+
+  @property({ type: Boolean }) suppressHoverPane: boolean = false;
+
+  @query('tile-hover-pane') hoverPane?: TileHoverPane;
+
+  controller?: HoverPaneControllerInterface;
+
+  render(): TemplateResult {
+    return html` ${this.controller?.getTemplate()} `;
+  }
+
+  protected firstUpdated(): void {
+    this.controller = new HoverPaneController(this, this.controllerOptions);
+  }
+
+  acquireFocus(): void {}
+
+  releaseFocus(): void {}
+
+  getHoverPane(): HTMLElement | undefined {
+    return this.suppressHoverPane ? undefined : this.hoverPane;
+  }
+
+  getHoverPaneProps(): HoverPaneProperties {
+    const tileModel = new TileModel({});
+    tileModel.checked = false;
+    tileModel.collectionFilesCount = 1;
+    tileModel.collections = ['foo', 'bar'];
+    tileModel.collectionSize = 1;
+    tileModel.commentCount = 1;
+    tileModel.contentWarning = false;
+    tileModel.creators = ['foo', 'bar'];
+    tileModel.favCount = 1;
+    tileModel.identifier = 'foo';
+    tileModel.itemCount = 1;
+    tileModel.loginRequired = false;
+    tileModel.mediatype = 'data';
+    tileModel.subjects = ['foo', 'bar'];
+    tileModel.title = 'foo';
+    tileModel.viewCount = 1;
+
+    return {
+      model: tileModel,
+      loggedIn: false,
+      suppressBlurring: false,
+      sortParam: null,
+    };
+  }
+}
+
+describe('Hover Pane Controller', () => {
+  let oldMatchMedia: typeof window.matchMedia;
+  let oldOnTouchStart: typeof window.ontouchstart;
+
+  before(() => {
+    oldMatchMedia = window.matchMedia;
+    oldOnTouchStart = window.ontouchstart;
+    window.matchMedia = () => ({ matches: true }) as MediaQueryList;
+    window.ontouchstart = () => {};
+  });
+
+  after(() => {
+    window.matchMedia = oldMatchMedia;
+    window.ontouchstart = oldOnTouchStart;
+  });
+
+  it('should initially provide empty template', async () => {
+    const host = await fixture<HostElement>(
+      html`<host-element></host-element>`,
+    );
+    expect(host.controller?.getTemplate()).to.equal(nothing);
+  });
+
+  it('should produce a hover pane template after mousemove, and hide it after mouseleave', async () => {
+    const host = await fixture<HostElement>(
+      html`<host-element
+        .controllerOptions=${{ showDelay: 0, hideDelay: 0 }}
+      ></host-element>`,
+    );
+
+    host.dispatchEvent(new MouseEvent('mousemove'));
+    // 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
+
+    host.dispatchEvent(new MouseEvent('mouseleave'));
+    // Need to wait for the fade out transition
+    await new Promise(resolve => {
+      setTimeout(resolve, 150);
+    });
+
+    expect(host.controller?.getTemplate()).to.equal(nothing);
+  });
+
+  it('should produce a hover pane template after mouseenter, even without mousemove', async () => {
+    const host = await fixture<HostElement>(
+      html`<host-element
+        .controllerOptions=${{ showDelay: 0, hideDelay: 0 }}
+      ></host-element>`,
+    );
+
+    host.dispatchEvent(new MouseEvent('mouseenter'));
+    // 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
+  });
+
+  it('should immediately fade back in if mouse enters while fading out', async () => {
+    const host = await fixture<HostElement>(
+      html`<host-element
+        .controllerOptions=${{ showDelay: 0, hideDelay: 0 }}
+      ></host-element>`,
+    );
+
+    // Enter the host element and wait for the show handlers to run
+    host.dispatchEvent(new MouseEvent('mousemove'));
+    await new Promise(resolve => {
+      setTimeout(resolve, 0);
+    });
+
+    // Leave the host element so it begins fading out, but not all the way
+    host.dispatchEvent(new MouseEvent('mouseleave'));
+    await new Promise(resolve => {
+      setTimeout(resolve, 20);
+    });
+
+    // Re-enter the host element and wait long enough that it would disappear
+    // if the hide were not cancelled
+    host.dispatchEvent(new MouseEvent('mousemove'));
+    await new Promise(resolve => {
+      setTimeout(resolve, 150);
+    });
+
+    expect(host.controller?.getTemplate()).not.to.equal(nothing);
+  });
+
+  it('should flip hover pane if it would overflow the viewport', async () => {
+    const host = await fixture<HostElement>(
+      html`<host-element
+        .controllerOptions=${{ showDelay: 0, hideDelay: 0 }}
+      ></host-element>`,
+    );
+
+    host.dispatchEvent(
+      new MouseEvent('mousemove', { clientX: 800, clientY: 600 }),
+    );
+    // Need to wait a tick for the event handlers to run
+    await new Promise(resolve => {
+      setTimeout(resolve, 0);
+    });
+    await host.updateComplete;
+
+    expect(host.controller?.getTemplate()).not.to.equal(nothing);
+    expect(host.getHoverPane()?.getBoundingClientRect()?.right).to.be.lessThan(
+      window.innerWidth,
+    );
+    expect(host.getHoverPane()?.getBoundingClientRect()?.bottom).to.be.lessThan(
+      window.innerHeight,
+    );
+  });
+
+  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
+        .controllerOptions=${{ showDelay: 0, hideDelay: 0 }}
+        ?suppressHoverPane=${true}
+      ></host-element>`,
+    );
+
+    host.dispatchEvent(new MouseEvent('mousemove'));
+    // 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);
+
+    host.dispatchEvent(new MouseEvent('mouseleave'));
+    await new Promise(resolve => {
+      setTimeout(resolve, 20);
+    });
+
+    host.dispatchEvent(new MouseEvent('mousemove'));
+    await new Promise(resolve => {
+      setTimeout(resolve, 0);
+    });
+
+    host.dispatchEvent(new MouseEvent('mouseleave'));
+    // Need to wait for the fade out transition
+    await new Promise(resolve => {
+      setTimeout(resolve, 150);
+    });
+
+    expect(host.controller?.getTemplate()).to.equal(nothing);
+  });
+
+  describe('Touch & long-press', () => {
+    const getTouchStartEvent = (host: EventTarget) =>
+      new TouchEvent('touchstart', {
+        touches: [new Touch({ identifier: 0, target: host })],
+      });
+
+    it('should produce a hover pane after long press', async () => {
+      const host = await fixture<HostElement>(
+        html`<host-element
+          .controllerOptions=${{
+            showDelay: 0,
+            longPressDelay: 0,
+            enableLongPress: true,
+          }}
+        ></host-element>`,
+      );
+
+      // Touch the host element and wait for the long press handlers to run
+      host.dispatchEvent(getTouchStartEvent(host));
+      await new Promise(resolve => {
+        setTimeout(resolve, 0);
+      });
+
+      expect(host.controller?.getTemplate()).not.to.equal(nothing); // Is a TemplateResult
+    });
+
+    it('should cancel a long press by moving', async () => {
+      const host = await fixture<HostElement>(
+        html`<host-element
+          .controllerOptions=${{
+            showDelay: 0,
+            longPressDelay: 100,
+            enableLongPress: true,
+          }}
+        ></host-element>`,
+      );
+
+      // Touch the host element
+      host.dispatchEvent(getTouchStartEvent(host));
+      await new Promise(resolve => {
+        setTimeout(resolve, 0);
+      });
+
+      // Move the touch point, cancelling the long press
+      host.dispatchEvent(new TouchEvent('touchmove'));
+      await new Promise(resolve => {
+        setTimeout(resolve, 150);
+      });
+
+      expect(host.controller?.getTemplate()).to.equal(nothing);
+    });
+
+    it('should cancel a long press by ending touch', async () => {
+      const host = await fixture<HostElement>(
+        html`<host-element
+          .controllerOptions=${{
+            showDelay: 0,
+            longPressDelay: 100,
+            enableLongPress: true,
+          }}
+        ></host-element>`,
+      );
+
+      // Touch the host element
+      host.dispatchEvent(getTouchStartEvent(host));
+      await new Promise(resolve => {
+        setTimeout(resolve, 0);
+      });
+
+      // Lift the touch point, cancelling the long press
+      host.dispatchEvent(new TouchEvent('touchend'));
+      await new Promise(resolve => {
+        setTimeout(resolve, 150);
+      });
+
+      expect(host.controller?.getTemplate()).to.equal(nothing);
+    });
+
+    it('should cancel a long press by cancelling touch (e.g., too many touch points)', async () => {
+      const host = await fixture<HostElement>(
+        html`<host-element
+          .controllerOptions=${{
+            showDelay: 0,
+            longPressDelay: 100,
+            enableLongPress: true,
+          }}
+        ></host-element>`,
+      );
+
+      // Touch the host element
+      host.dispatchEvent(getTouchStartEvent(host));
+      await new Promise(resolve => {
+        setTimeout(resolve, 0);
+      });
+
+      // Cancel the touch point, also cancelling the long press
+      host.dispatchEvent(new TouchEvent('touchcancel'));
+      await new Promise(resolve => {
+        setTimeout(resolve, 150);
+      });
+
+      expect(host.controller?.getTemplate()).to.equal(nothing);
+    });
+
+    it('should close the hover pane on mobile when touching the backdrop', async () => {
+      const host = await fixture<HostElement>(
+        html`<host-element
+          .controllerOptions=${{
+            showDelay: 0,
+            hideDelay: 0,
+            longPressDelay: 0,
+            enableLongPress: true,
+            mobileBreakpoint: 9999, // Ensure we get the mobile view
+          }}
+        ></host-element>`,
+      );
+
+      // Touch the host element
+      host.dispatchEvent(getTouchStartEvent(host));
+      await new Promise(resolve => {
+        setTimeout(resolve, 0);
+      });
+
+      expect(host.controller?.getTemplate()).not.to.equal(nothing);
+
+      await host.updateComplete;
+
+      // Touch the backdrop
+      host.shadowRoot
+        ?.querySelector('#touch-backdrop')
+        ?.dispatchEvent(new TouchEvent('touchstart'));
+      await new Promise(resolve => {
+        setTimeout(resolve, 150);
+      });
+
+      expect(host.controller?.getTemplate()).to.equal(nothing);
+    });
+  });
+
+  describe('keyboard accessibility', () => {
+    it('should call host getBoundingClientRect if anchor is host', 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',
+      );
+    });
+
+    it('should show hover pane on focus', async () => {
+      const host = await fixture<HostElement>(
+        html`<host-element
+          .controllerOptions=${{ showDelay: 0, hideDelay: 0 }}
+        ></host-element>`,
+      );
+
+      host.dispatchEvent(new FocusEvent('focus'));
+
+      // 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 () => {
+      const host = await fixture<HostElement>(
+        html`<host-element
+          .controllerOptions=${{ showDelay: 0, hideDelay: 0 }}
+        ></host-element>`,
+      );
+
+      host.dispatchEvent(new FocusEvent('focus'));
+      await waitUntil(
+        () => host.getHoverPane()?.matches(':popover-open') ?? false,
+        'Hover pane never opened as a popover',
+      );
+
+      host.dispatchEvent(new FocusEvent('blur'));
+      await waitUntil(
+        () => !host.getHoverPane(),
+        'Hover pane was not removed after blur',
+      );
+    });
+  });
+
+  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',
+      );
+    });
+  });
+});

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/test/tiles/hover/tile-hover-pane.test.ts

@@ -0,0 +1,80 @@
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import type { TileModel } from '../../../src/models';
+import type { TileHoverPane } from '../../../src/tiles/hover/tile-hover-pane';
+
+import '../../../src/tiles/hover/tile-hover-pane';
+
+describe('Tile Hover Pane', () => {
+  it('should render initial component', async () => {
+    const el = await fixture<TileHoverPane>(
+      html`<tile-hover-pane></tile-hover-pane>`,
+    );
+
+    const container = el.shadowRoot?.querySelector('#container');
+    const listView = el.shadowRoot?.querySelector('tile-list');
+
+    expect(container).to.exist;
+    expect(listView).to.exist;
+  });
+
+  it('should render component with header element', async () => {
+    const model: Partial<TileModel> = {
+      mediatype: 'texts',
+      collections: ['collection1', 'fav-jack-sparrow'],
+    };
+
+    const el = await fixture<TileHoverPane>(
+      html`<tile-hover-pane .model=${model}></tile-hover-pane>`,
+    );
+
+    const container = el.shadowRoot?.querySelector('#container');
+    const listView = container?.querySelector('tile-list');
+    const headerElement = container?.querySelector('#list-line-header');
+
+    expect(container).to.exist;
+    expect(listView).to.exist;
+    expect(headerElement).to.exist;
+    expect(headerElement?.querySelector('a')?.getAttribute('href')).contains(
+      '/details/collection1',
+    );
+  });
+
+  it('should NOT render header element when fav- collection', async () => {
+    const model: Partial<TileModel> = {
+      mediatype: 'texts',
+      collections: ['fav-jack-sparrow'],
+    };
+
+    const el = await fixture<TileHoverPane>(
+      html`<tile-hover-pane .model=${model}></tile-hover-pane>`,
+    );
+
+    const container = el.shadowRoot?.querySelector('#container');
+    const listView = container?.querySelector('tile-list');
+    const headerElement = container?.querySelector('#list-line-header');
+
+    expect(container).to.exist;
+    expect(listView).to.exist;
+    expect(headerElement).not.exist;
+  });
+
+  it('should NOT render header element when no collections', async () => {
+    const model: Partial<TileModel> = {
+      mediatype: 'texts',
+      collections: [],
+    };
+
+    const el = await fixture<TileHoverPane>(
+      html`<tile-hover-pane .model=${model}></tile-hover-pane>`,
+    );
+
+    const container = el.shadowRoot?.querySelector('#container');
+    const listView = container?.querySelector('tile-list');
+    const headerElement = container?.querySelector('#list-line-header');
+
+    expect(container).to.exist;
+    expect(listView).to.exist;
+    expect(headerElement).not.exist;
+  });
+});

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/test/tiles/list/tile-list-compact-header.test.ts

@@ -0,0 +1,43 @@
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import type { TileListCompactHeader } from '../../../src/tiles/list/tile-list-compact-header';
+
+import '../../../src/tiles/list/tile-list-compact-header';
+
+describe('List Tile Compact Header', () => {
+  it('should render Weekly views header when sorting by week', async () => {
+    const el = await fixture<TileListCompactHeader>(html`
+      <tile-list-compact-header
+        .sortParam=${{ field: 'week', direction: 'desc' }}
+      >
+      </tile-list-compact-header>
+    `);
+
+    const viewsColumn = el.shadowRoot?.getElementById('views');
+    expect(viewsColumn).to.exist;
+    expect(viewsColumn?.textContent?.trim()).to.equal('Weekly views');
+  });
+
+  it('should render All-time views header when sorting by non-week field', async () => {
+    const el = await fixture<TileListCompactHeader>(html`
+      <tile-list-compact-header
+        .sortParam=${{ field: 'downloads', direction: 'desc' }}
+      >
+      </tile-list-compact-header>
+    `);
+
+    const viewsColumn = el.shadowRoot?.getElementById('views');
+    expect(viewsColumn).to.exist;
+    expect(viewsColumn?.textContent?.trim()).to.equal('All-time views');
+  });
+
+  it('should render All-time views header with no sort param', async () => {
+    const el = await fixture<TileListCompactHeader>(html`
+      <tile-list-compact-header> </tile-list-compact-header>
+    `);
+
+    const viewsColumn = el.shadowRoot?.getElementById('views');
+    expect(viewsColumn).to.exist;
+    expect(viewsColumn?.textContent?.trim()).to.equal('All-time views');
+  });
+});