@internetarchive/collection-browser 4.3.0 → 4.3.1-alpha-webdev8257.0

package/test/data-source/collection-browser-data-source.test.ts

@@ -1,193 +1,193 @@
-import { expect, fixture } from '@open-wc/testing';
-import { html } from 'lit';
-import sinon from 'sinon';
-import { ItemHit, SearchType } from '@internetarchive/search-service';
-import { CollectionBrowserDataSource } from '../../src/data-source/collection-browser-data-source';
-import { TileModel } from '../../src/models';
-import type { CollectionBrowser } from '../../src/collection-browser';
-import '../../src/collection-browser';
-import { MockSearchService } from '../mocks/mock-search-service';
-
-const dataPage: TileModel[] = [
-  new TileModel(
-    new ItemHit({
-      fields: {
-        identifier: 'foo',
-      },
-    }),
-  ),
-  new TileModel(
-    new ItemHit({
-      fields: {
-        identifier: 'bar',
-      },
-    }),
-  ),
-];
-
-describe('Collection Browser Data Source', () => {
-  let host: CollectionBrowser;
-
-  beforeEach(async () => {
-    host = await fixture<CollectionBrowser>(html`
-      <collection-browser></collection-browser>
-    `);
-  });
-
-  it('can add and retrieve data pages', () => {
-    const dataSource = new CollectionBrowserDataSource(host);
-    dataSource.addPage(1, dataPage);
-
-    expect(Object.keys(dataSource.getAllPages()).length).to.equal(1);
-    expect(dataSource.getPage(1).length).to.equal(2);
-    expect(dataSource.getPage(1)[0].identifier).to.equal('foo');
-    expect(dataSource.getPage(1)[1].identifier).to.equal('bar');
-  });
-
-  it('can add data split across multiple pages', () => {
-    const dataSource = new CollectionBrowserDataSource(host, 3);
-    const doubledDataPage = [...dataPage, ...dataPage];
-    dataSource.addMultiplePages(1, doubledDataPage);
-
-    expect(Object.keys(dataSource.getAllPages()).length).to.equal(2);
-    expect(dataSource.getPage(1).length).to.equal(3);
-    expect(dataSource.getPage(2).length).to.equal(1);
-    expect(dataSource.getPage(1)[0].identifier).to.equal('foo');
-    expect(dataSource.getPage(1)[1].identifier).to.equal('bar');
-    expect(dataSource.getPage(1)[2].identifier).to.equal('foo');
-    expect(dataSource.getPage(2)[0].identifier).to.equal('bar');
-  });
-
-  it('resets data when changing page size', () => {
-    const dataSource = new CollectionBrowserDataSource(host);
-    dataSource.addPage(1, dataPage);
-
-    dataSource.setPageSize(100);
-    expect(Object.keys(dataSource.getAllPages()).length).to.equal(0);
-    expect(dataSource.getPageSize()).to.equal(100);
-  });
-
-  it('can be installed on the host', async () => {
-    const dataSource = new CollectionBrowserDataSource(host);
-    dataSource.addPage(1, dataPage);
-
-    host.installDataSourceAndQueryState(dataSource, {
-      searchType: SearchType.METADATA,
-      sortDirection: null,
-      selectedTitleFilter: null,
-      selectedCreatorFilter: null,
-      baseQuery: 'foobar',
-    });
-
-    await host.updateComplete;
-
-    expect(host.dataSource).to.equal(dataSource);
-    expect(host.baseQuery).to.equal('foobar');
-
-    host.removeController(dataSource);
-  });
-
-  it('can suppress further fetches', async () => {
-    host.searchService = new MockSearchService();
-
-    const pageFetchSpy = sinon.spy();
-    const dataSource = new CollectionBrowserDataSource(host);
-    dataSource.fetchPage = pageFetchSpy;
-
-    dataSource.addPage(1, dataPage);
-    dataSource.setFetchesSuppressed(true);
-    dataSource.handleQueryChange();
-
-    expect(pageFetchSpy.callCount).to.equal(0);
-  });
-
-  it('can set its initial page batch size', async () => {
-    host.searchService = new MockSearchService();
-
-    const pageFetchSpy = sinon.spy();
-    const dataSource = new CollectionBrowserDataSource(host);
-    dataSource.setNumInitialPages(10);
-    dataSource.fetchPage = pageFetchSpy;
-
-    dataSource.handleQueryChange();
-
-    // Uses specified number of initial pages
-    expect(pageFetchSpy.args[0][1]).to.equal(10);
-  });
-
-  it('refreshes prefix filter counts', () => {
-    const dataSource = new CollectionBrowserDataSource(host);
-    dataSource.addPage(1, dataPage);
-
-    dataSource.prefixFilterCountMap = {
-      title: {
-        X: 10,
-      },
-    };
-
-    dataSource.refreshLetterCounts();
-    expect(dataSource.prefixFilterCountMap).to.deep.equal({});
-  });
-
-  describe('empty FTS query in collection falls back to metadata search', () => {
-    it('allows search with empty query and FTS in a collection', async () => {
-      const searchService = new MockSearchService();
-      host.searchService = searchService;
-      host.withinCollection = 'test-collection';
-      host.searchType = SearchType.FULLTEXT;
-      host.baseQuery = '';
-      await host.updateComplete;
-
-      const dataSource = new CollectionBrowserDataSource(host);
-      host.addController(dataSource);
-      expect(dataSource.canPerformSearch).to.be.true;
-      host.removeController(dataSource);
-    });
-
-    it('uses metadata search type for fetch when FTS query is empty in a collection', async () => {
-      const searchService = new MockSearchService();
-      host.searchService = searchService;
-      host.withinCollection = 'test-collection';
-      host.searchType = SearchType.FULLTEXT;
-      host.baseQuery = '';
-      await host.updateComplete;
-
-      const dataSource = new CollectionBrowserDataSource(host);
-      host.addController(dataSource);
-      await dataSource.fetchPage(1);
-
-      expect(searchService.searchType).to.equal(SearchType.METADATA);
-      host.removeController(dataSource);
-    });
-
-    it('uses FTS search type for fetch when FTS query is non-empty in a collection', async () => {
-      const searchService = new MockSearchService();
-      host.searchService = searchService;
-      host.withinCollection = 'test-collection';
-      host.searchType = SearchType.FULLTEXT;
-      host.baseQuery = 'some query';
-      await host.updateComplete;
-
-      const dataSource = new CollectionBrowserDataSource(host);
-      host.addController(dataSource);
-      await dataSource.fetchPage(1);
-
-      expect(searchService.searchType).to.equal(SearchType.FULLTEXT);
-      host.removeController(dataSource);
-    });
-
-    it('does not allow search with empty FTS query outside a collection', async () => {
-      const searchService = new MockSearchService();
-      host.searchService = searchService;
-      host.withinCollection = undefined;
-      host.searchType = SearchType.FULLTEXT;
-      host.baseQuery = '';
-      await host.updateComplete;
-
-      const dataSource = new CollectionBrowserDataSource(host);
-      host.addController(dataSource);
-      expect(dataSource.canPerformSearch).to.be.false;
-      host.removeController(dataSource);
-    });
-  });
-});
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import sinon from 'sinon';
+import { ItemHit, SearchType } from '@internetarchive/search-service';
+import { CollectionBrowserDataSource } from '../../src/data-source/collection-browser-data-source';
+import { TileModel } from '../../src/models';
+import type { CollectionBrowser } from '../../src/collection-browser';
+import '../../src/collection-browser';
+import { MockSearchService } from '../mocks/mock-search-service';
+
+const dataPage: TileModel[] = [
+  new TileModel(
+    new ItemHit({
+      fields: {
+        identifier: 'foo',
+      },
+    }),
+  ),
+  new TileModel(
+    new ItemHit({
+      fields: {
+        identifier: 'bar',
+      },
+    }),
+  ),
+];
+
+describe('Collection Browser Data Source', () => {
+  let host: CollectionBrowser;
+
+  beforeEach(async () => {
+    host = await fixture<CollectionBrowser>(html`
+      <collection-browser></collection-browser>
+    `);
+  });
+
+  it('can add and retrieve data pages', () => {
+    const dataSource = new CollectionBrowserDataSource(host);
+    dataSource.addPage(1, dataPage);
+
+    expect(Object.keys(dataSource.getAllPages()).length).to.equal(1);
+    expect(dataSource.getPage(1).length).to.equal(2);
+    expect(dataSource.getPage(1)[0].identifier).to.equal('foo');
+    expect(dataSource.getPage(1)[1].identifier).to.equal('bar');
+  });
+
+  it('can add data split across multiple pages', () => {
+    const dataSource = new CollectionBrowserDataSource(host, 3);
+    const doubledDataPage = [...dataPage, ...dataPage];
+    dataSource.addMultiplePages(1, doubledDataPage);
+
+    expect(Object.keys(dataSource.getAllPages()).length).to.equal(2);
+    expect(dataSource.getPage(1).length).to.equal(3);
+    expect(dataSource.getPage(2).length).to.equal(1);
+    expect(dataSource.getPage(1)[0].identifier).to.equal('foo');
+    expect(dataSource.getPage(1)[1].identifier).to.equal('bar');
+    expect(dataSource.getPage(1)[2].identifier).to.equal('foo');
+    expect(dataSource.getPage(2)[0].identifier).to.equal('bar');
+  });
+
+  it('resets data when changing page size', () => {
+    const dataSource = new CollectionBrowserDataSource(host);
+    dataSource.addPage(1, dataPage);
+
+    dataSource.setPageSize(100);
+    expect(Object.keys(dataSource.getAllPages()).length).to.equal(0);
+    expect(dataSource.getPageSize()).to.equal(100);
+  });
+
+  it('can be installed on the host', async () => {
+    const dataSource = new CollectionBrowserDataSource(host);
+    dataSource.addPage(1, dataPage);
+
+    host.installDataSourceAndQueryState(dataSource, {
+      searchType: SearchType.METADATA,
+      sortDirection: null,
+      selectedTitleFilter: null,
+      selectedCreatorFilter: null,
+      baseQuery: 'foobar',
+    });
+
+    await host.updateComplete;
+
+    expect(host.dataSource).to.equal(dataSource);
+    expect(host.baseQuery).to.equal('foobar');
+
+    host.removeController(dataSource);
+  });
+
+  it('can suppress further fetches', async () => {
+    host.searchService = new MockSearchService();
+
+    const pageFetchSpy = sinon.spy();
+    const dataSource = new CollectionBrowserDataSource(host);
+    dataSource.fetchPage = pageFetchSpy;
+
+    dataSource.addPage(1, dataPage);
+    dataSource.setFetchesSuppressed(true);
+    dataSource.handleQueryChange();
+
+    expect(pageFetchSpy.callCount).to.equal(0);
+  });
+
+  it('can set its initial page batch size', async () => {
+    host.searchService = new MockSearchService();
+
+    const pageFetchSpy = sinon.spy();
+    const dataSource = new CollectionBrowserDataSource(host);
+    dataSource.setNumInitialPages(10);
+    dataSource.fetchPage = pageFetchSpy;
+
+    dataSource.handleQueryChange();
+
+    // Uses specified number of initial pages
+    expect(pageFetchSpy.args[0][1]).to.equal(10);
+  });
+
+  it('refreshes prefix filter counts', () => {
+    const dataSource = new CollectionBrowserDataSource(host);
+    dataSource.addPage(1, dataPage);
+
+    dataSource.prefixFilterCountMap = {
+      title: {
+        X: 10,
+      },
+    };
+
+    dataSource.refreshLetterCounts();
+    expect(dataSource.prefixFilterCountMap).to.deep.equal({});
+  });
+
+  describe('empty FTS query in collection falls back to metadata search', () => {
+    it('allows search with empty query and FTS in a collection', async () => {
+      const searchService = new MockSearchService();
+      host.searchService = searchService;
+      host.withinCollection = 'test-collection';
+      host.searchType = SearchType.FULLTEXT;
+      host.baseQuery = '';
+      await host.updateComplete;
+
+      const dataSource = new CollectionBrowserDataSource(host);
+      host.addController(dataSource);
+      expect(dataSource.canPerformSearch).to.be.true;
+      host.removeController(dataSource);
+    });
+
+    it('uses metadata search type for fetch when FTS query is empty in a collection', async () => {
+      const searchService = new MockSearchService();
+      host.searchService = searchService;
+      host.withinCollection = 'test-collection';
+      host.searchType = SearchType.FULLTEXT;
+      host.baseQuery = '';
+      await host.updateComplete;
+
+      const dataSource = new CollectionBrowserDataSource(host);
+      host.addController(dataSource);
+      await dataSource.fetchPage(1);
+
+      expect(searchService.searchType).to.equal(SearchType.METADATA);
+      host.removeController(dataSource);
+    });
+
+    it('uses FTS search type for fetch when FTS query is non-empty in a collection', async () => {
+      const searchService = new MockSearchService();
+      host.searchService = searchService;
+      host.withinCollection = 'test-collection';
+      host.searchType = SearchType.FULLTEXT;
+      host.baseQuery = 'some query';
+      await host.updateComplete;
+
+      const dataSource = new CollectionBrowserDataSource(host);
+      host.addController(dataSource);
+      await dataSource.fetchPage(1);
+
+      expect(searchService.searchType).to.equal(SearchType.FULLTEXT);
+      host.removeController(dataSource);
+    });
+
+    it('does not allow search with empty FTS query outside a collection', async () => {
+      const searchService = new MockSearchService();
+      host.searchService = searchService;
+      host.withinCollection = undefined;
+      host.searchType = SearchType.FULLTEXT;
+      host.baseQuery = '';
+      await host.updateComplete;
+
+      const dataSource = new CollectionBrowserDataSource(host);
+      host.addController(dataSource);
+      expect(dataSource.canPerformSearch).to.be.false;
+      host.removeController(dataSource);
+    });
+  });
+});

