@internetarchive/collection-browser 4.7.1-alpha-webdev9189.0 → 4.8.1-webdev-9227.1

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

@@ -1,101 +0,0 @@
-import { aTimeout, expect, fixture } from '@open-wc/testing';
-import { html } from 'lit';
-import type { AlphaBar } from '../../src/sort-filter-bar/alpha-bar';
-
-import '../../src/sort-filter-bar/alpha-bar';
-import type { AlphaBarTooltip } from '../../src/sort-filter-bar/alpha-bar-tooltip';
-
-describe('Alphabetical Filter Bar', () => {
-  it('renders component', async () => {
-    const el = await fixture<AlphaBar>(html`<alpha-bar></alpha-bar>`);
-
-    // Should have all the letters
-    const letters = el.shadowRoot?.querySelectorAll('li');
-    expect(letters?.length).to.equal(26);
-  });
-
-  it('renders letters with items as buttons', async () => {
-    const el = await fixture<AlphaBar>(html`<alpha-bar></alpha-bar>`);
-
-    el.letterCounts = { U: 10, X: 10 };
-    await el.updateComplete;
-
-    // Should have exactly two letter buttons
-    const letterButtons = el.shadowRoot?.querySelectorAll(
-      'li > button:not(:disabled)',
-    );
-    expect(letterButtons?.length).to.equal(2);
-    expect(letterButtons?.item(0).textContent?.trim()).to.equal('U');
-    expect(letterButtons?.item(1).textContent?.trim()).to.equal('X');
-  });
-
-  it('renders letters without items as disabled buttons', async () => {
-    const el = await fixture<AlphaBar>(html`<alpha-bar></alpha-bar>`);
-
-    el.letterCounts = { U: 10, X: 10 };
-    await el.updateComplete;
-
-    // All but the two letters above should be disabled
-    const letterButtons = el.shadowRoot?.querySelectorAll(
-      'li > button:disabled',
-    );
-    expect(letterButtons?.length).to.equal(24);
-    expect(letterButtons?.item(0).textContent?.trim()).to.equal('A');
-    expect(letterButtons?.item(23).textContent?.trim()).to.equal('Z');
-  });
-
-  it('renders the selected letter with the "selected" class', async () => {
-    const el = await fixture<AlphaBar>(html`<alpha-bar></alpha-bar>`);
-
-    el.selectedLetter = 'B';
-    await el.updateComplete;
-
-    const selectedLetter = el.shadowRoot?.querySelector('li.selected');
-    expect(selectedLetter).to.exist;
-    expect(selectedLetter?.textContent?.trim()).to.equal('B');
-  });
-
-  it('renders a tooltip when hovered and removes it when un-hovered', async () => {
-    const el = await fixture<AlphaBar>(html`<alpha-bar></alpha-bar>`);
-    const firstLetter = el.shadowRoot?.querySelector('li') as HTMLLIElement;
-    expect(firstLetter).to.exist;
-
-    firstLetter.dispatchEvent(new MouseEvent('mousemove'));
-    await el.updateComplete;
-
-    const tooltip = el.shadowRoot?.querySelector(
-      'alpha-bar-tooltip',
-    ) as AlphaBarTooltip;
-    expect(tooltip).to.exist;
-
-    // Should be positioned after next tick
-    await aTimeout(0);
-    expect(tooltip.style.left).to.exist;
-
-    firstLetter.dispatchEvent(new MouseEvent('mouseleave'));
-    await el.updateComplete;
-
-    expect(el.shadowRoot?.querySelector('alpha-bar-tooltip')).not.to.exist;
-  });
-
-  it('positions tooltip correctly when it would overflow viewport', async () => {
-    const el = await fixture<AlphaBar>(html`<alpha-bar></alpha-bar>`);
-    const letters = el.shadowRoot?.querySelectorAll('li');
-    const lastLetter = letters?.item(letters.length - 1) as HTMLLIElement;
-    expect(lastLetter).to.exist;
-
-    lastLetter.dispatchEvent(new MouseEvent('mousemove'));
-    await el.updateComplete;
-
-    const tooltip = el.shadowRoot?.querySelector(
-      '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,
-    );
-  });
-});

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

