@internetarchive/collection-browser 0.4.11 → 0.4.13-alpha.1

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

@@ -1,218 +1,391 @@
-/* eslint-disable import/no-duplicates */
-import { expect, fixture } from '@open-wc/testing';
-import { html } from 'lit';
-import '../../src/sort-filter-bar/sort-filter-bar';
-describe('Sort direction buttons', () => {
-    it('should render sort direction button', async () => {
-        var _a;
-        const el = await fixture(html `
-      <sort-filter-bar> </sort-filter-bar>
-    `);
-        el.sortDirection = 'asc'; // selected sort
-        await el.updateComplete;
-        const sortDirectionButtonList = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#sort-direction-selector');
-        const sortByAscButton = sortDirectionButtonList === null || sortDirectionButtonList === void 0 ? void 0 : sortDirectionButtonList.querySelector('#sort-ascending-btn');
-        expect(sortByAscButton).to.exist;
-        // ascending order button is selected
-        expect(sortByAscButton === null || sortByAscButton === void 0 ? void 0 : sortByAscButton.getAttribute('class')).to.equal('sort-button selected');
-        const sortByDescButton = sortDirectionButtonList === null || sortDirectionButtonList === void 0 ? void 0 : sortDirectionButtonList.querySelector('#sort-descending-btn');
-        expect(sortByDescButton).to.exist;
-        // descending order button is not selected
-        expect(sortByDescButton === null || sortByDescButton === void 0 ? void 0 : sortByDescButton.getAttribute('class')).to.not.equal('sort-button selected');
-    });
-});
-describe('Sort selector default buttons', async () => {
-    var _a;
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
+import '../../src/sort-filter-bar/sort-filter-bar';
+describe('Sort selector default buttons', async () => {
+    var _a;
     const el = await fixture(html `
     <sort-filter-bar> </sort-filter-bar>
-  `);
-    const sortSelectorContainer = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#desktop-sort-selector');
-    it('should render sort-by label', async () => {
-        var _a;
-        expect((_a = sortSelectorContainer === null || sortSelectorContainer === void 0 ? void 0 : sortSelectorContainer.children.item(0)) === null || _a === void 0 ? void 0 : _a.textContent).to.equal('Sort By');
-    });
-    it('should render default relevance-sort selector', async () => {
-        var _a;
-        const defaultSortSelector = (_a = sortSelectorContainer === null || sortSelectorContainer === void 0 ? void 0 : sortSelectorContainer.children.item(1)) === null || _a === void 0 ? void 0 : _a.querySelector('a');
-        expect(defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.textContent).to.contain('Relevance');
-        expect(defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.getAttribute('class')).to.equal('selected');
-    });
-    it('should render default view-sort selector', async () => {
-        var _a;
-        const defaultSortSelector = (_a = sortSelectorContainer === null || sortSelectorContainer === void 0 ? void 0 : sortSelectorContainer.children.item(2)) === null || _a === void 0 ? void 0 : _a.querySelector('a');
-        expect(defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.textContent).to.contain('Weekly Views');
-    });
-    it('should render active view-sort selectors', async () => {
-        el.selectedSort = 'alltimeview';
-        await el.updateComplete;
-        const defaultSortSelector = sortSelectorContainer === null || sortSelectorContainer === void 0 ? void 0 : sortSelectorContainer.querySelector('a.selected');
-        expect(defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.textContent).to.contain('All-time Views');
-    });
-    it('should render default title-sort selector', async () => {
-        var _a;
-        const defaultSortSelector = (_a = sortSelectorContainer === null || sortSelectorContainer === void 0 ? void 0 : sortSelectorContainer.children.item(3)) === null || _a === void 0 ? void 0 : _a.querySelector('a');
-        expect(defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.textContent).to.contain('Title');
-    });
-    it('should render default date-sort selector', async () => {
-        var _a;
-        const defaultSortSelector = (_a = sortSelectorContainer === null || sortSelectorContainer === void 0 ? void 0 : sortSelectorContainer.children.item(4)) === null || _a === void 0 ? void 0 : _a.querySelector('a');
-        expect(defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.textContent).to.contain('Date Published');
-    });
-    it('should render active date-sort selectors', async () => {
-        el.selectedSort = 'datereviewed';
-        await el.updateComplete;
-        const defaultSortSelector = sortSelectorContainer === null || sortSelectorContainer === void 0 ? void 0 : sortSelectorContainer.querySelector('a.selected');
-        expect(defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.textContent).to.contain('Date Reviewed');
-    });
-    it('should render default creator-sort selector', async () => {
-        var _a;
-        const defaultSortSelector = (_a = sortSelectorContainer === null || sortSelectorContainer === void 0 ? void 0 : sortSelectorContainer.children.item(5)) === null || _a === void 0 ? void 0 : _a.querySelector('a');
-        expect(defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.textContent).to.contain('Creator');
-    });
-    it('click event on view-sort selector', async () => {
-        var _a;
-        const defaultSortSelector = (_a = sortSelectorContainer === null || sortSelectorContainer === void 0 ? void 0 : sortSelectorContainer.children.item(2)) === null || _a === void 0 ? void 0 : _a.querySelector('a');
-        await (defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.click());
-        expect(el.selectedSort).to.equal('weeklyview');
-    });
-    it('click event on title selector', async () => {
-        var _a;
-        const defaultSortSelector = (_a = sortSelectorContainer === null || sortSelectorContainer === void 0 ? void 0 : sortSelectorContainer.children.item(3)) === null || _a === void 0 ? void 0 : _a.querySelector('a');
-        await (defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.click());
-        expect(el.selectedSort).to.equal('title');
-    });
-    it('click event on date-sort selector', async () => {
-        var _a;
-        const defaultSortSelector = (_a = sortSelectorContainer === null || sortSelectorContainer === void 0 ? void 0 : sortSelectorContainer.children.item(4)) === null || _a === void 0 ? void 0 : _a.querySelector('a');
-        await (defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.click());
-        expect(el.selectedSort).to.equal('date');
-    });
-    it('click event on creator selector', async () => {
-        var _a;
-        const defaultSortSelector = (_a = sortSelectorContainer === null || sortSelectorContainer === void 0 ? void 0 : sortSelectorContainer.children.item(5)) === null || _a === void 0 ? void 0 : _a.querySelector('a');
-        await (defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.click());
-        expect(el.selectedSort).to.equal('creator');
-    });
-});
-describe('Display mode/style buttons', () => {
-    it('should render all display mode buttons', async () => {
-        var _a, _b, _c, _d, _e;
+  `);
+    const sortSelectorContainer = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#sort-selector-container');
+    const desktopSortSelector = sortSelectorContainer === null || sortSelectorContainer === void 0 ? void 0 : sortSelectorContainer.querySelector('#desktop-sort-selector');
+    before(async () => {
+        el.resizeObserver = new SharedResizeObserver();
+        await el.updateComplete;
+    });
+    it('should render basic component', async () => {
+        expect(sortSelectorContainer).to.exist;
+        expect(desktopSortSelector).to.exist;
+    });
+    it('should render sort-by label', async () => {
+        var _a, _b;
+        const sortByLabel = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.sort-by-text');
+        expect(sortByLabel).to.exist;
+        expect((_b = sortByLabel === null || sortByLabel === void 0 ? void 0 : sortByLabel.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.equal('Sort by:');
+    });
+    it('should render sort direction button', async () => {
+        var _a;
+        const sortDirections = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.sort-direction-container');
+        expect(sortDirections).to.exist;
+        expect(sortDirections === null || sortDirections === void 0 ? void 0 : sortDirections.querySelector('.sort-direction-icon')).to.exist;
+    });
+    it('should render default relevance-sort selector', async () => {
+        var _a;
+        const defaultSortSelector = desktopSortSelector === null || desktopSortSelector === void 0 ? void 0 : desktopSortSelector.querySelector('a.selected');
+        expect((_a = defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.textContent) === null || _a === void 0 ? void 0 : _a.trim()).to.equal('Relevance');
+    });
+    it('should render default view-sort selector', async () => {
+        var _a, _b;
+        const defaultSortSelector = (_a = desktopSortSelector === null || desktopSortSelector === void 0 ? void 0 : desktopSortSelector.children.item(1)) === null || _a === void 0 ? void 0 : _a.querySelector('ia-dropdown');
+        expect((_b = defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.equal('Weekly views');
+    });
+    it('should render active view-sort selectors', async () => {
+        var _a;
+        el.selectedSort = 'alltimeview';
+        await el.updateComplete;
+        const defaultSortSelector = desktopSortSelector === null || desktopSortSelector === void 0 ? void 0 : desktopSortSelector.querySelector('ia-dropdown.selected');
+        expect((_a = defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.textContent) === null || _a === void 0 ? void 0 : _a.trim()).to.equal('All-time views');
+    });
+    it('should render default title-sort selector', async () => {
+        var _a, _b;
+        const defaultSortSelector = (_a = desktopSortSelector === null || desktopSortSelector === void 0 ? void 0 : desktopSortSelector.children.item(2)) === null || _a === void 0 ? void 0 : _a.querySelector('a');
+        expect((_b = defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.equal('Title');
+    });
+    it('should render default date-sort selector', async () => {
+        var _a, _b;
+        const defaultSortSelector = (_a = desktopSortSelector === null || desktopSortSelector === void 0 ? void 0 : desktopSortSelector.children.item(3)) === null || _a === void 0 ? void 0 : _a.querySelector('ia-dropdown');
+        expect((_b = defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.equal('Date published');
+    });
+    it('should render active date-sort selectors', async () => {
+        var _a;
+        el.selectedSort = 'datereviewed';
+        await el.updateComplete;
+        const defaultSortSelector = desktopSortSelector === null || desktopSortSelector === void 0 ? void 0 : desktopSortSelector.querySelector('ia-dropdown.selected');
+        expect((_a = defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.textContent) === null || _a === void 0 ? void 0 : _a.trim()).to.equal('Date reviewed');
+    });
+    it('should render default creator-sort selector', async () => {
+        var _a, _b;
+        const defaultSortSelector = (_a = desktopSortSelector === null || desktopSortSelector === void 0 ? void 0 : desktopSortSelector.children.item(4)) === null || _a === void 0 ? void 0 : _a.querySelector('a');
+        expect((_b = defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.equal('Creator');
+    });
+    it('handles click event on view-sort selector', async () => {
+        var _a;
+        const defaultSortSelector = (_a = desktopSortSelector === null || desktopSortSelector === void 0 ? void 0 : desktopSortSelector.children.item(1)) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-label');
+        defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.click();
+        await el.updateComplete;
+        expect(el.selectedSort).to.equal('weeklyview');
+    });
+    it('handles click event on title selector', async () => {
+        var _a;
+        const defaultSortSelector = (_a = desktopSortSelector === null || desktopSortSelector === void 0 ? void 0 : desktopSortSelector.children.item(2)) === null || _a === void 0 ? void 0 : _a.querySelector('a');
+        defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.click();
+        await el.updateComplete;
+        expect(el.selectedSort).to.equal('title');
+    });
+    it('handles click event on date-sort selector', async () => {
+        var _a;
+        const defaultSortSelector = (_a = desktopSortSelector === null || desktopSortSelector === void 0 ? void 0 : desktopSortSelector.children.item(3)) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-label');
+        defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.click();
+        await el.updateComplete;
+        expect(el.selectedSort).to.equal('date');
+    });
+    it('handles return/space key event on view-sort selector', async () => {
+        var _a;
+        const defaultSortSelector = (_a = desktopSortSelector === null || desktopSortSelector === void 0 ? void 0 : desktopSortSelector.children.item(1)) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-label');
+        el.selectedSort = 'relevance';
+        const enterEvent = new KeyboardEvent('keydown', { key: 'Enter' });
+        defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.dispatchEvent(enterEvent);
+        await el.updateComplete;
+        expect(el.selectedSort).to.equal('weeklyview');
+        el.selectedSort = 'relevance';
+        const spaceEvent = new KeyboardEvent('keydown', { key: ' ' });
+        defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.dispatchEvent(spaceEvent);
+        await el.updateComplete;
+        expect(el.selectedSort).to.equal('weeklyview');
+    });
+    it('handles return/space key event on date-sort selector', async () => {
+        var _a;
+        const defaultSortSelector = (_a = desktopSortSelector === null || desktopSortSelector === void 0 ? void 0 : desktopSortSelector.children.item(3)) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-label');
+        el.selectedSort = 'relevance';
+        const enterEvent = new KeyboardEvent('keydown', { key: 'Enter' });
+        defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.dispatchEvent(enterEvent);
+        await el.updateComplete;
+        expect(el.selectedSort).to.equal('date');
+        el.selectedSort = 'relevance';
+        const spaceEvent = new KeyboardEvent('keydown', { key: ' ' });
+        defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.dispatchEvent(spaceEvent);
+        await el.updateComplete;
+        expect(el.selectedSort).to.equal('date');
+    });
+    it('handles click event on creator selector', async () => {
+        var _a;
+        const defaultSortSelector = (_a = desktopSortSelector === null || desktopSortSelector === void 0 ? void 0 : desktopSortSelector.children.item(4)) === null || _a === void 0 ? void 0 : _a.querySelector('a');
+        defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.click();
+        await el.updateComplete;
+        expect(el.selectedSort).to.equal('creator');
+    });
+    it('handles click event on view-sort dropdown option', async () => {
+        var _a, _b;
+        const defaultSortSelector = (_a = desktopSortSelector === null || desktopSortSelector === void 0 ? void 0 : desktopSortSelector.children.item(1)) === null || _a === void 0 ? void 0 : _a.querySelector('ia-dropdown');
+        const firstOption = (_b = defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('li > button');
+        expect(firstOption).to.exist;
+        firstOption === null || firstOption === void 0 ? void 0 : firstOption.click();
+        await el.updateComplete;
+        expect(el.selectedSort).to.equal('weeklyview');
+    });
+    it('handles click event on date-sort dropdown option', async () => {
+        var _a, _b;
+        const defaultSortSelector = (_a = desktopSortSelector === null || desktopSortSelector === void 0 ? void 0 : desktopSortSelector.children.item(3)) === null || _a === void 0 ? void 0 : _a.querySelector('ia-dropdown');
+        const firstOption = (_b = defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('li > button');
+        expect(firstOption).to.exist;
+        firstOption === null || firstOption === void 0 ? void 0 : firstOption.click();
+        await el.updateComplete;
+        expect(el.selectedSort).to.equal('date');
+    });
+    it('shows view sort selector backdrop when view sort open', async () => {
+        var _a, _b, _c, _d;
+        const defaultSortSelector = (_a = desktopSortSelector === null || desktopSortSelector === void 0 ? void 0 : desktopSortSelector.children.item(1)) === null || _a === void 0 ? void 0 : _a.querySelector('ia-dropdown');
+        const caret = (_b = defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.caret');
+        expect(caret).to.exist;
+        caret === null || caret === void 0 ? void 0 : caret.click();
+        await el.updateComplete;
+        let backdrop = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('#sort-selector-backdrop');
+        expect(backdrop).to.exist;
+        backdrop === null || backdrop === void 0 ? void 0 : backdrop.click();
+        await el.updateComplete;
+        backdrop = (_d = el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('#sort-selector-backdrop');
+        expect(backdrop).not.to.exist;
+    });
+    it('shows date sort selector backdrop when date sort open', async () => {
+        var _a, _b, _c, _d;
+        const defaultSortSelector = (_a = desktopSortSelector === null || desktopSortSelector === void 0 ? void 0 : desktopSortSelector.children.item(3)) === null || _a === void 0 ? void 0 : _a.querySelector('ia-dropdown');
+        const caret = (_b = defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.caret');
+        expect(caret).to.exist;
+        caret === null || caret === void 0 ? void 0 : caret.click();
+        await el.updateComplete;
+        let backdrop = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('#sort-selector-backdrop');
+        expect(backdrop).to.exist;
+        backdrop === null || backdrop === void 0 ? void 0 : backdrop.click();
+        await el.updateComplete;
+        backdrop = (_d = el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('#sort-selector-backdrop');
+        expect(backdrop).not.to.exist;
+    });
+    it('closes dropdown by hitting escape key', async () => {
+        var _a, _b, _c, _d;
+        const defaultSortSelector = (_a = desktopSortSelector === null || desktopSortSelector === void 0 ? void 0 : desktopSortSelector.children.item(3)) === null || _a === void 0 ? void 0 : _a.querySelector('ia-dropdown');
+        const caret = (_b = defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.caret');
+        expect(caret).to.exist;
+        caret === null || caret === void 0 ? void 0 : caret.click();
+        await el.updateComplete;
+        let backdrop = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('#sort-selector-backdrop');
+        expect(backdrop).to.exist;
+        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+        await el.updateComplete;
+        backdrop = (_d = el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('#sort-selector-backdrop');
+        expect(backdrop).not.to.exist;
+    });
+});
+describe('Sort direction button behavior', () => {
+    it('should disable sort direction button when sorting by relevance', async () => {
+        var _a;
+        const el = await fixture(html `
+      <sort-filter-bar> </sort-filter-bar>
+    `);
+        el.selectedSort = 'relevance';
+        await el.updateComplete;
+        const sortDirectionButton = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.sort-direction-selector');
+        expect(sortDirectionButton).to.exist;
+        expect(sortDirectionButton.disabled).to.be.true;
+    });
+    it('should enable sort direction button when not sorting by relevance', async () => {
+        var _a;
+        const el = await fixture(html `
+      <sort-filter-bar> </sort-filter-bar>
+    `);
+        el.selectedSort = 'title';
+        await el.updateComplete;
+        const sortDirectionButton = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.sort-direction-selector');
+        expect(sortDirectionButton).to.exist;
+        expect(sortDirectionButton.disabled).to.be.false;
+    });
+    it('should toggle sort direction when clicked', async () => {
+        var _a;
         const el = await fixture(html `
       <sort-filter-bar> </sort-filter-bar>
-    `);
-        const displayModeButtonList = (_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#display-style-selector')) === null || _b === void 0 ? void 0 : _b.querySelector('ul');
-        const gridButton = (_c = displayModeButtonList === null || displayModeButtonList === void 0 ? void 0 : displayModeButtonList.children.item(0)) === null || _c === void 0 ? void 0 : _c.querySelector('#grid-button');
-        expect(gridButton).to.exist;
-        const detailListButton = (_d = displayModeButtonList === null || displayModeButtonList === void 0 ? void 0 : displayModeButtonList.children.item(1)) === null || _d === void 0 ? void 0 : _d.querySelector('#list-detail-button');
-        expect(detailListButton).to.exist;
-        const compactListButton = (_e = displayModeButtonList === null || displayModeButtonList === void 0 ? void 0 : displayModeButtonList.children.item(2)) === null || _e === void 0 ? void 0 : _e.querySelector('#list-compact-button');
-        expect(compactListButton).to.exist;
-    });
-    it('should active current display mode', async () => {
-        var _a, _b, _c;
+    `);
+        el.selectedSort = 'title';
+        el.sortDirection = 'asc';
+        await el.updateComplete;
+        const sortDirectionButton = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.sort-direction-selector');
+        sortDirectionButton.click();
+        await el.updateComplete;
+        expect(el.sortDirection).to.equal('desc');
+        sortDirectionButton.click();
+        await el.updateComplete;
+        expect(el.sortDirection).to.equal('asc');
+    });
+});
+describe('Display mode/style buttons', () => {
+    it('should render all display mode buttons', async () => {
+        var _a, _b, _c, _d, _e;
         const el = await fixture(html `
       <sort-filter-bar> </sort-filter-bar>
-    `);
-        el.displayMode = 'grid';
-        await el.updateComplete;
-        const displayModeTitle = (_c = (_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#display-style-selector')) === null || _b === void 0 ? void 0 : _b.querySelector('button.active')) === null || _c === void 0 ? void 0 : _c.getAttribute('title');
-        expect(displayModeTitle).to.equal('Tile view');
-    });
-});
-describe('Sort/filter bar letter behavior', () => {
-    it('sets the selected title letter when clicked', async () => {
-        var _a, _b, _c;
+    `);
+        const displayModeButtonList = (_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#display-style-selector')) === null || _b === void 0 ? void 0 : _b.querySelector('ul');
+        const gridButton = (_c = displayModeButtonList === null || displayModeButtonList === void 0 ? void 0 : displayModeButtonList.children.item(0)) === null || _c === void 0 ? void 0 : _c.querySelector('#grid-button');
+        expect(gridButton).to.exist;
+        const detailListButton = (_d = displayModeButtonList === null || displayModeButtonList === void 0 ? void 0 : displayModeButtonList.children.item(1)) === null || _d === void 0 ? void 0 : _d.querySelector('#list-detail-button');
+        expect(detailListButton).to.exist;
+        const compactListButton = (_e = displayModeButtonList === null || displayModeButtonList === void 0 ? void 0 : displayModeButtonList.children.item(2)) === null || _e === void 0 ? void 0 : _e.querySelector('#list-compact-button');
+        expect(compactListButton).to.exist;
+    });
+    it('should active current display mode', async () => {
+        var _a, _b, _c;
+        const el = await fixture(html `
+      <sort-filter-bar> </sort-filter-bar>
+    `);
+        el.displayMode = 'grid';
+        await el.updateComplete;
+        const displayModeTitle = (_c = (_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#display-style-selector')) === null || _b === void 0 ? void 0 : _b.querySelector('button.active')) === null || _c === void 0 ? void 0 : _c.getAttribute('title');
+        expect(displayModeTitle).to.equal('Tile view');
+    });
+    it('should change displayMode prop to the one clicked', async () => {
+        var _a, _b, _c;
+        const el = await fixture(html `
+      <sort-filter-bar> </sort-filter-bar>
+    `);
+        el.displayMode = 'grid';
+        await el.updateComplete;
+        const extendedListButton = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#list-detail-button');
+        extendedListButton.click();
+        await el.updateComplete;
+        expect(el.displayMode).to.equal('list-detail');
+        const compactListButton = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#list-compact-button');
+        compactListButton.click();
+        await el.updateComplete;
+        expect(el.displayMode).to.equal('list-compact');
+        const gridModeButton = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('#grid-button');
+        gridModeButton.click();
+        await el.updateComplete;
+        expect(el.displayMode).to.equal('grid');
+    });
+});
+describe('Sort/filter bar letter behavior', () => {
+    it('sets the selected title letter when clicked', async () => {
+        var _a, _b, _c;
+        const el = await fixture(html `
+      <sort-filter-bar></sort-filter-bar>
+    `);
+        el.selectedSort = 'title';
+        el.prefixFilterCountMap = { title: { T: 1 }, creator: {} };
+        await el.updateComplete;
+        const alphaBar = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('alpha-bar');
+        const letterLink = (_b = alphaBar === null || alphaBar === void 0 ? void 0 : alphaBar.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('li > a[href]');
+        expect((_c = letterLink === null || letterLink === void 0 ? void 0 : letterLink.textContent) === null || _c === void 0 ? void 0 : _c.trim()).to.equal('T');
+        letterLink === null || letterLink === void 0 ? void 0 : letterLink.click();
+        await el.updateComplete;
+        expect(el.selectedTitleFilter).to.equal('T');
+    });
+    it('sets the selected creator letter when clicked', async () => {
+        var _a, _b, _c;
         const el = await fixture(html `
       <sort-filter-bar></sort-filter-bar>
-    `);
-        el.selectedSort = 'title';
-        el.prefixFilterCountMap = { title: { T: 1 }, creator: {} };
-        await el.updateComplete;
-        const alphaBar = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('alpha-bar');
-        const letterLink = (_b = alphaBar === null || alphaBar === void 0 ? void 0 : alphaBar.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('li > a[href]');
-        expect((_c = letterLink === null || letterLink === void 0 ? void 0 : letterLink.textContent) === null || _c === void 0 ? void 0 : _c.trim()).to.equal('T');
-        letterLink === null || letterLink === void 0 ? void 0 : letterLink.click();
-        await el.updateComplete;
-        expect(el.selectedTitleFilter).to.equal('T');
-    });
-    it('sets the selected creator letter when clicked', async () => {
-        var _a, _b, _c;
+    `);
+        el.selectedSort = 'creator';
+        el.prefixFilterCountMap = { title: {}, creator: { C: 1 } };
+        await el.updateComplete;
+        const alphaBar = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('alpha-bar');
+        const letterLink = (_b = alphaBar === null || alphaBar === void 0 ? void 0 : alphaBar.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('li > a[href]');
+        expect((_c = letterLink === null || letterLink === void 0 ? void 0 : letterLink.textContent) === null || _c === void 0 ? void 0 : _c.trim()).to.equal('C');
+        letterLink === null || letterLink === void 0 ? void 0 : letterLink.click();
+        await el.updateComplete;
+        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 () => {
+        var _a, _b, _c, _d;
         const el = await fixture(html `
       <sort-filter-bar></sort-filter-bar>
-    `);
-        el.selectedSort = 'creator';
-        el.prefixFilterCountMap = { title: {}, creator: { C: 1 } };
-        await el.updateComplete;
-        const alphaBar = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('alpha-bar');
-        const letterLink = (_b = alphaBar === null || alphaBar === void 0 ? void 0 : alphaBar.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('li > a[href]');
-        expect((_c = letterLink === null || letterLink === void 0 ? void 0 : letterLink.textContent) === null || _c === void 0 ? void 0 : _c.trim()).to.equal('C');
-        letterLink === null || letterLink === void 0 ? void 0 : letterLink.click();
-        await el.updateComplete;
-        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 () => {
-        var _a, _b, _c, _d;
+    `);
+        const mobileSortContainer = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#mobile-sort-container');
+        const desktopSortContainer = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#desktop-sort-container');
+        expect((_c = mobileSortContainer === null || mobileSortContainer === void 0 ? void 0 : mobileSortContainer.classList) === null || _c === void 0 ? void 0 : _c.contains('visible')).to.be.true;
+        expect((_d = desktopSortContainer === null || desktopSortContainer === void 0 ? void 0 : desktopSortContainer.classList) === null || _d === void 0 ? void 0 : _d.contains('hidden')).to.be.true;
+    });
+    it('changes selected sort in mobile view', async () => {
+        var _a;
         const el = await fixture(html `
       <sort-filter-bar></sort-filter-bar>
-    `);
-        const mobileSortSelector = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#mobile-sort-selector');
-        const desktopSortSelector = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#desktop-sort-selector');
-        expect((_c = mobileSortSelector === null || mobileSortSelector === void 0 ? void 0 : mobileSortSelector.classList) === null || _c === void 0 ? void 0 : _c.contains('visible')).to.be.true;
-        expect((_d = desktopSortSelector === null || desktopSortSelector === void 0 ? void 0 : desktopSortSelector.classList) === null || _d === void 0 ? void 0 : _d.contains('hidden')).to.be.true;
-    });
-    it('changes selected sort in mobile view', async () => {
-        var _a;
+    `);
+        const mobileDropdown = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.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 () => {
+        var _a;
         const el = await fixture(html `
       <sort-filter-bar></sort-filter-bar>
-    `);
-        const mobileSortSelector = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#mobile-sort-selector');
-        expect(mobileSortSelector).to.exist;
-        mobileSortSelector.value = 'title';
-        mobileSortSelector.dispatchEvent(new Event('change'));
-        await el.updateComplete;
-        expect(el.selectedSort).to.equal('title');
-    });
-    it('clears title filter when sort changed from title in mobile view', async () => {
-        var _a;
+    `);
+        el.selectedSort = 'title';
+        el.selectedTitleFilter = 'A';
+        await el.updateComplete;
+        const mobileDropdown = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.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 () => {
+        var _a;
         const el = await fixture(html `
       <sort-filter-bar></sort-filter-bar>
-    `);
-        el.selectedSort = 'title';
-        el.selectedTitleFilter = 'A';
-        await el.updateComplete;
-        const mobileSortSelector = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#mobile-sort-selector');
-        expect(mobileSortSelector).to.exist;
-        mobileSortSelector.value = 'relevance';
-        mobileSortSelector.dispatchEvent(new Event('change'));
-        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 () => {
-        var _a;
+    `);
+        el.selectedSort = 'creator';
+        el.selectedCreatorFilter = 'A';
+        await el.updateComplete;
+        const mobileDropdown = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.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 () => {
+        var _a, _b, _c, _d;
         const el = await fixture(html `
       <sort-filter-bar></sort-filter-bar>
-    `);
-        el.selectedSort = 'creator';
-        el.selectedCreatorFilter = 'A';
-        await el.updateComplete;
-        const mobileSortSelector = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#mobile-sort-selector');
-        expect(mobileSortSelector).to.exist;
-        mobileSortSelector.value = 'relevance';
-        mobileSortSelector.dispatchEvent(new Event('change'));
-        await el.updateComplete;
-        expect(el.selectedSort).to.equal('relevance');
-        expect(el.selectedCreatorFilter).to.be.null;
-    });
-});
+    `);
+        const mobileDropdown = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#mobile-dropdown');
+        expect(mobileDropdown).to.exist;
+        const caret = (_b = mobileDropdown === null || mobileDropdown === void 0 ? void 0 : mobileDropdown.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.caret');
+        expect(caret).to.exist;
+        caret === null || caret === void 0 ? void 0 : caret.click();
+        await el.updateComplete;
+        let backdrop = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('#sort-selector-backdrop');
+        expect(backdrop).to.exist;
+        backdrop === null || backdrop === void 0 ? void 0 : backdrop.click();
+        await el.updateComplete;
+        backdrop = (_d = el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('#sort-selector-backdrop');
+        expect(backdrop).not.to.exist;
+    });
+});
 //# sourceMappingURL=sort-filter-bar.test.js.map