@internetarchive/collection-browser 4.1.0 → 4.2.0-alpha-webdev8164.1

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

@@ -5,7 +5,10 @@ import '../../src/collection-facets/more-facets-content';
 import { MockSearchService } from '../mocks/mock-search-service';
 import { MockAnalyticsHandler } from '../mocks/mock-analytics-handler';
 import type { FacetsTemplate } from '../../src/collection-facets/facets-template';
-import type { SelectedFacets } from '../../src/models';
+import {
+  getDefaultSelectedFacets,
+  type SelectedFacets,
+} from '../../src/models';
 
 const selectedFacetsGroup = {
   title: 'Media Type',
@@ -54,7 +57,7 @@ describe('More facets content', () => {
     expect(el.shadowRoot?.querySelector('.facets-loader')).to.exist;
   });
 
-  it('should render pagination for more facets', async () => {
+  it('should NOT render pagination when facet count < 1000', async () => {
     const searchService = new MockSearchService();
 
     const el = await fixture<MoreFacetsContent>(
@@ -64,11 +67,22 @@ describe('More facets content', () => {
     );
 
     el.facetKey = 'year';
-    el.query = 'more-facets'; // Produces a response with 40+ aggregations for multiple pages
+    el.query = 'more-facets'; // Produces a response with 45 aggregations (< 1000)
     await el.updateComplete;
     await aTimeout(50); // Give it a moment to perform the (mock) search query after the initial update
 
-    expect(el.shadowRoot?.querySelectorAll('more-facets-pagination')).to.exist;
+    // Verify pagination component is NOT present (horizontal scroll mode)
+    expect(el.shadowRoot?.querySelector('more-facets-pagination')).to.not.exist;
+
+    // Verify horizontal scroll mode CSS class is applied
+    expect(
+      el.shadowRoot?.querySelector('.facets-content.horizontal-scroll-mode'),
+    ).to.exist;
+
+    // Verify footer still exists with buttons
+    expect(el.shadowRoot?.querySelector('.footer')).to.exist;
+    expect(el.shadowRoot?.querySelector('.btn-cancel')).to.exist;
+    expect(el.shadowRoot?.querySelector('.btn-submit')).to.exist;
   });
 
   it('query for more facets content using search service', async () => {
@@ -228,4 +242,237 @@ describe('More facets content', () => {
     expect(mockAnalyticsHandler.callAction).to.equal('applyMoreFacetsModal');
     expect(mockAnalyticsHandler.callLabel).to.equal('collection');
   });
+
+  it('should have horizontal scrolling enabled', async () => {
+    const searchService = new MockSearchService();
+
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content
+        .searchService=${searchService}
+      ></more-facets-content>`,
+    );
+
+    el.facetKey = 'year';
+    el.query = 'more-facets';
+    await el.updateComplete;
+    await aTimeout(50);
+
+    const facetsContent = el.shadowRoot?.querySelector(
+      '.facets-content',
+    ) as HTMLElement;
+    const styles = window.getComputedStyle(facetsContent);
+
+    expect(styles.overflowX).to.equal('auto');
+    expect(styles.overflowY).to.equal('hidden');
+  });
+
+  it('should have horizontal container wrapper', async () => {
+    const searchService = new MockSearchService();
+
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content
+        .searchService=${searchService}
+      ></more-facets-content>`,
+    );
+
+    el.facetKey = 'year';
+    el.query = 'more-facets';
+    await el.updateComplete;
+    await aTimeout(50);
+
+    const container = el.shadowRoot?.querySelector(
+      '.facets-horizontal-container',
+    );
+    expect(container).to.exist;
+
+    const facetsTemplate = container?.querySelector('facets-template');
+    expect(facetsTemplate).to.exist;
+  });
+
+  it('should render pagination when facet count >= 1000', async () => {
+    const searchService = new MockSearchService();
+
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content
+        .searchService=${searchService}
+        .selectedFacets=${getDefaultSelectedFacets()}
+      ></more-facets-content>`,
+    );
+
+    el.facetKey = 'subject';
+    el.query = 'large-facets'; // Produces a response with 1100 aggregations (>= 1000)
+    await el.updateComplete;
+    await aTimeout(50);
+
+    // Verify pagination component IS present
+    expect(el.shadowRoot?.querySelector('more-facets-pagination')).to.exist;
+
+    // Verify pagination mode CSS class is applied
+    expect(el.shadowRoot?.querySelector('.facets-content.pagination-mode')).to
+      .exist;
+
+    // Verify horizontal container wrapper does NOT exist in pagination mode
+    expect(el.shadowRoot?.querySelector('.facets-horizontal-container')).to.not
+      .exist;
+  });
+
+  it('pagination page change should send analytics event', async () => {
+    const searchService = new MockSearchService();
+    const mockAnalyticsHandler = new MockAnalyticsHandler();
+
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content
+        .searchService=${searchService}
+        .selectedFacets=${getDefaultSelectedFacets()}
+        .analyticsHandler=${mockAnalyticsHandler}
+      ></more-facets-content>`,
+    );
+
+    el.facetKey = 'subject';
+    el.query = 'large-facets'; // Produces a response with 1100 aggregations (>= 1000)
+    await el.updateComplete;
+    await aTimeout(50);
+
+    // Get the pagination component
+    const pagination = el.shadowRoot?.querySelector(
+      'more-facets-pagination',
+    ) as any;
+    expect(pagination).to.exist;
+
+    // Simulate clicking page 2
+    pagination.currentPage = 2;
+    await pagination.updateComplete;
+
+    // Verify analytics event was sent
+    expect(mockAnalyticsHandler.callCategory).to.equal('collection-browser');
+    expect(mockAnalyticsHandler.callAction).to.equal('moreFacetsPageChange');
+    expect(mockAnalyticsHandler.callLabel).to.equal('2');
+  });
+
+  it('should render clearable text input for filtering', async () => {
+    const searchService = new MockSearchService();
+
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content
+        .facetKey=${'year'}
+        .query=${'more-facets'}
+        .searchService=${searchService}
+        .selectedFacets=${yearSelectedFacets}
+      ></more-facets-content>`,
+    );
+
+    await el.updateComplete;
+    await aTimeout(50);
+
+    // Verify the clearable text input component is present
+    const clearableInput = el.shadowRoot?.querySelector(
+      'ia-clearable-text-input',
+    ) as HTMLElement;
+    expect(clearableInput).to.exist;
+  });
+
+  it('should clear filter text when clear event is dispatched', async () => {
+    const searchService = new MockSearchService();
+
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content
+        .facetKey=${'year'}
+        .query=${'more-facets'}
+        .searchService=${searchService}
+        .selectedFacets=${yearSelectedFacets}
+      ></more-facets-content>`,
+    );
+
+    await el.updateComplete;
+    await aTimeout(50);
+
+    // Simulate typing into the clearable input by dispatching input event
+    const clearableInput = el.shadowRoot?.querySelector(
+      'ia-clearable-text-input',
+    ) as HTMLElement & { value: string };
+    expect(clearableInput).to.exist;
+
+    clearableInput.value = 'test';
+    clearableInput.dispatchEvent(new Event('input'));
+    await el.updateComplete;
+
+    // Dispatch clear event
+    clearableInput.dispatchEvent(new CustomEvent('clear', { detail: 'test' }));
+    await el.updateComplete;
+
+    // Verify the filter was cleared
+    expect(clearableInput.value).to.equal('');
+  });
+
+  describe('Horizontal scroll navigation arrows', () => {
+    it('should use scroll-nav-container in horizontal scroll mode', async () => {
+      const searchService = new MockSearchService();
+
+      const el = await fixture<MoreFacetsContent>(
+        html`<more-facets-content
+          .searchService=${searchService}
+        ></more-facets-content>`,
+      );
+
+      el.facetKey = 'year';
+      el.query = 'more-facets'; // Produces < 1000 aggregations
+      await el.updateComplete;
+      await aTimeout(50);
+
+      // Verify scroll navigation container exists in horizontal scroll mode
+      expect(el.shadowRoot?.querySelector('.scroll-nav-container')).to.exist;
+
+      // Verify horizontal container and facets-content exist inside it
+      expect(
+        el.shadowRoot?.querySelector(
+          '.scroll-nav-container .facets-content.horizontal-scroll-mode',
+        ),
+      ).to.exist;
+      expect(
+        el.shadowRoot?.querySelector(
+          '.scroll-nav-container .facets-horizontal-container',
+        ),
+      ).to.exist;
+    });
+
+    it('should NOT show scroll arrows in pagination mode', async () => {
+      const searchService = new MockSearchService();
+
+      const el = await fixture<MoreFacetsContent>(
+        html`<more-facets-content
+          .searchService=${searchService}
+          .selectedFacets=${getDefaultSelectedFacets()}
+        ></more-facets-content>`,
+      );
+
+      el.facetKey = 'subject';
+      el.query = 'large-facets'; // Produces >= 1000 aggregations
+      await el.updateComplete;
+      await aTimeout(50);
+
+      // Verify scroll navigation container does NOT exist
+      expect(el.shadowRoot?.querySelector('.scroll-nav-container')).to.not
+        .exist;
+      expect(el.shadowRoot?.querySelector('.scroll-arrow')).to.not.exist;
+    });
+
+    it('should hide scroll arrows when content does not overflow', async () => {
+      const searchService = new MockSearchService();
+
+      const el = await fixture<MoreFacetsContent>(
+        html`<more-facets-content
+          .searchService=${searchService}
+        ></more-facets-content>`,
+      );
+
+      el.facetKey = 'year';
+      el.query = 'more-facets';
+      await el.updateComplete;
+      await aTimeout(50);
+
+      // In test environment, there's no real layout so scrollWidth === clientWidth.
+      // Arrows should be hidden when there's no horizontal overflow.
+      expect(el.shadowRoot?.querySelector('.scroll-arrow')).to.not.exist;
+    });
+  });
 });

package/test/collection-facets/more-facets-pagination.test.ts

@@ -112,7 +112,7 @@ describe('More facets pagination', () => {
 
       const fake1 = sinon.fake();
       const fake2 = sinon.fake();
-      el.observePageCount = fake1;
+      el.updatePages = fake1;
       el.emitPageClick = fake2;
 
       // select first page button
@@ -146,7 +146,7 @@ describe('More facets pagination', () => {
 
       const fake1 = sinon.fake();
       const fake2 = sinon.fake();
-      el.observePageCount = fake1;
+      el.updatePages = fake1;
       el.emitPageClick = fake2;
 
       // select first page button
@@ -182,7 +182,7 @@ describe('More facets pagination', () => {
 
       const fake1 = sinon.fake();
       const fake2 = sinon.fake();
-      el.observePageCount = fake1;
+      el.updatePages = fake1;
       el.emitPageClick = fake2;
 
       // select first page button
@@ -198,4 +198,88 @@ describe('More facets pagination', () => {
       expect(el.currentPage).to.equal(6); // brings us forward 1 page
     });
   });
+
+  describe('Compact mode', () => {
+    it('shows all pages when size <= 3', async () => {
+      const el = await fixture<MoreFacetsPagination>(
+        html`<more-facets-pagination
+          .size=${3}
+          .compact=${true}
+        ></more-facets-pagination>`,
+      );
+
+      await el.updateComplete;
+      expect(el.pages).to.deep.equal([1, 2, 3]);
+    });
+
+    it('shows first, prev, current, next, ..., last for middle page', async () => {
+      const el = await fixture<MoreFacetsPagination>(
+        html`<more-facets-pagination
+          .size=${20}
+          .currentPage=${10}
+          .compact=${true}
+        ></more-facets-pagination>`,
+      );
+
+      await el.updateComplete;
+      // first, ..., prev, current, next, ..., last
+      expect(el.pages).to.deep.equal([1, 0, 9, 10, 11, 0, 20]);
+    });
+
+    it('shows correct pages when on page 1', async () => {
+      const el = await fixture<MoreFacetsPagination>(
+        html`<more-facets-pagination
+          .size=${20}
+          .currentPage=${1}
+          .compact=${true}
+        ></more-facets-pagination>`,
+      );
+
+      await el.updateComplete;
+      // first (current), next, ..., last
+      expect(el.pages).to.deep.equal([1, 2, 0, 20]);
+    });
+
+    it('shows correct pages when on last page', async () => {
+      const el = await fixture<MoreFacetsPagination>(
+        html`<more-facets-pagination
+          .size=${20}
+          .currentPage=${20}
+          .compact=${true}
+        ></more-facets-pagination>`,
+      );
+
+      await el.updateComplete;
+      // first, ..., prev, last (current)
+      expect(el.pages).to.deep.equal([1, 0, 19, 20]);
+    });
+
+    it('shows correct pages when on page 2', async () => {
+      const el = await fixture<MoreFacetsPagination>(
+        html`<more-facets-pagination
+          .size=${20}
+          .currentPage=${2}
+          .compact=${true}
+        ></more-facets-pagination>`,
+      );
+
+      await el.updateComplete;
+      // first, current, next, ..., last
+      expect(el.pages).to.deep.equal([1, 2, 3, 0, 20]);
+    });
+
+    it('shows correct pages when on second-to-last page', async () => {
+      const el = await fixture<MoreFacetsPagination>(
+        html`<more-facets-pagination
+          .size=${20}
+          .currentPage=${19}
+          .compact=${true}
+        ></more-facets-pagination>`,
+      );
+
+      await el.updateComplete;
+      // first, ..., prev, current, last
+      expect(el.pages).to.deep.equal([1, 0, 18, 19, 20]);
+    });
+  });
 });

package/test/mocks/mock-search-responses.ts

@@ -1349,6 +1349,54 @@ export const getMockSuccessWithManyAggregations: () => Result<
   },
 });
 
+/**
+ * Returns a mock response with 1000+ subject aggregation buckets,
+ * used to test pagination mode in the More Facets dialog.
+ */
+export const getMockSuccessWithLargeAggregations: () => Result<
+  SearchResponse,
+  SearchServiceError
+> = () => {
+  const buckets = Array.from({ length: 1100 }, (_, i) => ({
+    key: `subject-${i}`,
+    doc_count: 1100 - i,
+  }));
+  return {
+    success: {
+      request: {
+        kind: 'aggregations' as const,
+        clientParameters: {
+          user_query: 'large-facets',
+          sort: [],
+        },
+        backendRequests: {
+          primary: {
+            kind: 'aggregations' as const,
+            finalized_parameters: {
+              user_query: 'large-facets',
+              sort: [],
+            },
+          },
+        },
+      },
+      rawResponse: {},
+      sessionContext: {},
+      response: {
+        totalResults: 0,
+        returnedCount: 0,
+        results: [],
+        aggregations: {
+          subject: new Aggregation({ buckets }),
+        },
+      },
+      responseHeader: {
+        succeeded: true,
+        query_time: 0,
+      },
+    },
+  };
+};
+
 export const getMockErrorResult: () => Result<
   SearchResponse,
   SearchServiceError

package/test/mocks/mock-search-service.ts

@@ -33,6 +33,7 @@ import {
   getMockSuccessNoResults,
   getMockSuccessWithWebArchiveHits,
   getMockSuccessWithManyAggregations,
+  getMockSuccessWithLargeAggregations,
   getMockSuccessTvFields,
   getMockSuccessArchiveOrgUserResult,
   getMockSuccessArchiveOrgUserNoBlurResult,
@@ -64,6 +65,7 @@ const responses: Record<
   'tv-collection': getMockSuccessForTvCollection,
   'web-archive': getMockSuccessWithWebArchiveHits,
   'more-facets': getMockSuccessWithManyAggregations,
+  'large-facets': getMockSuccessWithLargeAggregations,
   'many-fields': getMockSuccessManyFields,
   'tv-fields': getMockSuccessTvFields,
   'no-results': getMockSuccessNoResults,