@internetarchive/collection-browser 2.7.7-alpha.2 → 2.7.8-alpha1

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

@@ -1,9 +1,15 @@
+/* eslint-disable import/no-duplicates */
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
 import Sinon from 'sinon';
-import type { ManageBar } from '../../src/manage/manage-bar';
-
 import '../../src/manage/manage-bar';
+import {
+  ModalManager,
+  ModalManagerInterface,
+} from '@internetarchive/modal-manager';
+import '@internetarchive/modal-manager';
+import { msg } from '@lit/localize';
+import type { ManageBar } from '../../src/manage/manage-bar';
 
 describe('Manage bar', () => {
   it('renders basic component', async () => {
@@ -17,10 +23,10 @@ describe('Manage bar', () => {
 
   it('can set the label', async () => {
     const el = await fixture<ManageBar>(
-      html`<manage-bar label="foo bar"></manage-bar>`,
+      html`<manage-bar label="foo bar"></manage-bar>`
     );
     expect(el.shadowRoot?.querySelector('.manage-label')?.textContent).to.equal(
-      'foo bar',
+      'foo bar'
     );
   });
 
@@ -37,21 +43,21 @@ describe('Manage bar', () => {
 
   it('render item manager button for /search/ page', async () => {
     const el = await fixture<ManageBar>(
-      html`<manage-bar .pageContext=${'search'}></manage-bar>`,
+      html`<manage-bar showItemManageButton></manage-bar>`
     );
     expect(el.shadowRoot?.querySelector('.ia-button.warning')).to.exist;
   });
 
   it('includes Select All button when requested', async () => {
     const el = await fixture<ManageBar>(
-      html`<manage-bar showSelectAll></manage-bar>`,
+      html`<manage-bar showSelectAll></manage-bar>`
     );
     expect(el.shadowRoot?.querySelector('.select-all-btn')).to.exist;
   });
 
   it('includes Unselect All button when requested', async () => {
     const el = await fixture<ManageBar>(
-      html`<manage-bar showUnselectAll></manage-bar>`,
+      html`<manage-bar showUnselectAll></manage-bar>`
     );
     expect(el.shadowRoot?.querySelector('.unselect-all-btn')).to.exist;
   });
@@ -71,11 +77,11 @@ describe('Manage bar', () => {
   it('emits event when Cancel button clicked', async () => {
     const spy = Sinon.spy();
     const el = await fixture<ManageBar>(
-      html`<manage-bar @cancel=${spy}></manage-bar>`,
+      html`<manage-bar @cancel=${spy}></manage-bar>`
     );
 
     const cancelBtn = el.shadowRoot?.querySelector(
-      '.ia-button.dark',
+      '.ia-button.dark'
     ) as HTMLButtonElement;
     expect(cancelBtn).to.exist;
 
@@ -83,29 +89,14 @@ describe('Manage bar', () => {
     expect(spy.callCount).to.equal(1);
   });
 
-  it('emits event when Remove Items button clicked', async () => {
-    const spy = Sinon.spy();
-    const el = await fixture<ManageBar>(
-      html`<manage-bar @removeItems=${spy} removeAllowed></manage-bar>`,
-    );
-
-    const removeItemsBtn = el.shadowRoot?.querySelector(
-      '.ia-button.danger',
-    ) as HTMLButtonElement;
-    expect(removeItemsBtn).to.exist;
-
-    removeItemsBtn.click();
-    expect(spy.callCount).to.equal(1);
-  });
-
   it('emits event when Select All button clicked', async () => {
     const spy = Sinon.spy();
     const el = await fixture<ManageBar>(
-      html`<manage-bar showSelectAll @selectAll=${spy}></manage-bar>`,
+      html`<manage-bar showSelectAll @selectAll=${spy}></manage-bar>`
     );
 
     const selectAllBtn = el.shadowRoot?.querySelector(
-      '.select-all-btn',
+      '.select-all-btn'
     ) as HTMLButtonElement;
     expect(selectAllBtn).to.exist;
 
@@ -116,15 +107,48 @@ describe('Manage bar', () => {
   it('emits event when Unselect All button clicked', async () => {
     const spy = Sinon.spy();
     const el = await fixture<ManageBar>(
-      html`<manage-bar showUnselectAll @unselectAll=${spy}></manage-bar>`,
+      html`<manage-bar showUnselectAll @unselectAll=${spy}></manage-bar>`
     );
 
     const unselectAllBtn = el.shadowRoot?.querySelector(
-      '.unselect-all-btn',
+      '.unselect-all-btn'
     ) as HTMLButtonElement;
     expect(unselectAllBtn).to.exist;
 
     unselectAllBtn.click();
     expect(spy.callCount).to.equal(1);
   });
+
+  it('opens the remove items modal when showRemoveItemsModal is clicked', async () => {
+    const el = await fixture<ManageBar>(html`
+      <manage-bar
+        .modalManager=${new ModalManager()}
+        .selectedItems=${[{ identifier: '1', title: 'Item 1' }]}
+        removeAllowed
+      ></manage-bar>
+    `);
+    await el.updateComplete;
+
+    const removeButton = el.shadowRoot?.querySelector(
+      '.ia-button.danger'
+    ) as HTMLButtonElement;
+    expect(removeButton).to.exist;
+
+    const showModalSpy = Sinon.spy(
+      el.modalManager as ModalManagerInterface,
+      'showModal'
+    );
+
+    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(
+      msg('Are you sure you want to remove these items?')
+    );
+    expect(showModalSpy.args[0][0].customModalContent).to.exist;
+  });
 });

package/test/manage/remove-items-modal-content.test.ts

@@ -0,0 +1,82 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import Sinon from 'sinon';
+import type { ManageableItem } from '../../src/models';
+import type { RemoveItemsModalContent } from '../../src/manage/remove-items-modal-content';
+import '../../src/manage/remove-items-modal-content';
+
+describe('RemoveItemsModalContent', () => {
+  const items: ManageableItem[] = [
+    { identifier: '1', title: 'Item 1', date: '2022-01-01' },
+    { identifier: '2', title: 'Item 2', date: '2022-01-02' },
+  ];
+
+  it('renders basic component', async () => {
+    const el = await fixture<RemoveItemsModalContent>(html`
+      <remove-items-modal-content
+        .items=${items}
+        .message=${''}
+      ></remove-items-modal-content>
+    `);
+
+    expect(el.shadowRoot?.querySelector('ul')).to.exist;
+    expect(el.shadowRoot?.querySelector('.button-bar')).to.exist;
+    expect(el.shadowRoot?.querySelector('.remove-items-btn')).to.exist;
+  });
+
+  it('renders list of items', async () => {
+    const el = await fixture<RemoveItemsModalContent>(html`
+      <remove-items-modal-content
+        .items=${items}
+        .message=${''}
+      ></remove-items-modal-content>
+    `);
+
+    const listItems = el.shadowRoot?.querySelectorAll('li');
+    expect(listItems).to.have.lengthOf(2);
+
+    listItems?.forEach((item, index) => {
+      expect(item.querySelector('.item-title')?.textContent).to.equal(
+        items[index].title
+      );
+      expect(item.querySelector('.item-date')?.textContent).to.equal(
+        items[index].date
+      );
+    });
+  });
+
+  it('renders message', async () => {
+    const message = 'This is a test message';
+    const el = await fixture<RemoveItemsModalContent>(html`
+      <remove-items-modal-content
+        .items=${[]}
+        .message=${message}
+      ></remove-items-modal-content>
+    `);
+
+    expect(el.shadowRoot?.querySelector('.message')?.textContent).to.equal(
+      message
+    );
+  });
+
+  it('dispatches confirm event when remove items button is clicked', async () => {
+    const el = await fixture<RemoveItemsModalContent>(html`
+      <remove-items-modal-content
+        .items=${items}
+        .message=${''}
+      ></remove-items-modal-content>
+    `);
+
+    const spy = Sinon.spy();
+    el.addEventListener('confirm', spy);
+
+    const button = el.shadowRoot?.querySelector(
+      '.remove-items-btn'
+    ) as HTMLInputElement;
+    button?.click();
+
+    expect(spy.calledOnce).to.be.true;
+    expect(spy.args[0][0].detail.items).to.deep.equal(items);
+  });
+});

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

@@ -1,4 +1,3 @@
-// eslint-disable @typescript-eslint/no-unsafe-function-type
 import type { Result } from '@internetarchive/result-type';
 import {
   Aggregation,
@@ -495,7 +494,7 @@ export const getMockSuccessWithCollectionAggregations: () => Result<
 });
 
 export const getMockSuccessSingleResultWithSort: (
-  resultsSpy: Function,
+  resultsSpy: Function
 ) => Result<SearchResponse, SearchServiceError> = (resultsSpy: Function) => ({
   success: {
     request: {

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

@@ -82,7 +82,7 @@ export class MockSearchService implements SearchServiceInterface {
 
   async search(
     params: SearchParams,
-    searchType: SearchType,
+    searchType: SearchType
   ): Promise<Result<SearchResponse, SearchServiceError>> {
     this.searchParams = params;
     this.searchType = searchType;

package/test/restoration-state-handler.test.ts

@@ -68,7 +68,7 @@ describe('Restoration state handler', () => {
 
     const restorationState = handler.getRestorationState();
     expect(restorationState.selectedFacets.year['2018'].state).to.equal(
-      'selected',
+      'selected'
     );
   });
 
@@ -81,7 +81,7 @@ describe('Restoration state handler', () => {
 
     const restorationState = handler.getRestorationState();
     expect(restorationState.selectedFacets).to.deep.equal(
-      getDefaultSelectedFacets(),
+      getDefaultSelectedFacets()
     );
   });
 
@@ -128,7 +128,7 @@ describe('Restoration state handler', () => {
 
     const restorationState = handler.getRestorationState();
     expect(restorationState.selectedFacets.subject.foo.state).to.equal(
-      'selected',
+      'selected'
     );
   });
 
@@ -141,7 +141,7 @@ describe('Restoration state handler', () => {
 
     const restorationState = handler.getRestorationState();
     expect(restorationState.selectedFacets.year['2018'].state).to.equal(
-      'hidden',
+      'hidden'
     );
   });
 
@@ -156,17 +156,17 @@ describe('Restoration state handler', () => {
     const restorationState = handler.getRestorationState();
 
     expect(restorationState.selectedFacets.collection.foo.state).to.equal(
-      'selected',
+      'selected'
     );
     expect(restorationState.selectedFacets.collection.bar.state).to.equal(
-      'selected',
+      'selected'
     );
 
     expect(restorationState.selectedFacets.collection.baz.state).to.equal(
-      'hidden',
+      'hidden'
     );
     expect(restorationState.selectedFacets.collection.boop.state).to.equal(
-      'hidden',
+      'hidden'
     );
   });
 
@@ -179,7 +179,7 @@ describe('Restoration state handler', () => {
 
     const restorationState = handler.getRestorationState();
     expect(restorationState.selectedFacets.collection.foo.state).to.equal(
-      'hidden',
+      'hidden'
     );
   });
 
@@ -192,7 +192,7 @@ describe('Restoration state handler', () => {
 
     const restorationState = handler.getRestorationState();
     expect(restorationState.selectedFacets.subject.foo.state).to.equal(
-      'selected',
+      'selected'
     );
   });
 
@@ -205,7 +205,7 @@ describe('Restoration state handler', () => {
 
     const restorationState = handler.getRestorationState();
     expect(restorationState.selectedFacets.year['2018'].state).to.equal(
-      'hidden',
+      'hidden'
     );
   });
 
@@ -377,7 +377,7 @@ describe('Restoration state handler', () => {
 
     // Ensure the new URL includes the "normalized" facet parameter and not the numbered one
     expect(decodeURIComponent(window.location.search)).to.include(
-      'and[]=subject:"foo"',
+      'and[]=subject:"foo"'
     );
     expect(new URL(window.location.href).searchParams.get('and[0]')).to.be.null;
   });

package/test/review-block.test.ts

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-duplicates */
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
 import type { ReviewBlock } from '../src/tiles/review-block';
@@ -10,7 +11,7 @@ describe('ReviewBlock component', () => {
         title="Foo"
         body="foo bar baz"
         starRating="3"
-      ></review-block>`,
+      ></review-block>`
     );
 
     el.title = 'Foo';

package/test/sort-filter-bar/alpha-bar-tooltip.test.ts

@@ -7,7 +7,7 @@ import '../../src/sort-filter-bar/alpha-bar-tooltip';
 describe('Alphabet Filter Bar Tooltips', () => {
   it('renders component', async () => {
     const el = await fixture<AlphaBarTooltip>(
-      html`<alpha-bar-tooltip .numResults=${42}></alpha-bar-tooltip>`,
+      html`<alpha-bar-tooltip .numResults=${42}></alpha-bar-tooltip>`
     );
 
     // Should render the number of results

package/test/sort-filter-bar/alpha-bar.test.ts

@@ -22,7 +22,7 @@ describe('Alphabetical Filter Bar', () => {
 
     // Should have exactly two letter buttons
     const letterButtons = el.shadowRoot?.querySelectorAll(
-      'li > button:not(:disabled)',
+      'li > button:not(:disabled)'
     );
     expect(letterButtons?.length).to.equal(2);
     expect(letterButtons?.item(0).textContent?.trim()).to.equal('U');
@@ -37,7 +37,7 @@ describe('Alphabetical Filter Bar', () => {
 
     // All but the two letters above should be disabled
     const letterButtons = el.shadowRoot?.querySelectorAll(
-      'li > button:disabled',
+      'li > button:disabled'
     );
     expect(letterButtons?.length).to.equal(24);
     expect(letterButtons?.item(0).textContent?.trim()).to.equal('A');
@@ -64,7 +64,7 @@ describe('Alphabetical Filter Bar', () => {
     await el.updateComplete;
 
     const tooltip = el.shadowRoot?.querySelector(
-      'alpha-bar-tooltip',
+      'alpha-bar-tooltip'
     ) as AlphaBarTooltip;
     expect(tooltip).to.exist;
 
@@ -88,14 +88,14 @@ describe('Alphabetical Filter Bar', () => {
     await el.updateComplete;
 
     const tooltip = el.shadowRoot?.querySelector(
-      'alpha-bar-tooltip',
+      'alpha-bar-tooltip'
     ) as AlphaBarTooltip;
     expect(tooltip).to.exist;
 
     // Should be positioned after next tick, but not off-screen
     await aTimeout(0);
     expect(tooltip.getBoundingClientRect().right).to.be.lessThan(
-      window.innerWidth,
+      window.innerWidth
     );
   });
 });