@internetarchive/collection-browser 3.2.0 → 3.3.0

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

@@ -296,6 +296,62 @@ describe('Item Tile', () => {
     expect(dateSortedBy?.textContent?.trim()).to.equal('reviewed Jan 01, 2013');
   });
 
+  it('should display dates in UTC time zone by default', async () => {
+    const model: Partial<TileModel> = {
+      datePublished: new Date('2012-02-15T00:00:00Z'),
+    };
+
+    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 Feb 15, 2012',
+    );
+  });
+
+  it('should display dates in local time when useLocalTime option is true', async () => {
+    // Expected behavior depends on the time zone offset where the testing occurs
+    const offset = new Date().getTimezoneOffset();
+    let datePublished, expected;
+    if (offset > 0) {
+      // Positive local time zone offsets have earlier local dates than UTC
+      datePublished = new Date('2012-02-15T00:00:00Z');
+      expected = 'published Feb 14, 2012';
+    } else if (offset < 0) {
+      // Negative local time zone offsets have later local dates than UTC
+      datePublished = new Date('2012-02-15T23:59:59Z');
+      expected = 'published Feb 16, 2012';
+    } else {
+      // Local time may just be UTC itself
+      datePublished = new Date('2012-02-15T00:00:00Z');
+      expected = 'published Feb 15, 2012';
+    }
+
+    const model: Partial<TileModel> = {
+      datePublished,
+    };
+
+    const el = await fixture<ItemTile>(html`
+      <item-tile
+        useLocalTime
+        .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(expected);
+  });
+
   it('should show the first creator matching the letter filter, if defined', async () => {
     const model: Partial<TileModel> = {
       creator: 'foo',

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

@@ -210,6 +210,60 @@ describe('List Tile Compact', () => {
     expect(dateColumn?.textContent?.trim()).to.equal('Jan 01, 2013');
   });
 
+  it('should display dates in UTC time zone by default', async () => {
+    const model: Partial<TileModel> = {
+      datePublished: new Date('2012-02-15T00: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('Feb 15, 2012');
+  });
+
+  it('should display dates in local time when useLocalTime option is true', async () => {
+    // Expected behavior depends on the time zone offset where the testing occurs
+    const offset = new Date().getTimezoneOffset();
+    let datePublished, expected;
+    if (offset > 0) {
+      // Positive local time zone offsets have earlier local dates than UTC
+      datePublished = new Date('2012-02-15T00:00:00Z');
+      expected = 'Feb 14, 2012';
+    } else if (offset < 0) {
+      // Negative local time zone offsets have later local dates than UTC
+      datePublished = new Date('2012-02-15T23:59:59Z');
+      expected = 'Feb 16, 2012';
+    } else {
+      // Local time may just be UTC itself
+      datePublished = new Date('2012-02-15T00:00:00Z');
+      expected = 'Feb 15, 2012';
+    }
+
+    const model: Partial<TileModel> = {
+      datePublished,
+    };
+
+    const el = await fixture<TileListCompact>(html`
+      <tile-list-compact
+        useLocalTime
+        .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(expected);
+  });
+
   it('should show the first creator matching the letter filter, if defined', async () => {
     const model: Partial<TileModel> = {
       creator: 'foo',

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

@@ -281,6 +281,61 @@ describe('List Tile', () => {
     expect(dateRow?.textContent?.trim()).to.contain('Reviewed:  Jan 01, 2013');
   });
 
+  it('should display dates in UTC time zone by default', async () => {
+    const model: Partial<TileModel> = {
+      datePublished: new Date('2012-02-15T00:00:00Z'),
+    };
+
+    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:  Feb 15, 2012');
+  });
+
+  it('should display dates in local time when useLocalTime option is true', async () => {
+    // Expected behavior depends on the time zone offset where the testing occurs
+    const offset = new Date().getTimezoneOffset();
+    let datePublished, expected;
+    if (offset > 0) {
+      // Positive local time zone offsets have earlier local dates than UTC
+      datePublished = new Date('2012-02-15T00:00:00Z');
+      expected = 'Published:  Feb 14, 2012';
+    } else if (offset < 0) {
+      // Negative local time zone offsets have later local dates than UTC
+      datePublished = new Date('2012-02-15T23:59:59Z');
+      expected = 'Published:  Feb 16, 2012';
+    } else {
+      // Local time may just be UTC itself
+      datePublished = new Date('2012-02-15T00:00:00Z');
+      expected = 'Published:  Feb 15, 2012';
+    }
+
+    const model: Partial<TileModel> = {
+      datePublished,
+    };
+
+    const el = await fixture<TileList>(html`
+      <tile-list
+        useLocalTime
+        .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(expected);
+  });
+
   it('should render links to /search pages (not search.php) for subject, creator, and source', async () => {
     const model: Partial<TileModel> = {
       subjects: ['foo'],

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

@@ -33,7 +33,57 @@ describe('formatDate', () => {
     );
   });
 
+  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', 'de-DE')).to.equal('09. Dez. 2020');
+    expect(formatDate(testDate, 'long', { locale: 'de-DE' })).to.equal(
+      '09. Dez. 2020',
+    );
   });
 });