@@ -1,472 +0,0 @@
-import { expect, fixture } from '@open-wc/testing';
-import sinon from 'sinon';
-import { html } from 'lit';
-import type { IaDropdown } from '@internetarchive/ia-dropdown';
-import type { SortFilterBar } from '../../src/sort-filter-bar/sort-filter-bar';
-import { SortField, defaultSortAvailability } from '../../src/models';
-
-import '../../src/sort-filter-bar/sort-filter-bar';
-
-describe('Sort dropdown behavior', () => {
-  let el: SortFilterBar;
-  let sortDropdown: IaDropdown;
-
-  beforeEach(async () => {
-    el = await fixture<SortFilterBar>(html`
-      <sort-filter-bar></sort-filter-bar>
-    `);
-    sortDropdown = el.shadowRoot?.querySelector('#sort-dropdown') as IaDropdown;
-    await el.updateComplete;
-  });
-
-  it('should render basic component', async () => {
-    const sortSelectorContainer = el.shadowRoot?.querySelector(
-      '#sort-selector-container',
-    );
-    expect(sortSelectorContainer).to.exist;
-  });
-
-  it('should render sort-by label', async () => {
-    const sortByLabel = el.shadowRoot?.querySelector('.sort-by-text');
-    expect(sortByLabel).to.exist;
-    expect(sortByLabel?.textContent?.trim()).to.equal('Sort by:');
-  });
-
-  it('should render sort direction button', async () => {
-    const sortDirections = el.shadowRoot?.querySelector(
-      '.sort-direction-container',
-    );
-    expect(sortDirections).to.exist;
-    expect(sortDirections?.querySelector('.sort-direction-icon')).to.exist;
-  });
-
-  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,
-      SortField.weeklyview,
-      SortField.title,
-      SortField.date,
-      SortField.datearchived,
-      SortField.datereviewed,
-      SortField.dateadded,
-      SortField.creator,
-    ]);
-  });
-
-  it('respects overridden sort field availability', async () => {
-    const customSortAvailability: Record<SortField, boolean> = {
-      ...defaultSortAvailability,
-      [SortField.title]: false,
-      [SortField.datearchived]: false,
-      [SortField.datereviewed]: false,
-      [SortField.creator]: false,
-    };
-
-    el.sortFieldAvailability = customSortAvailability;
-    await el.updateComplete;
-
-    const dropdown = el.shadowRoot?.querySelector(
-      '#sort-dropdown',
-    ) as IaDropdown;
-    expect(dropdown.options.length).to.equal(5);
-    expect(dropdown.options.map(o => o.id)).to.deep.equal([
-      SortField.relevance,
-      SortField.alltimeview,
-      SortField.weeklyview,
-      SortField.date,
-      SortField.dateadded,
-    ]);
-  });
-
-  it('shows the display name of the selected sort', async () => {
-    el.selectedSort = SortField.alltimeview;
-    await el.updateComplete;
-
-    const label = sortDropdown?.querySelector('.dropdown-label');
-    expect(label?.textContent?.trim()).to.equal('All-time views');
-  });
-
-  it('falls back to first available sort when default is unavailable', async () => {
-    el.selectedSort = SortField.default;
-    el.defaultSortField = SortField.relevance;
-    el.sortFieldAvailability = {
-      ...defaultSortAvailability,
-      [SortField.relevance]: false,
-    };
-    await el.updateComplete;
-
-    const label = sortDropdown?.querySelector('.dropdown-label');
-    // No relevance, so fall back to the first one in the list
-    expect(label?.textContent?.trim()).to.equal('All-time views');
-  });
-
-  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('selects a sort option by clicking it in the dropdown', async () => {
-    el.selectedSort = SortField.title;
-    await el.updateComplete;
-
-    const dropdown = el.shadowRoot?.querySelector(
-      '#sort-dropdown',
-    ) as IaDropdown;
-    expect(dropdown).to.exist;
-
-    const firstOption = dropdown?.shadowRoot?.querySelector(
-      'li > button',
-    ) as HTMLButtonElement;
-    expect(firstOption).to.exist;
-
-    firstOption?.click();
-    await el.updateComplete;
-
-    // The first option is relevance by default
-    expect(el.selectedSort).to.equal(SortField.relevance);
-  });
-
-  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(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('renders sort selector backdrop when dropdown is open', async () => {
-    expect(sortDropdown).to.exist;
-
-    const caret = sortDropdown?.shadowRoot?.querySelector(
-      '.caret',
-    ) as HTMLElement;
-    expect(caret).to.exist;
-
-    caret!.click();
-    await el.updateComplete;
-
-    let backdrop = el.shadowRoot?.querySelector(
-      '#sort-selector-backdrop',
-    ) as HTMLElement;
-    expect(backdrop).to.exist;
-
-    // Clicking the backdrop should close the dropdown
-    backdrop!.click();
-    await el.updateComplete;
-
-    backdrop = el.shadowRoot?.querySelector(
-      '#sort-selector-backdrop',
-    ) as HTMLElement;
-    expect(backdrop).not.to.exist;
-  });
-
-  it('pressing Escape key closes the dropdown', async () => {
-    expect(sortDropdown).to.exist;
-
-    const caret = sortDropdown?.shadowRoot?.querySelector(
-      '.caret',
-    ) as HTMLElement;
-    expect(caret).to.exist;
-
-    caret!.click();
-    await el.updateComplete;
-
-    let backdrop = el.shadowRoot?.querySelector(
-      '#sort-selector-backdrop',
-    ) as HTMLElement;
-    expect(backdrop).to.exist;
-
-    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
-    await el.updateComplete;
-
-    backdrop = el.shadowRoot?.querySelector(
-      '#sort-selector-backdrop',
-    ) as HTMLElement;
-    expect(backdrop).not.to.exist;
-  });
-
-  it('clears title filter when sort changed from title', async () => {
-    el.selectedSort = 'title' as SortField;
-    el.selectedTitleFilter = 'A';
-    await el.updateComplete;
-
-    const dropdown = el.shadowRoot?.querySelector(
-      '#sort-dropdown',
-    ) as IaDropdown;
-    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.selectedTitleFilter).to.be.null;
-  });
-
-  it('clears creator filter when sort changed from creator', async () => {
-    el.selectedSort = 'creator' as SortField;
-    el.selectedCreatorFilter = 'A';
-    await el.updateComplete;
-
-    const dropdown = el.shadowRoot?.querySelector(
-      '#sort-dropdown',
-    ) as IaDropdown;
-    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<SortFilterBar>(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;
-  });
-
-  it('renders the sort-bar-end slot after the display mode buttons', async () => {
-    const el = await fixture<SortFilterBar>(html`
-      <sort-filter-bar>
-        <button slot="sort-bar-end" id="end-button">End</button>
-      </sort-filter-bar>
-    `);
-
-    const sortBar = el.shadowRoot?.querySelector('#sort-bar');
-    const displayModes = sortBar?.querySelector('#display-style-selector');
-    const endSlot = sortBar?.querySelector(
-      'slot[name="sort-bar-end"]',
-    ) as HTMLSlotElement;
-
-    expect(endSlot).to.exist;
-    expect(sortBar?.lastElementChild).to.equal(endSlot);
-    expect(displayModes?.nextElementSibling).to.equal(endSlot);
-    expect(endSlot.assignedElements()[0]?.id).to.equal('end-button');
-  });
-
-  it('keeps the sort-bar-end slot when display modes are suppressed', async () => {
-    const el = await fixture<SortFilterBar>(html`
-      <sort-filter-bar suppressDisplayModes></sort-filter-bar>
-    `);
-
-    const sortBar = el.shadowRoot?.querySelector('#sort-bar');
-    expect(sortBar?.querySelector('#display-style-selector')).to.not.exist;
-    expect(sortBar?.querySelector('slot[name="sort-bar-end"]')).to.exist;
-  });
-});
-
-describe('Sort direction button behavior', () => {
-  it('should disable sort direction button when sorting by relevance', async () => {
-    const el = await fixture<SortFilterBar>(html`
-      <sort-filter-bar> </sort-filter-bar>
-    `);
-
-    el.selectedSort = 'relevance' as SortField;
-    await el.updateComplete;
-
-    const sortDirectionButton = el.shadowRoot?.querySelector(
-      '.sort-direction-selector',
-    ) as HTMLButtonElement;
-    expect(sortDirectionButton).to.exist;
-    expect(sortDirectionButton.disabled).to.be.true;
-  });
-
-  it('should enable sort direction button when not sorting by relevance', async () => {
-    const el = await fixture<SortFilterBar>(html`
-      <sort-filter-bar> </sort-filter-bar>
-    `);
-
-    el.selectedSort = 'title' as SortField;
-    await el.updateComplete;
-
-    const sortDirectionButton = el.shadowRoot?.querySelector(
-      '.sort-direction-selector',
-    ) as HTMLButtonElement;
-    expect(sortDirectionButton).to.exist;
-    expect(sortDirectionButton.disabled).to.be.false;
-  });
-
-  it('should toggle sort direction when clicked', async () => {
-    const el = await fixture<SortFilterBar>(html`
-      <sort-filter-bar> </sort-filter-bar>
-    `);
-
-    el.selectedSort = 'title' as SortField;
-    el.sortDirection = 'asc';
-    await el.updateComplete;
-
-    const sortDirectionButton = el.shadowRoot?.querySelector(
-      '.sort-direction-selector',
-    ) as HTMLButtonElement;
-
-    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 () => {
-    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 not render display mode buttons when suppressed', async () => {
-    const el = await fixture<SortFilterBar>(html`
-      <sort-filter-bar suppressDisplayModes></sort-filter-bar>
-    `);
-
-    const displayModeButtonList = el.shadowRoot?.querySelector(
-      '#display-style-selector',
-    );
-    expect(displayModeButtonList).not.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');
-  });
-
-  it('should change displayMode prop to the one clicked', async () => {
-    const el = await fixture<SortFilterBar>(html`
-      <sort-filter-bar> </sort-filter-bar>
-    `);
-
-    el.displayMode = 'grid';
-    await el.updateComplete;
-
-    const extendedListButton = el.shadowRoot?.querySelector(
-      '#list-detail-button',
-    ) as HTMLElement;
-    extendedListButton.click();
-    await el.updateComplete;
-    expect(el.displayMode).to.equal('list-detail');
-
-    const compactListButton = el.shadowRoot?.querySelector(
-      '#list-compact-button',
-    ) as HTMLElement;
-    compactListButton.click();
-    await el.updateComplete;
-    expect(el.displayMode).to.equal('list-compact');
-
-    const gridModeButton = el.shadowRoot?.querySelector(
-      '#grid-button',
-    ) as HTMLElement;
-    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 () => {
-    const el = await fixture<SortFilterBar>(html`
-      <sort-filter-bar></sort-filter-bar>
-    `);
-
-    el.selectedSort = 'title' as SortField;
-    el.prefixFilterCountMap = { title: { T: 1 }, creator: {} };
-    await el.updateComplete;
-
-    const alphaBar = el.shadowRoot?.querySelector('alpha-bar');
-    const letterLink = alphaBar?.shadowRoot?.querySelector(
-      'li > button:not(:disabled)',
-    ) as HTMLAnchorElement;
-    expect(letterLink?.textContent?.trim()).to.equal('T');
-
-    letterLink?.click();
-    await el.updateComplete;
-
-    expect(el.selectedTitleFilter).to.equal('T');
-  });
-
-  it('sets the selected creator letter when clicked', async () => {
-    const el = await fixture<SortFilterBar>(html`
-      <sort-filter-bar></sort-filter-bar>
-    `);
-
-    el.selectedSort = 'creator' as SortField;
-    el.prefixFilterCountMap = { title: {}, creator: { C: 1 } };
-    await el.updateComplete;
-
-    const alphaBar = el.shadowRoot?.querySelector('alpha-bar');
-    const letterLink = alphaBar?.shadowRoot?.querySelector(
-      'li > button:not(:disabled)',
-    ) as HTMLAnchorElement;
-    expect(letterLink?.textContent?.trim()).to.equal('C');
-
-    letterLink?.click();
-    await el.updateComplete;
-
-    expect(el.selectedCreatorFilter).to.equal('C');
-  });
-});

package/test/text-overlay.test.ts

@@ -1,55 +0,0 @@
-import { expect, fixture } from '@open-wc/testing';
-import { html } from 'lit';
-import type { TextOverlay } from '../src/tiles/overlay/text-overlay';
-
-import '../src/tiles/overlay/text-overlay';
-
-describe('Text Overlay component', () => {
-  it('should render initial component', async () => {
-    const el = await fixture<TextOverlay>(html`<text-overlay></text-overlay>`);
-
-    const overlay = el.shadowRoot?.querySelector('.overlay');
-    const noPreview = el.shadowRoot?.querySelector('.no-preview');
-    const iconOverlay = el.shadowRoot?.querySelector('.icon-overlay');
-    const textOverlay = el.shadowRoot?.querySelector('.text-overlay');
-
-    expect(overlay).to.exist;
-    expect(noPreview).to.exist;
-    expect(iconOverlay).to.exist;
-    expect(textOverlay).to.exist;
-  });
-
-  it('should render component with login-required type', async () => {
-    const el = await fixture<TextOverlay>(html`
-      <text-overlay .type=${'login-required'}></text-overlay>
-    `);
-
-    const iconOverlay = el.shadowRoot?.querySelector('.icon-overlay');
-    const textOverlay = el.shadowRoot?.querySelector('.text-overlay');
-
-    const svgTitle = el.shadowRoot
-      ?.querySelector('svg')
-      ?.querySelector('title')?.textContent;
-
-    expect(iconOverlay).to.exist;
-    expect(svgTitle).to.equal('Log in to view this item');
-    expect(textOverlay?.textContent).to.equal('Log in to view this item');
-  });
-
-  it('should render component with content-warning type', async () => {
-    const el = await fixture<TextOverlay>(html`
-      <text-overlay .type=${'content-warning'}></text-overlay>
-    `);
-
-    const iconOverlay = el.shadowRoot?.querySelector('.icon-overlay');
-    const textOverlay = el.shadowRoot?.querySelector('.text-overlay');
-
-    const svgTitle = el.shadowRoot
-      ?.querySelector('svg')
-      ?.querySelector('title')?.textContent;
-
-    expect(iconOverlay).to.exist;
-    expect(svgTitle).to.equal('Content may be inappropriate');
-    expect(textOverlay?.textContent).to.equal('Content may be inappropriate');
-  });
-});