@internetarchive/collection-browser 4.2.0-alpha-webdev8164.3 → 4.2.0

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

@@ -5,10 +5,7 @@ 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 {
-  getDefaultSelectedFacets,
-  type SelectedFacets,
-} from '../../src/models';
+import type { SelectedFacets } from '../../src/models';
 
 const selectedFacetsGroup = {
   title: 'Media Type',
@@ -57,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>(
@@ -67,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 () => {
@@ -242,312 +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 () => {
-    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('Modal container height constraint', () => {
-    // Register a test wrapper element to simulate the modal's scroll container
-    if (!customElements.get('test-scroll-wrapper')) {
-      customElements.define(
-        'test-scroll-wrapper',
-        class extends HTMLElement {
-          constructor() {
-            super();
-            this.attachShadow({ mode: 'open' });
-            this.shadowRoot!.innerHTML = `
-              <style>
-                :host { display: block; }
-                .content { overflow-y: auto; max-height: 300px; }
-              </style>
-              <div class="content"><slot></slot></div>
-            `;
-          }
-        },
-      );
-    }
-
-    it('should constrain section height when inside a scroll container', async () => {
-      const el = await fixture<MoreFacetsContent>(html`
-        <test-scroll-wrapper>
-          <more-facets-content></more-facets-content>
-        </test-scroll-wrapper>
-      `);
-
-      const mfc = el.querySelector('more-facets-content') as MoreFacetsContent;
-      mfc.facetsLoading = false;
-      await mfc.updateComplete;
-
-      // Wait for the constrainToScrollContainer rAF callback
-      await new Promise(r =>
-        requestAnimationFrame(() => requestAnimationFrame(r)),
-      );
-
-      const section = mfc.shadowRoot?.querySelector(
-        'section#more-facets',
-      ) as HTMLElement;
-
-      // The section's inline max-height should be set when it would
-      // overflow the 300px scroll container
-      const sectionHeight = section.getBoundingClientRect().height;
-      const wrapper = el.shadowRoot?.querySelector('.content') as HTMLElement;
-      const wrapperBottom = wrapper.getBoundingClientRect().bottom;
-      const sectionTop = section.getBoundingClientRect().top;
-      const availableSpace = wrapperBottom - sectionTop;
-
-      // The section should not exceed the available space in the container
-      expect(sectionHeight).to.be.at.most(availableSpace + 1); // +1 for rounding
-    });
-
-    it('should not constrain section when no scroll container exists', async () => {
-      const el = await fixture<MoreFacetsContent>(
-        html`<more-facets-content></more-facets-content>`,
-      );
-
-      el.facetsLoading = false;
-      await el.updateComplete;
-
-      // Wait for the constrainToScrollContainer rAF callback
-      await new Promise(r =>
-        requestAnimationFrame(() => requestAnimationFrame(r)),
-      );
-
-      const section = el.shadowRoot?.querySelector(
-        'section#more-facets',
-      ) as HTMLElement;
-
-      // No inline max-height should be set when there's no scroll container
-      expect(section.style.maxHeight).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.updatePages = fake1;
+      el.observePageCount = 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.updatePages = fake1;
+      el.observePageCount = 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.updatePages = fake1;
+      el.observePageCount = fake1;
       el.emitPageClick = fake2;
 
       // select first page button
@@ -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]);
-    });
-  });
 });

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

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

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

@@ -213,6 +213,23 @@ describe('Tile Dispatcher', () => {
       await el.updateComplete;
       expect(el.getHoverPane()).not.to.exist;
     });
+
+    it('should not show info button when hover pane is not enabled', async () => {
+      const el = await fixture<TileDispatcher>(html`
+        <tile-dispatcher
+          .tileDisplayMode=${'grid'}
+          .model=${{ mediatype: 'texts' }}
+          .enableHoverPane=${false}
+        >
+        </tile-dispatcher>
+      `);
+
+      const itemTile = el.shadowRoot?.querySelector('item-tile') as ItemTile;
+      expect(itemTile).to.exist;
+
+      const infoButton = itemTile.shadowRoot?.querySelector('.info-button');
+      expect(infoButton).to.not.exist;
+    });
   });
 
   describe('Accessibility', () => {

package/test/tiles/tile-mediatype-icon.test.ts

@@ -45,7 +45,7 @@ describe('Mediatype Icon', () => {
     expect(iconDiv.title).to.equal('TV');
   });
 
-  it('renders TV Commercial mediatype for TV items with ad ids', async () => {
+  it('renders TV Political Ad mediatype for TV items with ad ids', async () => {
     model.mediatype = 'movies';
     model.collections = ['tvnews'];
     model.adIds = ['foo'];
@@ -54,10 +54,10 @@ describe('Mediatype Icon', () => {
     `);
 
     const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;
-    expect(iconDiv.title).to.equal('TV Commercial');
+    expect(iconDiv.title).to.equal('TV Political Ad');
   });
 
-  it('renders TV Commercial mediatype for TV items in tv_ads collection', async () => {
+  it('renders TV Political Ad mediatype for TV items in tv_ads collection', async () => {
     model.mediatype = 'movies';
     model.collections = ['tvnews', 'tv_ads'];
     const el = await fixture<TileMediatypeIcon>(html`
@@ -65,7 +65,7 @@ describe('Mediatype Icon', () => {
     `);
 
     const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;
-    expect(iconDiv.title).to.equal('TV Commercial');
+    expect(iconDiv.title).to.equal('TV Political Ad');
   });
 
   it('renders TV Fact Check mediatype for TV search results with fact check URLs', async () => {

package/tsconfig.json

@@ -1,25 +1,25 @@
-{
-  "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "noEmitOnError": true,
-    "lib": [
-      "ESNext",
-      "dom",
-      "dom.iterable"
-    ],
-    "strict": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "importHelpers": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "inlineSources": true,
-    "rootDir": "./",
-    "declaration": true,
-    "useDefineForClassFields": false,
-  },
-  "include": ["src", "test", "index.ts", "types"],
-}
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "noEmitOnError": true,
+    "lib": [
+      "ESNext",
+      "dom",
+      "dom.iterable"
+    ],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "./",
+    "declaration": true,
+    "useDefineForClassFields": false,
+  },
+  "include": ["src", "test", "index.ts", "types"],
+}