@internetarchive/collection-browser 0.2.15-0 → 0.2.16-alpha1

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

@@ -21,6 +21,19 @@ export const mockSuccessResponse: Result<SearchResponse, SearchServiceError> = {
         }),
       ],
       start: 0,
+      aggregations: {
+        'user_aggs__terms__field:mediatypeSorter__size:100': {
+          buckets: [
+            { key: 'audio', doc_count: 121 },
+            { key: 'movies', doc_count: 2195 },
+            { key: 'texts', doc_count: 1392 },
+            { key: 'data', doc_count: 605 },
+            { key: 'web', doc_count: 301 },
+            { key: 'collection', doc_count: 167 },
+            { key: 'account', doc_count: 167 },
+          ],
+        },
+      },
     },
     responseHeader: {
       status: 0,

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

@@ -0,0 +1,187 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import type { SortFilterBar } from '../../src/sort-filter-bar/sort-filter-bar';
+import type { SortField } from '../../src/models';
+
+import '../../src/sort-filter-bar/sort-filter-bar';
+
+describe('Sort direction buttons', () => {
+  it('should render sort direction button', async () => {
+    const el = await fixture<SortFilterBar>(html`
+      <sort-filter-bar> </sort-filter-bar>
+    `);
+
+    el.sortDirection = 'asc'; // selected sort
+    await el.updateComplete;
+
+    const sortDirectionButtonList = el.shadowRoot?.querySelector(
+      '#sort-direction-selector'
+    );
+
+    const sortByAscButton = sortDirectionButtonList?.querySelector(
+      '#sort-ascending-btn'
+    );
+    expect(sortByAscButton).to.exist;
+    // ascending order button is selected
+    expect(sortByAscButton?.getAttribute('class')).to.equal(
+      'sort-button selected'
+    );
+
+    const sortByDescButton = sortDirectionButtonList?.querySelector(
+      '#sort-descending-btn'
+    );
+    expect(sortByDescButton).to.exist;
+    // descending order button is not selected
+    expect(sortByDescButton?.getAttribute('class')).to.not.equal(
+      'sort-button selected'
+    );
+  });
+});
+
+describe('Sort selector default buttons', async () => {
+  const el = await fixture<SortFilterBar>(html`
+    <sort-filter-bar> </sort-filter-bar>
+  `);
+  const sortSelectorContainer = el.shadowRoot?.querySelector(
+    '#desktop-sort-selector'
+  );
+
+  it('should render sort-by label', async () => {
+    expect(sortSelectorContainer?.children.item(0)?.textContent).to.equal(
+      'Sort By'
+    );
+  });
+
+  it('should render default relevance-sort selector', async () => {
+    const defaultSortSelector = sortSelectorContainer?.children
+      .item(1)
+      ?.querySelector('a');
+    expect(defaultSortSelector?.textContent).to.contain('Relevance');
+    expect(defaultSortSelector?.getAttribute('class')).to.equal('selected');
+  });
+
+  it('should render default view-sort selector', async () => {
+    const defaultSortSelector = sortSelectorContainer?.children
+      .item(2)
+      ?.querySelector('a');
+    expect(defaultSortSelector?.textContent).to.contain('Weekly Views');
+  });
+
+  it('should render active view-sort selectors', async () => {
+    el.selectedSort = 'alltimeview' as SortField;
+    await el.updateComplete;
+
+    const defaultSortSelector =
+      sortSelectorContainer?.querySelector('a.selected');
+    expect(defaultSortSelector?.textContent).to.contain('All-time Views');
+  });
+
+  it('should render default title-sort selector', async () => {
+    const defaultSortSelector = sortSelectorContainer?.children
+      .item(3)
+      ?.querySelector('a');
+    expect(defaultSortSelector?.textContent).to.contain('Title');
+  });
+
+  it('should render default date-sort selector', async () => {
+    const defaultSortSelector = sortSelectorContainer?.children
+      .item(4)
+      ?.querySelector('a');
+    expect(defaultSortSelector?.textContent).to.contain('Date Published');
+  });
+
+  it('should render active date-sort selectors', async () => {
+    el.selectedSort = 'datereviewed' as SortField;
+    await el.updateComplete;
+
+    const defaultSortSelector =
+      sortSelectorContainer?.querySelector('a.selected');
+    expect(defaultSortSelector?.textContent).to.contain('Date Reviewed');
+  });
+
+  it('should render default creator-sort selector', async () => {
+    const defaultSortSelector = sortSelectorContainer?.children
+      .item(5)
+      ?.querySelector('a');
+    expect(defaultSortSelector?.textContent).to.contain('Creator');
+  });
+
+  it('click event on view-sort selector', async () => {
+    const defaultSortSelector = sortSelectorContainer?.children
+      .item(2)
+      ?.querySelector('a');
+
+    await defaultSortSelector?.click();
+    expect(el.selectedSort).to.equal('weeklyview');
+  });
+
+  it('click event on title selector', async () => {
+    const defaultSortSelector = sortSelectorContainer?.children
+      .item(3)
+      ?.querySelector('a');
+
+    await defaultSortSelector?.click();
+    expect(el.selectedSort).to.equal('title');
+  });
+
+  it('click event on date-sort selector', async () => {
+    const defaultSortSelector = sortSelectorContainer?.children
+      .item(4)
+      ?.querySelector('a');
+
+    await defaultSortSelector?.click();
+    expect(el.selectedSort).to.equal('date');
+  });
+
+  it('click event on creator selector', async () => {
+    const defaultSortSelector = sortSelectorContainer?.children
+      .item(5)
+      ?.querySelector('a');
+
+    await defaultSortSelector?.click();
+    expect(el.selectedSort).to.equal('creator');
+  });
+});
+
+describe('Display mode/style buttons', () => {
+  it('should render all display mode buttons', async () => {
+    const el = await fixture<SortFilterBar>(html`
+      <sort-filter-bar> </sort-filter-bar>
+    `);
+
+    const displayModeButtonList = el.shadowRoot
+      ?.querySelector('#display-style-selector')
+      ?.querySelector('ul');
+
+    const gridButton = displayModeButtonList?.children
+      .item(0)
+      ?.querySelector('#grid-button');
+    expect(gridButton).to.exist;
+
+    const detailListButton = displayModeButtonList?.children
+      .item(1)
+      ?.querySelector('#list-detail-button');
+    expect(detailListButton).to.exist;
+
+    const compactListButton = displayModeButtonList?.children
+      .item(2)
+      ?.querySelector('#list-compact-button');
+    expect(compactListButton).to.exist;
+  });
+
+  it('should active current display mode', async () => {
+    const el = await fixture<SortFilterBar>(html`
+      <sort-filter-bar> </sort-filter-bar>
+    `);
+
+    el.displayMode = 'grid';
+    await el.updateComplete;
+
+    const displayModeTitle = el.shadowRoot
+      ?.querySelector('#display-style-selector')
+      ?.querySelector('button.active')
+      ?.getAttribute('title');
+    expect(displayModeTitle).to.equal('Tile view');
+  });
+});