@internetarchive/collection-browser 4.5.2 → 4.6.0

package/.claude/worktrees/WEBDEV-9119-migrate-to-pnpm/test/tile-stats.test.ts

@@ -0,0 +1,191 @@
+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/.claude/worktrees/WEBDEV-9119-migrate-to-pnpm/test/tiles/grid/account-tile.test.ts

@@ -0,0 +1,121 @@
+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/.claude/worktrees/WEBDEV-9119-migrate-to-pnpm/test/tiles/grid/collection-tile.test.ts

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