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

package/test/text-snippet-block.test.ts

@@ -1,85 +0,0 @@
-import { expect, fixture } from '@open-wc/testing';
-import { html } from 'lit';
-import type { TextSnippetBlock } from '../src/tiles/text-snippet-block';
-import '../src/tiles/text-snippet-block';
-
-describe('TextSnippetBlock component', () => {
-  it('should render initial component', async () => {
-    const el = await fixture<TextSnippetBlock>(
-      html`<text-snippet-block></text-snippet-block>`,
-    );
-
-    // No content if no snippets
-    expect(el.shadowRoot?.children.length).to.equal(0);
-
-    // Content appears if there are snippets
-    el.snippets = ['text'];
-    await el.updateComplete;
-    const container = el.shadowRoot?.querySelector('.container');
-    expect(container).to.exist;
-  });
-
-  it('should render marked snippets', async () => {
-    const snippets = [
-      'some {{{snippet}}} text',
-      'some {{{other}}} {{{snippet}}} text',
-    ];
-
-    const el = await fixture<TextSnippetBlock>(
-      html`<text-snippet-block .snippets=${snippets}></text-snippet-block>`,
-    );
-
-    const container = el.shadowRoot?.querySelector('.snippet-view');
-
-    // Has the correct number of snippets and highlights
-    expect(container?.children.length).to.equal(snippets.length);
-    expect(container?.querySelectorAll('mark').length).to.equal(3);
-  });
-
-  it('should render marked snippets containing newlines', async () => {
-    const snippets = [
-      'some {{{snippet}}} text',
-      'some {{{other}}} {{{snippet\n text}}}',
-    ];
-
-    const el = await fixture<TextSnippetBlock>(
-      html`<text-snippet-block .snippets=${snippets}></text-snippet-block>`,
-    );
-
-    const container = el.shadowRoot?.querySelector('.snippet-view');
-
-    // Has the correct number of snippets and highlights
-    expect(container?.children.length).to.equal(snippets.length);
-    expect(container?.querySelectorAll('mark').length).to.equal(3);
-  });
-
-  it('should render correctly in grid mode', async () => {
-    const el = await fixture<TextSnippetBlock>(
-      html`<text-snippet-block
-        viewsize="grid"
-        .snippets=${['text']}
-      ></text-snippet-block>`,
-    );
-
-    const container = el.shadowRoot?.querySelector('.snippet-view');
-
-    // Applies the right container classes
-    expect(container?.classList.contains('grid')).to.be.true;
-    expect(container?.classList.contains('list')).to.be.false;
-  });
-
-  it('should render correctly in list mode', async () => {
-    const el = await fixture<TextSnippetBlock>(
-      html`<text-snippet-block
-        viewsize="list"
-        .snippets=${['text']}
-      ></text-snippet-block>`,
-    );
-
-    const container = el.shadowRoot?.querySelector('.snippet-view');
-
-    // Applies the right container classes
-    expect(container?.classList.contains('list')).to.be.true;
-    expect(container?.classList.contains('grid')).to.be.false;
-  });
-});

package/test/tile-stats.test.ts

