@internetarchive/collection-browser 1.4.2-alpha.1 → 1.4.2-alpha.2

package/src/app-root.ts

@@ -95,9 +95,7 @@ export class AppRoot extends LitElement {
     this.searchQuery = this.baseQueryField.value;
     this.collectionBrowser.searchType = this.searchType;
 
-    if ((this.currentPage ?? 1) > 1) {
-      this.collectionBrowser.goToPage(this.currentPage ?? 1);
-    }
+    this.goToCurrentPage();
   }
 
   private collectionChanged(e: Event) {
@@ -105,8 +103,13 @@ export class AppRoot extends LitElement {
     this.withinCollection = this.baseCollectionField.value;
     this.collectionBrowser.withinCollection = this.withinCollection;
 
-    if ((this.currentPage ?? 1) > 1) {
-      this.collectionBrowser.goToPage(this.currentPage ?? 1);
+    this.goToCurrentPage();
+  }
+
+  private goToCurrentPage() {
+    const page = this.currentPage ?? 1;
+    if (page > 1) {
+      this.collectionBrowser.goToPage(page);
     }
   }
 

package/src/collection-browser.ts

@@ -385,14 +385,20 @@ export class CollectionBrowser
   }
 
   private setPlaceholderType() {
+    const hasQuery = !!this.baseQuery?.trim();
+    const isCollection = !!this.withinCollection;
+    const noResults =
+      !this.searchResultsLoading &&
+      (this.totalResults === 0 || !this.searchService);
+
     this.placeholderType = null;
-    if (!this.baseQuery?.trim() && !this.withinCollection) {
+    if (!hasQuery && !isCollection) {
       this.placeholderType = 'empty-query';
-    } else if (
-      !this.searchResultsLoading &&
-      (this.totalResults === 0 || !this.searchService)
-    ) {
-      this.placeholderType = 'null-result';
+    } else if (noResults) {
+      // Within a collection, no query + no results means the collection simply has no viewable items.
+      // Otherwise, we must have a user query that produced 0 results.
+      this.placeholderType =
+        !hasQuery && isCollection ? 'empty-collection' : 'no-results';
     }
 
     if (this.queryErrorMessage) {
@@ -405,6 +411,7 @@ export class CollectionBrowser
       <empty-placeholder
         .placeholderType=${this.placeholderType}
         ?isMobileView=${this.mobileView}
+        ?isCollection=${!!this.withinCollection}
         .detailMessage=${this.queryErrorMessage ?? ''}
         .baseNavigationUrl=${this.baseNavigationUrl}
       ></empty-placeholder>
@@ -1486,8 +1493,7 @@ export class CollectionBrowser
 
   private async fetchFacets() {
     const trimmedQuery = this.baseQuery?.trim();
-    if (!trimmedQuery && !this.withinCollection) return;
-    if (!this.searchService) return;
+    if (!this.canPerformSearch) return;
 
     const { facetFetchQueryKey } = this;
 
@@ -1508,7 +1514,7 @@ export class CollectionBrowser
     );
 
     this.facetsLoading = true;
-    const searchResponse = await this.searchService.search(
+    const searchResponse = await this.searchService?.search(
       params,
       this.searchType
     );
@@ -1576,6 +1582,25 @@ export class CollectionBrowser
     });
   }
 
+  /**
+   * Whether a search may be performed in the current state of the component.
+   * This is only true if the search service is defined, and either
+   *   (a) a non-empty query is set, or
+   *   (b) we are on a collection page in metadata search mode.
+   */
+  private get canPerformSearch(): boolean {
+    if (!this.searchService) return false;
+
+    const trimmedQuery = this.baseQuery?.trim();
+    const hasNonEmptyQuery = !!trimmedQuery;
+    const isCollectionSearch = !!this.withinCollection;
+    const isMetadataSearch = this.searchType === SearchType.METADATA;
+
+    // Metadata searches within a collection are allowed to have no query.
+    // Otherwise, a non-empty query must be set.
+    return hasNonEmptyQuery || (isCollectionSearch && isMetadataSearch);
+  }
+
   /**
    * Additional params to pass to the search service if targeting a collection page,
    * or null otherwise.
@@ -1630,8 +1655,7 @@ export class CollectionBrowser
    */
   async fetchPage(pageNumber: number, numInitialPages = 1) {
     const trimmedQuery = this.baseQuery?.trim();
-    if (!trimmedQuery && !this.withinCollection) return;
-    if (!this.searchService) return;
+    if (!this.canPerformSearch) return;
 
     // if we already have data, don't fetch again
     if (this.dataSource[pageNumber]) return;
@@ -1665,7 +1689,7 @@ export class CollectionBrowser
     };
     params.uid = await this.requestUID(params, 'hits');
 
-    const searchResponse = await this.searchService.search(
+    const searchResponse = await this.searchService?.search(
       params,
       this.searchType
     );
@@ -1854,7 +1878,7 @@ export class CollectionBrowser
     filterType: PrefixFilterType
   ): Promise<Bucket[]> {
     const trimmedQuery = this.baseQuery?.trim();
-    if (!trimmedQuery && !this.withinCollection) return [];
+    if (!this.canPerformSearch) return [];
 
     const filterAggregationKey = prefixFilterAggregationKeys[filterType];
     const sortParams = this.sortParam ? [this.sortParam] : [];

package/src/empty-placeholder.ts

@@ -8,21 +8,53 @@ import {
 } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { choose } from 'lit/directives/choose.js';
+import { msg } from '@lit/localize';
 
 import emptyQueryIcon from './assets/img/icons/empty-query';
 import nullResultIcon from './assets/img/icons/null-result';
 
 export type PlaceholderType =
   | 'empty-query'
-  | 'null-result'
+  | 'empty-collection'
+  | 'no-results'
   | 'query-error'
   | null;
 @customElement('empty-placeholder')
 export class EmptyPlaceholder extends LitElement {
+  private static readonly MESSAGE_EMPTY_QUERY = msg(
+    'To begin searching, enter a search term in the box above and hit "Go".'
+  );
+
+  private static readonly MESSAGE_NO_SEARCH_RESULTS = msg(
+    'Your search did not match any items in the Archive. ' +
+      'Try different keywords or a more general search.'
+  );
+
+  private static readonly MESSAGE_NO_COLLECTION_RESULTS = msg(
+    'Your search did not match any items in this collection. ' +
+      'Try different keywords or a more general search.'
+  );
+
+  private static readonly MESSAGE_NO_VIEWABLE_MEMBERS = msg(
+    'This collection contains no viewable items.'
+  );
+
+  private static readonly MESSAGE_QUERY_ERROR = msg(html`The search engine
+    encountered an error, which might be related to your search query.
+    <a
+      href="https://help.archive.org/help/search-building-powerful-complex-queries/"
+    >
+      Tips for constructing search queries.
+    </a> `);
+
+  private static readonly QUERY_ERROR_DETAILS_MESSAGE = msg('Error details:');
+
   @property({ type: String }) placeholderType: PlaceholderType = null;
 
   @property({ type: Boolean }) isMobileView?: false;
 
+  @property({ type: Boolean }) isCollection?: false;
+
   @property({ type: String }) detailMessage?: string = '';
 
   render() {
@@ -38,7 +70,8 @@ export class EmptyPlaceholder extends LitElement {
       >
         ${choose(this.placeholderType, [
           ['empty-query', () => this.emptyQueryTemplate],
-          ['null-result', () => this.nullResultTemplate],
+          ['empty-collection', () => this.emptyCollectionTemplate],
+          ['no-results', () => this.noResultsTemplate],
           ['query-error', () => this.queryErrorTemplate],
         ])}
       </div>
@@ -47,18 +80,24 @@ export class EmptyPlaceholder extends LitElement {
 
   private get emptyQueryTemplate(): TemplateResult {
     return html`
-      <h2 class="title">
-        To begin searching, enter a search term in the box above and hit "Go".
-      </h2>
+      <h2 class="title">${EmptyPlaceholder.MESSAGE_EMPTY_QUERY}</h2>
       <div>${emptyQueryIcon}</div>
     `;
   }
 
-  private get nullResultTemplate(): TemplateResult {
+  private get emptyCollectionTemplate(): TemplateResult {
+    return html`
+      <h2 class="title">${EmptyPlaceholder.MESSAGE_NO_VIEWABLE_MEMBERS}</h2>
+      <div>${nullResultIcon}</div>
+    `;
+  }
+
+  private get noResultsTemplate(): TemplateResult {
     return html`
       <h2 class="title">
-        Your search did not match any items in the Archive. Try different
-        keywords or a more general search.
+        ${this.isCollection
+          ? EmptyPlaceholder.MESSAGE_NO_COLLECTION_RESULTS
+          : EmptyPlaceholder.MESSAGE_NO_SEARCH_RESULTS}
       </h2>
       <div>${nullResultIcon}</div>
     `;
@@ -66,17 +105,11 @@ export class EmptyPlaceholder extends LitElement {
 
   private get queryErrorTemplate(): TemplateResult {
     return html`
-      <h2 class="title">
-        The search engine encountered an error, which might be related to your
-        search query.
-        <a
-          href="https://help.archive.org/help/search-building-powerful-complex-queries/"
-        >
-          Tips for constructing search queries.
-        </a>
-      </h2>
+      <h2 class="title">${EmptyPlaceholder.MESSAGE_QUERY_ERROR}</h2>
       <div>${nullResultIcon}</div>
-      <p class="error-details">Error details: ${this.detailMessage}</p>
+      <p class="error-details">
+        ${EmptyPlaceholder.QUERY_ERROR_DETAILS_MESSAGE} ${this.detailMessage}
+      </p>
     `;
   }
 

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

@@ -1,4 +1,4 @@
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import DOMPurify from 'dompurify';
 import type { SortParam } from '@internetarchive/search-service';
@@ -65,17 +65,19 @@ export class TileListCompact extends LitElement {
     `;
   }
 
-  private get href(): string {
+  private get href(): string | typeof nothing {
+    if (!this.model?.identifier || this.baseNavigationUrl == null)
+      return nothing;
+
     // Use the server-specified href if available.
     // Otherwise, construct a details page URL from the item identifier.
-    if (this.model?.href) {
-      return `${this.baseNavigationUrl}${this.model?.href}`;
+    if (this.model.href) {
+      return `${this.baseNavigationUrl}${this.model.href}`;
     }
 
     const isCollection = this.model?.mediatype === 'collection';
-    return `${this.baseNavigationUrl}${
-      isCollection ? this.collectionPagePath : '/details/'
-    }${this.model?.identifier}`;
+    const basePath = isCollection ? this.collectionPagePath : '/details/';
+    return `${this.baseNavigationUrl}${basePath}${this.model.identifier}`;
   }
 
   /*

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

@@ -96,11 +96,15 @@ export class TileList extends LitElement {
     if (!this.model) return nothing;
 
     const isCollection = this.model.mediatype === 'collection';
-    return html`<a
-      href="${this.baseNavigationUrl}${isCollection
-        ? this.collectionPagePath
-        : '/details/'}${encodeURI(this.model.identifier)}"
-    >
+    const hrefBasePath = isCollection ? this.collectionPagePath : '/details/';
+    const href =
+      this.model.identifier && this.baseNavigationUrl != null
+        ? `${this.baseNavigationUrl}${hrefBasePath}${encodeURI(
+            this.model.identifier
+          )}`
+        : nothing;
+
+    return html`<a href=${href}>
       <image-block
         .model=${this.model}
         .baseImageUrl=${this.baseImageUrl}

package/src/tiles/tile-dispatcher.ts

@@ -124,7 +124,7 @@ export class TileDispatcher
   private get linkTileTemplate() {
     return html`
       <a
-        href="${this.linkTileHref}"
+        href=${this.linkTileHref}
         aria-label=${this.model?.title ?? 'Untitled item'}
         title=${this.shouldPrepareHoverPane
           ? nothing // Don't show title tooltips when we have the tile info popups
@@ -139,17 +139,19 @@ export class TileDispatcher
     `;
   }
 
-  private get linkTileHref() {
+  private get linkTileHref(): string | typeof nothing {
+    if (!this.model?.identifier || this.baseNavigationUrl == null)
+      return nothing;
+
     // Use the server-specified href if available.
     // Otherwise, construct a details page URL from the item identifier.
-    if (this.model?.href) {
-      return `${this.baseNavigationUrl}${this.model?.href}`;
+    if (this.model.href) {
+      return `${this.baseNavigationUrl}${this.model.href}`;
     }
 
-    const isCollection = this.model?.mediatype === 'collection';
-    return `${this.baseNavigationUrl}${
-      isCollection ? this.collectionPagePath : '/details/'
-    }${this.model?.identifier}`;
+    const isCollection = this.model.mediatype === 'collection';
+    const basePath = isCollection ? this.collectionPagePath : '/details/';
+    return `${this.baseNavigationUrl}${basePath}${this.model.identifier}`;
   }
 
   /**

package/test/empty-placeholder.test.ts

@@ -15,21 +15,55 @@ describe('Empty Placeholder', () => {
     await el.updateComplete;
 
     expect(el.shadowRoot?.querySelector('.empty-query')).to.exist;
-    expect(el.shadowRoot?.querySelector('.null-result')).to.not.exist;
-    expect(el.shadowRoot?.querySelector('infinite-scroller')).to.not.exist;
+
+    expect(el.shadowRoot?.querySelector('.empty-collection')).to.not.exist;
+    expect(el.shadowRoot?.querySelector('.no-results')).to.not.exist;
+    expect(el.shadowRoot?.querySelector('.query-error')).to.not.exist;
+  });
+
+  it('should render with empty-collection placeholder', async () => {
+    const el = await fixture<EmptyPlaceholder>(
+      html`<empty-placeholder></empty-placeholder>`
+    );
+
+    el.placeholderType = 'empty-collection';
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelector('.empty-collection')).to.exist;
+
+    expect(el.shadowRoot?.querySelector('.no-results')).to.not.exist;
+    expect(el.shadowRoot?.querySelector('.empty-query')).to.not.exist;
+    expect(el.shadowRoot?.querySelector('.query-error')).to.not.exist;
   });
 
-  it('should render with null-result placeholder', async () => {
+  it('should render with no-results placeholder', async () => {
     const el = await fixture<EmptyPlaceholder>(
       html`<empty-placeholder></empty-placeholder>`
     );
 
-    el.placeholderType = 'null-result';
+    el.placeholderType = 'no-results';
     await el.updateComplete;
 
-    expect(el.shadowRoot?.querySelector('.null-result')).to.exist;
+    expect(el.shadowRoot?.querySelector('.no-results')).to.exist;
+
+    expect(el.shadowRoot?.querySelector('.empty-query')).to.not.exist;
+    expect(el.shadowRoot?.querySelector('.empty-collection')).to.not.exist;
+    expect(el.shadowRoot?.querySelector('.query-error')).to.not.exist;
+  });
+
+  it('should render with query-error placeholder', async () => {
+    const el = await fixture<EmptyPlaceholder>(
+      html`<empty-placeholder></empty-placeholder>`
+    );
+
+    el.placeholderType = 'query-error';
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelector('.query-error')).to.exist;
+
     expect(el.shadowRoot?.querySelector('.empty-query')).to.not.exist;
-    expect(el.shadowRoot?.querySelector('collection-facets')).to.not.exist;
+    expect(el.shadowRoot?.querySelector('.empty-collection')).to.not.exist;
+    expect(el.shadowRoot?.querySelector('.no-results')).to.not.exist;
   });
 
   it('should not render any empty placeholder', async () => {
@@ -41,7 +75,8 @@ describe('Empty Placeholder', () => {
     await el.updateComplete;
 
     expect(el.shadowRoot?.querySelector('.empty-query')).to.not.exist;
-    expect(el.shadowRoot?.querySelector('.null-result')).to.not.exist;
-    expect(el.shadowRoot?.querySelector('collection-facets')).to.not.exist;
+    expect(el.shadowRoot?.querySelector('.empty-collection')).to.not.exist;
+    expect(el.shadowRoot?.querySelector('.no-results')).to.not.exist;
+    expect(el.shadowRoot?.querySelector('.query-error')).to.not.exist;
   });
 });

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

@@ -158,10 +158,10 @@ describe('Item Tile', () => {
 
   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'),
+      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<ItemTile>(html`
@@ -181,10 +181,10 @@ describe('Item Tile', () => {
 
   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'),
+      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<ItemTile>(html`
@@ -202,10 +202,10 @@ describe('Item Tile', () => {
 
   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'),
+      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<ItemTile>(html`
@@ -225,10 +225,10 @@ describe('Item Tile', () => {
 
   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'),
+      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<ItemTile>(html`

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

@@ -41,7 +41,7 @@ describe('List Tile Compact', () => {
     const el = await fixture<TileListCompact>(html`
       <tile-list-compact
         .baseNavigationUrl=${''}
-        .model=${{ title: 'foo', href: '/foo/bar' }}
+        .model=${{ identifier: 'id', title: 'foo', href: '/foo/bar' }}
       ></tile-list-compact>
     `);
 
@@ -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-02'),
-      dateArchived: new Date('2011-01-02'),
-      datePublished: new Date('2012-01-02'),
-      dateReviewed: new Date('2013-01-02'),
+      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`
@@ -99,10 +99,10 @@ describe('List Tile Compact', () => {
 
   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'),
+      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`
@@ -120,10 +120,10 @@ describe('List Tile Compact', () => {
 
   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'),
+      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`
@@ -141,10 +141,10 @@ describe('List Tile Compact', () => {
 
   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'),
+      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`

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

@@ -138,10 +138,10 @@ describe('List Tile', () => {
 
   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'),
+      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<TileList>(html`
@@ -159,10 +159,10 @@ describe('List Tile', () => {
 
   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'),
+      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<TileList>(html`
@@ -180,10 +180,10 @@ describe('List Tile', () => {
 
   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'),
+      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<TileList>(html`
@@ -201,10 +201,10 @@ describe('List Tile', () => {
 
   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'),
+      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<TileList>(html`

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

@@ -1,7 +1,7 @@
 import { expect } from '@open-wc/testing';
 import { formatDate } from '../../src/utils/format-date';
 
-const testDate = new Date(Date.UTC(2020, 11, 9));
+const testDate = new Date(2020, 11, 9);
 
 describe('formatDate', () => {
   it('returns blank when undefined date', () => {