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

package/dist/test/sort-filter-bar/sort-filter-bar.test.js

@@ -1,25 +1,21 @@
 import { expect, fixture } from '@open-wc/testing';
 import sinon from 'sinon';
 import { html } from 'lit';
-import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
 import { SortField, defaultSortAvailability } from '../../src/models';
 import '../../src/sort-filter-bar/sort-filter-bar';
-describe('Sort selector default buttons', async () => {
+describe('Sort dropdown behavior', () => {
     let el;
-    let sortSelectorContainer;
-    let desktopSortSelector;
+    let sortDropdown;
     beforeEach(async () => {
         el = await fixture(html `
       <sort-filter-bar></sort-filter-bar>
     `);
-        sortSelectorContainer = el.shadowRoot?.querySelector('#sort-selector-container');
-        desktopSortSelector = sortSelectorContainer?.querySelector('#desktop-sort-selector');
-        el.resizeObserver = new SharedResizeObserver();
+        sortDropdown = el.shadowRoot?.querySelector('#sort-dropdown');
         await el.updateComplete;
     });
     it('should render basic component', async () => {
+        const sortSelectorContainer = el.shadowRoot?.querySelector('#sort-selector-container');
         expect(sortSelectorContainer).to.exist;
-        expect(desktopSortSelector).to.exist;
     });
     it('should render sort-by label', async () => {
         const sortByLabel = el.shadowRoot?.querySelector('.sort-by-text');
@@ -31,330 +27,139 @@ describe('Sort selector default buttons', async () => {
         expect(sortDirections).to.exist;
         expect(sortDirections?.querySelector('.sort-direction-icon')).to.exist;
     });
-    it('renders default set of sort options if not overridden', async () => {
-        const allSortSelectors = desktopSortSelector?.querySelectorAll('button');
-        expect(allSortSelectors).to.exist;
-        expect(allSortSelectors.length).to.equal(3);
-        expect(allSortSelectors[0]?.textContent?.trim()).to.equal('Relevance');
-        expect(allSortSelectors[1]?.textContent?.trim()).to.equal('Title');
-        expect(allSortSelectors[2]?.textContent?.trim()).to.equal('Creator');
-        const allSortDropdowns = desktopSortSelector?.querySelectorAll('ia-dropdown');
-        expect(allSortDropdowns).to.exist;
-        expect(allSortDropdowns.length).to.equal(2);
-        expect(allSortDropdowns[0]?.options.length).to.equal(2);
-        expect(allSortDropdowns[0]?.options.map(o => o.id)).to.deep.equal([
-            SortField.weeklyview,
+    it('renders default set of sort options in dropdown', async () => {
+        expect(sortDropdown).to.exist;
+        expect(sortDropdown.options.map(o => o.id)).to.deep.equal([
+            SortField.relevance,
             SortField.alltimeview,
-        ]);
-        expect(allSortDropdowns[0]?.textContent?.trim()).to.equal('Weekly views');
-        expect(allSortDropdowns[1]?.options.length).to.equal(4);
-        expect(allSortDropdowns[1]?.options.map(o => o.id)).to.deep.equal([
+            SortField.weeklyview,
+            SortField.title,
             SortField.date,
             SortField.datearchived,
             SortField.datereviewed,
             SortField.dateadded,
+            SortField.creator,
         ]);
-        expect(allSortDropdowns[1]?.textContent?.trim()).to.equal('Date published');
-        // Relevance selected by default
-        const defaultSortSelector = desktopSortSelector?.querySelector('button.selected');
-        expect(defaultSortSelector?.textContent?.trim()).to.equal('Relevance');
     });
-    it('renders an overridden set of sort options if specified', async () => {
+    it('respects overridden sort field availability', async () => {
         const customSortAvailability = {
             ...defaultSortAvailability,
             [SortField.title]: false,
-            [SortField.datefavorited]: true,
             [SortField.datearchived]: false,
             [SortField.datereviewed]: false,
             [SortField.creator]: false,
         };
         el.sortFieldAvailability = customSortAvailability;
         await el.updateComplete;
-        const allSortSelectors = desktopSortSelector?.querySelectorAll('button');
-        expect(allSortSelectors).to.exist;
-        expect(allSortSelectors.length).to.equal(1);
-        expect(allSortSelectors[0]?.textContent?.trim()).to.equal('Relevance');
-        const allSortDropdowns = desktopSortSelector?.querySelectorAll('ia-dropdown');
-        expect(allSortDropdowns).to.exist;
-        expect(allSortDropdowns.length).to.equal(2);
-        expect(allSortDropdowns[0]?.options.length).to.equal(2);
-        expect(allSortDropdowns[0]?.options.map(o => o.id)).to.deep.equal([
-            SortField.weeklyview,
+        const dropdown = el.shadowRoot?.querySelector('#sort-dropdown');
+        expect(dropdown.options.length).to.equal(5);
+        expect(dropdown.options.map(o => o.id)).to.deep.equal([
+            SortField.relevance,
             SortField.alltimeview,
-        ]);
-        expect(allSortDropdowns[1]?.options.length).to.equal(3);
-        expect(allSortDropdowns[1]?.options.map(o => o.id)).to.deep.equal([
-            SortField.datefavorited,
+            SortField.weeklyview,
             SortField.date,
             SortField.dateadded,
         ]);
     });
-    it('renders a views button instead of a dropdown if it would only have one option', async () => {
-        const customSortAvailability = {
-            ...defaultSortAvailability,
-            // Disable weekly views (but keep All-time Views)
-            [SortField.weeklyview]: false,
-        };
-        el.sortFieldAvailability = customSortAvailability;
-        await el.updateComplete;
-        const allSortSelectors = desktopSortSelector?.querySelectorAll('button');
-        expect(allSortSelectors).to.exist;
-        expect(allSortSelectors.length).to.equal(4);
-        expect(allSortSelectors[0]?.textContent?.trim()).to.equal('Relevance');
-        expect(allSortSelectors[1]?.textContent?.trim()).to.equal('All-time views');
-        expect(allSortSelectors[2]?.textContent?.trim()).to.equal('Title');
-        expect(allSortSelectors[3]?.textContent?.trim()).to.equal('Creator');
-        const allSortDropdowns = desktopSortSelector?.querySelectorAll('ia-dropdown');
-        expect(allSortDropdowns).to.exist;
-        expect(allSortDropdowns.length).to.equal(1);
-    });
-    it('renders a date button instead of a dropdown if it would only have one option', async () => {
-        const customSortAvailability = {
-            ...defaultSortAvailability,
-            // Disable all default dates except Date Added
-            [SortField.date]: false,
-            [SortField.datearchived]: false,
-            [SortField.datereviewed]: false,
-        };
-        el.sortFieldAvailability = customSortAvailability;
-        await el.updateComplete;
-        const allSortSelectors = desktopSortSelector?.querySelectorAll('button');
-        expect(allSortSelectors).to.exist;
-        expect(allSortSelectors.length).to.equal(4);
-        expect(allSortSelectors[0]?.textContent?.trim()).to.equal('Relevance');
-        expect(allSortSelectors[1]?.textContent?.trim()).to.equal('Title');
-        expect(allSortSelectors[2]?.textContent?.trim()).to.equal('Date added');
-        expect(allSortSelectors[3]?.textContent?.trim()).to.equal('Creator');
-        const allSortDropdowns = desktopSortSelector?.querySelectorAll('ia-dropdown');
-        expect(allSortDropdowns).to.exist;
-        expect(allSortDropdowns.length).to.equal(1);
-    });
-    it('does not render a views dropdown that would have zero available options', async () => {
-        const customSortAvailability = {
-            ...defaultSortAvailability,
-            // Disable all view sorts
-            [SortField.weeklyview]: false,
-            [SortField.alltimeview]: false,
-        };
-        el.sortFieldAvailability = customSortAvailability;
-        await el.updateComplete;
-        const allSortSelectors = desktopSortSelector?.querySelectorAll('button');
-        expect(allSortSelectors).to.exist;
-        expect(allSortSelectors.length).to.equal(3);
-        const allSortDropdowns = desktopSortSelector?.querySelectorAll('ia-dropdown');
-        expect(allSortDropdowns).to.exist;
-        expect(allSortDropdowns.length).to.equal(1);
-        expect(allSortDropdowns[0].options?.[0]?.id).to.equal(SortField.date);
-    });
-    it('does not render a date dropdown that would have zero available options', async () => {
-        const customSortAvailability = {
-            ...defaultSortAvailability,
-            // Disable all date sorts
-            [SortField.date]: false,
-            [SortField.dateadded]: false,
-            [SortField.datearchived]: false,
-            [SortField.datereviewed]: false,
-        };
-        el.sortFieldAvailability = customSortAvailability;
-        await el.updateComplete;
-        const allSortSelectors = desktopSortSelector?.querySelectorAll('button');
-        expect(allSortSelectors).to.exist;
-        expect(allSortSelectors.length).to.equal(3);
-        const allSortDropdowns = desktopSortSelector?.querySelectorAll('ia-dropdown');
-        expect(allSortDropdowns).to.exist;
-        expect(allSortDropdowns.length).to.equal(1);
-        expect(allSortDropdowns[0].options?.[0]?.id).to.equal(SortField.weeklyview);
-    });
-    it('allows changing the default views sort shown', async () => {
-        el.defaultViewSort = SortField.alltimeview;
-        await el.updateComplete;
-        const viewsDropdown = el.shadowRoot?.querySelector('#views-dropdown');
-        expect(viewsDropdown).to.exist;
-        expect(viewsDropdown.textContent?.trim()).to.equal('All-time views');
-    });
-    it('allows changing the default date sort shown', async () => {
-        el.defaultDateSort = SortField.datereviewed;
-        await el.updateComplete;
-        const dateDropdown = el.shadowRoot?.querySelector('#date-dropdown');
-        expect(dateDropdown).to.exist;
-        expect(dateDropdown.textContent?.trim()).to.equal('Date reviewed');
-    });
-    it('should render default view-sort selector', async () => {
-        const defaultSortSelector = desktopSortSelector?.children
-            .item(1)
-            ?.querySelector('ia-dropdown');
-        expect(defaultSortSelector?.textContent?.trim()).to.equal('Weekly views');
-    });
-    it('should render active view-sort selectors', async () => {
-        el.selectedSort = 'alltimeview';
+    it('shows the display name of the selected sort', async () => {
+        el.selectedSort = SortField.alltimeview;
         await el.updateComplete;
-        const defaultSortSelector = desktopSortSelector?.querySelector('ia-dropdown.selected');
-        expect(defaultSortSelector?.textContent?.trim()).to.equal('All-time views');
+        const label = sortDropdown?.querySelector('.dropdown-label');
+        expect(label?.textContent?.trim()).to.equal('All-time views');
     });
-    it('should render default title-sort selector', async () => {
-        const defaultSortSelector = desktopSortSelector?.children
-            .item(2)
-            ?.querySelector('button');
-        expect(defaultSortSelector?.textContent?.trim()).to.equal('Title');
-    });
-    it('should render default date-sort selector', async () => {
-        const defaultSortSelector = desktopSortSelector?.children
-            .item(3)
-            ?.querySelector('ia-dropdown');
-        expect(defaultSortSelector?.textContent?.trim()).to.equal('Date published');
-    });
-    it('should render active date-sort selectors', async () => {
-        el.selectedSort = 'datereviewed';
-        await el.updateComplete;
-        const defaultSortSelector = desktopSortSelector?.querySelector('ia-dropdown.selected');
-        expect(defaultSortSelector?.textContent?.trim()).to.equal('Date reviewed');
-    });
-    it('should render default creator-sort selector', async () => {
-        const defaultSortSelector = desktopSortSelector?.children
-            .item(4)
-            ?.querySelector('button');
-        expect(defaultSortSelector?.textContent?.trim()).to.equal('Creator');
-    });
-    it('handles click event on view-sort selector', async () => {
-        const defaultSortSelector = desktopSortSelector?.children
-            .item(1)
-            ?.querySelector('.dropdown-label');
-        defaultSortSelector?.click();
-        await el.updateComplete;
-        expect(el.selectedSort).to.equal('weeklyview');
-    });
-    it('handles click event on title selector', async () => {
-        const defaultSortSelector = desktopSortSelector?.children
-            .item(2)
-            ?.querySelector('button');
-        defaultSortSelector?.click();
+    it('changes selected sort when dropdown option selected', async () => {
+        expect(sortDropdown).to.exist;
+        sortDropdown.selectedOption = 'title';
+        const option = { id: 'title' };
+        sortDropdown.dispatchEvent(new CustomEvent('optionSelected', { detail: { option } }));
         await el.updateComplete;
         expect(el.selectedSort).to.equal('title');
     });
-    it('handles click event on date-sort selector', async () => {
-        const defaultSortSelector = desktopSortSelector?.children
-            .item(3)
-            ?.querySelector('.dropdown-label');
-        defaultSortSelector?.click();
-        await el.updateComplete;
-        expect(el.selectedSort).to.equal('date');
-    });
-    it('handles click event on creator selector', async () => {
-        const defaultSortSelector = desktopSortSelector?.children
-            .item(4)
-            ?.querySelector('button');
-        defaultSortSelector?.click();
-        await el.updateComplete;
-        expect(el.selectedSort).to.equal('creator');
-    });
-    it('handles click event on relevance selector', async () => {
-        el.sortFieldAvailability = {
-            ...el.sortFieldAvailability,
-            [SortField.relevance]: true,
-        };
-        el.selectedSort = 'title';
-        await el.updateComplete;
-        const defaultSortSelector = desktopSortSelector?.children
-            .item(0)
-            ?.querySelector('button');
-        defaultSortSelector?.click();
-        await el.updateComplete;
-        expect(el.selectedSort).to.equal('relevance');
-    });
-    it('handles return/space key event on view-sort selector', async () => {
-        const defaultSortSelector = desktopSortSelector?.children
-            .item(1)
-            ?.querySelector('.dropdown-label');
-        el.selectedSort = 'relevance';
-        const enterEvent = new KeyboardEvent('keydown', { key: 'Enter' });
-        defaultSortSelector?.dispatchEvent(enterEvent);
-        await el.updateComplete;
-        expect(el.selectedSort).to.equal('weeklyview');
-        el.selectedSort = 'relevance';
-        const spaceEvent = new KeyboardEvent('keydown', { key: ' ' });
-        defaultSortSelector?.dispatchEvent(spaceEvent);
-        await el.updateComplete;
-        expect(el.selectedSort).to.equal('weeklyview');
-    });
-    it('handles return/space key event on date-sort selector', async () => {
-        const defaultSortSelector = desktopSortSelector?.children
-            .item(3)
-            ?.querySelector('.dropdown-label');
-        el.selectedSort = 'relevance';
-        const enterEvent = new KeyboardEvent('keydown', { key: 'Enter' });
-        defaultSortSelector?.dispatchEvent(enterEvent);
-        await el.updateComplete;
-        expect(el.selectedSort).to.equal('date');
-        el.selectedSort = 'relevance';
-        const spaceEvent = new KeyboardEvent('keydown', { key: ' ' });
-        defaultSortSelector?.dispatchEvent(spaceEvent);
+    it('selects a sort option by clicking it in the dropdown', async () => {
+        el.selectedSort = SortField.title;
         await el.updateComplete;
-        expect(el.selectedSort).to.equal('date');
-    });
-    it('handles click event on view-sort dropdown option', async () => {
-        const defaultSortSelector = desktopSortSelector?.children
-            .item(1)
-            ?.querySelector('ia-dropdown');
-        const firstOption = defaultSortSelector?.shadowRoot?.querySelector('li > button');
+        const dropdown = el.shadowRoot?.querySelector('#sort-dropdown');
+        expect(dropdown).to.exist;
+        const firstOption = dropdown?.shadowRoot?.querySelector('li > button');
         expect(firstOption).to.exist;
         firstOption?.click();
         await el.updateComplete;
-        expect(el.selectedSort).to.equal('weeklyview');
+        // The first option is relevance by default
+        expect(el.selectedSort).to.equal(SortField.relevance);
     });
-    it('handles click event on date-sort dropdown option', async () => {
-        const defaultSortSelector = desktopSortSelector?.children
-            .item(3)
-            ?.querySelector('ia-dropdown');
-        const firstOption = defaultSortSelector?.shadowRoot?.querySelector('li > button');
-        expect(firstOption).to.exist;
-        firstOption?.click();
+    it('emits sortChanged event when sort option selected', async () => {
+        const sortChangedHandler = sinon.spy();
+        el.addEventListener('sortChanged', sortChangedHandler);
+        const option = { id: SortField.title };
+        sortDropdown.dispatchEvent(new CustomEvent('optionSelected', { detail: { option } }));
         await el.updateComplete;
-        expect(el.selectedSort).to.equal('date');
+        expect(sortChangedHandler.calledOnce).to.be.true;
+        const eventDetail = sortChangedHandler.firstCall.args[0].detail;
+        expect(eventDetail.selectedSort).to.equal(SortField.title);
+        expect(eventDetail.sortDirection).to.equal('asc');
     });
-    it('shows view sort selector backdrop when view sort open', async () => {
-        const defaultSortSelector = desktopSortSelector?.children
-            .item(1)
-            ?.querySelector('ia-dropdown');
-        const caret = defaultSortSelector?.shadowRoot?.querySelector('.caret');
+    it('renders sort selector backdrop when dropdown is open', async () => {
+        expect(sortDropdown).to.exist;
+        const caret = sortDropdown?.shadowRoot?.querySelector('.caret');
         expect(caret).to.exist;
-        caret?.click();
+        caret.click();
         await el.updateComplete;
         let backdrop = el.shadowRoot?.querySelector('#sort-selector-backdrop');
         expect(backdrop).to.exist;
-        backdrop?.click();
+        // Clicking the backdrop should close the dropdown
+        backdrop.click();
         await el.updateComplete;
         backdrop = el.shadowRoot?.querySelector('#sort-selector-backdrop');
         expect(backdrop).not.to.exist;
     });
-    it('shows date sort selector backdrop when date sort open', async () => {
-        const defaultSortSelector = desktopSortSelector?.children
-            .item(3)
-            ?.querySelector('ia-dropdown');
-        const caret = defaultSortSelector?.shadowRoot?.querySelector('.caret');
+    it('pressing Escape key closes the dropdown', async () => {
+        expect(sortDropdown).to.exist;
+        const caret = sortDropdown?.shadowRoot?.querySelector('.caret');
         expect(caret).to.exist;
-        caret?.click();
+        caret.click();
         await el.updateComplete;
         let backdrop = el.shadowRoot?.querySelector('#sort-selector-backdrop');
         expect(backdrop).to.exist;
-        backdrop?.click();
+        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
         await el.updateComplete;
         backdrop = el.shadowRoot?.querySelector('#sort-selector-backdrop');
         expect(backdrop).not.to.exist;
     });
-    it('closes dropdown by hitting escape key', async () => {
-        const defaultSortSelector = desktopSortSelector?.children
-            .item(3)
-            ?.querySelector('ia-dropdown');
-        const caret = defaultSortSelector?.shadowRoot?.querySelector('.caret');
-        expect(caret).to.exist;
-        caret?.click();
+    it('clears title filter when sort changed from title', async () => {
+        el.selectedSort = 'title';
+        el.selectedTitleFilter = 'A';
         await el.updateComplete;
-        let backdrop = el.shadowRoot?.querySelector('#sort-selector-backdrop');
-        expect(backdrop).to.exist;
-        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+        const dropdown = el.shadowRoot?.querySelector('#sort-dropdown');
+        expect(dropdown).to.exist;
+        dropdown.selectedOption = 'relevance';
+        const option = { id: 'relevance' };
+        dropdown.dispatchEvent(new CustomEvent('optionSelected', { detail: { option } }));
         await el.updateComplete;
-        backdrop = el.shadowRoot?.querySelector('#sort-selector-backdrop');
-        expect(backdrop).not.to.exist;
+        expect(el.selectedSort).to.equal('relevance');
+        expect(el.selectedTitleFilter).to.be.null;
+    });
+    it('clears creator filter when sort changed from creator', async () => {
+        el.selectedSort = 'creator';
+        el.selectedCreatorFilter = 'A';
+        await el.updateComplete;
+        const dropdown = el.shadowRoot?.querySelector('#sort-dropdown');
+        expect(dropdown).to.exist;
+        dropdown.selectedOption = 'relevance';
+        const option = { id: 'relevance' };
+        dropdown.dispatchEvent(new CustomEvent('optionSelected', { detail: { option } }));
+        await el.updateComplete;
+        expect(el.selectedSort).to.equal('relevance');
+        expect(el.selectedCreatorFilter).to.be.null;
+    });
+    it('contains sort-options slot when enabled', async () => {
+        const slotEl = await fixture(html `
+      <sort-filter-bar .enableSortOptionsSlot=${true}></sort-filter-bar>
+    `);
+        await slotEl.updateComplete;
+        const sortOptionsSlot = slotEl?.shadowRoot?.querySelector('slot[name="sort-options"]');
+        expect(sortOptionsSlot).to.exist;
+        expect(slotEl?.shadowRoot?.querySelector('#sort-selector-container')).to.not
+            .exist;
     });
 });
 describe('Sort direction button behavior', () => {
@@ -484,124 +289,4 @@ describe('Sort/filter bar letter behavior', () => {
         expect(el.selectedCreatorFilter).to.equal('C');
     });
 });
-describe('Sort/filter bar mobile view', () => {
-    let origWindowSize;
-    before(() => {
-        origWindowSize = { width: window.innerWidth, height: window.innerHeight };
-        window.resizeTo(500, 600);
-    });
-    after(() => {
-        window.resizeTo(origWindowSize.width, origWindowSize.height);
-    });
-    it('renders in mobile view', async () => {
-        const el = await fixture(html `
-      <sort-filter-bar></sort-filter-bar>
-    `);
-        const mobileSortContainer = el.shadowRoot?.querySelector('#mobile-sort-container');
-        const desktopSortContainer = el.shadowRoot?.querySelector('#desktop-sort-container');
-        expect(mobileSortContainer?.classList?.contains('visible')).to.be.true;
-        expect(desktopSortContainer?.classList?.contains('hidden')).to.be.true;
-    });
-    it('changes selected sort in mobile view', async () => {
-        const el = await fixture(html `
-      <sort-filter-bar></sort-filter-bar>
-    `);
-        const mobileDropdown = el.shadowRoot?.querySelector('#mobile-dropdown');
-        expect(mobileDropdown).to.exist;
-        mobileDropdown.selectedOption = 'title';
-        const option = { id: 'title' };
-        mobileDropdown.dispatchEvent(new CustomEvent('optionSelected', { detail: { option } }));
-        await el.updateComplete;
-        expect(el.selectedSort).to.equal('title');
-    });
-    it('clears title filter when sort changed from title in mobile view', async () => {
-        const el = await fixture(html `
-      <sort-filter-bar></sort-filter-bar>
-    `);
-        el.selectedSort = 'title';
-        el.selectedTitleFilter = 'A';
-        await el.updateComplete;
-        const mobileDropdown = el.shadowRoot?.querySelector('#mobile-dropdown');
-        expect(mobileDropdown).to.exist;
-        mobileDropdown.selectedOption = 'relevance';
-        const option = { id: 'relevance' };
-        mobileDropdown.dispatchEvent(new CustomEvent('optionSelected', { detail: { option } }));
-        await el.updateComplete;
-        expect(el.selectedSort).to.equal('relevance');
-        expect(el.selectedTitleFilter).to.be.null;
-    });
-    it('clears creator filter when sort changed from creator in mobile view', async () => {
-        const el = await fixture(html `
-      <sort-filter-bar></sort-filter-bar>
-    `);
-        el.selectedSort = 'creator';
-        el.selectedCreatorFilter = 'A';
-        await el.updateComplete;
-        const mobileDropdown = el.shadowRoot?.querySelector('#mobile-dropdown');
-        expect(mobileDropdown).to.exist;
-        mobileDropdown.selectedOption = 'relevance';
-        const option = { id: 'relevance' };
-        mobileDropdown.dispatchEvent(new CustomEvent('optionSelected', { detail: { option } }));
-        await el.updateComplete;
-        expect(el.selectedSort).to.equal('relevance');
-        expect(el.selectedCreatorFilter).to.be.null;
-    });
-    it('shows sort selector backdrop when mobile sort open', async () => {
-        const el = await fixture(html `
-      <sort-filter-bar></sort-filter-bar>
-    `);
-        const mobileDropdown = el.shadowRoot?.querySelector('#mobile-dropdown');
-        expect(mobileDropdown).to.exist;
-        const caret = mobileDropdown?.shadowRoot?.querySelector('.caret');
-        expect(caret).to.exist;
-        caret?.click();
-        await el.updateComplete;
-        let backdrop = el.shadowRoot?.querySelector('#sort-selector-backdrop');
-        expect(backdrop).to.exist;
-        backdrop?.click();
-        await el.updateComplete;
-        backdrop = el.shadowRoot?.querySelector('#sort-selector-backdrop');
-        expect(backdrop).not.to.exist;
-    });
-    it('shows loansTab top-bar slot Default View', async () => {
-        const resizeStub = new SharedResizeObserver();
-        const addSpy = sinon.spy(resizeStub, 'addObserver');
-        const removeSpy = sinon.spy(resizeStub, 'removeObserver');
-        const el = await fixture(html `
-      <sort-filter-bar .resizeObserver=${resizeStub}></sort-filter-bar>
-    `);
-        // this element exists
-        expect(el?.shadowRoot?.querySelector('#sort-selector-container')).to.exist;
-        // loads & unloads twice when [re]setting ResizeObserver
-        expect(addSpy.callCount).to.equal(2);
-        const resizeStub2 = new SharedResizeObserver();
-        el.resizeObserver = resizeStub2;
-        await el.updateComplete;
-        expect(removeSpy.callCount).to.equal(2);
-    });
-    it('contains sort-options slot when enabled', async () => {
-        const resizeStub = new SharedResizeObserver();
-        const addSpy = sinon.spy(resizeStub, 'addObserver');
-        const removeSpy = sinon.spy(resizeStub, 'removeObserver');
-        const el = await fixture(html `
-      <sort-filter-bar
-        .resizeObserver=${resizeStub}
-        .enableSortOptionsSlot=${true}
-      ></sort-filter-bar>
-    `);
-        await el.updateComplete;
-        // slot exists
-        const sortOptionsSlot = el?.shadowRoot?.querySelector('slot[name="sort-options"]');
-        expect(sortOptionsSlot).to.exist;
-        // sort bar does not exist
-        expect(el?.shadowRoot?.querySelector('#sort-selector-container')).to.not
-            .exist;
-        const resizeStub2 = new SharedResizeObserver();
-        el.resizeObserver = resizeStub2;
-        await el.updateComplete;
-        // there's no need for resize observer
-        expect(addSpy.callCount).to.equal(0);
-        expect(removeSpy.callCount).to.equal(0);
-    });
-});
 //# sourceMappingURL=sort-filter-bar.test.js.map