@internetarchive/collection-browser 3.3.2 → 3.3.3

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

@@ -1,187 +1,283 @@
-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 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',
-    );
-  });
-
-  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;
-    });
-  });
-});
+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 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;
+    });
+  });
+
+  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/utils/format-date.test.ts

@@ -1,89 +1,89 @@
-import { expect } from '@open-wc/testing';
-import { formatDate } from '../../src/utils/format-date';
-
-const testDate = new Date(2020, 11, 9);
-
-describe('formatDate', () => {
-  it('returns blank when undefined date', () => {
-    expect(formatDate(undefined)).to.equal('');
-  });
-
-  it('returns short date when no DateFormat', () => {
-    expect(formatDate(testDate)).to.equal('Dec 2020');
-  });
-
-  it('returns long date when long DateFormat', () => {
-    expect(formatDate(testDate, 'long')).to.equal('Dec 09, 2020');
-  });
-
-  it('returns year-only date when year-only DateFormat', () => {
-    expect(formatDate(testDate, 'year-only')).to.equal('2020');
-  });
-
-  it('returns correct year for old "Jan 1 at midnight" dates and year-only DateFormat', () => {
-    // Many standard timezones have a discontinuity in date parsing at some point during
-    // the 19th or 20th century, corresponding to the creation of the timezone.
-    // Dates prior to the discontinuity generally have a non-hour-aligned timezone offset
-    // which can throw off the calculated year for dates which are close to a year boundary.
-    // This is particularly problematic for "Jan 1 at midnight" dates, which are what we
-    // receive from the search engine for date metadata that only specifies the year.
-    // So we must ensure these older dates still output the correct year, not the prior one.
-    expect(formatDate(new Date('1234-01-01T00:00:00Z'), 'year-only')).to.equal(
-      '1234',
-    );
-  });
-
-  it('uses UTC time zone by default or when useLocalTime is explicitly false', () => {
-    // Default options
-    expect(formatDate(new Date('2025-02-15T00:00:00Z'), 'long')).to.equal(
-      'Feb 15, 2025',
-    );
-    expect(formatDate(new Date('2025-02-15T23:59:59Z'), 'long')).to.equal(
-      'Feb 15, 2025',
-    );
-
-    // Explicit `useLocalTime: false` option
-    const options = { useLocalTime: false };
-    expect(
-      formatDate(new Date('2025-02-15T00:00:00Z'), 'long', options),
-    ).to.equal('Feb 15, 2025');
-    expect(
-      formatDate(new Date('2025-02-15T23:59:59Z'), 'long', options),
-    ).to.equal('Feb 15, 2025');
-  });
-
-  it('uses local time zone when specified', () => {
-    // N.B.:
-    // - Positive offset corresponds to UTC-x zones
-    // - Negative offset corresponds to UTC+x zones
-    const offset = new Date().getTimezoneOffset();
-    const options = { useLocalTime: true };
-
-    // The expected behavior depends on the local time where the tests are run:
-    if (offset > 0) {
-      // If we're testing under a positive offset, the first second of the UTC day should locally fall on the previous day
-      expect(
-        formatDate(new Date('2025-02-15T00:00:00Z'), 'long', options),
-      ).to.equal('Feb 14, 2025');
-    } else if (offset < 0) {
-      // If we're testing under a negative offset, the last second of the UTC day should locally fall on the next day
-      expect(
-        formatDate(new Date('2025-02-15T23:59:59Z'), 'long', options),
-      ).to.equal('Feb 16, 2025');
-    } else {
-      // If we're testing *in* UTC, then both seconds should locally fall on the same day
-      expect(
-        formatDate(new Date('2025-02-15T00:00:00Z'), 'long', options),
-      ).to.equal('Feb 15, 2025');
-      expect(
-        formatDate(new Date('2025-02-15T23:59:59Z'), 'long', options),
-      ).to.equal('Feb 15, 2025');
-    }
-  });
-
-  it('returns locale formatted date', () => {
-    expect(formatDate(testDate, 'long', { locale: 'de-DE' })).to.equal(
-      '09. Dez. 2020',
-    );
-  });
-});
+import { expect } from '@open-wc/testing';
+import { formatDate } from '../../src/utils/format-date';
+
+const testDate = new Date(2020, 11, 9);
+
+describe('formatDate', () => {
+  it('returns blank when undefined date', () => {
+    expect(formatDate(undefined)).to.equal('');
+  });
+
+  it('returns short date when no DateFormat', () => {
+    expect(formatDate(testDate)).to.equal('Dec 2020');
+  });
+
+  it('returns long date when long DateFormat', () => {
+    expect(formatDate(testDate, 'long')).to.equal('Dec 09, 2020');
+  });
+
+  it('returns year-only date when year-only DateFormat', () => {
+    expect(formatDate(testDate, 'year-only')).to.equal('2020');
+  });
+
+  it('returns correct year for old "Jan 1 at midnight" dates and year-only DateFormat', () => {
+    // Many standard timezones have a discontinuity in date parsing at some point during
+    // the 19th or 20th century, corresponding to the creation of the timezone.
+    // Dates prior to the discontinuity generally have a non-hour-aligned timezone offset
+    // which can throw off the calculated year for dates which are close to a year boundary.
+    // This is particularly problematic for "Jan 1 at midnight" dates, which are what we
+    // receive from the search engine for date metadata that only specifies the year.
+    // So we must ensure these older dates still output the correct year, not the prior one.
+    expect(formatDate(new Date('1234-01-01T00:00:00Z'), 'year-only')).to.equal(
+      '1234',
+    );
+  });
+
+  it('uses UTC time zone by default or when useLocalTime is explicitly false', () => {
+    // Default options
+    expect(formatDate(new Date('2025-02-15T00:00:00Z'), 'long')).to.equal(
+      'Feb 15, 2025',
+    );
+    expect(formatDate(new Date('2025-02-15T23:59:59Z'), 'long')).to.equal(
+      'Feb 15, 2025',
+    );
+
+    // Explicit `useLocalTime: false` option
+    const options = { useLocalTime: false };
+    expect(
+      formatDate(new Date('2025-02-15T00:00:00Z'), 'long', options),
+    ).to.equal('Feb 15, 2025');
+    expect(
+      formatDate(new Date('2025-02-15T23:59:59Z'), 'long', options),
+    ).to.equal('Feb 15, 2025');
+  });
+
+  it('uses local time zone when specified', () => {
+    // N.B.:
+    // - Positive offset corresponds to UTC-x zones
+    // - Negative offset corresponds to UTC+x zones
+    const offset = new Date().getTimezoneOffset();
+    const options = { useLocalTime: true };
+
+    // The expected behavior depends on the local time where the tests are run:
+    if (offset > 0) {
+      // If we're testing under a positive offset, the first second of the UTC day should locally fall on the previous day
+      expect(
+        formatDate(new Date('2025-02-15T00:00:00Z'), 'long', options),
+      ).to.equal('Feb 14, 2025');
+    } else if (offset < 0) {
+      // If we're testing under a negative offset, the last second of the UTC day should locally fall on the next day
+      expect(
+        formatDate(new Date('2025-02-15T23:59:59Z'), 'long', options),
+      ).to.equal('Feb 16, 2025');
+    } else {
+      // If we're testing *in* UTC, then both seconds should locally fall on the same day
+      expect(
+        formatDate(new Date('2025-02-15T00:00:00Z'), 'long', options),
+      ).to.equal('Feb 15, 2025');
+      expect(
+        formatDate(new Date('2025-02-15T23:59:59Z'), 'long', options),
+      ).to.equal('Feb 15, 2025');
+    }
+  });
+
+  it('returns locale formatted date', () => {
+    expect(formatDate(testDate, 'long', { locale: 'de-DE' })).to.equal(
+      '09. Dez. 2020',
+    );
+  });
+});