@internetarchive/collection-browser 4.7.1-alpha-webdev9189.0 → 4.8.0

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

@@ -259,35 +259,6 @@ describe('Sort dropdown behavior', () => {
     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', () => {

package/test/utils/normalize-filter-text.test.ts

@@ -0,0 +1,87 @@
+import { expect } from '@open-wc/testing';
+import {
+  filterTextIncludes,
+  normalizeFilterText,
+} from '../../src/utils/normalize-filter-text';
+
+/** Whether filtering for `filter` would find `text` */
+function finds(text: string, filter: string): boolean {
+  return filterTextIncludes(
+    normalizeFilterText(text),
+    normalizeFilterText(filter),
+  );
+}
+
+describe('normalizeFilterText', () => {
+  it('lowercases text', () => {
+    expect(normalizeFilterText('Puppies')).to.deep.equal({
+      spaced: 'puppies',
+      joined: 'puppies',
+    });
+  });
+
+  it('removes punctuation other than word joiners', () => {
+    expect(normalizeFilterText('A.O.R.').spaced).to.equal('aor');
+    expect(normalizeFilterText('Dr. Drew').spaced).to.equal('dr drew');
+    expect(normalizeFilterText("Children's books").spaced).to.equal(
+      'childrens books',
+    );
+  });
+
+  it('turns word joiners into spaces in one form and removes them in the other', () => {
+    expect(normalizeFilterText('WC-TV')).to.deep.equal({
+      spaced: 'wc tv',
+      joined: 'wctv',
+    });
+    expect(normalizeFilterText('AC/DC')).to.deep.equal({
+      spaced: 'ac dc',
+      joined: 'acdc',
+    });
+    expect(normalizeFilterText('snake_case')).to.deep.equal({
+      spaced: 'snake case',
+      joined: 'snakecase',
+    });
+    expect(normalizeFilterText('1950–1960').spaced).to.equal('1950 1960');
+  });
+
+  it('removes accents', () => {
+    expect(normalizeFilterText('Café Müller').spaced).to.equal('cafe muller');
+  });
+
+  it('collapses and trims whitespace', () => {
+    expect(normalizeFilterText('  Dogs -- Fiction ')).to.deep.equal({
+      spaced: 'dogs fiction',
+      joined: 'dogs fiction',
+    });
+  });
+
+  it('keeps symbols that carry meaning', () => {
+    expect(normalizeFilterText('C++').spaced).to.equal('c++');
+  });
+
+  it('reduces text that is only punctuation to nothing', () => {
+    expect(normalizeFilterText('...')).to.deep.equal({
+      spaced: '',
+      joined: '',
+    });
+    expect(normalizeFilterText(' - ').spaced).to.equal('');
+  });
+});
+
+describe('filterTextIncludes', () => {
+  it('matches hyphenated words typed apart or together', () => {
+    expect(finds('WC-TV', 'wc tv')).to.be.true;
+    expect(finds('WC-TV', 'wctv')).to.be.true;
+    expect(finds('WC-TV', 'wc-tv')).to.be.true;
+    expect(finds('Human-animal relationships', 'human animal')).to.be.true;
+  });
+
+  it('matches regardless of other punctuation', () => {
+    expect(finds('A.O.R.', 'aor')).to.be.true;
+    expect(finds('Dr. Drew', 'dr drew')).to.be.true;
+  });
+
+  it("doesn't match words that are apart in the value but typed together", () => {
+    expect(finds('WC TV', 'wctv')).to.be.false;
+  });
+});

package/web-test-runner.config.mjs

@@ -38,8 +38,13 @@ export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
   /** Amount of browsers to run concurrently */
   // concurrentBrowsers: 2,
 
-  /** Amount of test files per browser to test concurrently */
-  // concurrency: 1,
+  /**
+   * Amount of test files per browser to test concurrently. Files run in
+   * browser tabs, and Chrome doesn't render tabs in the background, so they
+   * get no animation frames or ResizeObserver callbacks. Running one at a time
+   * keeps each in the foreground (and is faster than the throttled default).
+   */
+  concurrency: 1,
 
   /** Browsers to run tests on */
   // browsers: [

package/dist/src/collection-facets/more-facets-pagination.d.ts

@@ -1,36 +0,0 @@
-import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
-export declare class MoreFacetsPagination extends LitElement {
-    /**
-     * Total number of pages
-     */
-    size: number;
-    /**
-     * Number of pages can be moved in back/forward
-     */
-    step: number;
-    currentPage: number;
-    pages?: number[];
-    firstUpdated(): void;
-    updated(changed: Map<string, any>): void;
-    /** creates `this.pages` array that notes which pages to draw
-     * - `0` is elipses marker
-     * - rule: selected page is centered between -2/+2 pages
-     * - outlier: first page selected, show _1_ 2 3 ... N
-     * - outlier: second page selected, show 1 _2_ 3 4 ... N
-     * - outlier: last page selected, show 1 ... N-2 N-1 _N_
-     * - outlier: if page count = 7, & selected is either [2, 3, 4, 5, 6], show all pages
-     */
-    observePageCount(): void;
-    private createFirstNode;
-    private createMiddelNode;
-    private createLastNode;
-    private get getEllipsisTemplate();
-    emitPageClick(): void;
-    private onRewind;
-    private onForward;
-    private onChange;
-    private getPageTemplate;
-    private get getPagesTemplate();
-    render(): TemplateResult<1>;
-    static get styles(): CSSResultGroup;
-}

package/dist/src/collection-facets/more-facets-pagination.js

@@ -1,260 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement, nothing, } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import arrowLeftIcon from '../assets/img/icons/arrow-left';
-import arrowRightIcon from '../assets/img/icons/arrow-right';
-import { srOnlyStyle } from '../styles/sr-only';
-let MoreFacetsPagination = class MoreFacetsPagination extends LitElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Number of pages can be moved in back/forward
-         */
-        this.step = 2;
-        this.currentPage = 1;
-        this.pages = [];
-    }
-    firstUpdated() {
-        this.observePageCount();
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    updated(changed) {
-        if (changed.has('size')) {
-            this.observePageCount();
-        }
-        if (changed.has('currentPage')) {
-            this.observePageCount();
-            this.emitPageClick();
-        }
-    }
-    /** creates `this.pages` array that notes which pages to draw
-     * - `0` is elipses marker
-     * - rule: selected page is centered between -2/+2 pages
-     * - outlier: first page selected, show _1_ 2 3 ... N
-     * - outlier: second page selected, show 1 _2_ 3 4 ... N
-     * - outlier: last page selected, show 1 ... N-2 N-1 _N_
-     * - outlier: if page count = 7, & selected is either [2, 3, 4, 5, 6], show all pages
-     */
-    observePageCount() {
-        this.pages = []; /* `0` is elipses marker */
-        const paginatorMaxPagesToShow = 7;
-        const atMinThreshold = this.size <= paginatorMaxPagesToShow;
-        /** Display outliers  */
-        if (this.size <= 5) {
-            // display all pages
-            this.pages = [...Array(this.size).keys()].map(i => i + 1);
-            return;
-        }
-        if (this.size === paginatorMaxPagesToShow) {
-            // edge: 7 pages
-            if (this.currentPage === 2) {
-                this.pages = [1, 2, 3, 4, 0, this.size];
-                return;
-            }
-            if (this.currentPage === this.size - 1) {
-                this.pages = [1, 0, 4, 5, this.size - 1, this.size];
-                return;
-            }
-        }
-        if (this.currentPage === 1) {
-            // first page
-            this.pages = [1, 2, 3, 0, this.size];
-            return;
-        }
-        if (this.currentPage === this.size) {
-            // last page
-            this.pages = [1, 0, this.size - 2, this.size - 1, this.size];
-            return;
-        }
-        if (this.currentPage === this.size - 1) {
-            // second last page
-            this.pages = [
-                1,
-                0,
-                this.size - 3,
-                this.size - 2,
-                this.size - 1,
-                this.size,
-            ];
-            return;
-        }
-        if (atMinThreshold &&
-            this.currentPage > 1 &&
-            this.currentPage < paginatorMaxPagesToShow) {
-            this.pages = [...Array(this.size).keys()].map(i => i + 1);
-            return;
-        }
-        /* The rest here calculates the range to display in "page window" */
-        let startPage = this.currentPage - this.step;
-        let endPage = this.currentPage + this.step;
-        if (startPage <= 0) {
-            endPage += -startPage + 1;
-            startPage = 1;
-        }
-        if (endPage >= this.size) {
-            startPage = Math.max(startPage - (endPage - this.size), 1);
-            endPage = this.size;
-        }
-        if (startPage === 2) {
-            endPage -= 1;
-        }
-        if (endPage === this.size - 1) {
-            startPage += 1;
-        }
-        // create first page node
-        this.createFirstNode(startPage);
-        // create middle pages node
-        this.createMiddelNode(startPage, endPage);
-        // create last page node
-        this.createLastNode(endPage);
-    }
-    createFirstNode(startPage) {
-        if (startPage > 1) {
-            this.pages?.push(1);
-        }
-        if (startPage > 2) {
-            this.pages?.push(0); // let's asssume 0 is for ellipsis template
-        }
-    }
-    createMiddelNode(startPage, endPage) {
-        for (let page = startPage; page <= endPage; page += 1) {
-            this.pages?.push(page);
-        }
-    }
-    createLastNode(endPage) {
-        if (endPage < this.size - 1) {
-            this.pages?.push(0); // let's asssume 0 is for ellipsis template
-        }
-        if (endPage < this.size) {
-            this.pages?.push(this.size);
-        }
-    }
-    get getEllipsisTemplate() {
-        return html `<i class="ellipses">...</i>`;
-    }
-    emitPageClick() {
-        this.dispatchEvent(new CustomEvent('pageNumberClicked', {
-            detail: { page: this.currentPage },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    onRewind() {
-        this.currentPage -= 1;
-        if (this.currentPage < 1) {
-            this.currentPage = 1;
-        }
-    }
-    onForward() {
-        this.currentPage += 1;
-        if (this.currentPage > this.size) {
-            this.currentPage = this.size;
-        }
-    }
-    onChange(page) {
-        this.currentPage = page;
-    }
-    getPageTemplate(page) {
-        return html `
-      <button
-        @click=${() => this.onChange(page)}
-        class=${this.currentPage === page ? 'current' : ''}
-        data-page=${page}
-      >
-        ${page}
-      </button>
-    `;
-    }
-    get getPagesTemplate() {
-        if (!this.pages || !this.pages.length) {
-            return nothing;
-        }
-        return html `
-      ${this.pages?.map(page => html `${page !== 0
-            ? this.getPageTemplate(page)
-            : this.getEllipsisTemplate}`)}
-    `;
-    }
-    render() {
-        return html `
-      <div class="facets-pagination">
-        <button class="arrow-icon rewind" @click=${this.onRewind}>
-          <span class="sr-only">Rewind pagination:</span>
-          ${arrowLeftIcon}
-        </button>
-        <div class="page-numbers">${this.getPagesTemplate}</div>
-        <button class="arrow-icon forward" @click=${this.onForward}>
-          <span class="sr-only">Forward pagination:</span>
-          ${arrowRightIcon}
-        </button>
-      </div>
-    `;
-    }
-    static get styles() {
-        return [
-            srOnlyStyle,
-            css `
-        .facets-pagination {
-          user-select: none;
-          margin-top: 10px;
-          background-color: #eee;
-          text-align: center;
-        }
-        .facets-pagination button {
-          border: none;
-          background: none;
-        }
-        .facets-pagination .arrow-icon {
-          width: 2.5rem;
-          vertical-align: middle;
-        }
-        .facets-pagination .arrow-icon svg {
-          height: 14px;
-          fill: #2c2c2c;
-        }
-        .facets-pagination button,
-        .facets-pagination i {
-          background: none;
-          border: 0;
-          cursor: pointer;
-          border-radius: 4px;
-          margin: 10px 5px;
-          padding: 5px;
-          font-size: 1.4rem;
-          color: inherit;
-          vertical-align: baseline;
-          display: inline-block;
-          min-width: 2.5rem;
-        }
-        .facets-pagination i {
-          cursor: auto;
-          display: inline;
-        }
-        .facets-pagination button.current {
-          background: #2c2c2c;
-          color: white;
-        }
-        .page-numbers {
-          display: inline-block;
-        }
-      `,
-        ];
-    }
-};
-__decorate([
-    property({ type: Number })
-], MoreFacetsPagination.prototype, "size", void 0);
-__decorate([
-    property({ type: Number })
-], MoreFacetsPagination.prototype, "step", void 0);
-__decorate([
-    property({ type: Number })
-], MoreFacetsPagination.prototype, "currentPage", void 0);
-__decorate([
-    state()
-], MoreFacetsPagination.prototype, "pages", void 0);
-MoreFacetsPagination = __decorate([
-    customElement('more-facets-pagination')
-], MoreFacetsPagination);
-export { MoreFacetsPagination };
-//# sourceMappingURL=more-facets-pagination.js.map

package/dist/src/collection-facets/more-facets-pagination.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"more-facets-pagination.js","sourceRoot":"","sources":["../../../src/collection-facets/more-facets-pagination.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  CSSResultGroup,\n  html,\n  LitElement,\n  nothing,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport arrowLeftIcon from '../assets/img/icons/arrow-left';\nimport arrowRightIcon from '../assets/img/icons/arrow-right';\nimport { srOnlyStyle } from '../styles/sr-only';\n\n@customElement('more-facets-pagination')\nexport class MoreFacetsPagination extends LitElement {\n  /**\n   * Total number of pages\n   */\n  @property({ type: Number }) size!: number;\n\n  /**\n   * Number of pages can be moved in back/forward\n   */\n  @property({ type: Number }) step = 2;\n\n  @property({ type: Number }) currentPage: number = 1;\n\n  @state() pages?: number[] = [];\n\n  firstUpdated() {\n    this.observePageCount();\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  override updated(changed: Map<string, any>) {\n    if (changed.has('size')) {\n      this.observePageCount();\n    }\n    if (changed.has('currentPage')) {\n      this.observePageCount();\n      this.emitPageClick();\n    }\n  }\n\n  /** creates `this.pages` array that notes which pages to draw\n   * - `0` is elipses marker\n   * - rule: selected page is centered between -2/+2 pages\n   * - outlier: first page selected, show _1_ 2 3 ... N\n   * - outlier: second page selected, show 1 _2_ 3 4 ... N\n   * - outlier: last page selected, show 1 ... N-2 N-1 _N_\n   * - outlier: if page count = 7, & selected is either [2, 3, 4, 5, 6], show all pages\n   */\n  observePageCount() {\n    this.pages = []; /* `0` is elipses marker */\n\n    const paginatorMaxPagesToShow = 7;\n    const atMinThreshold = this.size <= paginatorMaxPagesToShow;\n\n    /** Display outliers  */\n    if (this.size <= 5) {\n      // display all pages\n      this.pages = [...Array(this.size).keys()].map(i => i + 1);\n      return;\n    }\n\n    if (this.size === paginatorMaxPagesToShow) {\n      // edge: 7 pages\n      if (this.currentPage === 2) {\n        this.pages = [1, 2, 3, 4, 0, this.size];\n        return;\n      }\n\n      if (this.currentPage === this.size - 1) {\n        this.pages = [1, 0, 4, 5, this.size - 1, this.size];\n        return;\n      }\n    }\n\n    if (this.currentPage === 1) {\n      // first page\n      this.pages = [1, 2, 3, 0, this.size];\n      return;\n    }\n\n    if (this.currentPage === this.size) {\n      // last page\n      this.pages = [1, 0, this.size - 2, this.size - 1, this.size];\n      return;\n    }\n\n    if (this.currentPage === this.size - 1) {\n      // second last page\n      this.pages = [\n        1,\n        0,\n        this.size - 3,\n        this.size - 2,\n        this.size - 1,\n        this.size,\n      ];\n      return;\n    }\n\n    if (\n      atMinThreshold &&\n      this.currentPage > 1 &&\n      this.currentPage < paginatorMaxPagesToShow\n    ) {\n      this.pages = [...Array(this.size).keys()].map(i => i + 1);\n      return;\n    }\n\n    /* The rest here calculates the range to display in \"page window\" */\n    let startPage = this.currentPage - this.step;\n    let endPage = this.currentPage + this.step;\n\n    if (startPage <= 0) {\n      endPage += -startPage + 1;\n      startPage = 1;\n    }\n\n    if (endPage >= this.size) {\n      startPage = Math.max(startPage - (endPage - this.size), 1);\n      endPage = this.size;\n    }\n\n    if (startPage === 2) {\n      endPage -= 1;\n    }\n\n    if (endPage === this.size - 1) {\n      startPage += 1;\n    }\n\n    // create first page node\n    this.createFirstNode(startPage);\n\n    // create middle pages node\n    this.createMiddelNode(startPage, endPage);\n\n    // create last page node\n    this.createLastNode(endPage);\n  }\n\n  private createFirstNode(startPage: number) {\n    if (startPage > 1) {\n      this.pages?.push(1);\n    }\n    if (startPage > 2) {\n      this.pages?.push(0); // let's asssume 0 is for ellipsis template\n    }\n  }\n\n  private createMiddelNode(startPage: number, endPage: number) {\n    for (let page = startPage; page <= endPage; page += 1) {\n      this.pages?.push(page);\n    }\n  }\n\n  private createLastNode(endPage: number) {\n    if (endPage < this.size - 1) {\n      this.pages?.push(0); // let's asssume 0 is for ellipsis template\n    }\n    if (endPage < this.size) {\n      this.pages?.push(this.size);\n    }\n  }\n\n  private get getEllipsisTemplate() {\n    return html`<i class=\"ellipses\">...</i>`;\n  }\n\n  emitPageClick() {\n    this.dispatchEvent(\n      new CustomEvent('pageNumberClicked', {\n        detail: { page: this.currentPage },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private onRewind() {\n    this.currentPage -= 1;\n    if (this.currentPage < 1) {\n      this.currentPage = 1;\n    }\n  }\n\n  private onForward() {\n    this.currentPage += 1;\n    if (this.currentPage > this.size) {\n      this.currentPage = this.size;\n    }\n  }\n\n  private onChange(page: number) {\n    this.currentPage = page;\n  }\n\n  private getPageTemplate(page: number) {\n    return html`\n      <button\n        @click=${() => this.onChange(page)}\n        class=${this.currentPage === page ? 'current' : ''}\n        data-page=${page}\n      >\n        ${page}\n      </button>\n    `;\n  }\n\n  private get getPagesTemplate(): TemplateResult | typeof nothing {\n    if (!this.pages || !this.pages.length) {\n      return nothing;\n    }\n\n    return html`\n      ${this.pages?.map(\n        page =>\n          html`${page !== 0\n            ? this.getPageTemplate(page)\n            : this.getEllipsisTemplate}`,\n      )}\n    `;\n  }\n\n  render() {\n    return html`\n      <div class=\"facets-pagination\">\n        <button class=\"arrow-icon rewind\" @click=${this.onRewind}>\n          <span class=\"sr-only\">Rewind pagination:</span>\n          ${arrowLeftIcon}\n        </button>\n        <div class=\"page-numbers\">${this.getPagesTemplate}</div>\n        <button class=\"arrow-icon forward\" @click=${this.onForward}>\n          <span class=\"sr-only\">Forward pagination:</span>\n          ${arrowRightIcon}\n        </button>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      srOnlyStyle,\n      css`\n        .facets-pagination {\n          user-select: none;\n          margin-top: 10px;\n          background-color: #eee;\n          text-align: center;\n        }\n        .facets-pagination button {\n          border: none;\n          background: none;\n        }\n        .facets-pagination .arrow-icon {\n          width: 2.5rem;\n          vertical-align: middle;\n        }\n        .facets-pagination .arrow-icon svg {\n          height: 14px;\n          fill: #2c2c2c;\n        }\n        .facets-pagination button,\n        .facets-pagination i {\n          background: none;\n          border: 0;\n          cursor: pointer;\n          border-radius: 4px;\n          margin: 10px 5px;\n          padding: 5px;\n          font-size: 1.4rem;\n          color: inherit;\n          vertical-align: baseline;\n          display: inline-block;\n          min-width: 2.5rem;\n        }\n        .facets-pagination i {\n          cursor: auto;\n          display: inline;\n        }\n        .facets-pagination button.current {\n          background: #2c2c2c;\n          color: white;\n        }\n        .page-numbers {\n          display: inline-block;\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/test/collection-facets/more-facets-pagination.test.d.ts

@@ -1 +0,0 @@
-import '../../src/collection-facets/more-facets-pagination';

package/dist/test/collection-facets/more-facets-pagination.test.js

@@ -1,126 +0,0 @@
-import { expect, fixture, oneEvent } from '@open-wc/testing';
-import { html } from 'lit';
-import sinon from 'sinon';
-import '../../src/collection-facets/more-facets-pagination';
-afterEach(() => {
-    sinon.restore();
-});
-describe('More facets pagination', () => {
-    describe('5 pages or less', () => {
-        it('shows all pages', async () => {
-            const el = await fixture(html `<more-facets-pagination .size=${5}></more-facets-pagination>`);
-            await el.updateComplete;
-            const pageButtons = el.shadowRoot?.querySelectorAll('button[data-page]');
-            expect(pageButtons.length).to.greaterThan(0);
-            pageButtons.forEach((button, index) => {
-                expect(button.textContent).to.contain(index + 1);
-            });
-        });
-    });
-    it('should render pagination template', async () => {
-        const el = await fixture(html `<more-facets-pagination .size=${10}></more-facets-pagination>`);
-        await el.updateComplete;
-        expect(el.shadowRoot?.querySelector('.facets-pagination')).to.exist;
-        expect(el.shadowRoot?.querySelector('.arrow-icon')).to.exist;
-    });
-    it('should render page numbers', async () => {
-        const el = await fixture(html `<more-facets-pagination .size=${3}></more-facets-pagination>`);
-        await el.updateComplete;
-        const pageNumberElement = el.shadowRoot?.querySelector('.page-numbers');
-        expect(pageNumberElement).to.exist;
-        expect(pageNumberElement?.querySelectorAll('button').length).to.equal(3);
-    });
-    it('check current page and total pages', async () => {
-        const el = await fixture(html `<more-facets-pagination
-        .size=${4}
-        .currentPage=${2}
-      ></more-facets-pagination>`);
-        await el.updateComplete;
-        const pageNumberElement = el.shadowRoot?.querySelector('.page-numbers');
-        expect(pageNumberElement).to.exist;
-        expect(pageNumberElement
-            ?.querySelectorAll('button')[1]
-            .classList.contains('current')).to.be.true;
-        expect(el.pages?.length).to.equal(4);
-    });
-    it('get page numbers based of size and currentPage', async () => {
-        const el = await fixture(html `<more-facets-pagination
-        .size=${4}
-        .currentPage=${2}
-      ></more-facets-pagination>`);
-        await el.updateComplete;
-        expect(el.pages?.length).to.equal(4);
-    });
-    describe('Selecting a page', () => {
-        it('fires event', async () => {
-            const el = await fixture(html `<more-facets-pagination></more-facets-pagination>`);
-            await el.updateComplete;
-            setTimeout(() => el.dispatchEvent(new CustomEvent('pageNumberClicked', { detail: { page: 15 } })));
-            const { detail } = await oneEvent(el, 'pageNumberClicked');
-            expect(detail?.page).to.equal(15);
-        });
-        it('sets off side effects with `onChange`', async () => {
-            const el = await fixture(html `<more-facets-pagination
-          .size=${'10'}
-          .currentPage=${2}
-        ></more-facets-pagination>`);
-            expect(el.currentPage).to.equal(2); // confirm current page
-            const fake1 = sinon.fake();
-            const fake2 = sinon.fake();
-            el.observePageCount = fake1;
-            el.emitPageClick = fake2;
-            // select first page button
-            const pageButton = el.shadowRoot?.querySelector('.page-numbers > button');
-            // confirm button isn't selected
-            expect(pageButton.classList.contains('current')).to.be.false;
-            pageButton.click();
-            await el.updateComplete;
-            expect(fake1.callCount).to.equal(1);
-            expect(fake2.callCount).to.equal(1);
-            expect(el.currentPage).to.equal(1); // brings us back to currentPage
-            // confirm button is selected
-            expect(pageButton.classList.contains('current')).to.be.true;
-        });
-    });
-    describe('Using Arrows', () => {
-        it('going backwards', async () => {
-            const el = await fixture(html `<more-facets-pagination
-          .size=${'10'}
-          .currentPage=${2}
-        ></more-facets-pagination>`);
-            expect(el.currentPage).to.equal(2); // confirm current page
-            const fake1 = sinon.fake();
-            const fake2 = sinon.fake();
-            el.observePageCount = fake1;
-            el.emitPageClick = fake2;
-            // select first page button
-            const rewindButton = el.shadowRoot?.querySelector('.facets-pagination > button.rewind');
-            rewindButton.click();
-            await el.updateComplete;
-            expect(fake1.callCount).to.equal(1);
-            expect(fake2.callCount).to.equal(1);
-            expect(el.currentPage).to.equal(1); // brings us back 1 page
-            // confirm button is selected
-            expect((el.shadowRoot?.querySelector('.page-numbers > button[data-page="1"]')).classList.contains('current')).to.be.true;
-        });
-        it('going forwards', async () => {
-            const el = await fixture(html `<more-facets-pagination
-          .size=${'10'}
-          .currentPage=${5}
-        ></more-facets-pagination>`);
-            expect(el.currentPage).to.equal(5); // confirm current page
-            const fake1 = sinon.fake();
-            const fake2 = sinon.fake();
-            el.observePageCount = fake1;
-            el.emitPageClick = fake2;
-            // select first page button
-            const forwardButton = el.shadowRoot?.querySelector('.facets-pagination > button.forward');
-            forwardButton.click();
-            await el.updateComplete;
-            expect(fake1.callCount).to.equal(1);
-            expect(fake2.callCount).to.equal(1);
-            expect(el.currentPage).to.equal(6); // brings us forward 1 page
-        });
-    });
-});
-//# sourceMappingURL=more-facets-pagination.test.js.map

package/dist/test/collection-facets/more-facets-pagination.test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"more-facets-pagination.test.js","sourceRoot":"","sources":["../../../test/collection-facets/more-facets-pagination.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, fixture, oneEvent } from '@open-wc/testing';\nimport { html } from 'lit';\nimport sinon from 'sinon';\nimport '../../src/collection-facets/more-facets-pagination';\nimport type { MoreFacetsPagination } from '../../src/collection-facets/more-facets-pagination';\n\nafterEach(() => {\n  sinon.restore();\n});\n\ndescribe('More facets pagination', () => {\n  describe('5 pages or less', () => {\n    it('shows all pages', async () => {\n      const el = await fixture<MoreFacetsPagination>(\n        html`<more-facets-pagination .size=${5}></more-facets-pagination>`,\n      );\n\n      await el.updateComplete;\n\n      const pageButtons = el.shadowRoot?.querySelectorAll(\n        'button[data-page]',\n      ) as NodeList;\n      expect(pageButtons.length).to.greaterThan(0);\n\n      pageButtons.forEach((button, index) => {\n        expect(button.textContent).to.contain(index + 1);\n      });\n    });\n  });\n\n  it('should render pagination template', async () => {\n    const el = await fixture<MoreFacetsPagination>(\n      html`<more-facets-pagination .size=${10}></more-facets-pagination>`,\n    );\n\n    await el.updateComplete;\n\n    expect(el.shadowRoot?.querySelector('.facets-pagination')).to.exist;\n    expect(el.shadowRoot?.querySelector('.arrow-icon')).to.exist;\n  });\n\n  it('should render page numbers', async () => {\n    const el = await fixture<MoreFacetsPagination>(\n      html`<more-facets-pagination .size=${3}></more-facets-pagination>`,\n    );\n\n    await el.updateComplete;\n\n    const pageNumberElement = el.shadowRoot?.querySelector('.page-numbers');\n    expect(pageNumberElement).to.exist;\n    expect(pageNumberElement?.querySelectorAll('button').length).to.equal(3);\n  });\n\n  it('check current page and total pages', async () => {\n    const el = await fixture<MoreFacetsPagination>(\n      html`<more-facets-pagination\n        .size=${4}\n        .currentPage=${2}\n      ></more-facets-pagination>`,\n    );\n\n    await el.updateComplete;\n\n    const pageNumberElement = el.shadowRoot?.querySelector('.page-numbers');\n    expect(pageNumberElement).to.exist;\n    expect(\n      pageNumberElement\n        ?.querySelectorAll('button')[1]\n        .classList.contains('current'),\n    ).to.be.true;\n    expect(el.pages?.length).to.equal(4);\n  });\n\n  it('get page numbers based of size and currentPage', async () => {\n    const el = await fixture<MoreFacetsPagination>(\n      html`<more-facets-pagination\n        .size=${4}\n        .currentPage=${2}\n      ></more-facets-pagination>`,\n    );\n\n    await el.updateComplete;\n\n    expect(el.pages?.length).to.equal(4);\n  });\n\n  describe('Selecting a page', () => {\n    it('fires event', async () => {\n      const el = await fixture<MoreFacetsPagination>(\n        html`<more-facets-pagination></more-facets-pagination>`,\n      );\n\n      await el.updateComplete;\n\n      setTimeout(() =>\n        el.dispatchEvent(\n          new CustomEvent('pageNumberClicked', { detail: { page: 15 } }),\n        ),\n      );\n      const { detail } = await oneEvent(el, 'pageNumberClicked');\n      expect(detail?.page).to.equal(15);\n    });\n    it('sets off side effects with `onChange`', async () => {\n      const el = await fixture<MoreFacetsPagination>(\n        html`<more-facets-pagination\n          .size=${'10'}\n          .currentPage=${2}\n        ></more-facets-pagination>`,\n      );\n\n      expect(el.currentPage).to.equal(2); // confirm current page\n\n      const fake1 = sinon.fake();\n      const fake2 = sinon.fake();\n      el.observePageCount = fake1;\n      el.emitPageClick = fake2;\n\n      // select first page button\n      const pageButton = el.shadowRoot?.querySelector(\n        '.page-numbers > button',\n      ) as HTMLButtonElement;\n      // confirm button isn't selected\n      expect(pageButton.classList.contains('current')).to.be.false;\n      pageButton.click();\n\n      await el.updateComplete;\n\n      expect(fake1.callCount).to.equal(1);\n      expect(fake2.callCount).to.equal(1);\n      expect(el.currentPage).to.equal(1); // brings us back to currentPage\n      // confirm button is selected\n      expect(pageButton.classList.contains('current')).to.be.true;\n    });\n  });\n\n  describe('Using Arrows', () => {\n    it('going backwards', async () => {\n      const el = await fixture<MoreFacetsPagination>(\n        html`<more-facets-pagination\n          .size=${'10'}\n          .currentPage=${2}\n        ></more-facets-pagination>`,\n      );\n\n      expect(el.currentPage).to.equal(2); // confirm current page\n\n      const fake1 = sinon.fake();\n      const fake2 = sinon.fake();\n      el.observePageCount = fake1;\n      el.emitPageClick = fake2;\n\n      // select first page button\n      const rewindButton = el.shadowRoot?.querySelector(\n        '.facets-pagination > button.rewind',\n      ) as HTMLButtonElement;\n      rewindButton.click();\n\n      await el.updateComplete;\n\n      expect(fake1.callCount).to.equal(1);\n      expect(fake2.callCount).to.equal(1);\n      expect(el.currentPage).to.equal(1); // brings us back 1 page\n      // confirm button is selected\n      expect(\n        (\n          el.shadowRoot?.querySelector(\n            '.page-numbers > button[data-page=\"1\"]',\n          ) as HTMLButtonElement\n        ).classList.contains('current'),\n      ).to.be.true;\n    });\n\n    it('going forwards', async () => {\n      const el = await fixture<MoreFacetsPagination>(\n        html`<more-facets-pagination\n          .size=${'10'}\n          .currentPage=${5}\n        ></more-facets-pagination>`,\n      );\n\n      expect(el.currentPage).to.equal(5); // confirm current page\n\n      const fake1 = sinon.fake();\n      const fake2 = sinon.fake();\n      el.observePageCount = fake1;\n      el.emitPageClick = fake2;\n\n      // select first page button\n      const forwardButton = el.shadowRoot?.querySelector(\n        '.facets-pagination > button.forward',\n      ) as HTMLButtonElement;\n      forwardButton.click();\n\n      await el.updateComplete;\n\n      expect(fake1.callCount).to.equal(1);\n      expect(fake2.callCount).to.equal(1);\n      expect(el.currentPage).to.equal(6); // brings us forward 1 page\n    });\n  });\n});\n"]}