@internetarchive/collection-browser 3.0.7-alpha-webdev7989.0 → 3.1.0

package/dist/test/collection-browser.test.js

@@ -71,7 +71,7 @@ describe('Collection Browser', () => {
     });
     it('filterBy creator with analytics', async () => {
         const mockAnalyticsHandler = new MockAnalyticsHandler();
-        const el = await fixture(html `<collection-browser .analyticsHandler=${mockAnalyticsHandler}>
+        const el = await fixture(html `<collection-browser .analyticsHandler=${mockAnalyticsHandler}>
       </collection-browser>`);
         el.searchContext = 'betaSearchService';
         el.selectedSort = 'creator';
@@ -90,7 +90,7 @@ describe('Collection Browser', () => {
     });
     it('filterBy title with analytics', async () => {
         const mockAnalyticsHandler = new MockAnalyticsHandler();
-        const el = await fixture(html `<collection-browser .analyticsHandler=${mockAnalyticsHandler}>
+        const el = await fixture(html `<collection-browser .analyticsHandler=${mockAnalyticsHandler}>
       </collection-browser>`);
         el.searchContext = 'beta-search-service';
         el.selectedSort = 'title';
@@ -119,7 +119,7 @@ describe('Collection Browser', () => {
             collection: {},
             year: {},
         };
-        const el = await fixture(html `<collection-browser .analyticsHandler=${mockAnalyticsHandler}>
+        const el = await fixture(html `<collection-browser .analyticsHandler=${mockAnalyticsHandler}>
       </collection-browser>`);
         el.searchContext = 'search-service';
         el.selectedFacets = mockedSelectedFacets;
@@ -166,7 +166,7 @@ describe('Collection Browser', () => {
             collection: {},
             year: {},
         };
-        const el = await fixture(html `<collection-browser .analyticsHandler=${mockAnalyticsHandler}>
+        const el = await fixture(html `<collection-browser .analyticsHandler=${mockAnalyticsHandler}>
       </collection-browser>`);
         el.searchContext = 'beta-search-service';
         el.selectedFacets = mockedSelectedFacets;
@@ -204,7 +204,7 @@ describe('Collection Browser', () => {
     it('should render with a sort bar, facets, and infinite scroller', async () => {
         var _a, _b, _c;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
+        const el = await fixture(html `<collection-browser .searchService=${searchService}>
       </collection-browser>`);
         el.baseQuery = 'hello';
         await el.updateComplete;
@@ -219,7 +219,7 @@ describe('Collection Browser', () => {
     it('queries the search service when given a base query', async () => {
         var _a, _b, _c;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
+        const el = await fixture(html `<collection-browser .searchService=${searchService}>
       </collection-browser>`);
         el.baseQuery = 'collection:foo';
         await el.updateComplete;
@@ -230,7 +230,7 @@ describe('Collection Browser', () => {
     it('queries the search service with a metadata search', async () => {
         var _a, _b, _c;
         const searchService = new MockSearchService();
-        const el = await fixture(html ` <collection-browser .searchService=${searchService}>
+        const el = await fixture(html ` <collection-browser .searchService=${searchService}>
       </collection-browser>`);
         el.searchType = SearchType.METADATA;
         await el.updateComplete;
@@ -243,7 +243,7 @@ describe('Collection Browser', () => {
     });
     it('can change search type', async () => {
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
+        const el = await fixture(html `<collection-browser .searchService=${searchService}>
       </collection-browser>`);
         el.baseQuery = 'collection:foo';
         await el.updateComplete;
@@ -255,7 +255,7 @@ describe('Collection Browser', () => {
     it('queries the search service with a fulltext search', async () => {
         var _a, _b, _c;
         const searchService = new MockSearchService();
-        const el = await fixture(html ` <collection-browser .searchService=${searchService}>
+        const el = await fixture(html ` <collection-browser .searchService=${searchService}>
       </collection-browser>`);
         el.searchType = SearchType.FULLTEXT;
         await el.updateComplete;
@@ -269,7 +269,7 @@ describe('Collection Browser', () => {
     it('queries the search service with a radio search', async () => {
         var _a, _b, _c;
         const searchService = new MockSearchService();
-        const el = await fixture(html ` <collection-browser .searchService=${searchService}>
+        const el = await fixture(html ` <collection-browser .searchService=${searchService}>
       </collection-browser>`);
         el.searchType = SearchType.RADIO;
         await el.updateComplete;
@@ -283,7 +283,7 @@ describe('Collection Browser', () => {
     it('queries the search service with a TV search', async () => {
         var _a, _b, _c;
         const searchService = new MockSearchService();
-        const el = await fixture(html ` <collection-browser .searchService=${searchService}>
+        const el = await fixture(html ` <collection-browser .searchService=${searchService}>
       </collection-browser>`);
         el.searchType = SearchType.TV;
         await el.updateComplete;
@@ -323,7 +323,7 @@ describe('Collection Browser', () => {
             collection: {},
             year: {},
         };
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
+        const el = await fixture(html `<collection-browser .searchService=${searchService}>
       </collection-browser>`);
         el.baseQuery = 'collection:foo';
         el.selectedFacets = selectedFacets;
@@ -356,7 +356,7 @@ describe('Collection Browser', () => {
         url.searchParams.append('sin', 'TXT');
         window.history.replaceState({}, '', url);
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
+        const el = await fixture(html `<collection-browser .searchService=${searchService}>
       </collection-browser>`);
         expect(el.searchType).to.equal(SearchType.FULLTEXT);
     });
@@ -366,10 +366,10 @@ describe('Collection Browser', () => {
         url.searchParams.append('sin', 'TXT');
         window.history.replaceState({}, '', url);
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .searchService=${searchService}
-        suppressURLSinParam
-      >
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+        suppressURLSinParam
+      >
       </collection-browser>`);
         url = new URL(window.location.href);
         expect(el.searchType).to.equal(SearchType.DEFAULT);
@@ -381,7 +381,7 @@ describe('Collection Browser', () => {
     });
     it('can construct tile models with many fields present', async () => {
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
+        const el = await fixture(html `<collection-browser .searchService=${searchService}>
       </collection-browser>`);
         el.baseQuery = 'many-fields';
         await el.updateComplete;
@@ -394,20 +394,33 @@ describe('Collection Browser', () => {
     it('emits empty results event when search fetches no results', async () => {
         const searchService = new MockSearchService();
         const emptyResultsSpy = sinon.spy();
-        const el = await fixture(html `<collection-browser
-        .searchService=${searchService}
-        @emptyResults=${emptyResultsSpy}
-      >
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+        @emptyResults=${emptyResultsSpy}
+      >
       </collection-browser>`);
         el.baseQuery = 'no-results';
         await el.updateComplete;
         await el.initialSearchComplete;
         expect(emptyResultsSpy.callCount).to.equal(1);
     });
+    it('emits searchError event when search results in an error', async () => {
+        const searchService = new MockSearchService();
+        const searchErrorSpy = sinon.spy();
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+        @searchError=${searchErrorSpy}
+      >
+      </collection-browser>`);
+        el.baseQuery = 'error';
+        await el.updateComplete;
+        await el.initialSearchComplete;
+        expect(searchErrorSpy.callCount).to.equal(1);
+    });
     it('applies loggedin flag to tile models if needed', async () => {
         var _a;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
+        const el = await fixture(html `<collection-browser .searchService=${searchService}>
       </collection-browser>`);
         el.baseQuery = 'loggedin';
         await el.updateComplete;
@@ -421,7 +434,7 @@ describe('Collection Browser', () => {
     it('applies no-preview flag to tile models if needed', async () => {
         var _a;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
+        const el = await fixture(html `<collection-browser .searchService=${searchService}>
       </collection-browser>`);
         el.baseQuery = 'no-preview';
         await el.updateComplete;
@@ -435,7 +448,7 @@ describe('Collection Browser', () => {
     it('both loggedin and no-preview flags can be set simultaneously', async () => {
         var _a, _b;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
+        const el = await fixture(html `<collection-browser .searchService=${searchService}>
       </collection-browser>`);
         el.baseQuery = 'loggedin-no-preview';
         await el.updateComplete;
@@ -450,7 +463,7 @@ describe('Collection Browser', () => {
     it('joins full description array into a single string with line breaks', async () => {
         var _a;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
+        const el = await fixture(html `<collection-browser .searchService=${searchService}>
       </collection-browser>`);
         // This query receives an array description like ['line1', 'line2']
         el.baseQuery = 'multi-line-description';
@@ -466,9 +479,9 @@ describe('Collection Browser', () => {
     it('can change search type', async () => {
         var _a;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .searchService=${searchService}
-        .searchType=${SearchType.METADATA}
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+        .searchType=${SearchType.METADATA}
       ></collection-browser>`);
         el.baseQuery = 'collection:foo';
         el.searchType = SearchType.FULLTEXT;
@@ -480,8 +493,8 @@ describe('Collection Browser', () => {
     it('trims queries of leading/trailing whitespace', async () => {
         var _a;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .searchService=${searchService}
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
       ></collection-browser>`);
         el.baseQuery = '   collection:foo   ';
         await el.updateComplete;
@@ -491,8 +504,8 @@ describe('Collection Browser', () => {
     it('shows error message when error response received', async () => {
         var _a, _b;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .searchService=${searchService}
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
       ></collection-browser>`);
         el.baseQuery = 'error';
         await el.updateComplete;
@@ -505,8 +518,8 @@ describe('Collection Browser', () => {
     it('shows error message when error response received for a collection', async () => {
         var _a, _b;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .searchService=${searchService}
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
       ></collection-browser>`);
         el.withinCollection = 'error';
         await el.updateComplete;
@@ -521,8 +534,8 @@ describe('Collection Browser', () => {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         window.Sentry = { captureMessage: sentrySpy };
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .searchService=${searchService}
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
       ></collection-browser>`);
         el.baseQuery = 'malformed';
         await el.updateComplete;
@@ -531,7 +544,7 @@ describe('Collection Browser', () => {
     });
     it('adds collection names to cache when present on response', async () => {
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
+        const el = await fixture(html `<collection-browser .searchService=${searchService}>
       </collection-browser>`);
         el.baseQuery = 'collection-titles';
         await el.updateComplete;
@@ -543,7 +556,7 @@ describe('Collection Browser', () => {
     });
     it('adds tv channel aliases to cache when present on response', async () => {
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
+        const el = await fixture(html `<collection-browser .searchService=${searchService}>
       </collection-browser>`);
         el.baseQuery = 'channel-aliases';
         await el.updateComplete;
@@ -557,7 +570,7 @@ describe('Collection Browser', () => {
             asyncResponse: true,
             resultsSpy,
         });
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
+        const el = await fixture(html `<collection-browser .searchService=${searchService}>
       </collection-browser>`);
         el.baseQuery = 'with-sort';
         el.selectedSort = SortField.date;
@@ -574,7 +587,7 @@ describe('Collection Browser', () => {
             asyncResponse: true,
             resultsSpy,
         });
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
+        const el = await fixture(html `<collection-browser .searchService=${searchService}>
       </collection-browser>`);
         el.baseQuery = 'with-sort';
         el.selectedSort = SortField.date;
@@ -596,7 +609,7 @@ describe('Collection Browser', () => {
             asyncResponse: true,
             resultsSpy,
         });
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
+        const el = await fixture(html `<collection-browser .searchService=${searchService}>
       </collection-browser>`);
         el.baseQuery = 'single-result';
         await el.updateComplete;
@@ -617,7 +630,7 @@ describe('Collection Browser', () => {
             asyncResponse: true,
             resultsSpy,
         });
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
+        const el = await fixture(html `<collection-browser .searchService=${searchService}>
       </collection-browser>`);
         el.baseQuery = 'with-sort';
         el.selectedSort = SortField.date;
@@ -636,7 +649,7 @@ describe('Collection Browser', () => {
     it('sets sort properties when user changes sort', async () => {
         var _a, _b, _c, _d, _e, _f;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
+        const el = await fixture(html `<collection-browser .searchService=${searchService}>
       </collection-browser>`);
         expect(el.selectedSort).to.equal(SortField.default);
         el.baseQuery = 'foo';
@@ -659,7 +672,7 @@ describe('Collection Browser', () => {
     it('sets sort filter properties when user selects title filter', async () => {
         var _a, _b, _c, _d;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
+        const el = await fixture(html `<collection-browser .searchService=${searchService}>
       </collection-browser>`);
         el.baseQuery = 'first-title';
         el.selectedSort = 'title';
@@ -673,7 +686,7 @@ describe('Collection Browser', () => {
     it('sets sort filter properties when user selects creator filter', async () => {
         var _a, _b, _c, _d;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
+        const el = await fixture(html `<collection-browser .searchService=${searchService}>
       </collection-browser>`);
         el.baseQuery = 'first-creator';
         el.selectedSort = 'creator';
@@ -696,7 +709,7 @@ describe('Collection Browser', () => {
             subject: {},
             year: {},
         };
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
+        const el = await fixture(html `<collection-browser .searchService=${searchService}>
       </collection-browser>`);
         el.baseQuery = 'first-creator';
         el.selectedSort = 'creator';
@@ -724,7 +737,7 @@ describe('Collection Browser', () => {
     it('applies correct search filter when TV clip filter set to commercials', async () => {
         var _a, _b, _c;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
+        const el = await fixture(html `<collection-browser .searchService=${searchService}>
       </collection-browser>`);
         el.baseQuery = 'tv-fields';
         el.searchType = SearchType.TV;
@@ -736,7 +749,7 @@ describe('Collection Browser', () => {
     it('applies correct search filter when TV clip filter set to factchecks', async () => {
         var _a, _b, _c;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
+        const el = await fixture(html `<collection-browser .searchService=${searchService}>
       </collection-browser>`);
         el.baseQuery = 'tv-fields';
         el.searchType = SearchType.TV;
@@ -748,7 +761,7 @@ describe('Collection Browser', () => {
     it('applies correct search filter when TV clip filter set to quotes', async () => {
         var _a, _b, _c;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
+        const el = await fixture(html `<collection-browser .searchService=${searchService}>
       </collection-browser>`);
         el.baseQuery = 'tv-fields';
         el.searchType = SearchType.TV;
@@ -760,7 +773,7 @@ describe('Collection Browser', () => {
     it('resets letter filters when query changes', async () => {
         var _a, _b, _c, _d, _e, _f, _g;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
+        const el = await fixture(html `<collection-browser .searchService=${searchService}>
       </collection-browser>`);
         el.baseQuery = 'first-creator';
         el.selectedSort = 'creator';
@@ -781,11 +794,11 @@ describe('Collection Browser', () => {
         var _a, _b, _c;
         const searchService = new MockSearchService();
         const mockAnalyticsHandler = new MockAnalyticsHandler();
-        const el = await fixture(html `<collection-browser
-        .searchService=${searchService}
-        .analyticsHandler=${mockAnalyticsHandler}
-        .suppressPlaceholders=${true}
-      >
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+        .analyticsHandler=${mockAnalyticsHandler}
+        .suppressPlaceholders=${true}
+      >
       </collection-browser>`);
         el.baseQuery = 'years'; // Includes year_histogram aggregation in response
         el.showHistogramDatePicker = true;
@@ -814,10 +827,10 @@ describe('Collection Browser', () => {
     it('sets date range query when monthly date picker selection changed', async () => {
         var _a, _b, _c;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .searchService=${searchService}
-        .suppressPlaceholders=${true}
-      >
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+        .suppressPlaceholders=${true}
+      >
       </collection-browser>`);
         el.baseQuery = 'months'; // Includes date_histogram aggregation in response
         el.searchType = SearchType.TV;
@@ -848,9 +861,9 @@ describe('Collection Browser', () => {
         var _a, _b, _c, _d;
         const spy = sinon.spy();
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .searchService=${searchService}
-        @searchResultsLoadingChanged=${spy}
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+        @searchResultsLoadingChanged=${spy}
       ></collection-browser>`);
         spy.resetHistory();
         el.baseQuery = 'collection:foo';
@@ -864,9 +877,9 @@ describe('Collection Browser', () => {
     it('collapses extra set of quotes around href field', async () => {
         var _a;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .searchService=${searchService}
-        .baseNavigationUrl=${''}
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+        .baseNavigationUrl=${''}
       ></collection-browser>`);
         el.baseQuery = 'extra-quoted-href';
         await el.updateComplete;
@@ -879,9 +892,9 @@ describe('Collection Browser', () => {
     it('sets default sort from collection metadata', async () => {
         var _a;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .searchService=${searchService}
-        .baseNavigationUrl=${''}
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+        .baseNavigationUrl=${''}
       ></collection-browser>`);
         el.withinCollection = 'default-sort';
         await el.updateComplete;
@@ -898,9 +911,9 @@ describe('Collection Browser', () => {
     it('sets default sort from collection metadata in "-field" format', async () => {
         var _a;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .searchService=${searchService}
-        .baseNavigationUrl=${''}
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+        .baseNavigationUrl=${''}
       ></collection-browser>`);
         el.withinCollection = 'default-sort-concise';
         await el.updateComplete;
@@ -915,8 +928,8 @@ describe('Collection Browser', () => {
         expect(sortBar.sortDirection).to.be.null;
     });
     it('falls back to weekly views default sorting on profiles when tab not set', async () => {
-        const el = await fixture(html `<collection-browser
-        .withinProfile=${'@foobar'}
+        const el = await fixture(html `<collection-browser
+        .withinProfile=${'@foobar'}
       ></collection-browser>`);
         el.applyDefaultProfileSort();
         expect(el.defaultSortParam).to.deep.equal({
@@ -927,9 +940,9 @@ describe('Collection Browser', () => {
     it('uses relevance sort as default when a query is set', async () => {
         var _a;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .searchService=${searchService}
-        .baseNavigationUrl=${''}
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+        .baseNavigationUrl=${''}
       ></collection-browser>`);
         el.withinCollection = 'default-sort';
         el.baseQuery = 'default-sort';
@@ -947,9 +960,9 @@ describe('Collection Browser', () => {
     it('uses date favorited sort as default when targeting fav- collection', async () => {
         var _a;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .searchService=${searchService}
-        .baseNavigationUrl=${''}
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+        .baseNavigationUrl=${''}
       ></collection-browser>`);
         el.withinCollection = 'fav-sort';
         await el.updateComplete;
@@ -966,7 +979,7 @@ describe('Collection Browser', () => {
     it('scrolls to page', async () => {
         var _a;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
+        const el = await fixture(html `<collection-browser .searchService=${searchService}>
       </collection-browser>`);
         // Infinite scroller won't exist unless there's a base query.
         // First ensure that we don't throw errors when it doesn't exist.
@@ -988,9 +1001,9 @@ describe('Collection Browser', () => {
     it('shows mobile facets in mobile view', async () => {
         var _a, _b;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .searchService=${searchService}
-        .mobileBreakpoint=${9999}
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+        .mobileBreakpoint=${9999}
       ></collection-browser>`);
         el.baseQuery = 'collection:foo';
         await el.updateComplete;
@@ -1010,11 +1023,11 @@ describe('Collection Browser', () => {
         var _a, _b;
         const searchService = new MockSearchService();
         const analyticsHandler = new MockAnalyticsHandler();
-        const el = await fixture(html `<collection-browser
-        .searchService=${searchService}
-        .analyticsHandler=${analyticsHandler}
-        .searchContext=${'foobar-context'}
-        .mobileBreakpoint=${9999}
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+        .analyticsHandler=${analyticsHandler}
+        .searchContext=${'foobar-context'}
+        .mobileBreakpoint=${9999}
       ></collection-browser>`);
         el.baseQuery = 'collection:foo';
         await el.updateComplete;
@@ -1054,9 +1067,9 @@ describe('Collection Browser', () => {
     });
     it('sets parent collections to prop when searching a collection', async () => {
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .searchService=${searchService}
-        .withinCollection=${'fake'}
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+        .withinCollection=${'fake'}
       ></collection-browser>`);
         el.baseQuery = 'parent-collections';
         await el.updateComplete;
@@ -1066,9 +1079,9 @@ describe('Collection Browser', () => {
     });
     it('recognizes TV collections', async () => {
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .searchService=${searchService}
-        .withinCollection=${'TV-FOO'}
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+        .withinCollection=${'TV-FOO'}
       ></collection-browser>`);
         el.baseQuery = 'tv-collection';
         await el.updateComplete;
@@ -1080,9 +1093,9 @@ describe('Collection Browser', () => {
         var _a;
         const mockAnalyticsHandler = new MockAnalyticsHandler();
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .analyticsHandler=${mockAnalyticsHandler}
-        .searchService=${searchService}
+        const el = await fixture(html `<collection-browser
+        .analyticsHandler=${mockAnalyticsHandler}
+        .searchService=${searchService}
       ></collection-browser>`);
         const infiniteScrollerRefreshSpy = sinon.spy();
         // Infinite scroller won't exist unless there's a base query
@@ -1128,7 +1141,7 @@ describe('Collection Browser', () => {
     it('query the search service for single result', async () => {
         var _a, _b;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
+        const el = await fixture(html `<collection-browser .searchService=${searchService}>
       </collection-browser>`);
         el.baseQuery = 'single-result';
         await el.updateComplete;
@@ -1157,7 +1170,7 @@ describe('Collection Browser', () => {
         searchParams.append('and[]', 'year:[2000 TO 2010]');
         window.history.replaceState({}, '', url);
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
+        const el = await fixture(html `<collection-browser .searchService=${searchService}>
       </collection-browser>`);
         await el.initialSearchComplete;
         await el.updateComplete;
@@ -1183,10 +1196,10 @@ describe('Collection Browser', () => {
         searchParams.append('and[]', 'year:[2000 TO 2010]');
         window.history.replaceState({}, '', url);
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .searchService=${searchService}
-        .withinCollection=${'foobar'}
-      >
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+        .withinCollection=${'foobar'}
+      >
       </collection-browser>`);
         await el.initialSearchComplete;
         await el.updateComplete;
@@ -1211,11 +1224,11 @@ describe('Collection Browser', () => {
         searchParams.append('and[]', 'year:[2000 TO 2010]');
         window.history.replaceState({}, '', url);
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .searchService=${searchService}
-        .withinProfile=${'@foobar'}
-        .profileElement=${'uploads'}
-      >
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+        .withinProfile=${'@foobar'}
+        .profileElement=${'uploads'}
+      >
       </collection-browser>`);
         await el.initialSearchComplete;
         await el.updateComplete;
@@ -1242,7 +1255,7 @@ describe('Collection Browser', () => {
         searchParams.append('and[]', 'year:[2000 TO 2010]');
         window.history.replaceState({}, '', url);
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
+        const el = await fixture(html `<collection-browser .searchService=${searchService}>
       </collection-browser>`);
         await el.initialSearchComplete;
         await el.updateComplete;
@@ -1270,10 +1283,10 @@ describe('Collection Browser', () => {
         searchParams.append('and[]', 'year:[2000 TO 2010]');
         window.history.replaceState({}, '', url);
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .searchService=${searchService}
-        .withinCollection=${'foobar'}
-      >
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+        .withinCollection=${'foobar'}
+      >
       </collection-browser>`);
         el.baseQuery = 'bar';
         await el.updateComplete;
@@ -1300,10 +1313,10 @@ describe('Collection Browser', () => {
         searchParams.append('and[]', 'year:[2000 TO 2010]');
         window.history.replaceState({}, '', url);
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .searchService=${searchService}
-        .withinCollection=${'foobar'}
-      >
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+        .withinCollection=${'foobar'}
+      >
       </collection-browser>`);
         el.withinCollection = 'bar';
         await el.updateComplete;
@@ -1320,11 +1333,11 @@ describe('Collection Browser', () => {
     it('correctly retrieves web archive hits', async () => {
         var _a, _b, _c;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .searchService=${searchService}
-        .withinProfile=${'@foo'}
-        .profileElement=${'web_archives'}
-      >
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+        .withinProfile=${'@foo'}
+        .profileElement=${'web_archives'}
+      >
       </collection-browser>`);
         el.baseQuery = 'web-archive';
         await el.updateComplete;
@@ -1338,10 +1351,10 @@ describe('Collection Browser', () => {
     it('shows dropdown accordion in facet sidebar when opt-in strategy is specified', async () => {
         var _a;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .searchService=${searchService}
-        facetLoadStrategy=${'opt-in'}
-      >
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+        facetLoadStrategy=${'opt-in'}
+      >
       </collection-browser>`);
         el.baseQuery = 'foo';
         await el.updateComplete;
@@ -1352,10 +1365,10 @@ describe('Collection Browser', () => {
     it('shows temporarily unavailable message when facets suppressed', async () => {
         var _a, _b;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .searchService=${searchService}
-        facetLoadStrategy=${'off'}
-      >
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+        facetLoadStrategy=${'off'}
+      >
       </collection-browser>`);
         el.baseQuery = 'foo';
         await el.updateComplete;
@@ -1367,7 +1380,7 @@ describe('Collection Browser', () => {
     it('shows manage bar interface instead of sort bar when in manage view', async () => {
         var _a, _b, _c, _d;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
+        const el = await fixture(html `<collection-browser .searchService=${searchService}>
       </collection-browser>`);
         el.baseQuery = 'foo';
         await el.updateComplete;
@@ -1383,11 +1396,11 @@ describe('Collection Browser', () => {
     });
     it('switches to grid display mode when manage view activated', async () => {
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .searchService=${searchService}
-        .baseQuery=${'foo'}
-        .displayMode=${'list-detail'}
-      >
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+        .baseQuery=${'foo'}
+        .displayMode=${'list-detail'}
+      >
       </collection-browser>`);
         el.isManageView = true;
         await el.updateComplete;
@@ -1396,10 +1409,10 @@ describe('Collection Browser', () => {
     it('can remove all checked tiles', async () => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .searchService=${searchService}
-        .baseNavigationUrl=${''}
-      >
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+        .baseNavigationUrl=${''}
+      >
       </collection-browser>`);
         el.baseQuery = 'foo';
         el.pageSize = 1; // To hit the edge case of a page break while offsetting tiles
@@ -1435,10 +1448,10 @@ describe('Collection Browser', () => {
     });
     it('can check/uncheck all tiles', async () => {
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .searchService=${searchService}
-        .baseNavigationUrl=${''}
-      >
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+        .baseNavigationUrl=${''}
+      >
       </collection-browser>`);
         el.baseQuery = 'foo';
         await el.updateComplete;
@@ -1458,10 +1471,10 @@ describe('Collection Browser', () => {
         var _a, _b;
         const spy = sinon.spy();
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .searchService=${searchService}
-        .baseNavigationUrl=${''}
-        @manageModeChanged=${spy}
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+        .baseNavigationUrl=${''}
+        @manageModeChanged=${spy}
       ></collection-browser>`);
         el.isManageView = true;
         await el.updateComplete;
@@ -1476,11 +1489,11 @@ describe('Collection Browser', () => {
         var _a, _b, _c, _d, _e;
         const spy = sinon.spy();
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .searchService=${searchService}
-        .baseNavigationUrl=${''}
-        @itemRemovalRequested=${spy}
-      >
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+        .baseNavigationUrl=${''}
+        @itemRemovalRequested=${spy}
+      >
       </collection-browser>`);
         el.baseQuery = 'foo';
         await el.updateComplete;
@@ -1510,10 +1523,10 @@ describe('Collection Browser', () => {
     it('disables manage view when manage bar cancelled', async () => {
         var _a;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .searchService=${searchService}
-        .baseNavigationUrl=${''}
-      >
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+        .baseNavigationUrl=${''}
+      >
       </collection-browser>`);
         el.baseQuery = 'foo';
         await el.updateComplete;
@@ -1530,7 +1543,7 @@ describe('Collection Browser', () => {
     it('enable/disable manage view delete button when you selectAll/unselectAll', async () => {
         var _a, _b, _c, _d;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
+        const el = await fixture(html `<collection-browser .searchService=${searchService}>
       </collection-browser>`);
         el.baseQuery = 'foo';
         await el.updateComplete;
@@ -1558,10 +1571,10 @@ describe('Collection Browser', () => {
     it('shows Blurring checkbox for admin users', async () => {
         var _a;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .baseNavigationUrl=${''}
-        .searchService=${searchService}
-      >
+        const el = await fixture(html `<collection-browser
+        .baseNavigationUrl=${''}
+        .searchService=${searchService}
+      >
       </collection-browser>`);
         el.baseQuery = 'archive-org-user-loggedin';
         await el.updateComplete;
@@ -1573,10 +1586,10 @@ describe('Collection Browser', () => {
     it('unchecks Blurring checkbox for admin users with blurring preference off', async () => {
         var _a;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .baseNavigationUrl=${''}
-        .searchService=${searchService}
-      >
+        const el = await fixture(html `<collection-browser
+        .baseNavigationUrl=${''}
+        .searchService=${searchService}
+      >
       </collection-browser>`);
         el.baseQuery = 'archive-org-user-loggedin-noblur';
         await el.updateComplete;
@@ -1588,10 +1601,10 @@ describe('Collection Browser', () => {
     it('toggles blur state when Blurring checkbox is toggled', async () => {
         var _a, _b, _c;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .baseNavigationUrl=${''}
-        .searchService=${searchService}
-      >
+        const el = await fixture(html `<collection-browser
+        .baseNavigationUrl=${''}
+        .searchService=${searchService}
+      >
       </collection-browser>`);
         el.baseQuery = 'archive-org-user-loggedin';
         await el.updateComplete;
@@ -1607,11 +1620,11 @@ describe('Collection Browser', () => {
     it('applies loans tab properties to sort bar', async () => {
         var _a;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .baseNavigationUrl=${''}
-        .searchService=${searchService}
-        .enableSortOptionsSlot=${true}
-      >
+        const el = await fixture(html `<collection-browser
+        .baseNavigationUrl=${''}
+        .searchService=${searchService}
+        .enableSortOptionsSlot=${true}
+      >
       </collection-browser>`);
         el.baseQuery = 'collection:foo';
         await el.updateComplete;
@@ -1626,9 +1639,9 @@ describe('Collection Browser', () => {
     it('can suppress presence of result count', async () => {
         var _a;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .searchService=${searchService}
-        suppressResultCount
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+        suppressResultCount
       ></collection-browser>`);
         el.baseQuery = 'collection:foo';
         await el.updateComplete;
@@ -1639,9 +1652,9 @@ describe('Collection Browser', () => {
     it('can suppress presence of result tiles', async () => {
         var _a;
         const searchService = new MockSearchService();
-        const el = await fixture(html `<collection-browser
-        .searchService=${searchService}
-        suppressResultTiles
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+        suppressResultTiles
       ></collection-browser>`);
         el.baseQuery = 'collection:foo';
         await el.updateComplete;
@@ -1654,7 +1667,7 @@ describe('Collection Browser', () => {
             asyncResponse: true,
             resultsSpy,
         });
-        const el = await fixture(html `<collection-browser .searchService=${searchService}>
+        const el = await fixture(html `<collection-browser .searchService=${searchService}>
       </collection-browser>`);
         const numberOfPages = 15;
         el.baseQuery = 'jack';