@@ -1,191 +0,0 @@
-import { expect, fixture } from '@open-wc/testing';
-import { html } from 'lit';
-import type { TileStats } from '../src/tiles/grid/tile-stats';
-
-import '../src/tiles/grid/tile-stats';
-
-describe('Tile Stats', () => {
-  it('should render initial component', async () => {
-    const el = await fixture<TileStats>(html`<tile-stats></tile-stats>`);
-
-    const itemStats = el.shadowRoot?.querySelector('.item-stats');
-    const statsRow = el.shadowRoot?.querySelector('#stats-row');
-    const statsRowCount = statsRow?.childElementCount;
-
-    expect(itemStats).to.exist;
-    expect(statsRow).to.exist;
-    expect(statsRowCount).to.equal(4);
-  });
-
-  it('should render component with values', async () => {
-    const el = await fixture<TileStats>(html`
-      <tile-stats
-        .mediatype=${'account'}
-        .itemCount=${1}
-        .favCount=${2}
-        .commentCount=${3}
-      >
-      </tile-stats>
-    `);
-
-    const statsRow = el.shadowRoot?.querySelector('#stats-row');
-
-    const mediatypeStat = statsRow?.children.item(0);
-    // get second column item in stats row
-    const itemStatCount = statsRow?.children
-      .item(1)
-      ?.querySelector('.status-text')
-      ?.textContent?.trim();
-    // get third column item in stats row
-    const favoritesStatCount = statsRow?.children
-      .item(2)
-      ?.querySelector('.status-text')
-      ?.textContent?.trim();
-    // get fourth column item in stats row
-    const reviewsStatCount = statsRow?.children
-      .item(3)
-      ?.querySelector('.status-text')
-      ?.textContent?.trim();
-
-    expect(mediatypeStat).to.exist;
-    expect(itemStatCount).to.match(/uploads:\s+1/);
-    expect(favoritesStatCount).to.match(/favorites:\s+2/);
-    expect(reviewsStatCount).to.match(/reviews:\s+3/);
-  });
-
-  it('should render component with tv clips', async () => {
-    const el = await fixture<TileStats>(html`
-      <tile-stats
-        showTvClips
-        .mediatype=${'texts'}
-        .viewCount=${1}
-        .favCount=${2}
-        .commentCount=${3}
-        .tvClipCount=${4}
-      >
-      </tile-stats>
-    `);
-
-    const statsRow = el.shadowRoot?.querySelector('#stats-row');
-
-    const mediatypeStat = statsRow?.children.item(0);
-    // get second column item in stats row
-    const itemStatCount = statsRow?.children
-      .item(1)
-      ?.querySelector('.status-text')
-      ?.textContent?.trim();
-    // get third column item in stats row
-    const favoritesStatCount = statsRow?.children
-      .item(2)
-      ?.querySelector('.status-text')
-      ?.textContent?.trim();
-    // get fourth column item in stats row
-    const clipsStatCount = statsRow?.children
-      .item(3)
-      ?.querySelector('.status-text')
-      ?.textContent?.trim();
-
-    expect(mediatypeStat).to.exist;
-    expect(itemStatCount).to.match(/views:\s+1/);
-    expect(favoritesStatCount).to.match(/favorites:\s+2/);
-    expect(clipsStatCount).to.match(/clips:\s+4/);
-  });
-
-  it('should render view count for non-account items', async () => {
-    const el = await fixture<TileStats>(html`
-      <tile-stats
-        .mediatype=${'texts'}
-        .viewCount=${4}
-        .favCount=${5}
-        .commentCount=${6}
-      >
-      </tile-stats>
-    `);
-
-    const statsRow = el.shadowRoot?.querySelector('#stats-row');
-
-    const mediatypeStat = statsRow?.children.item(0);
-    // get second column item in stats row
-    const viewStatCount = statsRow?.children
-      .item(1)
-      ?.querySelector('.status-text')
-      ?.textContent?.trim();
-    // get third column item in stats row
-    const favoritesStatCount = statsRow?.children
-      .item(2)
-      ?.querySelector('.status-text')
-      ?.textContent?.trim();
-    // get fourth column item in stats row
-    const reviewsStatCount = statsRow?.children
-      .item(3)
-      ?.querySelector('.status-text')
-      ?.textContent?.trim();
-
-    expect(mediatypeStat).to.exist;
-    expect(viewStatCount).to.match(/views:\s+4/);
-    expect(favoritesStatCount).to.match(/favorites:\s+5/);
-    expect(reviewsStatCount).to.match(/reviews:\s+6/);
-  });
-
-  it('handles missing counts gracefully', async () => {
-    const el = await fixture<TileStats>(html`
-      <tile-stats .mediatype=${'texts'} .favCount=${5} .commentCount=${6}>
-      </tile-stats>
-    `);
-
-    const statsRow = el.shadowRoot?.querySelector('#stats-row');
-
-    const mediatypeStat = statsRow?.children.item(0);
-    // get second column item in stats row
-    const viewStatCount = statsRow?.children
-      .item(1)
-      ?.querySelector('.status-text')
-      ?.textContent?.trim();
-    // get third column item in stats row
-    const favoritesStatCount = statsRow?.children
-      .item(2)
-      ?.querySelector('.status-text')
-      ?.textContent?.trim();
-    // get fourth column item in stats row
-    const reviewsStatCount = statsRow?.children
-      .item(3)
-      ?.querySelector('.status-text')
-      ?.textContent?.trim();
-
-    expect(mediatypeStat).to.exist;
-    expect(viewStatCount).to.match(/views:\s+0/);
-    expect(favoritesStatCount).to.match(/favorites:\s+5/);
-    expect(reviewsStatCount).to.match(/reviews:\s+6/);
-  });
-
-  it('handles missing counts gracefully for accounts', async () => {
-    const el = await fixture<TileStats>(html`
-      <tile-stats .mediatype=${'account'} .favCount=${5} .commentCount=${6}>
-      </tile-stats>
-    `);
-
-    const statsRow = el.shadowRoot?.querySelector('#stats-row');
-
-    const mediatypeStat = statsRow?.children.item(0);
-    // get second column item in stats row
-    const itemStatCount = statsRow?.children
-      .item(1)
-      ?.querySelector('.status-text')
-      ?.textContent?.trim();
-    // get third column item in stats row
-    const favoritesStatCount = statsRow?.children
-      .item(2)
-      ?.querySelector('.status-text')
-      ?.textContent?.trim();
-    // get fourth column item in stats row
-    const reviewsStatCount = statsRow?.children
-      .item(3)
-      ?.querySelector('.status-text')
-      ?.textContent?.trim();
-
-    expect(mediatypeStat).to.exist;
-    expect(itemStatCount).to.match(/uploads:\s+0/);
-    expect(favoritesStatCount).to.match(/favorites:\s+5/);
-    expect(reviewsStatCount).to.match(/reviews:\s+6/);
-  });
-});

