@internetarchive/collection-browser 0.4.16-alpha.9 → 0.4.16

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

@@ -5,6 +5,7 @@ import { html } from 'lit';
 import type { ItemTile } from '../../../src/tiles/grid/item-tile';
 
 import '../../../src/tiles/grid/item-tile';
+import type { TileModel } from '../../../src/models';
 
 describe('Item Tile', () => {
   it('should render initial component', async () => {
@@ -115,7 +116,7 @@ describe('Item Tile', () => {
     expect(dateSortedBy).to.not.exist;
   });
 
-  it('should render with created-by when sorting not related to date', async () => {
+  it('should render without created-by when sorting by a date field', async () => {
     const el = await fixture<ItemTile>(
       html`<item-tile .model=${{ dateAdded: new Date() }}></item-tile>`
     );
@@ -135,7 +136,7 @@ describe('Item Tile', () => {
     expect(dateSortedBy).to.exist;
   });
 
-  it('should render with created-by when sort field id not like date', async () => {
+  it('should render with created-by when sort field is not a date', async () => {
     const el = await fixture<ItemTile>(
       html`<item-tile .model=${{ creator: 'someone' }}></item-tile>`
     );
@@ -151,10 +152,151 @@ describe('Item Tile', () => {
     const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');
 
     expect(itemInfo).to.exist;
-    expect(dateSortedBy).to.not.exist; // it should be exist because this is not related to date sort
+    expect(dateSortedBy).to.not.exist; // it should not exist because this is not a date sort
     expect(createdBy).to.exist;
   });
 
+  it('should render published date when sorting by it', async () => {
+    const model: Partial<TileModel> = {
+      dateAdded: new Date('2010-01-02'),
+      dateArchived: new Date('2011-01-02'),
+      datePublished: new Date('2012-01-02'),
+      dateReviewed: new Date('2013-01-02'),
+    };
+
+    const el = await fixture<ItemTile>(html`
+      <item-tile
+        .model=${model}
+        .sortParam=${{ field: 'date', direction: 'desc' }}
+      >
+      </item-tile>
+    `);
+
+    const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');
+    expect(dateSortedBy).to.exist;
+    expect(dateSortedBy?.textContent?.trim()).to.contain(
+      'published Jan 02, 2012'
+    );
+  });
+
+  it('should render added date when sorting by it', async () => {
+    const model: Partial<TileModel> = {
+      dateAdded: new Date('2010-01-02'),
+      dateArchived: new Date('2011-01-02'),
+      datePublished: new Date('2012-01-02'),
+      dateReviewed: new Date('2013-01-02'),
+    };
+
+    const el = await fixture<ItemTile>(html`
+      <item-tile
+        .model=${model}
+        .sortParam=${{ field: 'addeddate', direction: 'desc' }}
+      >
+      </item-tile>
+    `);
+
+    const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');
+    expect(dateSortedBy).to.exist;
+    expect(dateSortedBy?.textContent?.trim()).to.contain('added Jan 02, 2010');
+  });
+
+  it('should render archived date when sorting by it', async () => {
+    const model: Partial<TileModel> = {
+      dateAdded: new Date('2010-01-02'),
+      dateArchived: new Date('2011-01-02'),
+      datePublished: new Date('2012-01-02'),
+      dateReviewed: new Date('2013-01-02'),
+    };
+
+    const el = await fixture<ItemTile>(html`
+      <item-tile
+        .model=${model}
+        .sortParam=${{ field: 'publicdate', direction: 'desc' }}
+      >
+      </item-tile>
+    `);
+
+    const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');
+    expect(dateSortedBy).to.exist;
+    expect(dateSortedBy?.textContent?.trim()).to.contain(
+      'archived Jan 02, 2011'
+    );
+  });
+
+  it('should render reviewed date when sorting by it', async () => {
+    const model: Partial<TileModel> = {
+      dateAdded: new Date('2010-01-02'),
+      dateArchived: new Date('2011-01-02'),
+      datePublished: new Date('2012-01-02'),
+      dateReviewed: new Date('2013-01-02'),
+    };
+
+    const el = await fixture<ItemTile>(html`
+      <item-tile
+        .model=${model}
+        .sortParam=${{ field: 'reviewdate', direction: 'desc' }}
+      >
+      </item-tile>
+    `);
+
+    const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');
+    expect(dateSortedBy).to.exist;
+    expect(dateSortedBy?.textContent?.trim()).to.contain(
+      'reviewed 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, 0, 1, 0, 0, 0, 0),
+    };
+
+    const el = await fixture<ItemTile>(html`
+      <item-tile
+        .model=${model}
+        .sortParam=${{ field: 'date', direction: 'desc' }}
+      >
+      </item-tile>
+    `);
+
+    const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');
+    expect(dateSortedBy).to.exist;
+    expect(dateSortedBy?.textContent?.trim()).to.equal('published 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<ItemTile>(html`
+      <item-tile
+        .model=${model}
+        .sortParam=${{ field: 'addeddate', direction: 'desc' }}
+      >
+      </item-tile>
+    `);
+
+    let dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');
+    expect(dateSortedBy).to.exist;
+    expect(dateSortedBy?.textContent?.trim()).to.equal('added Jan 01, 2010');
+
+    el.sortParam = { field: 'publicdate', direction: 'desc' };
+    await el.updateComplete;
+    dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');
+    expect(dateSortedBy).to.exist;
+    expect(dateSortedBy?.textContent?.trim()).to.equal('archived Jan 01, 2011');
+
+    el.sortParam = { field: 'reviewdate', direction: 'desc' };
+    await el.updateComplete;
+    dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');
+    expect(dateSortedBy).to.exist;
+    expect(dateSortedBy?.textContent?.trim()).to.equal('reviewed Jan 01, 2013');
+  });
+
   it('should render with snippet block when it has snippets', async () => {
     const el = await fixture<ItemTile>(html`
       <item-tile .model=${{ snippets: ['some {{{snippet}}} text'] }}>

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

@@ -78,10 +78,10 @@ describe('List Tile Compact', () => {
 
   it('should render published date when sorting by it', async () => {
     const model: Partial<TileModel> = {
-      dateAdded: new Date('2010-01-01'),
-      dateArchived: new Date('2011-01-01'),
-      datePublished: new Date('2012-01-01'),
-      dateReviewed: new Date('2013-01-01'),
+      dateAdded: new Date('2010-01-02'),
+      dateArchived: new Date('2011-01-02'),
+      datePublished: new Date('2012-01-02'),
+      dateReviewed: new Date('2013-01-02'),
     };
 
     const el = await fixture<TileListCompact>(html`
@@ -94,15 +94,15 @@ describe('List Tile Compact', () => {
 
     const dateColumn = el.shadowRoot?.getElementById('date');
     expect(dateColumn).to.exist;
-    expect(dateColumn?.textContent?.trim()).to.equal('Jan 01, 2012');
+    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-01-01'),
-      dateArchived: new Date('2011-01-01'),
-      datePublished: new Date('2012-01-01'),
-      dateReviewed: new Date('2013-01-01'),
+      dateAdded: new Date('2010-01-02'),
+      dateArchived: new Date('2011-01-02'),
+      datePublished: new Date('2012-01-02'),
+      dateReviewed: new Date('2013-01-02'),
     };
 
     const el = await fixture<TileListCompact>(html`
@@ -115,15 +115,15 @@ describe('List Tile Compact', () => {
 
     const dateColumn = el.shadowRoot?.getElementById('date');
     expect(dateColumn).to.exist;
-    expect(dateColumn?.textContent?.trim()).to.equal('Jan 01, 2010');
+    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-01-01'),
-      dateArchived: new Date('2011-01-01'),
-      datePublished: new Date('2012-01-01'),
-      dateReviewed: new Date('2013-01-01'),
+      dateAdded: new Date('2010-01-02'),
+      dateArchived: new Date('2011-01-02'),
+      datePublished: new Date('2012-01-02'),
+      dateReviewed: new Date('2013-01-02'),
     };
 
     const el = await fixture<TileListCompact>(html`
@@ -136,15 +136,15 @@ describe('List Tile Compact', () => {
 
     const dateColumn = el.shadowRoot?.getElementById('date');
     expect(dateColumn).to.exist;
-    expect(dateColumn?.textContent?.trim()).to.equal('Jan 01, 2011');
+    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-01-01'),
-      dateArchived: new Date('2011-01-01'),
-      datePublished: new Date('2012-01-01'),
-      dateReviewed: new Date('2013-01-01'),
+      dateAdded: new Date('2010-01-02'),
+      dateArchived: new Date('2011-01-02'),
+      datePublished: new Date('2012-01-02'),
+      dateReviewed: new Date('2013-01-02'),
     };
 
     const el = await fixture<TileListCompact>(html`
@@ -157,6 +157,57 @@ describe('List Tile 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, 0, 1, 0, 0, 0, 0),
+    };
+
+    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');
   });
 });

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

@@ -136,12 +136,33 @@ describe('List Tile', () => {
     expect(viewsRow?.textContent?.trim()).to.equal('Views:  10');
   });
 
+  it('should render published date when sorting by it', async () => {
+    const model: Partial<TileModel> = {
+      dateAdded: new Date('2010-01-02'),
+      dateArchived: new Date('2011-01-02'),
+      datePublished: new Date('2012-01-02'),
+      dateReviewed: new Date('2013-01-02'),
+    };
+
+    const el = await fixture<TileList>(html`
+      <tile-list
+        .model=${model}
+        .sortParam=${{ field: 'date', direction: 'desc' }}
+      >
+      </tile-list>
+    `);
+
+    const dateRow = el.shadowRoot?.getElementById('dates-line');
+    expect(dateRow).to.exist;
+    expect(dateRow?.textContent?.trim()).to.contain('Published:  Jan 02, 2012');
+  });
+
   it('should render added date when sorting by it', async () => {
     const model: Partial<TileModel> = {
-      dateAdded: new Date('2010-01-01'),
-      dateArchived: new Date('2011-01-01'),
-      datePublished: new Date('2012-01-01'),
-      dateReviewed: new Date('2013-01-01'),
+      dateAdded: new Date('2010-01-02'),
+      dateArchived: new Date('2011-01-02'),
+      datePublished: new Date('2012-01-02'),
+      dateReviewed: new Date('2013-01-02'),
     };
 
     const el = await fixture<TileList>(html`
@@ -154,7 +175,100 @@ describe('List Tile', () => {
 
     const dateRow = el.shadowRoot?.getElementById('dates-line');
     expect(dateRow).to.exist;
+    expect(dateRow?.textContent?.trim()).to.contain('Added:  Jan 02, 2010');
+  });
+
+  it('should render archived date when sorting by it', async () => {
+    const model: Partial<TileModel> = {
+      dateAdded: new Date('2010-01-02'),
+      dateArchived: new Date('2011-01-02'),
+      datePublished: new Date('2012-01-02'),
+      dateReviewed: new Date('2013-01-02'),
+    };
+
+    const el = await fixture<TileList>(html`
+      <tile-list
+        .model=${model}
+        .sortParam=${{ field: 'publicdate', direction: 'desc' }}
+      >
+      </tile-list>
+    `);
+
+    const dateRow = el.shadowRoot?.getElementById('dates-line');
+    expect(dateRow).to.exist;
+    expect(dateRow?.textContent?.trim()).to.contain('Archived:  Jan 02, 2011');
+  });
+
+  it('should render reviewed date when sorting by it', async () => {
+    const model: Partial<TileModel> = {
+      dateAdded: new Date('2010-01-02'),
+      dateArchived: new Date('2011-01-02'),
+      datePublished: new Date('2012-01-02'),
+      dateReviewed: new Date('2013-01-02'),
+    };
+
+    const el = await fixture<TileList>(html`
+      <tile-list
+        .model=${model}
+        .sortParam=${{ field: 'reviewdate', direction: 'desc' }}
+      >
+      </tile-list>
+    `);
+
+    const dateRow = el.shadowRoot?.getElementById('dates-line');
+    expect(dateRow).to.exist;
+    expect(dateRow?.textContent?.trim()).to.contain('Reviewed:  Jan 02, 2013');
+  });
+
+  it('should only show the year for a date published of Jan 1 at midnight', async () => {
+    const model: Partial<TileModel> = {
+      datePublished: new Date(2012, 0, 1, 0, 0, 0, 0),
+    };
+
+    const el = await fixture<TileList>(html`
+      <tile-list
+        .model=${model}
+        .sortParam=${{ field: 'date', direction: 'desc' }}
+      >
+      </tile-list>
+    `);
+
+    const dateRow = el.shadowRoot?.getElementById('dates-line');
+    expect(dateRow).to.exist;
+    expect(dateRow?.textContent?.trim()).to.contain('Published:  2012');
+  });
+
+  it('should show full date added/archived/reviewed, even on Jan 1 at midnight', 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<TileList>(html`
+      <tile-list
+        .model=${model}
+        .sortParam=${{ field: 'addeddate', direction: 'desc' }}
+      >
+      </tile-list>
+    `);
+
+    let dateRow = el.shadowRoot?.getElementById('dates-line');
+    expect(dateRow).to.exist;
     expect(dateRow?.textContent?.trim()).to.contain('Added:  Jan 01, 2010');
+
+    el.sortParam = { field: 'publicdate', direction: 'desc' };
+    await el.updateComplete;
+    dateRow = el.shadowRoot?.getElementById('dates-line');
+    expect(dateRow).to.exist;
+    expect(dateRow?.textContent?.trim()).to.contain('Archived:  Jan 01, 2011');
+
+    el.sortParam = { field: 'reviewdate', direction: 'desc' };
+    await el.updateComplete;
+    dateRow = el.shadowRoot?.getElementById('dates-line');
+    expect(dateRow).to.exist;
+    expect(dateRow?.textContent?.trim()).to.contain('Reviewed:  Jan 01, 2013');
   });
 
   it('should render links to /search pages (not search.php) for subject, creator, and source', async () => {

package/test/utils/local-date-from-utc.test.ts

@@ -0,0 +1,37 @@
+import { expect } from '@open-wc/testing';
+import {
+  localDateFromUTC,
+  isFirstMillisecondOfUTCYear,
+} from '../../src/utils/local-date-from-utc';
+
+describe('localDateFromUTC', () => {
+  it('converts dates from UTC to local timezone', async () => {
+    const date = new Date(1990, 1, 2, 3, 4, 5, 6);
+    const dateFromUTC = new Date(Date.UTC(1990, 1, 2, 3, 4, 5, 6));
+    expect(localDateFromUTC(date).toISOString()).to.equal(
+      dateFromUTC.toISOString()
+    );
+  });
+});
+
+describe('isFirstMillisecondOfUTCYear', () => {
+  it('returns true when date is exactly Jan 1 at midnight in UTC', async () => {
+    const midnightOnNewYearsDay = new Date(2010, 0, 1, 0, 0, 0, 0);
+    expect(isFirstMillisecondOfUTCYear(midnightOnNewYearsDay)).to.be.true;
+  });
+
+  it('returns false when date is not exactly Jan 1 at midnight in UTC', async () => {
+    const oneMillisecondTooEarly = new Date(2009, 11, 31, 23, 59, 59, 999);
+    expect(isFirstMillisecondOfUTCYear(oneMillisecondTooEarly)).to.be.false;
+
+    const oneMillisecondTooLate = new Date(2010, 0, 1, 0, 0, 0, 1);
+    expect(isFirstMillisecondOfUTCYear(oneMillisecondTooLate)).to.be.false;
+
+    const middleOfTheYear = new Date(2010, 6, 1, 0, 0, 0, 0);
+    expect(isFirstMillisecondOfUTCYear(middleOfTheYear)).to.be.false;
+  });
+
+  it('returns false when no date provided', async () => {
+    expect(isFirstMillisecondOfUTCYear(undefined)).to.be.false;
+  });
+});