@internetarchive/collection-browser 2.12.1-alpha-webdev5427.6 → 2.12.1

package/src/collection-facets/more-facets-content.ts

@@ -32,7 +32,6 @@ import {
   defaultFacetSort,
   getDefaultSelectedFacets,
   FacetEventDetails,
-  tvChannelFacetLabels,
 } from '../models';
 import type {
   CollectionTitles,
@@ -61,7 +60,7 @@ export class MoreFacetsContent extends LitElement {
 
   @property({ type: Object }) filterMap?: FilterMap;
 
-  @property({ type: Number }) searchType?: SearchType;
+  @property({ type: String }) searchType?: SearchType;
 
   @property({ type: Object }) pageSpecifierParams?: PageSpecifierParams;
 
@@ -84,11 +83,9 @@ export class MoreFacetsContent extends LitElement {
    */
   @property({ type: Object }) selectedFacets?: SelectedFacets;
 
-  @property({ type: Number }) sortedBy: AggregationSortType =
+  @property({ type: String }) sortedBy: AggregationSortType =
     AggregationSortType.COUNT;
 
-  @property({ type: Boolean }) isTvSearch = false;
-
   @property({ type: Object }) modalManager?: ModalManagerInterface;
 
   @property({ type: Object }) searchService?: SearchServiceInterface;
@@ -112,8 +109,7 @@ export class MoreFacetsContent extends LitElement {
    * eventually merged into the existing `selectedFacets` when the patron applies
    * their changes, or discarded if they cancel/close the dialog.
    */
-  @state() private unappliedFacetChanges: SelectedFacets =
-    getDefaultSelectedFacets();
+  @state() private unappliedFacetChanges = getDefaultSelectedFacets();
 
   /**
    * Which page of facets we are showing.
@@ -276,25 +272,13 @@ export class MoreFacetsContent extends LitElement {
     // Apply any unapplied selections that appear on this page
     const unappliedBuckets = this.unappliedFacetChanges[this.facetKey];
     for (const [index, bucket] of bucketsWithCount.entries()) {
-      const unappliedBucket = unappliedBuckets?.[bucket.key];
+      const unappliedBucket = unappliedBuckets[bucket.key];
       if (unappliedBucket) {
         bucketsWithCount[index] = { ...unappliedBucket };
       }
     }
-
-    // For TV creator facets, uppercase the display text
-    if (this.facetKey === 'creator' && this.isTvSearch) {
-      bucketsWithCount.forEach(b => {
-        b.displayText = (b.displayText ?? b.key)?.toLocaleUpperCase();
-
-        const channelLabel = tvChannelFacetLabels[b.displayText];
-        if (channelLabel && channelLabel !== b.displayText) {
-          b.extraNote = `(${channelLabel})`;
-        }
-      });
-    }
-
     facetGroup.buckets = bucketsWithCount;
+
     return facetGroup;
   }
 

package/src/collection-facets/smart-facets/smart-facet-bar.ts

@@ -202,7 +202,7 @@ export class SmartFacetBar extends LitElement {
         if (
           key === 'mediatype' &&
           this.selectedFacets &&
-          Object.values(this.selectedFacets.mediatype ?? {}).some(
+          Object.values(this.selectedFacets.mediatype).some(
             bucket => bucket.state !== 'none',
           )
         ) {
@@ -213,7 +213,7 @@ export class SmartFacetBar extends LitElement {
         const buckets = agg.buckets as Bucket[];
 
         const unusedBuckets = buckets.filter(b => {
-          const selectedFacetBucket = this.selectedFacets?.[facetType]?.[b.key];
+          const selectedFacetBucket = this.selectedFacets?.[facetType][b.key];
           if (selectedFacetBucket && selectedFacetBucket.state !== 'none') {
             return false;
           }

package/src/collection-facets.ts

@@ -11,7 +11,7 @@ import { map } from 'lit/directives/map.js';
 import { ref } from 'lit/directives/ref.js';
 import { msg } from '@lit/localize';
 import { classMap } from 'lit/directives/class-map.js';
-import {
+import type {
   Aggregation,
   AggregationSortType,
   Bucket,
@@ -36,7 +36,7 @@ import {
   SelectedFacets,
   FacetGroup,
   FacetBucket,
-  defaultFacetDisplayOrder,
+  facetDisplayOrder,
   facetTitles,
   lendingFacetDisplayNames,
   lendingFacetKeysVisibility,
@@ -44,7 +44,6 @@ import {
   suppressedCollections,
   defaultFacetSort,
   FacetEventDetails,
-  tvChannelFacetLabels,
 } from './models';
 import type {
   CollectionTitles,
@@ -69,7 +68,7 @@ import {
 export class CollectionFacets extends LitElement {
   @property({ type: Object }) searchService?: SearchServiceInterface;
 
-  @property({ type: Number }) searchType?: SearchType;
+  @property({ type: String }) searchType?: SearchType;
 
   @property({ type: Object }) aggregations?: Record<string, Aggregation>;
 
@@ -109,11 +108,6 @@ export class CollectionFacets extends LitElement {
 
   @property({ type: Boolean }) isManageView = false;
 
-  @property({ type: Boolean }) isTvSearch = false;
-
-  @property({ type: Array }) facetDisplayOrder: FacetOption[] =
-    defaultFacetDisplayOrder;
-
   @property({ type: Object, attribute: false })
   modalManager?: ModalManagerInterface;
 
@@ -140,9 +134,6 @@ export class CollectionFacets extends LitElement {
     creator: false,
     collection: false,
     year: false,
-    program: false,
-    person: false,
-    sponsor: false,
   };
 
   /**
@@ -236,7 +227,6 @@ export class CollectionFacets extends LitElement {
     const minDate = fullYearsHistogramAggregation?.first_bucket_key;
     const maxDate = fullYearsHistogramAggregation?.last_bucket_key;
     const buckets = fullYearsHistogramAggregation?.buckets as number[];
-    const dateFormat = this.isTvSearch ? 'YYYY-MM' : 'YYYY';
 
     // Because the modal manager does not clear its DOM content after being closed,
     // it may try to render the exact same date picker template when it is reopened.
@@ -261,7 +251,6 @@ export class CollectionFacets extends LitElement {
         .maxDate=${maxDate}
         .minSelectedDate=${this.minSelectedDate}
         .maxSelectedDate=${this.maxSelectedDate}
-        .dateFormat=${dateFormat}
         .buckets=${buckets}
         .modalManager=${this.modalManager}
         .analyticsHandler=${this.analyticsHandler}
@@ -275,7 +264,7 @@ export class CollectionFacets extends LitElement {
       headerColor: '#194880',
       showHeaderLogo: false,
       closeOnBackdropClick: true, // TODO: want to fire analytics
-      title: html`${msg('Select a date range')}`,
+      title: html`Select a date range`,
     });
 
     this.modalManager?.classList.add('expanded-date-picker');
@@ -330,18 +319,15 @@ export class CollectionFacets extends LitElement {
     const { fullYearsHistogramAggregation } = this;
     const minDate = fullYearsHistogramAggregation?.first_bucket_key;
     const maxDate = fullYearsHistogramAggregation?.last_bucket_key;
-    const dateFormat = this.isTvSearch ? 'YYYY-MM' : 'YYYY';
     return this.fullYearAggregationLoading
       ? html`<div class="histogram-loading-indicator">&hellip;</div>` // Ellipsis block
       : html`
           <histogram-date-range
-            class=${this.isTvSearch ? 'wide-inputs' : nothing}
             .minDate=${minDate}
             .maxDate=${maxDate}
             .minSelectedDate=${this.minSelectedDate ?? minDate}
             .maxSelectedDate=${this.maxSelectedDate ?? maxDate}
             .updateDelay=${100}
-            .dateFormat=${dateFormat}
             missingDataMessage="..."
             .width=${this.collapsableFacets && this.contentWidth
               ? this.contentWidth
@@ -377,7 +363,7 @@ export class CollectionFacets extends LitElement {
   private get mergedFacets(): FacetGroup[] {
     const facetGroups: FacetGroup[] = [];
 
-    this.facetDisplayOrder.forEach(facetKey => {
+    facetDisplayOrder.forEach(facetKey => {
       const selectedFacetGroup = this.selectedFacetGroups.find(
         group => group.key === facetKey,
       );
@@ -439,7 +425,7 @@ export class CollectionFacets extends LitElement {
       }
 
       // Sort the FacetBuckets so that selected and hidden buckets come before the rest
-      sortBucketsBySelectionState(bucketsWithCount, defaultFacetSort[facetKey]);
+      sortBucketsBySelectionState(bucketsWithCount);
 
       // For mediatype facets, ensure the collection bucket is always shown if present
       if (facetKey === 'mediatype') {
@@ -462,18 +448,6 @@ export class CollectionFacets extends LitElement {
         }
       }
 
-      // For TV creator facets, uppercase the display text
-      if (facetKey === 'creator' && this.isTvSearch) {
-        bucketsWithCount.forEach(b => {
-          b.displayText = (b.displayText ?? b.key)?.toLocaleUpperCase();
-
-          const channelLabel = tvChannelFacetLabels[b.displayText];
-          if (channelLabel && channelLabel !== b.displayText) {
-            b.extraNote = `(${channelLabel})`;
-          }
-        });
-      }
-
       // slice off how many items we want to show in page facet area
       facetGroup.buckets = bucketsWithCount.slice(0, allowedFacetCount);
 
@@ -705,7 +679,6 @@ export class CollectionFacets extends LitElement {
         .collectionTitles=${this.collectionTitles}
         .selectedFacets=${this.selectedFacets}
         .sortedBy=${sortedBy}
-        .isTvSearch=${this.isTvSearch}
         @facetsChanged=${(e: CustomEvent) => {
           const event = new CustomEvent<SelectedFacets>('facetsChanged', {
             detail: e.detail,
@@ -847,6 +820,8 @@ export class CollectionFacets extends LitElement {
 
         h3 {
           font-size: 1.4rem;
+          font-weight: 200
+          padding-bottom: 3px;
           margin: 0;
         }
 
@@ -883,10 +858,6 @@ export class CollectionFacets extends LitElement {
           height: 15px;
           cursor: pointer;
         }
-
-        histogram-date-range.wide-inputs {
-          --histogramDateRangeInputWidth: 4.8rem;
-        }
       `,
     ];
   }

package/src/expanded-date-picker.ts

@@ -1,6 +1,5 @@
 import { css, html, LitElement, CSSResultGroup, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { msg } from '@lit/localize';
 import type { ModalManagerInterface } from '@internetarchive/modal-manager';
 import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';
 import {
@@ -20,8 +19,6 @@ export class ExpandedDatePicker extends LitElement {
 
   @property({ type: Array }) buckets?: number[];
 
-  @property({ type: String }) dateFormat: string = 'YYYY';
-
   @property({ type: Object, attribute: false })
   modalManager?: ModalManagerInterface;
 
@@ -37,7 +34,6 @@ export class ExpandedDatePicker extends LitElement {
           .maxDate=${this.maxDate}
           .minSelectedDate=${this.minSelectedDate ?? this.minDate}
           .maxSelectedDate=${this.maxSelectedDate ?? this.maxDate}
-          .dateFormat=${this.dateFormat}
           .updateDelay=${0}
           updateWhileFocused
           missingDataMessage="..."
@@ -51,7 +47,7 @@ export class ExpandedDatePicker extends LitElement {
             slot="inputs-right-side"
             @click=${this.applyBtnClicked}
           >
-            ${msg('Apply date range')}
+            Apply date range
           </button>
         </histogram-date-range>
       </div>

package/src/models.ts

@@ -530,24 +530,18 @@ export type FacetOption =
   | 'language'
   | 'creator'
   | 'collection'
-  | 'year'
-  // TV-specific facet options:
-  | 'program'
-  | 'person'
-  | 'sponsor';
+  | 'year';
 
 export type SelectedFacetState = 'selected' | 'hidden';
 
 export type FacetState = SelectedFacetState | 'none';
 
 export interface FacetBucket {
+  // for some facets, we augment the key with a display value
+  displayText?: string;
   key: string;
   count: number;
   state: FacetState;
-  // for some facets, we augment the key with a display value
-  displayText?: string;
-  // for TV channel facets, we add a parenthesized secondary name
-  extraNote?: string;
 }
 
 export interface FacetGroup {
@@ -577,11 +571,12 @@ export type FacetEventDetails = {
 
 export type FacetValue = string;
 
-export type SelectedFacets = Partial<
-  Record<FacetOption, Record<FacetValue, FacetBucket>>
+export type SelectedFacets = Record<
+  FacetOption,
+  Record<FacetValue, FacetBucket>
 >;
 
-export const getDefaultSelectedFacets = (): Required<SelectedFacets> => ({
+export const getDefaultSelectedFacets = (): SelectedFacets => ({
   subject: {},
   lending: {},
   mediatype: {},
@@ -589,15 +584,9 @@ export const getDefaultSelectedFacets = (): Required<SelectedFacets> => ({
   creator: {},
   collection: {},
   year: {},
-  program: {},
-  person: {},
-  sponsor: {},
 });
 
-/**
- * Facet display order when presenting results for all search types *except* TV (see below).
- */
-export const defaultFacetDisplayOrder: FacetOption[] = [
+export const facetDisplayOrder: FacetOption[] = [
   'mediatype',
   // 'lending', Commenting this out removes the lending facet from the sidebar for now
   'year',
@@ -607,23 +596,6 @@ export const defaultFacetDisplayOrder: FacetOption[] = [
   'language',
 ];
 
-/**
- * Specialized facet ordering when displaying TV search results
- */
-export const tvFacetDisplayOrder: FacetOption[] = [
-  'program',
-  'creator',
-  'year',
-  'subject',
-  'collection',
-  'person',
-  'sponsor',
-  'language',
-];
-
-/**
- * Human-readable titles for each facet group.
- */
 export const facetTitles: Record<FacetOption, string> = {
   subject: 'Subject',
   lending: 'Availability',
@@ -632,9 +604,6 @@ export const facetTitles: Record<FacetOption, string> = {
   creator: 'Creator',
   collection: 'Collection',
   year: 'Year',
-  program: 'Program',
-  person: 'Person',
-  sponsor: 'Sponsor',
 };
 
 /**
@@ -647,10 +616,7 @@ export const defaultFacetSort: Record<FacetOption, AggregationSortType> = {
   language: AggregationSortType.COUNT,
   creator: AggregationSortType.COUNT,
   collection: AggregationSortType.COUNT,
-  year: AggregationSortType.NUMERIC, // Year facets are ordered by their numeric value by default
-  program: AggregationSortType.COUNT,
-  person: AggregationSortType.COUNT,
-  sponsor: AggregationSortType.COUNT,
+  year: AggregationSortType.NUMERIC,
 };
 
 /**
@@ -664,48 +630,9 @@ export const valueFacetSort: Record<FacetOption, AggregationSortType> = {
   language: AggregationSortType.ALPHABETICAL,
   creator: AggregationSortType.ALPHABETICAL,
   collection: AggregationSortType.ALPHABETICAL,
-  year: AggregationSortType.NUMERIC, // Year facets' values should be compared numerically, not lexicographically (year 2001 > year 3)
-  program: AggregationSortType.ALPHABETICAL,
-  person: AggregationSortType.ALPHABETICAL,
-  sponsor: AggregationSortType.ALPHABETICAL,
+  year: AggregationSortType.NUMERIC,
 };
 
-/**
- * Extra parenthesized labels to show next to certain TV channel facets
- *
- * TODO this is temporary for testing
- */
-export const tvChannelFacetLabels: Record<string, string> = Object.fromEntries(
-  Object.entries({
-    'Al Jazeera': ['ALJAZAM', 'ALJAZ'],
-    Bloomberg: ['BLOOMBERG'],
-    BBC: ['BBC', 'BBC1', 'BBC2'],
-    'BBC America': ['BBCAMERICA'],
-    'BBC News': ['BBCNEWS'],
-    'GB News': ['GBN'],
-    BET: ['BETW'],
-    CNBC: ['CNBC'],
-    CNN: ['CNNW', 'CNN'],
-    'Comedy Central': ['COM', 'COMW'],
-    CSPAN: ['CSPAN', 'CSPAN2', 'CSPAN3'],
-    Current: ['CURRENT'],
-    'Deutsche Welle': ['DW'],
-    'France 24': ['FRANCE24'],
-    'FOX Business': ['FBC'],
-    'FOX News': ['FOXNEWSW', 'FOXNEWS'],
-    LINKTV: ['LINKTV'],
-    MSNBC: ['MSNBCW', 'MSNBC'],
-    'NHK World': ['NHK'],
-    RT: ['RT'],
-    'Sky News': ['SKY'],
-  })
-    .map(e => e.reverse() as [string[], string])
-    .reduce(
-      (acc, cur) => acc.concat(cur[0].map(n => [n, cur[1]])),
-      [] as [string, string][],
-    ),
-);
-
 export type LendingFacetKey =
   | 'is_lendable'
   | 'is_borrowable'

package/src/utils/facet-utils.ts

@@ -62,7 +62,7 @@ export function updateSelectedFacetBucket(
   omitNoneState = false,
 ): SelectedFacets {
   const defaultedSelectedFacets = selectedFacets ?? getDefaultSelectedFacets();
-  const newFacets: SelectedFacets = {
+  const newFacets = {
     ...defaultedSelectedFacets,
     [facetType]: {
       ...defaultedSelectedFacets[facetType],
@@ -71,7 +71,7 @@ export function updateSelectedFacetBucket(
   };
 
   if (omitNoneState && bucket.state === 'none') {
-    delete newFacets[facetType]?.[bucket.key];
+    delete newFacets[facetType][bucket.key];
   }
 
   return newFacets;
@@ -93,7 +93,6 @@ export function cloneSelectedFacets(
 ): SelectedFacets {
   const cloneResult = getDefaultSelectedFacets();
   forEachFacetBucket(selectedFacets, (facetType, bucketKey, bucket) => {
-    if (!cloneResult[facetType]) cloneResult[facetType] = {};
     cloneResult[facetType][bucketKey] = bucket;
   });
   return cloneResult;
@@ -125,14 +124,13 @@ export function mergeSelectedFacets(
 ): SelectedFacets {
   const mergeResult = cloneSelectedFacets(destination);
   forEachFacetBucket(source, (facetType, bucketKey, bucket) => {
-    if (!mergeResult[facetType]) mergeResult[facetType] = {};
     mergeResult[facetType][bucketKey] = bucket;
   });
 
   // Normalize any 'none' states on the result (from either source or destination)
   forEachFacetBucket(mergeResult, (facetType, bucketKey, bucket) => {
     if (bucket.state === 'none') {
-      delete mergeResult[facetType]?.[bucketKey];
+      delete mergeResult[facetType][bucketKey];
     }
   });
 

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

@@ -11,5 +11,5 @@ export function localDateFromUTC(date: Date): Date {
  */
 export function isFirstMillisecondOfUTCYear(date?: Date): boolean {
   if (!date) return false;
-  return localDateFromUTC(date).toISOString().endsWith('-01-01T00:00:00.000Z');
+  return date.toISOString().endsWith('-01-01T00:00:00.000Z');
 }

package/test/collection-facets.test.ts

@@ -629,39 +629,6 @@ describe('Collection Facets', () => {
     expect(facetRows?.[7]?.bucket?.key).to.equal('collection');
   });
 
-  it('uses specified facet display order', async () => {
-    const el = await fixture<CollectionFacets>(
-      html`<collection-facets
-        .facetDisplayOrder=${['language', 'creator'] as FacetOption[]}
-      ></collection-facets>`,
-    );
-
-    const aggs: Record<string, Aggregation> = {
-      mediatype: new Aggregation({
-        buckets: [{ key: 'texts', doc_count: 5 }],
-      }),
-      collection: new Aggregation({
-        buckets: [{ key: 'foo', doc_count: 10 }],
-      }),
-      creator: new Aggregation({
-        buckets: [{ key: 'bar', doc_count: 15 }],
-      }),
-      language: new Aggregation({
-        buckets: [{ key: 'baz', doc_count: 20 }],
-      }),
-    };
-
-    el.aggregations = aggs;
-    await el.updateComplete;
-
-    const facetHeaders = el.shadowRoot?.querySelectorAll('.facet-group-header');
-
-    // The only two facet groups should be Language and Creator (in that order)
-    expect(facetHeaders?.length).to.equal(2);
-    expect(facetHeaders?.[0].textContent).to.contain('Language');
-    expect(facetHeaders?.[1].textContent).to.contain('Creator');
-  });
-
   describe('More Facets', () => {
     it('Does not render < allowedFacetCount', async () => {
       const el = await fixture<CollectionFacets>(

package/test/restoration-state-handler.test.ts

@@ -100,7 +100,7 @@ describe('Restoration state handler', () => {
     window.history.replaceState({ path: url.href }, '', url.href);
 
     const restorationState = handler.getRestorationState();
-    expect(restorationState.selectedFacets.year?.['2018'].state).to.equal(
+    expect(restorationState.selectedFacets.year['2018'].state).to.equal(
       'selected',
     );
   });
@@ -160,7 +160,7 @@ describe('Restoration state handler', () => {
     window.history.replaceState({ path: url.href }, '', url.href);
 
     const restorationState = handler.getRestorationState();
-    expect(restorationState.selectedFacets.subject?.foo.state).to.equal(
+    expect(restorationState.selectedFacets.subject.foo.state).to.equal(
       'selected',
     );
   });
@@ -173,7 +173,7 @@ describe('Restoration state handler', () => {
     window.history.replaceState({ path: url.href }, '', url.href);
 
     const restorationState = handler.getRestorationState();
-    expect(restorationState.selectedFacets.year?.['2018'].state).to.equal(
+    expect(restorationState.selectedFacets.year['2018'].state).to.equal(
       'hidden',
     );
   });
@@ -188,17 +188,17 @@ describe('Restoration state handler', () => {
 
     const restorationState = handler.getRestorationState();
 
-    expect(restorationState.selectedFacets.collection?.foo.state).to.equal(
+    expect(restorationState.selectedFacets.collection.foo.state).to.equal(
       'selected',
     );
-    expect(restorationState.selectedFacets.collection?.bar.state).to.equal(
+    expect(restorationState.selectedFacets.collection.bar.state).to.equal(
       'selected',
     );
 
-    expect(restorationState.selectedFacets.collection?.baz.state).to.equal(
+    expect(restorationState.selectedFacets.collection.baz.state).to.equal(
       'hidden',
     );
-    expect(restorationState.selectedFacets.collection?.boop.state).to.equal(
+    expect(restorationState.selectedFacets.collection.boop.state).to.equal(
       'hidden',
     );
   });
@@ -211,7 +211,7 @@ describe('Restoration state handler', () => {
     window.history.replaceState({ path: url.href }, '', url.href);
 
     const restorationState = handler.getRestorationState();
-    expect(restorationState.selectedFacets.collection?.foo.state).to.equal(
+    expect(restorationState.selectedFacets.collection.foo.state).to.equal(
       'hidden',
     );
   });
@@ -224,7 +224,7 @@ describe('Restoration state handler', () => {
     window.history.replaceState({ path: url.href }, '', url.href);
 
     const restorationState = handler.getRestorationState();
-    expect(restorationState.selectedFacets.subject?.foo.state).to.equal(
+    expect(restorationState.selectedFacets.subject.foo.state).to.equal(
       'selected',
     );
   });
@@ -237,7 +237,7 @@ describe('Restoration state handler', () => {
     window.history.replaceState({ path: url.href }, '', url.href);
 
     const restorationState = handler.getRestorationState();
-    expect(restorationState.selectedFacets.year?.['2018'].state).to.equal(
+    expect(restorationState.selectedFacets.year['2018'].state).to.equal(
       'hidden',
     );
   });

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

@@ -247,7 +247,7 @@ describe('Item Tile', () => {
 
   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),
+      datePublished: new Date('2012-01-01T00:00:00Z'),
     };
 
     const el = await fixture<ItemTile>(html`

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

@@ -161,7 +161,7 @@ describe('List Tile Compact', () => {
 
   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),
+      datePublished: new Date('2012-01-01T00:00:00Z'),
     };
 
     const el = await fixture<TileListCompact>(html`

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

@@ -216,9 +216,9 @@ describe('List Tile', () => {
     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 () => {
+  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),
+      datePublished: new Date('2012-01-01T00:00:00Z'),
     };
 
     const el = await fixture<TileList>(html`
@@ -234,7 +234,7 @@ describe('List Tile', () => {
     expect(dateRow?.textContent?.trim()).to.contain('Published:  2012');
   });
 
-  it('should show full date added/archived/reviewed, even on Jan 1 at midnight', async () => {
+  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),

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

@@ -16,18 +16,18 @@ describe('localDateFromUTC', () => {
 
 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);
+    const midnightOnNewYearsDay = new Date('2010-01-01T00:00:00Z');
     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);
+    const oneMillisecondTooEarly = new Date('2009-12-31T23:59:59.999Z');
     expect(isFirstMillisecondOfUTCYear(oneMillisecondTooEarly)).to.be.false;
 
-    const oneMillisecondTooLate = new Date(2010, 0, 1, 0, 0, 0, 1);
+    const oneMillisecondTooLate = new Date('2010-01-01T00:00:00.001Z');
     expect(isFirstMillisecondOfUTCYear(oneMillisecondTooLate)).to.be.false;
 
-    const middleOfTheYear = new Date(2010, 6, 1, 0, 0, 0, 0);
+    const middleOfTheYear = new Date('2010-06-01T00:00:00Z');
     expect(isFirstMillisecondOfUTCYear(middleOfTheYear)).to.be.false;
   });