@internetarchive/collection-browser 3.1.1-alpha-webdev6778.6 → 3.1.1-alpha-webdev6778.8

package/test/tiles/list/tile-list-compact.test.ts

@@ -1,228 +1,228 @@
-import { expect, fixture } from '@open-wc/testing';
-import { html } from 'lit';
-import type { TileListCompact } from '../../../src/tiles/list/tile-list-compact';
-
-import '../../../src/tiles/list/tile-list-compact';
-import type { TileModel } from '../../../src/models';
-
-describe('List Tile Compact', () => {
-  it('should render initial component', async () => {
-    const el = await fixture<TileListCompact>(
-      html`<tile-list-compact></tile-list-compact>`,
-    );
-
-    const listContainer = el.shadowRoot?.querySelector('#list-line');
-    const itemTitle = el.shadowRoot?.querySelector('#title');
-    const imageBlock = el.shadowRoot?.querySelector('image-block');
-    const itemIcon = el.shadowRoot?.querySelector('#icon');
-    const itemViews = el.shadowRoot?.querySelector('#views');
-
-    expect(listContainer).to.exist;
-    expect(itemTitle).to.exist;
-    expect(imageBlock).to.exist;
-    expect(itemIcon).to.exist;
-    expect(itemViews).to.exist;
-  });
-
-  it('should render with creator element with title', async () => {
-    const el = await fixture<TileListCompact>(html`
-      <tile-list-compact
-        .model=${{ creators: ['someone'] }}
-      ></tile-list-compact>
-    `);
-
-    const creator = el.shadowRoot?.querySelector('#creator');
-
-    expect(creator).to.exist;
-  });
-
-  it('should render title link with model href if provided', async () => {
-    const el = await fixture<TileListCompact>(html`
-      <tile-list-compact
-        .baseNavigationUrl=${''}
-        .model=${{ identifier: 'id', title: 'foo', href: '/foo/bar' }}
-      ></tile-list-compact>
-    `);
-
-    const title = el.shadowRoot?.querySelector('#title');
-
-    expect(title).to.exist;
-    expect(title?.getAttribute('href')).to.equal('/foo/bar');
-  });
-
-  it('should render weekly views when sorting by week', async () => {
-    const el = await fixture<TileListCompact>(html`
-      <tile-list-compact
-        .model=${{ viewCount: 50, weeklyViewCount: 10 }}
-        .sortParam=${{ field: 'week', direction: 'desc' }}
-      >
-      </tile-list-compact>
-    `);
-
-    const viewsColumn = el.shadowRoot?.getElementById('views');
-    expect(viewsColumn).to.exist;
-    expect(viewsColumn?.textContent?.trim()).to.equal('10');
-  });
-
-  it('should render 0 for views if missing model', async () => {
-    const el = await fixture<TileListCompact>(html`
-      <tile-list-compact .sortParam=${{ field: 'week', direction: 'desc' }}>
-      </tile-list-compact>
-    `);
-
-    const viewsColumn = el.shadowRoot?.getElementById('views');
-    expect(viewsColumn).to.exist;
-    expect(viewsColumn?.textContent?.trim()).to.equal('0');
-  });
-
-  it('should render published date when sorting by it', async () => {
-    const model: Partial<TileModel> = {
-      dateAdded: new Date(2010, 0, 2),
-      dateArchived: new Date(2011, 0, 2),
-      datePublished: new Date(2012, 0, 2),
-      dateReviewed: new Date(2013, 0, 2),
-    };
-
-    const el = await fixture<TileListCompact>(html`
-      <tile-list-compact
-        .model=${model}
-        .sortParam=${{ field: 'date', direction: 'desc' }}
-      >
-      </tile-list-compact>
-    `);
-
-    const dateColumn = el.shadowRoot?.getElementById('date');
-    expect(dateColumn).to.exist;
-    expect(dateColumn?.textContent?.trim()).to.equal('Jan 02, 2012');
-  });
-
-  it('should render added date when sorting by it', async () => {
-    const model: Partial<TileModel> = {
-      dateAdded: new Date(2010, 0, 2),
-      dateArchived: new Date(2011, 0, 2),
-      datePublished: new Date(2012, 0, 2),
-      dateReviewed: new Date(2013, 0, 2),
-    };
-
-    const el = await fixture<TileListCompact>(html`
-      <tile-list-compact
-        .model=${model}
-        .sortParam=${{ field: 'addeddate', direction: 'desc' }}
-      >
-      </tile-list-compact>
-    `);
-
-    const dateColumn = el.shadowRoot?.getElementById('date');
-    expect(dateColumn).to.exist;
-    expect(dateColumn?.textContent?.trim()).to.equal('Jan 02, 2010');
-  });
-
-  it('should render archived date when sorting by it', async () => {
-    const model: Partial<TileModel> = {
-      dateAdded: new Date(2010, 0, 2),
-      dateArchived: new Date(2011, 0, 2),
-      datePublished: new Date(2012, 0, 2),
-      dateReviewed: new Date(2013, 0, 2),
-    };
-
-    const el = await fixture<TileListCompact>(html`
-      <tile-list-compact
-        .model=${model}
-        .sortParam=${{ field: 'publicdate', direction: 'desc' }}
-      >
-      </tile-list-compact>
-    `);
-
-    const dateColumn = el.shadowRoot?.getElementById('date');
-    expect(dateColumn).to.exist;
-    expect(dateColumn?.textContent?.trim()).to.equal('Jan 02, 2011');
-  });
-
-  it('should render reviewed date when sorting by it', async () => {
-    const model: Partial<TileModel> = {
-      dateAdded: new Date(2010, 0, 2),
-      dateArchived: new Date(2011, 0, 2),
-      datePublished: new Date(2012, 0, 2),
-      dateReviewed: new Date(2013, 0, 2),
-    };
-
-    const el = await fixture<TileListCompact>(html`
-      <tile-list-compact
-        .model=${model}
-        .sortParam=${{ field: 'reviewdate', direction: 'desc' }}
-      >
-      </tile-list-compact>
-    `);
-
-    const dateColumn = el.shadowRoot?.getElementById('date');
-    expect(dateColumn).to.exist;
-    expect(dateColumn?.textContent?.trim()).to.equal('Jan 02, 2013');
-  });
-
-  it('should only show the year for a date published of Jan 1 at midnight UTC', async () => {
-    const model: Partial<TileModel> = {
-      datePublished: new Date('2012-01-01T00:00:00Z'),
-    };
-
-    const el = await fixture<TileListCompact>(html`
-      <tile-list-compact
-        .model=${model}
-        .sortParam=${{ field: 'date', direction: 'desc' }}
-      >
-      </tile-list-compact>
-    `);
-
-    const dateColumn = el.shadowRoot?.getElementById('date');
-    expect(dateColumn).to.exist;
-    expect(dateColumn?.textContent?.trim()).to.equal('2012');
-  });
-
-  it('should show full date added/archived/reviewed, even on Jan 1 at midnight UTC', async () => {
-    const model: Partial<TileModel> = {
-      dateAdded: new Date(2010, 0, 1, 0, 0, 0, 0),
-      dateArchived: new Date(2011, 0, 1, 0, 0, 0, 0),
-      datePublished: new Date(2012, 0, 1, 0, 0, 0, 0),
-      dateReviewed: new Date(2013, 0, 1, 0, 0, 0, 0),
-    };
-
-    const el = await fixture<TileListCompact>(html`
-      <tile-list-compact
-        .model=${model}
-        .sortParam=${{ field: 'addeddate', direction: 'desc' }}
-      >
-      </tile-list-compact>
-    `);
-
-    let dateColumn = el.shadowRoot?.getElementById('date');
-    expect(dateColumn).to.exist;
-    expect(dateColumn?.textContent?.trim()).to.equal('Jan 01, 2010');
-
-    el.sortParam = { field: 'publicdate', direction: 'desc' };
-    await el.updateComplete;
-    dateColumn = el.shadowRoot?.getElementById('date');
-    expect(dateColumn).to.exist;
-    expect(dateColumn?.textContent?.trim()).to.equal('Jan 01, 2011');
-
-    el.sortParam = { field: 'reviewdate', direction: 'desc' };
-    await el.updateComplete;
-    dateColumn = el.shadowRoot?.getElementById('date');
-    expect(dateColumn).to.exist;
-    expect(dateColumn?.textContent?.trim()).to.equal('Jan 01, 2013');
-  });
-
-  it('should show the first creator matching the letter filter, if defined', async () => {
-    const model: Partial<TileModel> = {
-      creator: 'foo',
-      creators: ['foo', 'bar', 'baz'],
-    };
-
-    const el = await fixture<TileListCompact>(html`
-      <tile-list-compact .model=${model} .creatorFilter=${'B'}>
-      </tile-list-compact>
-    `);
-
-    const creator = el.shadowRoot?.getElementById('creator');
-    expect(creator).to.exist;
-    expect(creator?.textContent?.trim()).to.equal('bar');
-  });
-});
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import type { TileListCompact } from '../../../src/tiles/list/tile-list-compact';
+
+import '../../../src/tiles/list/tile-list-compact';
+import type { TileModel } from '../../../src/models';
+
+describe('List Tile Compact', () => {
+  it('should render initial component', async () => {
+    const el = await fixture<TileListCompact>(
+      html`<tile-list-compact></tile-list-compact>`,
+    );
+
+    const listContainer = el.shadowRoot?.querySelector('#list-line');
+    const itemTitle = el.shadowRoot?.querySelector('#title');
+    const imageBlock = el.shadowRoot?.querySelector('image-block');
+    const itemIcon = el.shadowRoot?.querySelector('#icon');
+    const itemViews = el.shadowRoot?.querySelector('#views');
+
+    expect(listContainer).to.exist;
+    expect(itemTitle).to.exist;
+    expect(imageBlock).to.exist;
+    expect(itemIcon).to.exist;
+    expect(itemViews).to.exist;
+  });
+
+  it('should render with creator element with title', async () => {
+    const el = await fixture<TileListCompact>(html`
+      <tile-list-compact
+        .model=${{ creators: ['someone'] }}
+      ></tile-list-compact>
+    `);
+
+    const creator = el.shadowRoot?.querySelector('#creator');
+
+    expect(creator).to.exist;
+  });
+
+  it('should render title link with model href if provided', async () => {
+    const el = await fixture<TileListCompact>(html`
+      <tile-list-compact
+        .baseNavigationUrl=${''}
+        .model=${{ identifier: 'id', title: 'foo', href: '/foo/bar' }}
+      ></tile-list-compact>
+    `);
+
+    const title = el.shadowRoot?.querySelector('#title');
+
+    expect(title).to.exist;
+    expect(title?.getAttribute('href')).to.equal('/foo/bar');
+  });
+
+  it('should render weekly views when sorting by week', async () => {
+    const el = await fixture<TileListCompact>(html`
+      <tile-list-compact
+        .model=${{ viewCount: 50, weeklyViewCount: 10 }}
+        .sortParam=${{ field: 'week', direction: 'desc' }}
+      >
+      </tile-list-compact>
+    `);
+
+    const viewsColumn = el.shadowRoot?.getElementById('views');
+    expect(viewsColumn).to.exist;
+    expect(viewsColumn?.textContent?.trim()).to.equal('10');
+  });
+
+  it('should render 0 for views if missing model', async () => {
+    const el = await fixture<TileListCompact>(html`
+      <tile-list-compact .sortParam=${{ field: 'week', direction: 'desc' }}>
+      </tile-list-compact>
+    `);
+
+    const viewsColumn = el.shadowRoot?.getElementById('views');
+    expect(viewsColumn).to.exist;
+    expect(viewsColumn?.textContent?.trim()).to.equal('0');
+  });
+
+  it('should render published date when sorting by it', async () => {
+    const model: Partial<TileModel> = {
+      dateAdded: new Date(2010, 0, 2),
+      dateArchived: new Date(2011, 0, 2),
+      datePublished: new Date(2012, 0, 2),
+      dateReviewed: new Date(2013, 0, 2),
+    };
+
+    const el = await fixture<TileListCompact>(html`
+      <tile-list-compact
+        .model=${model}
+        .sortParam=${{ field: 'date', direction: 'desc' }}
+      >
+      </tile-list-compact>
+    `);
+
+    const dateColumn = el.shadowRoot?.getElementById('date');
+    expect(dateColumn).to.exist;
+    expect(dateColumn?.textContent?.trim()).to.equal('Jan 02, 2012');
+  });
+
+  it('should render added date when sorting by it', async () => {
+    const model: Partial<TileModel> = {
+      dateAdded: new Date(2010, 0, 2),
+      dateArchived: new Date(2011, 0, 2),
+      datePublished: new Date(2012, 0, 2),
+      dateReviewed: new Date(2013, 0, 2),
+    };
+
+    const el = await fixture<TileListCompact>(html`
+      <tile-list-compact
+        .model=${model}
+        .sortParam=${{ field: 'addeddate', direction: 'desc' }}
+      >
+      </tile-list-compact>
+    `);
+
+    const dateColumn = el.shadowRoot?.getElementById('date');
+    expect(dateColumn).to.exist;
+    expect(dateColumn?.textContent?.trim()).to.equal('Jan 02, 2010');
+  });
+
+  it('should render archived date when sorting by it', async () => {
+    const model: Partial<TileModel> = {
+      dateAdded: new Date(2010, 0, 2),
+      dateArchived: new Date(2011, 0, 2),
+      datePublished: new Date(2012, 0, 2),
+      dateReviewed: new Date(2013, 0, 2),
+    };
+
+    const el = await fixture<TileListCompact>(html`
+      <tile-list-compact
+        .model=${model}
+        .sortParam=${{ field: 'publicdate', direction: 'desc' }}
+      >
+      </tile-list-compact>
+    `);
+
+    const dateColumn = el.shadowRoot?.getElementById('date');
+    expect(dateColumn).to.exist;
+    expect(dateColumn?.textContent?.trim()).to.equal('Jan 02, 2011');
+  });
+
+  it('should render reviewed date when sorting by it', async () => {
+    const model: Partial<TileModel> = {
+      dateAdded: new Date(2010, 0, 2),
+      dateArchived: new Date(2011, 0, 2),
+      datePublished: new Date(2012, 0, 2),
+      dateReviewed: new Date(2013, 0, 2),
+    };
+
+    const el = await fixture<TileListCompact>(html`
+      <tile-list-compact
+        .model=${model}
+        .sortParam=${{ field: 'reviewdate', direction: 'desc' }}
+      >
+      </tile-list-compact>
+    `);
+
+    const dateColumn = el.shadowRoot?.getElementById('date');
+    expect(dateColumn).to.exist;
+    expect(dateColumn?.textContent?.trim()).to.equal('Jan 02, 2013');
+  });
+
+  it('should only show the year for a date published of Jan 1 at midnight UTC', async () => {
+    const model: Partial<TileModel> = {
+      datePublished: new Date('2012-01-01T00:00:00Z'),
+    };
+
+    const el = await fixture<TileListCompact>(html`
+      <tile-list-compact
+        .model=${model}
+        .sortParam=${{ field: 'date', direction: 'desc' }}
+      >
+      </tile-list-compact>
+    `);
+
+    const dateColumn = el.shadowRoot?.getElementById('date');
+    expect(dateColumn).to.exist;
+    expect(dateColumn?.textContent?.trim()).to.equal('2012');
+  });
+
+  it('should show full date added/archived/reviewed, even on Jan 1 at midnight UTC', async () => {
+    const model: Partial<TileModel> = {
+      dateAdded: new Date(2010, 0, 1, 0, 0, 0, 0),
+      dateArchived: new Date(2011, 0, 1, 0, 0, 0, 0),
+      datePublished: new Date(2012, 0, 1, 0, 0, 0, 0),
+      dateReviewed: new Date(2013, 0, 1, 0, 0, 0, 0),
+    };
+
+    const el = await fixture<TileListCompact>(html`
+      <tile-list-compact
+        .model=${model}
+        .sortParam=${{ field: 'addeddate', direction: 'desc' }}
+      >
+      </tile-list-compact>
+    `);
+
+    let dateColumn = el.shadowRoot?.getElementById('date');
+    expect(dateColumn).to.exist;
+    expect(dateColumn?.textContent?.trim()).to.equal('Jan 01, 2010');
+
+    el.sortParam = { field: 'publicdate', direction: 'desc' };
+    await el.updateComplete;
+    dateColumn = el.shadowRoot?.getElementById('date');
+    expect(dateColumn).to.exist;
+    expect(dateColumn?.textContent?.trim()).to.equal('Jan 01, 2011');
+
+    el.sortParam = { field: 'reviewdate', direction: 'desc' };
+    await el.updateComplete;
+    dateColumn = el.shadowRoot?.getElementById('date');
+    expect(dateColumn).to.exist;
+    expect(dateColumn?.textContent?.trim()).to.equal('Jan 01, 2013');
+  });
+
+  it('should show the first creator matching the letter filter, if defined', async () => {
+    const model: Partial<TileModel> = {
+      creator: 'foo',
+      creators: ['foo', 'bar', 'baz'],
+    };
+
+    const el = await fixture<TileListCompact>(html`
+      <tile-list-compact .model=${model} .creatorFilter=${'B'}>
+      </tile-list-compact>
+    `);
+
+    const creator = el.shadowRoot?.getElementById('creator');
+    expect(creator).to.exist;
+    expect(creator?.textContent?.trim()).to.equal('bar');
+  });
+});

package/test/utils/format-date.test.ts

@@ -1,39 +1,39 @@
-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('returns locale formatted date', () => {
-    expect(formatDate(testDate, 'long', '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('returns locale formatted date', () => {
+    expect(formatDate(testDate, 'long', 'de-DE')).to.equal('09. Dez. 2020');
+  });
+});