package/test/tiles/grid/account-tile.test.ts

@@ -1,121 +0,0 @@
-import { expect, fixture } from '@open-wc/testing';
-import sinon from 'sinon';
-import { html } from 'lit';
-import type { AccountTile } from '../../../src/tiles/grid/account-tile';
-
-import '../../../src/tiles/grid/account-tile';
-
-describe('Account Tile', () => {
-  it('should render initial component', async () => {
-    const el = await fixture<AccountTile>(html`<account-tile></account-tile>`);
-
-    const itemInfo = el.shadowRoot?.querySelector('.item-info');
-    const itemImage = el.shadowRoot?.querySelector('image-block');
-    const itemArchivist = el.shadowRoot?.querySelector('.archivist-since');
-    const tileStats = el.shadowRoot?.querySelector('tile-stats');
-
-    expect(itemInfo).to.exist;
-    expect(itemImage).to.exist;
-    expect(itemArchivist).to.exist;
-    expect(tileStats).to.exist;
-  });
-
-  it('should render with title element', async () => {
-    const el = await fixture<AccountTile>(html`
-      <account-tile
-        .model=${{
-          identifier: '@jack-sparrow',
-        }}
-      >
-      </account-tile>
-    `);
-    await el.updateComplete;
-
-    const itemInfo = el.shadowRoot?.querySelector('.item-info');
-    const accountTitle = el.shadowRoot?.querySelector('#title');
-
-    expect(itemInfo).to.exist;
-    expect(accountTitle).to.exist;
-    expect(accountTitle?.querySelector('.truncated')?.textContent).to.equal(
-      '@jack-sparrow',
-    );
-  });
-
-  it('should render with archivist-since date element', async () => {
-    const el = await fixture<AccountTile>(html`
-      <account-tile
-        .model=${{
-          dateAdded: new Date('2022-02-02'),
-        }}
-      >
-      </account-tile>
-    `);
-    await el.updateComplete;
-
-    const itemArchivist = el.shadowRoot?.querySelector('.archivist-since');
-    expect(itemArchivist?.textContent).contains('Archivist since 2022');
-  });
-
-  it('should render with tile-stats element', async () => {
-    const el = await fixture<AccountTile>(html`
-      <account-tile
-        .model=${{
-          identifier: '@jack-sparrow',
-          mediatype: 'account',
-          itemCount: 999,
-          favCount: 100,
-          commentCount: 3,
-        }}
-      >
-      </account-tile>
-    `);
-    await el.updateComplete;
-
-    const tileStats = el.shadowRoot?.querySelector('tile-stats');
-    const statsElements = tileStats?.shadowRoot?.querySelector('#stats-row');
-
-    expect(tileStats).to.exist;
-    expect(statsElements).to.exist;
-
-    const downloads = statsElements
-      ?.querySelectorAll('.col')[1]
-      .querySelector('.status-text');
-    expect(downloads?.textContent).contains(999);
-
-    const favorites = statsElements
-      ?.querySelectorAll('.col')[2]
-      .querySelector('.status-text');
-    expect(favorites?.textContent).contains(100);
-
-    const reviewCounts = statsElements
-      ?.querySelectorAll('.col')[3]
-      .querySelector('.status-text');
-    expect(reviewCounts?.textContent).contains(3);
-  });
-
-  it('should render info button when showInfoButton flag is set', async () => {
-    const el = await fixture<AccountTile>(html`
-      <account-tile ?showInfoButton=${true}> </account-tile>
-    `);
-
-    const infoButton = el.shadowRoot?.querySelector('.info-button');
-
-    expect(infoButton).to.exist;
-  });
-
-  it('should dispatch event when info button tapped', async () => {
-    const infoButtonSpy = sinon.spy();
-    const el = await fixture<AccountTile>(html`
-      <account-tile ?showInfoButton=${true} @infoButtonPressed=${infoButtonSpy}>
-      </account-tile>
-    `);
-
-    const infoButton = el.shadowRoot?.querySelector(
-      '.info-button',
-    ) as HTMLButtonElement;
-    infoButton.click();
-    await el.updateComplete;
-
-    expect(infoButtonSpy.callCount).to.equal(1);
-  });
-});

