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

package/test/tiles/tile-dispatcher.test.ts

@@ -1,320 +0,0 @@
-import { aTimeout, expect, fixture } from '@open-wc/testing';
-import { html } from 'lit';
-import sinon from 'sinon';
-import type { TileDispatcher } from '../../src/tiles/tile-dispatcher';
-
-import '../../src/tiles/tile-dispatcher';
-import type { ItemTile } from '../../src/tiles/grid/item-tile';
-import { TileHoverPane } from '../../src/tiles/hover/tile-hover-pane';
-import type { HoverPaneProperties } from '../../src/tiles/hover/hover-pane-controller';
-
-describe('Tile Dispatcher', () => {
-  it('should render item-tile for grid mode by default', async () => {
-    const el = await fixture<TileDispatcher>(html`
-      <tile-dispatcher
-        .tileDisplayMode=${'grid'}
-        .model=${{ mediatype: 'texts' }}
-      >
-      </tile-dispatcher>
-    `);
-
-    const itemTile = el.shadowRoot?.querySelector('item-tile');
-    expect(itemTile).to.exist;
-  });
-
-  it('should render collection-tile for grid mode and collection mediatype', async () => {
-    const el = await fixture<TileDispatcher>(html`
-      <tile-dispatcher
-        .tileDisplayMode=${'grid'}
-        .model=${{ mediatype: 'collection' }}
-      >
-      </tile-dispatcher>
-    `);
-
-    const collectionTile = el.shadowRoot?.querySelector('collection-tile');
-    expect(collectionTile).to.exist;
-  });
-
-  it('should render account-tile for grid mode and account mediatype', async () => {
-    const el = await fixture<TileDispatcher>(html`
-      <tile-dispatcher
-        .tileDisplayMode=${'grid'}
-        .model=${{ mediatype: 'account' }}
-      >
-      </tile-dispatcher>
-    `);
-
-    const accountTile = el.shadowRoot?.querySelector('account-tile');
-    expect(accountTile).to.exist;
-  });
-
-  it('should render search-tile for grid mode and search mediatype', async () => {
-    const el = await fixture<TileDispatcher>(html`
-      <tile-dispatcher
-        .tileDisplayMode=${'grid'}
-        .model=${{ mediatype: 'search' }}
-      >
-      </tile-dispatcher>
-    `);
-
-    const searchTile = el.shadowRoot?.querySelector('search-tile');
-    expect(searchTile).to.exist;
-  });
-
-  it('should render tile-list for extended list mode', async () => {
-    const el = await fixture<TileDispatcher>(html`
-      <tile-dispatcher .tileDisplayMode=${'list-detail'} .model=${{}}>
-      </tile-dispatcher>
-    `);
-
-    const listTile = el.shadowRoot?.querySelector('tile-list');
-    expect(listTile).to.exist;
-  });
-
-  it('should render tile-list-compact for compact list mode', async () => {
-    const el = await fixture<TileDispatcher>(html`
-      <tile-dispatcher .tileDisplayMode=${'list-compact'} .model=${{}}>
-      </tile-dispatcher>
-    `);
-
-    const compactListTile = el.shadowRoot?.querySelector('tile-list-compact');
-    expect(compactListTile).to.exist;
-  });
-
-  it('should open item in new tab when right-clicked in manage mode', async () => {
-    const oldWindowOpen = window.open;
-    const spy = sinon.spy();
-    window.open = spy;
-
-    const el = await fixture<TileDispatcher>(html`
-      <tile-dispatcher
-        isManageView
-        .model=${{ identifier: 'foo', href: '/foo' }}
-        .baseNavigationUrl=${''}
-      >
-      </tile-dispatcher>
-    `);
-
-    const tileLink = el.shadowRoot?.querySelector(
-      'a[href]',
-    ) as HTMLAnchorElement;
-    expect(tileLink).to.exist;
-
-    tileLink.dispatchEvent(new Event('contextmenu'));
-    await el.updateComplete;
-
-    expect(spy.callCount).to.equal(1);
-    expect(spy.args[0][0]).to.equal('/foo');
-    expect(spy.args[0][1]).to.equal('_blank');
-
-    window.open = oldWindowOpen;
-  });
-
-  it('should use model href as link href', async () => {
-    const el = await fixture<TileDispatcher>(html`
-      <tile-dispatcher
-        .model=${{
-          identifier: 'foo',
-          href: 'https://web.archive.org/web/20180613065659/http://www.sankei.com/',
-        }}
-        .baseNavigationUrl=${''}
-      ></tile-dispatcher>
-    `);
-
-    const tileLink = el.shadowRoot?.querySelector(
-      'a[href]',
-    ) as HTMLAnchorElement;
-    expect(tileLink).to.exist;
-    expect(tileLink.getAttribute('href')).to.equal(
-      'https://web.archive.org/web/20180613065659/http://www.sankei.com/',
-    );
-  });
-
-  it('should toggle model checked state when manage check clicked', async () => {
-    const el = await fixture<TileDispatcher>(html`
-      <tile-dispatcher
-        isManageView
-        .model=${{ identifier: 'foo', href: '/foo' }}
-        .tileDisplayMode=${'grid'}
-      ></tile-dispatcher>
-    `);
-
-    const manageCheck = el.shadowRoot?.querySelector(
-      '.manage-check > input[type="checkbox"]',
-    ) as HTMLButtonElement;
-
-    manageCheck.click();
-    await el.updateComplete;
-    expect(el.model?.checked).to.be.true;
-
-    manageCheck.click();
-    await el.updateComplete;
-    expect(el.model?.checked).to.be.false;
-  });
-
-  it('should return hover pane props', async () => {
-    const el = await fixture<TileDispatcher>(html`
-      <tile-dispatcher .model=${{ identifier: 'foo' }}> </tile-dispatcher>
-    `);
-
-    expect(el.getHoverPaneProps()).to.satisfy(
-      (props: HoverPaneProperties) => props?.model?.identifier === 'foo',
-    );
-  });
-
-  it('should focus the tile link when requested', async () => {
-    const el = await fixture<TileDispatcher>(html`
-      <tile-dispatcher .tileDisplayMode=${'grid'}> </tile-dispatcher>
-    `);
-
-    const tileLink = el.shadowRoot?.querySelector(
-      '.tile-link',
-    ) as HTMLAnchorElement;
-    expect(tileLink).to.exist;
-
-    const spyFocus = sinon.spy(tileLink, 'focus');
-    el.acquireFocus();
-    expect(spyFocus.callCount).to.equal(1);
-  });
-
-  it('should blur the tile link when requested', async () => {
-    const el = await fixture<TileDispatcher>(html`
-      <tile-dispatcher .tileDisplayMode=${'grid'}> </tile-dispatcher>
-    `);
-
-    const tileLink = el.shadowRoot?.querySelector(
-      '.tile-link',
-    ) as HTMLAnchorElement;
-    expect(tileLink).to.exist;
-
-    const spyBlur = sinon.spy(tileLink, 'blur');
-    el.releaseFocus();
-    expect(spyBlur.callCount).to.equal(1);
-  });
-
-  describe('Hover pane info button behavior', () => {
-    let oldMatchMedia: typeof window.matchMedia;
-
-    before(() => {
-      oldMatchMedia = window.matchMedia;
-      // Pretend that there is no hover-capable input device
-      window.matchMedia = () => ({ matches: false }) as MediaQueryList;
-    });
-
-    after(() => {
-      window.matchMedia = oldMatchMedia;
-    });
-
-    it('should toggle hover pane when tile info button is pressed', async () => {
-      const el = await fixture<TileDispatcher>(html`
-        <tile-dispatcher
-          .tileDisplayMode=${'grid'}
-          .model=${{ mediatype: 'texts' }}
-          .enableHoverPane=${true}
-        >
-        </tile-dispatcher>
-      `);
-
-      const itemTile = el.shadowRoot?.querySelector('item-tile') as ItemTile;
-      expect(itemTile).to.exist;
-
-      const infoButton = itemTile.shadowRoot?.querySelector(
-        '.info-button',
-      ) as HTMLButtonElement;
-      expect(infoButton).to.exist;
-
-      infoButton.click();
-      await aTimeout(500);
-      await el.updateComplete;
-      expect(el.getHoverPane()).to.be.instanceOf(TileHoverPane);
-
-      infoButton.click();
-      await aTimeout(500);
-      await el.updateComplete;
-      expect(el.getHoverPane()).not.to.exist;
-    });
-
-    it('should not show info button when hover pane is not enabled', async () => {
-      const el = await fixture<TileDispatcher>(html`
-        <tile-dispatcher
-          .tileDisplayMode=${'grid'}
-          .model=${{ mediatype: 'texts' }}
-          .enableHoverPane=${false}
-        >
-        </tile-dispatcher>
-      `);
-
-      const itemTile = el.shadowRoot?.querySelector('item-tile') as ItemTile;
-      expect(itemTile).to.exist;
-
-      const infoButton = itemTile.shadowRoot?.querySelector('.info-button');
-      expect(infoButton).to.not.exist;
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('should have proper aria-label on tile link', async () => {
-      const el = await fixture<TileDispatcher>(html`
-        <tile-dispatcher
-          .tileDisplayMode=${'grid'}
-          .model=${{
-            title: 'Example Title',
-            mediatype: 'texts',
-          }}
-        >
-        </tile-dispatcher>
-      `);
-
-      const tileLink = el.shadowRoot?.querySelector(
-        '.tile-link',
-      ) as HTMLAnchorElement;
-      expect(tileLink).to.exist;
-      expect(tileLink.getAttribute('aria-label')).to.equal('Example Title');
-    });
-
-    it('should fallback to untitled aria-label on tile link when no title', async () => {
-      const el = await fixture<TileDispatcher>(html`
-        <tile-dispatcher
-          .tileDisplayMode=${'grid'}
-          .model=${{
-            mediatype: 'texts',
-          }}
-        >
-        </tile-dispatcher>
-      `);
-
-      const tileLink = el.shadowRoot?.querySelector(
-        '.tile-link',
-      ) as HTMLAnchorElement;
-      expect(tileLink).to.exist;
-      expect(tileLink.getAttribute('aria-label')).to.equal('Untitled item');
-    });
-
-    it('should have no accessibility violations in grid mode', async () => {
-      const el = await fixture<TileDispatcher>(html`
-        <tile-dispatcher
-          .tileDisplayMode=${'grid'}
-          .model=${{
-            title: 'Example Title',
-            mediatype: 'texts',
-          }}
-        >
-        </tile-dispatcher>
-      `);
-
-      await expect(el).to.be.accessible();
-    });
-
-    it('should have no accessibility violations in list mode', async () => {
-      const el = await fixture<TileDispatcher>(html`
-        <tile-dispatcher
-          .tileDisplayMode=${'list-detail'}
-          .model=${{ mediatype: 'texts' }}
-        >
-        </tile-dispatcher>
-      `);
-
-      await expect(el).to.be.accessible();
-    });
-  });
-});

package/test/tiles/tile-display-value-provider.test.ts

@@ -1,172 +0,0 @@
-import { expect } from '@open-wc/testing';
-import { nothing } from 'lit';
-import { TileDisplayValueProvider } from '../../src/tiles/tile-display-value-provider';
-import type { TileModel } from '../../src/models';
-
-describe('Tile Display Value Provider', () => {
-  describe('basic construction', () => {
-    it('constructs w/ no options', () => {
-      const provider = new TileDisplayValueProvider();
-      expect(provider).to.exist;
-    });
-
-    it('constructs w/ options', () => {
-      const provider = new TileDisplayValueProvider({
-        model: {} as TileModel,
-        baseNavigationUrl: 'foo',
-        collectionPagePath: 'bar',
-        sortParam: { field: 'baz', direction: 'asc' },
-        creatorFilter: 'X',
-      });
-      expect(provider).to.exist;
-    });
-  });
-
-  describe('firstCreatorMatchingFilter', () => {
-    it('provides undefined creator when no model set', () => {
-      const provider = new TileDisplayValueProvider();
-      expect(provider.firstCreatorMatchingFilter).to.be.undefined;
-    });
-
-    it('provides creator from model with no filter', () => {
-      const provider = new TileDisplayValueProvider({
-        model: { creator: 'foo', creators: ['foo', 'bar', 'baz'] } as TileModel,
-      });
-
-      expect(provider.firstCreatorMatchingFilter).to.equal('foo');
-    });
-
-    it('provides first creator matching filter when present', () => {
-      const provider = new TileDisplayValueProvider({
-        model: { creator: 'foo', creators: ['foo', 'bar', 'baz'] } as TileModel,
-        creatorFilter: 'B',
-      });
-
-      expect(provider.firstCreatorMatchingFilter).to.equal('bar');
-    });
-
-    it('matches letters with diacritics', () => {
-      const provider = new TileDisplayValueProvider({
-        model: {
-          creator: 'foo',
-          creators: ['foo', 'émile', 'ernest'],
-        } as TileModel,
-        creatorFilter: 'E',
-      });
-
-      expect(provider.firstCreatorMatchingFilter).to.equal('émile');
-    });
-
-    it('ignores non-alphabetical characters when matching', () => {
-      const provider = new TileDisplayValueProvider({
-        model: {
-          creator: 'foo',
-          creators: ['foo', '"(bar)"', 'baz'],
-        } as TileModel,
-        creatorFilter: 'B',
-      });
-
-      expect(provider.firstCreatorMatchingFilter).to.equal('"(bar)"');
-    });
-  });
-
-  describe('accountLabel', () => {
-    it('provides empty account label when no model', () => {
-      const provider = new TileDisplayValueProvider();
-      expect(provider.accountLabel).to.equal('');
-    });
-
-    it('provides empty account label when no date added', () => {
-      const provider = new TileDisplayValueProvider({ model: {} as TileModel });
-      expect(provider.accountLabel).to.equal('');
-    });
-
-    it('provides Archivist label from date added', () => {
-      const provider = new TileDisplayValueProvider({
-        model: { dateAdded: new Date(2010, 1, 2) } as TileModel,
-      });
-
-      expect(provider.accountLabel).to.equal('Archivist since 2010');
-    });
-  });
-
-  describe('dateLabel', () => {
-    it('provides empty date label when no sort param', () => {
-      const provider = new TileDisplayValueProvider();
-      expect(provider.dateLabel).to.equal('');
-    });
-
-    it('provides empty date label when sorting by non-date', () => {
-      const provider = new TileDisplayValueProvider({
-        sortParam: { field: 'downloads', direction: 'desc' },
-      });
-      expect(provider.dateLabel).to.equal('');
-    });
-
-    it('provides correct date label for publicdate', () => {
-      const provider = new TileDisplayValueProvider({
-        sortParam: { field: 'publicdate', direction: 'asc' },
-      });
-
-      expect(provider.dateLabel).to.equal('Archived');
-    });
-
-    it('provides correct date label for reviewdate', () => {
-      const provider = new TileDisplayValueProvider({
-        sortParam: { field: 'reviewdate', direction: 'asc' },
-      });
-
-      expect(provider.dateLabel).to.equal('Reviewed');
-    });
-
-    it('provides correct date label for addeddate', () => {
-      const provider = new TileDisplayValueProvider({
-        sortParam: { field: 'addeddate', direction: 'asc' },
-      });
-
-      expect(provider.dateLabel).to.equal('Added');
-    });
-
-    it('provides correct date label for published date', () => {
-      const provider = new TileDisplayValueProvider({
-        sortParam: { field: 'date', direction: 'asc' },
-      });
-
-      expect(provider.dateLabel).to.equal('Published');
-    });
-  });
-
-  describe('itemPageUrl', () => {
-    it('provides nothing when no base url set', () => {
-      const provider = new TileDisplayValueProvider();
-      expect(provider.itemPageUrl('foo')).to.equal(nothing);
-    });
-
-    it('provides nothing when identifier is empty', () => {
-      const provider = new TileDisplayValueProvider({
-        baseNavigationUrl: 'foo',
-      });
-      expect(provider.itemPageUrl('')).to.equal(nothing);
-    });
-
-    it('builds correct url from base and identifier', () => {
-      const provider = new TileDisplayValueProvider({
-        baseNavigationUrl: 'base',
-      });
-      expect(provider.itemPageUrl('foo')).to.equal('base/details/foo');
-    });
-
-    it('allows base url to be empty', () => {
-      const provider = new TileDisplayValueProvider({ baseNavigationUrl: '' });
-      expect(provider.itemPageUrl('foo')).to.equal('/details/foo');
-    });
-
-    it('uses provided collection base path for collections', () => {
-      const provider = new TileDisplayValueProvider({
-        baseNavigationUrl: 'base',
-        collectionPagePath: '/collection/',
-      });
-      expect(provider.itemPageUrl('foo', true)).to.equal('base/collection/foo');
-    });
-  });
-});

package/test/tiles/tile-mediatype-icon.test.ts

@@ -1,160 +0,0 @@
-import { expect, fixture } from '@open-wc/testing';
-import { html } from 'lit';
-import type { TileMediatypeIcon } from '../../src/tiles/tile-mediatype-icon';
-
-import '../../src/tiles/tile-mediatype-icon';
-import { TileModel } from '../../src/models';
-import { MediaType } from '@internetarchive/field-parsers';
-
-describe('Mediatype Icon', () => {
-  let model: TileModel;
-  beforeEach(() => {
-    model = new TileModel({});
-  });
-
-  it('renders component', async () => {
-    model.mediatype = 'texts';
-    const el = await fixture<TileMediatypeIcon>(html`
-      <tile-mediatype-icon .model=${model}></tile-mediatype-icon>
-    `);
-
-    const iconDiv = el.shadowRoot?.querySelector('#icon');
-    expect(iconDiv).to.exist;
-  });
-
-  it('renders basic mediatype correctly', async () => {
-    model.mediatype = 'movies';
-    const el = await fixture<TileMediatypeIcon>(html`
-      <tile-mediatype-icon .model=${model}></tile-mediatype-icon>
-    `);
-
-    const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;
-    expect(iconDiv.title).to.equal('Movie');
-    expect(iconDiv.getAttribute('style')).to.include('#f1644b');
-    expect(iconDiv.children[0]).to.be.instanceOf(SVGElement);
-  });
-
-  it('renders TV mediatype', async () => {
-    model.mediatype = 'movies';
-    model.collections = ['tvnews'];
-    const el = await fixture<TileMediatypeIcon>(html`
-      <tile-mediatype-icon .model=${model}></tile-mediatype-icon>
-    `);
-
-    const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;
-    expect(iconDiv.title).to.equal('TV');
-  });
-
-  it('renders TV Political Ad mediatype for TV items with ad ids', async () => {
-    model.mediatype = 'movies';
-    model.collections = ['tvnews'];
-    model.adIds = ['foo'];
-    const el = await fixture<TileMediatypeIcon>(html`
-      <tile-mediatype-icon .model=${model}></tile-mediatype-icon>
-    `);
-
-    const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;
-    expect(iconDiv.title).to.equal('TV Political Ad');
-  });
-
-  it('renders TV Political Ad mediatype for TV items in tv_ads collection', async () => {
-    model.mediatype = 'movies';
-    model.collections = ['tvnews', 'tv_ads'];
-    const el = await fixture<TileMediatypeIcon>(html`
-      <tile-mediatype-icon .model=${model}></tile-mediatype-icon>
-    `);
-
-    const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;
-    expect(iconDiv.title).to.equal('TV Political Ad');
-  });
-
-  it('renders TV Fact Check mediatype for TV search results with fact check URLs', async () => {
-    model.hitType = 'tv_clip';
-    model.hitRequestSource = 'search_query';
-    model.mediatype = 'movies';
-    model.collections = ['tvnews'];
-    model.factChecks = ['https://example.com'];
-    const el = await fixture<TileMediatypeIcon>(html`
-      <tile-mediatype-icon .model=${model}></tile-mediatype-icon>
-    `);
-
-    const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;
-    expect(iconDiv.title).to.equal('TV Fact Check');
-  });
-
-  it('renders TV Fact Check mediatype for TV search results in factchecked collection', async () => {
-    model.hitType = 'tv_clip';
-    model.hitRequestSource = 'search_query';
-    model.mediatype = 'movies';
-    model.collections = ['tvnews', 'factchecked'];
-    const el = await fixture<TileMediatypeIcon>(html`
-      <tile-mediatype-icon .model=${model}></tile-mediatype-icon>
-    `);
-
-    const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;
-    expect(iconDiv.title).to.equal('TV Fact Check');
-  });
-
-  it('does not use TV Fact Check mediatype for non-search results', async () => {
-    model.hitType = 'tv_clip';
-    model.hitRequestSource = 'collection_members';
-    model.mediatype = 'movies';
-    model.collections = ['tvnews'];
-    model.factChecks = ['https://example.com'];
-    const el = await fixture<TileMediatypeIcon>(html`
-      <tile-mediatype-icon .model=${model}></tile-mediatype-icon>
-    `);
-
-    const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;
-    expect(iconDiv.title).to.equal('TV');
-  });
-
-  it('renders TV Quote mediatype for TV search results that are clips', async () => {
-    model.hitType = 'tv_clip';
-    model.hitRequestSource = 'search_query';
-    model.mediatype = 'movies';
-    model.collections = ['tvnews'];
-    model.isClip = true;
-    const el = await fixture<TileMediatypeIcon>(html`
-      <tile-mediatype-icon .model=${model}></tile-mediatype-icon>
-    `);
-
-    const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;
-    expect(iconDiv.title).to.equal('TV Quote');
-  });
-
-  it('does not use TV Quote mediatype for non-search results', async () => {
-    model.hitType = 'tv_clip';
-    model.hitRequestSource = 'collection_members';
-    model.mediatype = 'movies';
-    model.collections = ['tvnews'];
-    model.isClip = true;
-    const el = await fixture<TileMediatypeIcon>(html`
-      <tile-mediatype-icon .model=${model}></tile-mediatype-icon>
-    `);
-
-    const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;
-    expect(iconDiv.title).to.equal('TV');
-  });
-
-  it('renders radio mediatype', async () => {
-    model.mediatype = 'audio';
-    model.collections = ['radio'];
-    const el = await fixture<TileMediatypeIcon>(html`
-      <tile-mediatype-icon .model=${model}></tile-mediatype-icon>
-    `);
-
-    const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;
-    expect(iconDiv.title).to.equal('Radio');
-  });
-
-  it('renders no icon if mediatype is unrecognized', async () => {
-    model.mediatype = 'foobar' as MediaType;
-    const el = await fixture<TileMediatypeIcon>(html`
-      <tile-mediatype-icon .model=${model}></tile-mediatype-icon>
-    `);
-
-    const iconDiv = el.shadowRoot?.querySelector('#icon');
-    expect(iconDiv).not.to.exist;
-  });
-});

package/test/utils/array-equals.test.ts

@@ -1,31 +0,0 @@
-import { expect } from '@open-wc/testing';
-import { arrayEquals } from '../../src/utils/array-equals';
-
-describe('arrayEquals', () => {
-  it('returns true for empty args', () => {
-    expect(arrayEquals([], [])).to.be.true;
-  });
-
-  it('returns true for identical array objects', () => {
-    const arr = ['foo', 'bar'];
-    expect(arrayEquals(arr, arr)).to.be.true;
-  });
-
-  it('returns true for arrays with identical contents', () => {
-    const arr1 = ['foo', 'bar'];
-    const arr2 = ['foo', 'bar'];
-    expect(arrayEquals(arr1, arr2)).to.be.true;
-  });
-
-  it('returns false for arrays of unequal length', () => {
-    const arr1 = [1, 2, 3];
-    const arr2 = [1, 2, 3, 4];
-    expect(arrayEquals(arr1, arr2)).to.be.false;
-  });
-
-  it('returns false for unequal arrays of same length', () => {
-    const arr1 = ['foo', 'bar'];
-    const arr2 = ['foo', 'qux'];
-    expect(arrayEquals(arr1, arr2)).to.be.false;
-  });
-});