@internetarchive/collection-browser 4.7.1-alpha-webdev9189.0 → 4.8.1-alpha-webdev9189.0

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

@@ -1,482 +0,0 @@
-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/test/tiles/hover/tile-hover-pane.test.ts

@@ -1,80 +0,0 @@
-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/test/tiles/list/tile-list-compact-header.test.ts

@@ -1,43 +0,0 @@
-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');
-  });
-});