package/test/tiles/grid/collection-tile.test.ts

@@ -1,114 +0,0 @@
-import { expect, fixture } from '@open-wc/testing';
-import sinon from 'sinon';
-import { html } from 'lit';
-import type { CollectionTile } from '../../../src/tiles/grid/collection-tile';
-
-import '../../../src/tiles/grid/collection-tile';
-
-describe('Collection Tile', () => {
-  it('should render initial component', async () => {
-    const el = await fixture<CollectionTile>(
-      html`<collection-tile></collection-tile>`,
-    );
-
-    const itemInfo = el.shadowRoot?.querySelector('.item-info');
-    const itemImage = el.shadowRoot?.querySelector('image-block');
-    const itemStats = el.shadowRoot?.querySelector('#item-stats');
-
-    expect(itemInfo).to.exist;
-    expect(itemImage).to.exist;
-    expect(itemStats).to.exist;
-  });
-
-  it('should render with title element', async () => {
-    const el = await fixture<CollectionTile>(html`
-      <collection-tile
-        .model=${{
-          identifier: 'books',
-          title: 'Books',
-          itemCount: 121,
-        }}
-      >
-      </collection-tile>
-    `);
-    await el.updateComplete;
-
-    const itemInfo = el.shadowRoot?.querySelector('.item-info');
-    const itemTitle = el.shadowRoot?.querySelector('#title');
-
-    expect(itemInfo).to.exist;
-    expect(itemTitle).to.exist;
-    expect(itemTitle?.querySelector('.truncated')?.textContent).to.equal(
-      'Books',
-    );
-  });
-
-  it('should render with image-block element', async () => {
-    const el = await fixture<CollectionTile>(html`
-      <collection-tile
-        .model=${{
-          identifier: '@jack-sparrow',
-          itemCount: 1233,
-        }}
-      >
-      </collection-tile>
-    `);
-    await el.updateComplete;
-
-    const itemImageBlock = el.shadowRoot?.querySelector('image-block');
-    expect(itemImageBlock).to.exist;
-  });
-
-  it('should render with item stats element', async () => {
-    const el = await fixture<CollectionTile>(html`
-      <collection-tile
-        .model=${{
-          identifier: '@jack-sparrow',
-          itemCount: 14521,
-          collectionSize: 23222543,
-        }}
-      >
-      </collection-tile>
-    `);
-    await el.updateComplete;
-
-    const itemStats = el.shadowRoot?.querySelector('#item-stats');
-    const itemMediaType = el.shadowRoot?.querySelector('#item-mediatype');
-    const itemCount = el.shadowRoot?.querySelector('#item-count');
-    const itemSize = el.shadowRoot?.querySelector('#item-size');
-
-    expect(itemStats).to.exist;
-    expect(itemMediaType).to.exist;
-    expect(itemCount).to.exist;
-    expect(itemSize).to.exist;
-  });
-
-  it('should render info button when showInfoButton flag is set', async () => {
-    const el = await fixture<CollectionTile>(html`
-      <collection-tile ?showInfoButton=${true}> </collection-tile>
-    `);
-
-    const infoButton = el.shadowRoot?.querySelector('.info-button');
-
-    expect(infoButton).to.exist;
-  });
-
-  it('should dispatch event when info button tapped', async () => {
-    const infoButtonSpy = sinon.spy();
-    const el = await fixture<CollectionTile>(html`
-      <collection-tile
-        ?showInfoButton=${true}
-        @infoButtonPressed=${infoButtonSpy}
-      >
-      </collection-tile>
-    `);
-
-    const infoButton = el.shadowRoot?.querySelector(
-      '.info-button',
-    ) as HTMLButtonElement;
-    infoButton.click();
-    await el.updateComplete;
-
-    expect(infoButtonSpy.callCount).to.equal(1);
-  });
-});