@internetarchive/collection-browser 4.5.2 → 4.7.0

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/test/sort-filter-bar/alpha-bar.test.ts

@@ -0,0 +1,101 @@
+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/.claude/worktrees/WEBDEV-8677-bump-field-parsers/test/sort-filter-bar/sort-filter-bar.test.ts

@@ -0,0 +1,443 @@
+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;
+  });
+});
+
+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/.claude/worktrees/WEBDEV-8677-bump-field-parsers/test/text-overlay.test.ts

@@ -0,0 +1,55 @@
+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');
+  });
+});

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/test/text-snippet-block.test.ts

@@ -0,0 +1,85 @@
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import type { TextSnippetBlock } from '../src/tiles/text-snippet-block';
+import '../src/tiles/text-snippet-block';
+
+describe('TextSnippetBlock component', () => {
+  it('should render initial component', async () => {
+    const el = await fixture<TextSnippetBlock>(
+      html`<text-snippet-block></text-snippet-block>`,
+    );
+
+    // No content if no snippets
+    expect(el.shadowRoot?.children.length).to.equal(0);
+
+    // Content appears if there are snippets
+    el.snippets = ['text'];
+    await el.updateComplete;
+    const container = el.shadowRoot?.querySelector('.container');
+    expect(container).to.exist;
+  });
+
+  it('should render marked snippets', async () => {
+    const snippets = [
+      'some {{{snippet}}} text',
+      'some {{{other}}} {{{snippet}}} text',
+    ];
+
+    const el = await fixture<TextSnippetBlock>(
+      html`<text-snippet-block .snippets=${snippets}></text-snippet-block>`,
+    );
+
+    const container = el.shadowRoot?.querySelector('.snippet-view');
+
+    // Has the correct number of snippets and highlights
+    expect(container?.children.length).to.equal(snippets.length);
+    expect(container?.querySelectorAll('mark').length).to.equal(3);
+  });
+
+  it('should render marked snippets containing newlines', async () => {
+    const snippets = [
+      'some {{{snippet}}} text',
+      'some {{{other}}} {{{snippet\n text}}}',
+    ];
+
+    const el = await fixture<TextSnippetBlock>(
+      html`<text-snippet-block .snippets=${snippets}></text-snippet-block>`,
+    );
+
+    const container = el.shadowRoot?.querySelector('.snippet-view');
+
+    // Has the correct number of snippets and highlights
+    expect(container?.children.length).to.equal(snippets.length);
+    expect(container?.querySelectorAll('mark').length).to.equal(3);
+  });
+
+  it('should render correctly in grid mode', async () => {
+    const el = await fixture<TextSnippetBlock>(
+      html`<text-snippet-block
+        viewsize="grid"
+        .snippets=${['text']}
+      ></text-snippet-block>`,
+    );
+
+    const container = el.shadowRoot?.querySelector('.snippet-view');
+
+    // Applies the right container classes
+    expect(container?.classList.contains('grid')).to.be.true;
+    expect(container?.classList.contains('list')).to.be.false;
+  });
+
+  it('should render correctly in list mode', async () => {
+    const el = await fixture<TextSnippetBlock>(
+      html`<text-snippet-block
+        viewsize="list"
+        .snippets=${['text']}
+      ></text-snippet-block>`,
+    );
+
+    const container = el.shadowRoot?.querySelector('.snippet-view');
+
+    // Applies the right container classes
+    expect(container?.classList.contains('list')).to.be.true;
+    expect(container?.classList.contains('grid')).to.be.false;
+  });
+});