@internetarchive/collection-browser 4.1.0-alpha-webdev8164.0 → 4.1.0-alpha-webdev8186.0

package/test/collection-browser.test.ts

@@ -978,31 +978,20 @@ describe('Collection Browser', () => {
 
     const sortBar = el.shadowRoot?.querySelector(
       '#content-container sort-filter-bar',
-    );
-    const sortSelector = sortBar?.shadowRoot?.querySelector(
-      '#desktop-sort-selector',
-    );
-    expect(sortSelector, 'sort bar').to.exist;
-
-    // Click the title sorter
-    Array.from(sortSelector!.children)
-      .find(child => child.textContent?.trim() === 'Title')
-      ?.querySelector('button')
-      ?.click();
+    ) as SortFilterBar;
+    expect(sortBar, 'sort bar').to.exist;
 
+    // Switch to title sort
+    sortBar.setSelectedSort(SortField.title);
     await el.updateComplete;
-
     expect(el.selectedSort).to.equal(SortField.title);
+    expect(el.sortDirection).to.equal('asc'); // Default for title sort
 
-    // Click the creator sorter
-    Array.from(sortSelector!.children)
-      .find(child => child.textContent?.trim() === 'Creator')
-      ?.querySelector('button')
-      ?.click();
-
+    // Switch to descending sort order
+    sortBar.setSortDirection('desc');
     await el.updateComplete;
-
-    expect(el.selectedSort).to.equal(SortField.creator);
+    expect(el.selectedSort).to.equal(SortField.title);
+    expect(el.sortDirection).to.equal('desc');
   });
 
   it('sets sort filter properties when user selects title filter', async () => {

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

@@ -6,7 +6,6 @@ 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 { Aggregation, type Bucket } from '@internetarchive/search-service';
 
 const selectedFacetsGroup = {
   title: 'Media Type',
@@ -55,7 +54,7 @@ describe('More facets content', () => {
     expect(el.shadowRoot?.querySelector('.facets-loader')).to.exist;
   });
 
-  it('should NOT render pagination when facet count < 1000', async () => {
+  it('should render pagination for more facets', async () => {
     const searchService = new MockSearchService();
 
     const el = await fixture<MoreFacetsContent>(
@@ -65,22 +64,11 @@ describe('More facets content', () => {
     );
 
     el.facetKey = 'year';
-    el.query = 'more-facets'; // Produces a response with 45 aggregations (< 1000)
+    el.query = 'more-facets'; // Produces a response with 40+ aggregations for multiple pages
     await el.updateComplete;
     await aTimeout(50); // Give it a moment to perform the (mock) search query after the initial update
 
-    // 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;
+    expect(el.shadowRoot?.querySelectorAll('more-facets-pagination')).to.exist;
   });
 
   it('query for more facets content using search service', async () => {
@@ -240,207 +228,4 @@ 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 () => {
-    // Manually create aggregations with 1000+ facets
-    const buckets: Bucket[] = [];
-    for (let i = 0; i < 1000; i++) {
-      buckets.push({ key: `value-${i}`, doc_count: i + 1 });
-    }
-
-    const el = await fixture<MoreFacetsContent>(
-      html`<more-facets-content
-        .facetKey=${'subject'}
-        .selectedFacets=${{
-          mediatype: {},
-          lending: {},
-          year: {},
-          subject: {},
-          collection: {},
-          creator: {},
-          language: {},
-        }}
-      ></more-facets-content>`,
-    );
-
-    // @ts-expect-error - accessing private property for testing
-    el.aggregations = {
-      subject: new Aggregation({ buckets }),
-    };
-    el.facetsLoading = false;
-    await el.updateComplete;
-
-    // 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 mockAnalyticsHandler = new MockAnalyticsHandler();
-
-    // Manually create aggregations with 1000+ facets
-    const buckets: Bucket[] = [];
-    for (let i = 0; i < 1000; i++) {
-      buckets.push({ key: `value-${i}`, doc_count: i + 1 });
-    }
-
-    const el = await fixture<MoreFacetsContent>(
-      html`<more-facets-content
-        .facetKey=${'subject'}
-        .selectedFacets=${{
-          mediatype: {},
-          lending: {},
-          year: {},
-          subject: {},
-          collection: {},
-          creator: {},
-          language: {},
-        }}
-        .analyticsHandler=${mockAnalyticsHandler}
-      ></more-facets-content>`,
-    );
-
-    // @ts-expect-error - accessing private property for testing
-    el.aggregations = {
-      subject: new Aggregation({ buckets }),
-    };
-    el.facetsLoading = false;
-    await el.updateComplete;
-
-    // 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 show clear button when filter text is present', 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);
-
-    // Initially, no clear button should exist
-    expect(el.shadowRoot?.querySelector('.filter-clear-btn')).to.not.exist;
-
-    // Type into the filter input
-    const filterInput = el.shadowRoot?.querySelector(
-      '#facet-filter',
-    ) as HTMLInputElement;
-    expect(filterInput).to.exist;
-
-    filterInput.value = 'test';
-    filterInput.dispatchEvent(new Event('input'));
-    await el.updateComplete;
-
-    // Now clear button should exist
-    expect(el.shadowRoot?.querySelector('.filter-clear-btn')).to.exist;
-  });
-
-  it('should clear filter text when clear button is clicked', 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);
-
-    // Type into the filter input
-    const filterInput = el.shadowRoot?.querySelector(
-      '#facet-filter',
-    ) as HTMLInputElement;
-    filterInput.value = 'test';
-    filterInput.dispatchEvent(new Event('input'));
-    await el.updateComplete;
-
-    // Click the clear button
-    const clearBtn = el.shadowRoot?.querySelector(
-      '.filter-clear-btn',
-    ) as HTMLButtonElement;
-    expect(clearBtn).to.exist;
-    clearBtn.click();
-    await el.updateComplete;
-
-    // Filter input should be empty and clear button should be gone
-    expect(filterInput.value).to.equal('');
-    expect(el.shadowRoot?.querySelector('.filter-clear-btn')).to.not.exist;
-  });
 });

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

@@ -198,88 +198,4 @@ 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]);
-    });
-  });
 });