package/test/manage/manage-bar.test.ts

@@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
 import Sinon from 'sinon';
 import '../../src/manage/manage-bar';
+import '../../src/manage/remove-items-modal-content';
 import {
   ModalManager,
   ModalManagerInterface,
@@ -9,6 +10,8 @@ import {
 import '@internetarchive/modal-manager';
 import { msg } from '@lit/localize';
 import type { ManageBar } from '../../src/manage/manage-bar';
+import type { PageElementName } from '@internetarchive/search-service';
+import type { RemoveItemsModalContent } from '../../src/manage/remove-items-modal-content';
 
 describe('Manage bar', () => {
   it('renders basic component', async () => {
@@ -145,8 +148,6 @@ describe('Manage bar', () => {
     await el.updateComplete;
     removeButton?.click();
 
-    console.log(showModalSpy.args[0][0].config.title?.values[0]);
-
     expect(showModalSpy.callCount).to.equal(1);
     expect(el.modalManager?.classList.contains('remove-items')).to.be;
     expect(showModalSpy.args[0][0].config.title?.values[0]).to.equal(
@@ -154,4 +155,193 @@ describe('Manage bar', () => {
     );
     expect(showModalSpy.args[0][0].customModalContent).to.exist;
   });
+
+  it('shows selected items count in remove button', async () => {
+    const el = await fixture<ManageBar>(html`
+      <manage-bar
+        .selectedItems=${[
+          { identifier: '1', title: 'Item 1' },
+          { identifier: '2', title: 'Item 2' },
+          { identifier: '3', title: 'Item 3' },
+        ]}
+      ></manage-bar>
+    `);
+    const removeBtn = el.shadowRoot?.querySelector('.ia-button.danger');
+    expect(removeBtn?.textContent?.trim()).to.include('(3)');
+  });
+
+  it('Item Manager button is disabled when removeAllowed is false', async () => {
+    const el = await fixture<ManageBar>(
+      html`<manage-bar showItemManageButton></manage-bar>`,
+    );
+    expect(el.shadowRoot?.querySelector('.ia-button.warning:disabled')).to
+      .exist;
+
+    el.removeAllowed = true;
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelector('.ia-button.warning:disabled')).not.to
+      .exist;
+  });
+
+  it('emits manageItems event when Item Manager button clicked', async () => {
+    const spy = Sinon.spy();
+    const el = await fixture<ManageBar>(html`
+      <manage-bar
+        showItemManageButton
+        removeAllowed
+        @manageItems=${spy}
+      ></manage-bar>
+    `);
+    const manageBtn = el.shadowRoot?.querySelector(
+      '.ia-button.warning',
+    ) as HTMLButtonElement;
+    expect(manageBtn).to.exist;
+    manageBtn.click();
+    expect(spy.callCount).to.equal(1);
+  });
+
+  it('emits removeItems event when modal confirm is clicked', async () => {
+    const modalManager = await fixture<ModalManager>(
+      html`<modal-manager></modal-manager>`,
+    );
+    const removeItemsSpy = Sinon.spy();
+    const el = await fixture<ManageBar>(html`
+      <manage-bar
+        .modalManager=${modalManager}
+        .selectedItems=${[{ identifier: '1', title: 'Item 1' }]}
+        removeAllowed
+        @removeItems=${removeItemsSpy}
+      ></manage-bar>
+    `);
+    await el.updateComplete;
+
+    const showModalSpy = Sinon.spy(
+      el.modalManager as ModalManagerInterface,
+      'showModal',
+    );
+    (
+      el.shadowRoot?.querySelector('.ia-button.danger') as HTMLButtonElement
+    ).click();
+
+    const contentEl = (await fixture(
+      showModalSpy.args[0][0].customModalContent!,
+    )) as RemoveItemsModalContent;
+    (
+      contentEl.shadowRoot?.querySelector(
+        '.remove-items-btn',
+      ) as HTMLButtonElement
+    ).click();
+
+    expect(removeItemsSpy.callCount).to.equal(1);
+  });
+
+  describe('profileElement modal messages', () => {
+    async function openModalContent(
+      profileElement: string,
+      itemCount = 1,
+    ): Promise<RemoveItemsModalContent> {
+      const modalManager = await fixture<ModalManager>(
+        html`<modal-manager></modal-manager>`,
+      );
+      const items = Array.from({ length: itemCount }, (_, i) => ({
+        identifier: String(i + 1),
+        title: `Item ${i + 1}`,
+      }));
+      const el = await fixture<ManageBar>(html`
+        <manage-bar
+          .selectedItems=${items}
+          .profileElement=${profileElement as PageElementName}
+          removeAllowed
+        ></manage-bar>
+      `);
+      el.modalManager = modalManager as ModalManagerInterface;
+      await el.updateComplete;
+
+      const showModalSpy = Sinon.spy(
+        el.modalManager as ModalManagerInterface,
+        'showModal',
+      );
+      (
+        el.shadowRoot?.querySelector('.ia-button.danger') as HTMLButtonElement
+      ).click();
+
+      return (await fixture(
+        showModalSpy.args[0][0].customModalContent!,
+      )) as RemoveItemsModalContent;
+    }
+
+    it('shows uploads-specific message for profileElement=uploads', async () => {
+      const contentEl = await openModalContent('uploads');
+      expect(contentEl.message).to.include('uploads list');
+    });
+
+    it('shows web archives message for profileElement=web_archives', async () => {
+      const contentEl = await openModalContent('web_archives');
+      expect(contentEl.message).to.include('web archives list');
+    });
+
+    it('shows favorites message for profileElement=favorites', async () => {
+      const contentEl = await openModalContent('favorites');
+      expect(contentEl.message).to.include('favorites list');
+    });
+
+    it('shows no message for unmapped profileElement (e.g. reviews)', async () => {
+      const contentEl = await openModalContent('reviews');
+      expect(contentEl.message).to.equal('');
+      expect(contentEl.shadowRoot?.querySelector('.message')).not.to.exist;
+    });
+
+    it('uses "this item" for a single selected item', async () => {
+      const contentEl = await openModalContent('uploads', 1);
+      expect(contentEl.message).to.include('this item');
+    });
+
+    it('uses "these items" for multiple selected items', async () => {
+      const contentEl = await openModalContent('uploads', 2);
+      expect(contentEl.message).to.include('these items');
+    });
+  });
+
+  it('showRemoveItemsProcessingModal shows processing modal', async () => {
+    const modalManager = await fixture<ModalManager>(
+      html`<modal-manager></modal-manager>`,
+    );
+    const el = await fixture<ManageBar>(html`
+      <manage-bar .modalManager=${modalManager}></manage-bar>
+    `);
+    const showModalSpy = Sinon.spy(
+      el.modalManager as ModalManagerInterface,
+      'showModal',
+    );
+
+    el.showRemoveItemsProcessingModal();
+
+    expect(showModalSpy.callCount).to.equal(1);
+    expect(showModalSpy.args[0][0].config.showProcessingIndicator).to.be.true;
+    expect(showModalSpy.args[0][0].config.title?.values[0]).to.equal(
+      msg('Removing selected items...'),
+    );
+  });
+
+  it('showRemoveItemsErrorModal shows error modal', async () => {
+    const modalManager = await fixture<ModalManager>(
+      html`<modal-manager></modal-manager>`,
+    );
+    const el = await fixture<ManageBar>(html`
+      <manage-bar .modalManager=${modalManager}></manage-bar>
+    `);
+    const showModalSpy = Sinon.spy(
+      el.modalManager as ModalManagerInterface,
+      'showModal',
+    );
+
+    el.showRemoveItemsErrorModal();
+
+    expect(showModalSpy.callCount).to.equal(1);
+    expect(showModalSpy.args[0][0].config.showProcessingIndicator).to.be.false;
+    expect(showModalSpy.args[0][0].config.title?.values[0]).to.equal(
+      msg('Error: unable to remove items'),
+    );
+  });
 });